React-native-picker-select: Control not showing values on Android with useNativeAndroidPickerStyle=true

Created on 24 Sep 2020  路  4Comments  路  Source: lawnstarter/react-native-picker-select


Describe the bug

On Android, the control does not show a selected value if useNativeAndroidPickerStyle=true and no style is provided, the control is working otherwise (onValueChange is reporting successfully). Also note that using textInputProps is a work around.

To Reproduce

I've made a sample app here: https://github.com/jenniferburch/scratch-mobile/tree/picker-select

  1. npm install
  2. npm run start
  3. npm run android
  4. there will be five pickers on screen, the first one is not working

Expected behavior

As the items are selected in the picker their values should show up in the resulting control

Screenshots

Screen Shot 2020-09-24 at 11 55 23 AM

Additional details

  • Android only
  • react-native version v63.2
  • react-native-picker-select version v8.0
  • @react-native-community/picker v1.8.0"

Reproduction and/or code sample

https://github.com/jenniferburch/scratch-mobile/tree/picker-select


bug

Most helpful comment

+1 Same here

It worked when I added style={ {inputAndroid: {color: 'black'} }} to the <RNPickerSelect>

All 4 comments

+1

I have the same problem, I don't even have the useNativeAndroidPickerStyle prop, and was not using any custom style.
This does not work for me:

export const Dropdown = () => {
    return (
        <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
    );
};

This might be related with the upgrade with 0.63.3 the previous version was working without problems

This actually works:
when I add useNativeAndroidPickerStyle={false} or even with true on the hot-reload only!

export const Dropdown = () => {
    return (
        <RNPickerSelect
            onValueChange={(value) => console.log(value)}
            useNativeAndroidPickerStyle={false}
            items={[
                { label: 'Football', value: 'football' },
                { label: 'Baseball', value: 'baseball' },
                { label: 'Hockey', value: 'hockey' },
            ]}
        />
    );
};

Update

It actually worked when I added a style.

+1 Same here

It worked when I added style={ {inputAndroid: {color: 'black'} }} to the <RNPickerSelect>

style={ {inputAndroid: {color: 'black'} }} is wotk for me to

Was this page helpful?
0 / 5 - 0 ratings