[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 ( <View style={SelectBrandstyles.container}> <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={<Icon name="arrow-drop-down" size={24} color="#FC8C4D" />} dropDownDirection="Bottom" zIndex={1000} zIndexInverse={3000} /> </View> ); };

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!