React Native ios picker is always open

ios react-native picker
Abhishek Nalin picture Abhishek Nalin · Dec 16, 2016 · Viewed 46.1k times · Source

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.

enter image description here

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

Abhishek Nalin picture Abhishek Nalin · Dec 21, 2016

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

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 prefered 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.

enter image description here

Related questions

Set height of picker with react-native

I have a picker in my react-native ios app and want to set the height but the example won't honor flex, a style height or a height attribute. <Picker style={[styles.testbox, {borderColor: '#00F', flex:1, height: 100}]} selectedValue={this.…

Read More
Why will React Native Picker not display on iOS?

I am trying to use the element in React Native. It works fine on Android but is not displaying on iOS. <Picker selectedValue={'java'} > <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="…

Read More
How do you debug React Native?

How does one debug their React code with React Native while the app is running in app simulator?

Read More