Repository navigation
Picker component is inconsistent between iOS and Android #25866
Description
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
Activity
ecexplorer commentedon Jul 29, 2019
The date pickers also have quite different behaviors. At least in this case, they are separate components.
react-native-bot commentedon Jul 29, 2019
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 commentedon Jul 29, 2019
@react-native-bot updated to include RN version. Not sure what else I need to include
stale commentedon Oct 27, 2019
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 commentedon Oct 28, 2019
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.
13 remaining items
stale commentedon Jun 23, 2020
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 commentedon Jul 3, 2020
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.