Change arrow down and arrow up color.

[NikitaNS]

I want to change the color for the arrow down or up icon. How can I change the icon color, what is the difference between arrowIconStyle and arrowIconContainerStyle?

[alelaru]

Hey the best approach here is to create your own arrows and render them with ArrowUpIconComponent and ArrowDownIconComponent

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/icons

It will be nice to change the color but at the moment its not possible, or go directly into the code and patch it hard-coded

[loloide]

i believe arrowIconStyle is the arrow and arrowIconContainerStyle is the thing that contains it, but it is not visible since it has no borders or background color on default

[murat-mehmet]

Late but here's the solution:

arrowIconStyle={{tintColor: 'red'}}

[chunghn]

Late but here's the solution:

arrowIconStyle={{tintColor: 'red'}}

Nice! Would you mind to explain why tintColor works?

[murat-mehmet]

Late but here's the solution:

arrowIconStyle={{tintColor: 'red'}}

Nice! Would you mind to explain why tintColor works?

arrowIconStyle is used as Image style in Picker.js

tintColor field is used in Image component to colorize the whole image.

[YuliiaNovak]

Late but here's the solution:

arrowIconStyle={{tintColor: 'red'}}

@murat-mehmet how to solve the typing issue here?

Type '{ tintColor: string; }' is not assignable to type 'StyleProp<ViewStyle>'. 
Object literal may only specify known properties, and 'tintColor' does not exist in type 'ViewStyle | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>'.
index.d.ts(169, 5): The expected type comes from property 'arrowIconStyle' which is declared here on type 'IntrinsicAttributes & PropsWithoutRef<DropDownPickerProps<string>>'

[murat-mehmet]

I would just cast to any or ignore it for now.

The type definition is incorrect in index.d.ts. I just opened PR #735 to fix it.

[Diogo107]

For me this did the trick.

iconStyle={{ tintColor: '#57D497' }}