How do you add a Picker in React Native that's going to work for both platforms - react-native

Question

I have a bunch of text inputs:
<View style={styles.container}>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.USERNAME_PLACEHOLDER}
value={userName}
onChangeText={this.handleTextChange("userName")}
/>
</View>
<View style={styles.textBoxContainer}>
<TextBoxMA
style={styles.textBox}
placeholder={Labels.EMAIL_PLACEHOLDER}
value={email}
onChangeText={this.handleTextChange("email")}
/>
</View>
//here I need to put a Picker, or select element in html terms
</View>
Now, if I put a Picker like this:
<View
style={styles.textBoxContainer}>
<Picker
selectedValue={documentType}
onValueChange={this.handleDocumentTypeChange}
>
<Picker.Item label="ID" value="1" />
<Picker.Item label="Passport" value="212" />
</Picker>
</View>
I get a nice, clean picker in Android. But in iOS I get a picker whose items overlap with the rest of the text boxes and it takes a lot of space. So it destroys all the layout.
I understand that native components corresponding to a dropdown list in the two platforms are different. But how do you handle this?
I've taken a look at AirBnB's app which's been written in React native. In iOS, the view containing the picker slides from the bottom when a corresponding field is clicked (like the Gender field. It looks like a text input but it's not. It just causes the picker to show). And in Android, it's just a modal view with items in the radio button form. They've probably done lots of extra work to achieve that.
Do I need to show picker depending on the platform or is there a built in way to achieve this?

Answer 1

You can use community solutions like
react-native-picker-select
Or
react-native-picker-modal-view
Or
react-native-picker
Or you can build your own solution and do what ever you want you can style and position and even animate your component as you like.