Picker item list not displaying items on Android

[DaveFPath]

Describe the bug

For some reason, when using the Android emulator, the picker item list is not showing the item text. The item text is there, I think... but it's not visible. I am not 100% sure, but I think it's a simple styling issue. I can't quite figure out why/where/how the item text is getting set to make it not appear, and I can't debug it with the item inspector because it keeps disappearing when I try to turn on the item inspector.

I have a possible work around, but I would like to see this added to the main source so I don't have to rely on a local copy to do it. That is to add the item.style to the Picker.Item properties. That way we can pass in the styles for the items to use.

To Reproduce

Steps to reproduce the behavior:

1. Umm... make a picker for android
2. Fire up the emulator
3. see the screen shot for what I mean.

Expected behavior

I expect the item text to be visible.

Screenshots

Without Styles:

With styles and fontsize set to 20:

Additional details

• Device: Android emulator 32.1.15.0
• OS: Android 33
• react-native-picker-select version: 9.0.0
• react-native version: latest
• expo sdk version: latest

Reproduction and/or code sample

                <Picker.Item
                    label={item.label}
                    value={item.value}
                    key={item.key || item.label}
                    color={item.color || defaultItemColor}
                    testID={item.testID}
                    style={item.style}  // <---- THIS IS WHAT I ADDED SO IT WILL WORK
                />

Then in my code:

      items={
       {
          label: BookingEventCategoryDisplay.getBookingEventCategory(value),
          value,
          color: "#000000",
          key: value.toString(),
          style: { fontSize: 20 },   //  <----- Added this to make the items appear visible.
       } ,
      ....

[mSenad]

The same thing is happening to me. I'm blowing my head off to try and understand what's happening here. Anyone has a clue?

[omercsbn]

I encountered the same problem. Interestingly, it does not display the items on the screen properly without changing the font size. I think Picker.item should give font size value by default or require fontsize.

[omercsbn]

The same thing is happening to me. I'm blowing my head off to try and understand what's happening here. Anyone has a clue?

My guess is that it does not automatically give the font size for each item in Picker.item and thinks it is 0. That's why it doesn't show the items on the screen.

You need to introduce a style into Picker.item.

For example,

            <Picker.Item
              label={account.accountName}
              value={account.accountId}
              key={account.accountId}
            />

My code was not listing the items, then

            <Picker.Item
              label={account.accountName}
              value={account.accountId}
              key={account.accountId}
              style={styles.pickerItem}
            />

When I added style it started to show properly.

David Gallant explained the problem very well and wrote the solution. If I hadn't seen this issue page, I probably wouldn't have been able to solve it. Thanks @DaveFPath.

[codedfinger]

The same thing is happening to me. I'm blowing my head off to try and understand what's happening here. Anyone has a clue?

My guess is that it does not automatically give the font size for each item in Picker.item and thinks it is 0. That's why it doesn't show the items on the screen.

You need to introduce a style into Picker.item.

For example,

            <Picker.Item
              label={account.accountName}
              value={account.accountId}
              key={account.accountId}
            />

My code was not listing the items, then

            <Picker.Item
              label={account.accountName}
              value={account.accountId}
              key={account.accountId}
              style={styles.pickerItem}
            />

When I added style it started to show properly.

David Gallant explained the problem very well and wrote the solution. If I hadn't seen this issue page, I probably wouldn't have been able to solve it. Thanks @DaveFPath.

Thanks Omer. adding font size to Picker.Item worked

[RezendeRafaelSC]

Is there any way to fix this problem while using RNPickerSelect?
Already using the change fontSize method and still not displaying on Android