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' }}

[hassamarifdev]

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.

this works for me. someone should close this issue