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

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.

It is not possible to change the iOS native components, using React Native, beyond what is documented as configurable. Apple are very opinionated on the usage of their native elements which give iOS users a familiar and consistent experience.

I have previously tried unsuccessfully to change, or remove, the lines around the selected item. It is not possible using React Native and JavaScript only. If you want to write Objective-C or Swift then it may be able to extend the native component and create yourself a POD integration which could expose a configurable API to the React component.

For me this was too much work and I ended up writing my own js implementation from scratch.

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.

You can change drop-down arrow icon in android like following :

<Picker dropdownIconColor= 'colorName'/>