React-native-picker-select: Not showing selected value on Android

[matobiely]

Describe the bug

I am using picker-select in form for creating/editing notes. I am fetching items from our API.

First issue is with create note:

• Open picker, can see all items
• Select item
• item label is not shown in select field
• if i save note, it is created with correct category

Issue with edit:

• click on edit
• do not see label
• can select different item, but after select, do not see label in field

It works fine only if i have items array locally ( not acceptable) and also default value is set to value from items, which is problem for creating new, because default is null. Also it is not accepting default value from props (as can be seen in code snipet)

On iPhone works just fine, only Android issue.

To Reproduce

Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior

I expected the same behavior as on iPhone.

Screenshots

1. Empty new form

1. Show all items

1. Select picker after select one of the items

Additional details

• Device: [Pixel 3]
• OS: [Android 11]
• react-native-picker-select version: [8.04]
• react-native version: [0.63]
• expo sdk version: [40]

Reproduction and/or code sample

function NewNote({ t, note: _note, loading, onSubmit, onCancel }) {
  const [note, setNote] = useState(_note);
  const [categories, setCategories] = useState([]);
  const [categoryId, setCategoryId] = (_note && _note.categoryId );

  const handleSubmit = async () => {
    await onSubmit(note);
    setNote(null);
    onCancel();
  };

  const loadCategories = async () => {
    const res = await axios('categories/autocompletes', {
      params: {
        params: { perPage: 9999 },
        filters: [
          {
            by: 'categoryType',
            rule: 'equal',
            value: 'Note'
          }
        ]
      }
    });

    setCategories(
      res.data.categories.map(c => ({
        value: c.id,
        label: c.name
      }))
    );
  };

  const handleNoteTypeChange = value => {
    if (!value) return;
    setCategoryId(value);
    setNote({ ...note, categoryId: value });
  };

  useEffect(() => {
    loadCategories();
  }, []);

  return (
           <RNPickerSelect
            value={note && note.categoryId}
            onValueChange={handleNoteTypeChange}
            style={_pickerStyles}
            placeholder={{ label: 'Type', value: null }}
            items={categories}
          />
)

[EmmanuelSkapple]

Same error to :/

[KIMNIGANG]

same error too

[guozhaolong]

same error too

[iwashi1t]

As a temporary workaround, I found two solutions.

Set one of the following prop to RNPickerSelect,

• style={{ inputAndroid: { color: 'black' } }}
• useNativeAndroidPickerStyle={false}

[guozhaolong]

As a temporary workaround, I found two solutions.

Set one of the following prop to RNPickerSelect,

• style={{ inputAndroid: { color: 'black' } }}
• useNativeAndroidPickerStyle={false}

verified, inputAndroid: {color:'black' } this trick is easy to use，thx bro

[matobiely]

@iwashi1t Thanks. It helps. But as you mentioned, it is just temporary workaround, it will be great, if somebody from team take a look on it.

[iggirex]

After many hours of twiddling with this thing finally found this thread. Low and behold this indeed does fix the problem!!
style={{ inputAndroid: { color: 'black' } }} useNativeAndroidPickerStyle={false}

My other solution was to set the placeholder as empty object, but this screws up the layout if you're needing that placeholder
placeholder={{}}

[Tharinducn]

As a temporary workaround, I found two solutions.

Set one of the following prop to RNPickerSelect,

• style={{ inputAndroid: { color: 'black' } }}
• useNativeAndroidPickerStyle={false}

This didn't fix the issue.

[imsjmalve]

style={{ inputAndroid: { color: 'black' } }}
useNativeAndroidPickerStyle={false}

these two perfectly works for me

[dschnare]

I'm having this issue with iOS actually. Tried setting styles for inputIOS with no dice.

const pickerStyles = StyleSheet.create({
  inputIOS: {
    fontSize: 16,
    paddingVertical: 12,
    paddingHorizontal: 10,
    borderWidth: 1,
    borderColor: 'gray',
    borderRadius: 4,
    color: 'black',
    paddingRight: 30 // to ensure the text is never behind the icon
  },
  inputAndroid: {
    fontSize: 16,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderWidth: 0.5,
    borderColor: 'purple',
    borderRadius: 8,
    color: 'black',
    paddingRight: 30 // to ensure the text is never behind the icon
  }
})

<PickerSelect
  disabled={isSaving}
  Icon={Chevron}
  style={pickerStyles}
  placeholder={{}}
  items={items}
  value={value}
  onValueChange={(value) => setValue(value)}
  useNativeAndroidPickerStyle={false}
  textInputProps={{ style: { borderRadius: 5 } }}
/>

[imsjmalve]

u said useNativeAndroidPickerStyle={false}, find another for iso

[ubay1]

const [selectedLanguage, setSelectedLanguage] = useState('');

useNativeAndroidPickerStyle={false}
value={selectedLanguage}
onValueChange={(itemValue) => {
setSelectedLanguage(itemValue)
}}
items={[
{ label: 'Football', value: 'football' },
{ label: 'Baseball', value: 'baseball' },
{ label: 'Hockey', value: 'hockey' },
]} >
{selectedLanguage }

[ubay1]

hey, lets try..

[EvgeniiKlepilin]

One thing that I found was that if you have a default Android Theme, it usually has a default application-wide font color set to #ffffff. You can change that by either adding a custom font color to existing theme, or changing parent theme to themes like MaterialDark or Holo for example.

android/app/src/main/res/values/styles.xml

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
        <item name="android:statusBarColor">@color/black</item>
    </style>

android/app/src/main/AndroidManifest.xml

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

References:

• https://developer.android.com/guide/topics/ui/look-and-feel/themes
• https://developer.android.com/guide/topics/ui/look-and-feel/darktheme
• https://stackoverflow.com/questions/12707560/how-to-set-the-holo-dark-theme-in-a-android-app

It seems that there are some native parts of this package that can be changed by tweaking details of the manifest.