Package Exports
- react-native-simple-modal-picker
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-simple-modal-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-simple-modal-picker
Easy to use and fully customized modal picker for both iOS and Android. Have same look and feel in both plateform.
Installation
$ npm install react-native-simple-modal-picker --save
Properties
| 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 |
Usage
Here full example of package usage
Simple Modal Picker
<Picker
ref={instance => this.simplePicker = instance}
data={this.data}
label={'name'}
value={'value'}
onValueChange={(value) => alert(value + ' selected')} />
Modal Picker with Custom Row
<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>} />
DropDown View
<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>
