rn-option-select
An simple and customizable react-native select.
Features
- Single / multiple choices
- Customizable styles
Demos
Setup
This library is available on npm, install it with: npm install --save rn-option-select
or yarn add rn-option-select
.
Usage
- Import rn-option-select:
import { Select } from "rn-option-select";
- Create a select:
const options =
[
{ title: "Title 1", value: 'title1' },
{ title: "Title 2", value: 'title2', selected: true },
{ title: "Title 3", value: 'title3' },
]
render () {
return (
<View>
<Select
onOptionPress={values => {
console.log(values)
}}
optionStyle={{
text: {
color: '#333333',
},
container: {
borderBottomWidth: 1,
borderColor: 'rgb(191, 191, 191)',
},
}}
options={options}
/>
</View>
)
}
Available props
Name | Type | Default | Description |
---|---|---|---|
options | array | REQUIRED | Array of values objects more |
multiple | bool | false | Select multiple values |
onOptionPress | func | ( ) => null | Called when option is pressed (values as arg) more
|
disabled | bool | false | Disable select |
unselectedOption | React.element | A circular View with a border |
Override element for unselected options |
selectedOption | React.element | A circular View with backgroundColor: 'blue' |
Override element for selected options |
containerStyle | Object | { } | A Object with styles for select container |
optionStyle | Object | { } | A Object with styles for options |
Options Array
Basic example
[
{ title: "Title 1", value: 'title1' },
{ title: "Title 2", value: 'title2' },
{ title: "Title 3", value: 'title3' },
]
One option selected on render
[
{ title: "Title 1", value: 'title1', selected: true },
{ title: "Title 2", value: 'title2' },
{ title: "Title 3", value: 'title3' },
]
Title with a React.element
[
{
title: <View><Text>Whatever you want here</Text></View>,
value: 'title1',
selected: true,
},
{
title: "You can pass strings or React.element",
value: 'title2',
},
{
title: <View><Text>Whatever you want here too</Text></View>,
value: 'title3',
},
]
onOptionPress
<Select
...
onOptionPress={values => {
this.setState({ options: values });
}}
...
/>
values
is an Array like options array with selected options.
Pull requests, feedbacks and suggestions are welcome!