[How]: To Change the color of ArrowIcon in react-native-dropdown-picker

[Shahbaz898414]

Need

in placeholder right side there is down arrow icon i want to change the color this icon orange

Code Part

import React, {useState} from 'react'; import {View, StyleSheet} from 'react-native'; import DropDownPicker from 'react-native-dropdown-picker'; import Icon from 'react-native-vector-icons/MaterialIcons'; // Add this import

const SelectBrand = () => { const [open, setOpen] = useState(false); const [selectedBrand, setSelectedBrand] = useState(null); const [items, setItems] = useState([ {label: 'Brand A', value: 'brand_a', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand B', value: 'brand_b', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand C', value: 'brand_c', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand D', value: 'brand_d', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand E', value: 'brand_e', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand F', value: 'brand_f', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand G', value: 'brand_g', labelStyle: {color: '#FC8C4D'}}, {label: 'Brand I', value: 'brand_i', labelStyle: {color: '#FC8C4D'}}, ]);

return (

} dropDownDirection="Bottom" zIndex={1000} zIndexInverse={3000} />

); };

const SelectBrandstyles = StyleSheet.create({ container: { padding: 10, backgroundColor: '#fff', zIndex: 1000, // Ensure parent container is above others }, dropdown: { height: 50, borderColor: '#FF6700', borderWidth: 1, borderRadius: 4, paddingHorizontal: 10, color: '#FC8C4D', }, dropDownContainerStyle: { borderColor: '#FF6700', color: '#FC8C4D', zIndex: 1000, // Ensure dropdown container is above others }, placeholderStyle: { fontSize: 16, color: '#FC8C4D', }, selectedTextStyle: { fontSize: 16, color: '#FC8C4D', }, });

export default SelectBrand;

Screen Shot

[Sujalkumar12]

Hey @Shahbaz898414,

Sorry for the late response!

To fix the icon color issue, please refer to the following documentation:

• https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/icons#styling
• https://reactnative.dev/docs/image#tintcolor

Instead of using color, apply tintColor for the icons. Since you’re not using any icons from react-native-vector-icons, this should work perfectly.

Please update and add the following lines:

arrowIconStyle={{ tintColor: '#FC8C4D' }} tickIconStyle={{ tintColor: '#FC8C4D' }}

Additionally, here’s the updated code snippet for your reference:

<DropDownPicker
        open={open}
        value={selectedBrand}
        items={items}
        setOpen={setOpen}
        setValue={setSelectedBrand}
        setItems={setItems}
        style={SelectBrandstyles.dropdown}
        placeholder="Select Brand"
        placeholderStyle={SelectBrandstyles.placeholderStyle}
        dropDownContainerStyle={SelectBrandstyles.dropDownContainerStyle}
        selectedItemLabelStyle={SelectBrandstyles.selectedTextStyle}
        // selectedItemContainerStyle={SelectBrandstyles.selectedTextStyle}
        labelStyle={{ color: '#FC8C4D' }}
        arrowIconStyle={{ tintColor: '#FC8C4D' }}
        tickIconStyle={{ tintColor: '#FC8C4D' }}
        // arrowIcon={}
        dropDownDirection="BOTTOM"
        zIndex={1000}
        zIndexInverse={3000}
   />

Hope your issue will fix after this changes

I've also attached a screenshot for reference.

[Shahbaz898414]

thanks bro @Sujalkumar12

[Sujalkumar12]

thanks bro @Sujalkumar12

Hi @Shahbaz898414,

I'm glad to hear that the solution worked for you! If you're satisfied with it, please consider closing this issue. It helps keep the repository organized.

Thanks!