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

John Mizanean Haimo picture John Mizanean Haimo · Oct 20, 2017 · Viewed 25.4k times · Source

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

marley89 picture marley89 · Sep 7, 2018

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.