How can add style for item list and item has been selected

[vietcuong122]

I wanna custom style for an item that has been selected and an item in the select list such as fontFamily, fontSize but after reading your repository, I can not find those props. Hope to get someone's help. Many thanks

[KingJordan152]

If you are talking about iOS, you can customize the picker component through the pickerProps prop. From here, you can customize the fontFamily, color, fontSize, etc. by typing pickerProps={{ itemStyle: { /* Insert your styles here */ } }}. As for Android, I am not too sure.

[SufianBabri]

For Android, I am setting the colours of the selected item like this:

// I think this sets the placeholder color when the picker is listing the option in a dialog mode (which is the default)
const pickerPlaceholder = {
    label: placeholder,
    value: undefined,
    color: 'black'
};

// this sets the individual item colors (`value` is the value of the selected item)
const getItems = (): Item[] => {
    // for iOS we should avoid styling it since it isn't needed and has some jerkiness
    if (Platform.OS === 'ios') return options;

    return options.map((item) => {
        const color = item.label === value ? 'green' : 'black';

        return {
            ...item,
            color
        };
    });
};

Here I set the styling, key things are the first three properties (style, items and placeholder). Missing out any of these may result in items getting incorrect colors when the items are many and you're scrolling the list quickly (the items may get wrong colors due to the Android's list view reusing the rows):

<RNPickerSelect
    style={{
        placeholder: {
            color: 'red'
        }
    }}
    items={getItems()}
    placeholder={pickerPlaceholder}
    value={value}
    useNativeAndroidPickerStyle={false}
    onValueChange={(value: string) => {
        onValueChange(value);
    }}
/>

[dsc-jerome-dc]

If you are talking about iOS, you can customize the picker component through the pickerProps prop. From here, you can customize the fontFamily, color, fontSize, etc. by typing pickerProps={{ itemStyle: { /* Insert your styles here */ } }}. As for Android, I am not too sure.

Hi, can you show how you do this ? because when I add background color it show the background color to whole picker not just the row of the selected item

If i make the height smaller the size of the row of selected item it will not show the content above and below of the selected item

[enchorb]

Same issue here, the background color is applied to the entire Picker not the desired Picker.Item