Easy to use and fully customized modal picker for both iOS and Android. Have same look and feel in both plateform.
$ npm install react-native-simple-modal-picker --save
| Prop | DataType | Description | IsRequired |
|---|---|---|---|
data |
Array | Data in json format | true |
value |
String | Name of field which you want tobe return on selection from array | true |
label |
String | Name of field which you want tobe shown in list of selection | true |
onValueChange |
function(value) | Will be called on item selection and get value as a argument | true |
renderRow |
function(rowData) | Custom component for render row and get row data as a argument | false |
Here full example of package usage
<Picker
ref={instance => this.simplePicker = instance}
data={this.data}
label={'name'}
value={'value'}
onValueChange={(value) => alert(value + ' selected')} />
<Picker
ref={instance => this.customRowPicker = instance}
data={this.data}
label={'name'}
value={'value'}
onValueChange={(value) => alert(value + ' selected')}
renderRow={(rowData) => <Text style={styles.rowStyle}>{rowData.name}</Text>} />
<View>
<Picker
ref={instance => this.dropDownPicker = instance}
data={this.data}
label={'name'}
value={'value'}
onValueChange={(value, selectedIndex) => this.setState({selectedIndex})} />
<View style={styles.subContainer}>
<TouchableOpacity style={styles.dropDownContainer} onPress={() => this.dropDownPicker.setModalVisible(true)}>
<Text style={styles.dropDownText}>{this.data[this.state.selectedIndex].name}</Text>
</TouchableOpacity>
</View>
</View>