How do I make a wrapper component to style a picker item in react-native-picker? - react-native

Question

I'm using react-native-community/picker v1.6.1, and I'm trying to make a pre-styled picker item to avoid having the color property on each item. Below is a showcase App.js. The red picker works as expected but the yellow one renders in black instead of yellow and I don't understand why. The code is tested in an iOS emulator with a freshly generated React Native app version 0.62.2 where I've installed the picker component.
import React, {useState} from 'react';
import {SafeAreaView} from 'react-native';
import {Picker} from '#react-native-community/picker';
const YellowPickerItem = props => {
return <Picker.Item {...props} color={'yellow'} />;
};
const App = () => {
const [redValue, setRedValue] = useState(2);
const [yellowValue, setYellowValue] = useState(3);
return (
<>
<SafeAreaView style={{flex: 1}} backgroundColor={'gray'}>
<Picker selectedValue={redValue} onValueChange={setRedValue}>
<Picker.Item label={'Red 1'} value={1} key={1} color={'red'} />
<Picker.Item label={'Red 2'} value={2} key={2} color={'red'} />
<Picker.Item label={'Red 3'} value={3} key={3} color={'red'} />
<Picker.Item label={'Red 4'} value={4} key={4} color={'red'} />
</Picker>
<Picker selectedValue={yellowValue} onValueChange={setYellowValue}>
<YellowPickerItem label={'Yellow 1'} value={1} key={1} />
<YellowPickerItem label={'Yellow 2'} value={2} key={2} />
<YellowPickerItem label={'Yellow 3'} value={3} key={3} />
<YellowPickerItem label={'Yellow 4'} value={4} key={4} />
</Picker>
</SafeAreaView>
</>
);
};
export default App;
The strangest thing is that the code runs just as well if I change the YellowPickerItem component to:
const YellowPickerItem = props => {
return <SafeAreaView />;
};
It feels like I'm missing something basic about react components here, so grateful for a nudge in the right direction.
Markus

Answer 1

You can use itemStyle prop of the picker to styling your picker item.