[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 (

<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}
selectedItemContainerStyle={SelectBrandstyles.selectedTextStyle}
labelStyle={{color: '#FC8C4D'}}
// arrowIconStyle={{color: '#FC8C4D'}}
arrowIcon={}
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!