Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Picker item list not displaying items on Android #531

Open
DaveFPath opened this issue Dec 8, 2023 · 5 comments · May be fixed by #537
Open

Picker item list not displaying items on Android #531

DaveFPath opened this issue Dec 8, 2023 · 5 comments · May be fixed by #537

Comments

@DaveFPath
Copy link

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:
image

With styles and fontsize set to 20:
image

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
Copy link

mSenad commented Dec 22, 2023 •
edited

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
Copy link

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
Copy link

omercsbn commented Dec 23, 2023 •
edited

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.

atif089 added a commit to atif089/react-native-picker-select that referenced this issue Jan 19, 2024
@atif089
fix: font visibility Issue on android emulator (lawnstarter#531)
d79d45c
@atif089 atif089 linked a pull request Jan 19, 2024 that will close this issue
Open
@codedfinger
Copy link

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
Copy link

RezendeRafaelSC commented Feb 19, 2024 •
edited

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: font visibility Issue on android emulator (#531) atif089/react-native-picker-select
5 participants
@mSenad @RezendeRafaelSC @DaveFPath @omercsbn @codedfinger