How to style the standard React Native Android picker?

Sometimes, we want to style the standard React Native Android picker.

In this article, we’ll look at how to style the standard React Native Android picker.

How to style the standard React Native Android picker?

To style the standard React Native Android picker, we can set the color prop on Picker.Item.

For instance, we write:

import * as React from 'react';
import { Picker, View } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

export default function App() {
  const [val, setVal] = React.useState();

  return (
    <View style={{ padding: 30 }}>
      <Picker selectedValue={val} onValueChange={setVal} mode="dropdown">
        <Picker.Item label="hello" value="0" color="blue" />
        <Picker.Item label="world" value="1" color="blue" />
      </Picker>
    </View>
  );
}

to add a Picker.

Then we set the color prop of the Picker.Item to blue to make the drop down text blue.

Conclusion

To style the standard React Native Android picker, we can set the color prop on Picker.Item.