React Native ios picker is always open
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.
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:
Googling with these, and similar keywords, yields many other libraries as well.
I don't know why you'd choose the answer with ActionSheet as accepted answer.However I'll give a workaround for this problem:
Put this values in your state:
this.state= { pickerOpacity: 0, opacityOfOtherItems: 1 //THIS IS THE OPACITY OF ALL OTHER ITEMS, WHICH COLLIDES WITH YOUR PICKER. label: 'Firstvalue'}
In your render method do following:
{this.checkIfIOS()} <Picker selectedValue={this.state.selected} style={{ height: 50, alignSelf: 'center', opacity: this.state.pickerOpacity, marginBottom:30, width: 250}} onValueChange={(itemValue, itemIndex) =>{ this.setState({ selected: itemValue, label: itemValue }); toggle(); } }> <Picker.Item label="Your Label" value="yourValue"/> </Picker>
So now we've to check, whether our client is android or ios. Therefore import Platform and put the checkIfIos()-Method in your code:
import {Platform} from 'react-native'checkIfIOS(){ if(Platform.OS === 'ios'){ // check if ios console.log("IOS!!!"); //this button will (onpress) set our picker visible return (<Button buttonStyle={{backgroundColor:'#D1D1D1', opacity: this.state.opacityOfOtherItems}} onPress={this.toggle()} color="#101010" title={this.state.label} onPress={this.changeOpacity}/>); }else if(Platform.OS === 'android'){ //check if android this.setState({ pickerOpacity: 1 //set picker opacity:1 -> picker is visible. }); console.log("ANDROID!!!"); } }toggle(){ if(Platform.OS === 'ios'){ if(this.state.pickerOpacity == 0){ this.setState({ pickerOpacity: 1, opacityOfOtherItems: 0 // THIS WILL HIDE YOUR BUTTON! }); }else{ this.setState({ pickerOpacity: 0, opacityOfOtherItems: 1 }); } }}
EDIT: Screenshot with iOS (Click here for Video)