Not showing selected value on Android

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}
          />
)

[iwashi1t]

As a temporary workaround, I found two solutions.

Set one of the following prop to RNPickerSelect,

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

[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={{}}