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

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.