Picker component is inconsistent between iOS and Android

[dkniffin]

I am confused about the intended usage of the Picker component. As it is now, it is very inconsistent in behavior between iOS and Android.

To illustrate this, I've created a small component:

const PickerDummyPage = () => {
  return (
    <>
      <Text style={{ color: 'black' }}>Pick your item...</Text>
      <Picker prompt="Picker" selectedValue="Foo" style={{ backgroundColor: 'gray' }} >
        <Picker.Item value="Foo" label="Foo" />
        <Picker.Item value="Bar" label="Bar" />
      </Picker>
    </>
  )
}

Here is how it renders on iOS:

and here it is on Android:

Ignoring my atrocious styling here, the point I'm trying to get across is that the picker is very different between the two.

What I'm looking for is an easy way to have a dropdown-like field (similar to select on web), that behaves in a way that feels native to each platform. For Android, that seems to be the case, but for iOS, I would expect that it would render as an empty field, and when the field is clicked, it would open up a keyboard-like dialog prompt with the picker rendered inside it.

For reference, here's what a select field renders like in Safari (rendering this page), which is exactly the behavior I'm expecting:

For now, my workaround is going to be to use a 3rd party library, but this definitely feels like something that should work out of the box in react-native.

React Native version:

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
      Memory: 64.58 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 11.14.0 - ~/.asdf/installs/nodejs/11.14.0/bin/node
      Yarn: 1.15.2 - ~/.asdf/installs/nodejs/11.14.0/.npm/bin/yarn
      npm: 6.7.0 - ~/.asdf/installs/nodejs/11.14.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 26, 27, 28
        Build Tools: 27.0.3, 28.0.3
        System Images: android-24 | Google Play Intel x86 Atom, android-27 | Intel x86 Atom_64, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5199772
      Xcode: 10.3/10G8 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.3 => 16.8.6
    npmGlobalPackages:
      react-native-cli: 2.0.1

[ecexplorer]

The date pickers also have quite different behaviors. At least in this case, they are separate components.

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[dkniffin]

@react-native-bot updated to include RN version. Not sure what else I need to include

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[dkniffin]

I don't know how to implement this, nor do I have time to, but it looks like I'm not the only one with this opinion, so I'd like to hear from someone from the RN team about whether this is something they would accept. If so, I'd recommend someone create a PR in order to get it moving forward.

[safaiyeh]

hi @dkniffin we need some more information.

Could you do a few things:
• verify this happens on the latest version.
• Create a snack or reproducible demo that displays the bug
• follow the issue template

[dkniffin]

@safaiyeh I'm not actually working on any RN projects at this time. If anyone else following this thread wants to take this over for me, that would be awesome! I know this would make development of basic forms a bit easier. Essentially what I'm asking for is for something like https://github.com/lawnstarter/react-native-picker-select to become part of the standard RN library.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.