Change the default React Native <Picker> drop-down arrow icon

Question

I want to change its color specifically:

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>

Answer 1

For those who are looking to change the color of the caret icon (dropdown arrow) in android, you could try adding the following line to your styles.xml:

<item name="android:colorControlNormal">#FFFFFF</item>

Should look like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorControlNormal">#FFFFFF</item>
    </style>
</resources>

Once done, rebuild the app as changes made on native files will not hot reload.

Answer 2

One possible solution is to overlay the existing the arrow with an absolutely positioned vector icon that is wrapped within a view that has a matching background color with the rest of the Picker container. This usually works well because the Picker arrow does not by default reposition itself based on the length of the Picker.Item value.