A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.
npm i react-native-modal-selector --saveYou can either use this component as an wrapper around your existing component or use it in its default mode. In default mode a customizable button is rendered.
See SampleApp for an example how to use this component.
import ModalSelector from 'react-native-modal-selector'
[..]
class SampleApp extends Component {
constructor() {
super();
this.state = {
textInputValue: ''
}
}
render() {
let index = 0;
const data = [
{ key: index++, section: true, label: 'Fruits' },
{ key: index++, label: 'Red Apples' },
{ key: index++, label: 'Cherries' },
{ key: index++, label: 'Cranberries' },
{ key: index++, label: 'Pink Grapefruit' },
{ key: index++, label: 'Raspberries' },
{ key: index++, section: true, label: 'Vegetables' },
{ key: index++, label: 'Beets' },
{ key: index++, label: 'Red Peppers' },
{ key: index++, label: 'Radishes' },
{ key: index++, label: 'Radicchio' },
{ key: index++, label: 'Red Onions' },
{ key: index++, label: 'Red Potatoes' },
{ key: index++, label: 'Rhubarb' },
{ key: index++, label: 'Tomatoes' }
];
return (
<View style={{flex:1, justifyContent:'space-around', padding:50}}>
<ModalSelector
data={data}
initValue="Select something yummy!"
onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }} />
<ModalSelector
data={data}
initValue="Select something yummy!"
onChange={(option)=>{ this.setState({textInputValue:option.label})}}>
<TextInput
style={{borderWidth:1, borderColor:'#ccc', padding:10, height:30}}
editable={false}
placeholder="Select something yummy!"
value={this.state.textInputValue} />
</ModalSelector>
</View>
);
}
}data(array, required) array of objects with a unique key and labelstyle(object, optional) style definitions for the root elementonChange(function, optional) callback function, when the users has selected an optioninitValue(string, optional) text that is initially shown on the buttoncancelText(string, optional) text of the cancel buttonselectStyle(object, optional) style definitions for the select element (available in default mode only!). NOTE: Due to breaking changes in React Native, RN < 0.39.0 should passflex:1explicitly toselectStyleas a prop.selectTextStyle(object, optional) style definitions for the select element (available in default mode only!)overlayStyle(object, optional) style definitions for the overly/background elementsectionStyle(object, optional) style definitions for the section elementsectionTextStyle(object, optional) style definitions for the select text elementoptionStyle(object, optional) style definitions for the option elementoptionTextStyle(object, optional) style definitions for the option text elementcancelStyle(object, optional) style definitions for the cancel elementcancelTextStyle(object, optional) style definitions for the cancel text elementkeyboardShouldPersistTaps(string/bool, optional, default 'always') passed to underlying ScrollView
