How to close picker in React Native? - react-native

Question

I'm using Native Base picker.
I want to close it manually but can't find API for this.
Component not contain any methods or props like visible.
How I can to close/hide picker?

Answer 1

In my case it's enough to use renderHeader function with backAction parameter
<Picker
renderHeader={backAction => (
<Button onPress={() => {
backAction();
someFunction();
}}
)}
/>

Answer 2

a): you could simply render it based on this.state.isPickerVisible, or b): wrap it in a Modal which has a visible prop
for closing the Picker, if you opt to wrap it in a Modal, then make the modal take up the whole screen and use Touchable without feedback to handle taps outside of the Picker: <TouchableWithoutFeedback onPress={() => this.cancelPressed()}> where cancel pressed toggles isPickerVisible
{this.state.isPickerVisible &&
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>}
if you opt to wrap it in a Modal, then you can get some animation options
import {Modal, Picker ... etc...} from 'react-native'
<Modal
animationType="slide"
transparent={true}
visible={this.state.isPickerVisible}
>
<TouchableWithoutFeedback onPress={() => this.cancelPressed()}>
<View>
<Picker
selectedValue={this.state.tempGender}
onValueChange={tempGender => this.setState({tempGender})}
>
<Picker.Item label="Female" value="female" />
<Picker.Item label="Male" value="male" />
<Picker.Item label="Other" value="other" />
</Picker>
</View>
</TouchableWithoutFeedback>
</Modal>