React Native ios picker is always open

Question

I have two pickers on my screen. Whenever I navigate to the screen in iOS app I find that the pickers are always open and all options are visible.

It works perfectly fine in Android where the options are visible only after we click on the picker.

Can somebody suggest a solution to fix this in iOS?

Answer 1

Use ActionSheet instead of Picker on iOS. https://facebook.github.io/react-native/docs/actionsheetios

As answered by jevakallio this is the default behaviour on iOS. But this doesn't give a good UX so remove all picker components and replace with ActionSheet.

I did and it works great. The reason I preferred ActionSheet over other components suggested by jevakallio because it is developed by the RN team and has a good native feeling. The last option suggested react-native-modal-picker is also very good.

Answer 2

That's just how the iOS UIPickerView component works - there's no way to customize it.

If you want a different kind of UI element, you'll need to write your own, or use one of the many open source libraries, such as:

• react-native-dropdown
• react-native-modal-dropdown
• react-native-modal-picker

Googling with these, and similar keywords, yields many other libraries as well.