React Native Option Select
A simple DropDown menu for React Native App!
Introduction
React Native Option Select is simple, customizable and easy to use dropdown in React Native with a material outlook and plays well with the flex layout of the rest of the application.
Installation
npm i react-native-option-select --save
Usage
Require it inside your Javascript files. Also supporting components using object-deconstructing.
Select
Option
OptionList
.
<OptionList />
is to be used to append the options. This has to be placed as a last component so that it take the highest Z-Index.
Example
import React Component AppRegistry Text View from 'react-native'; import DropDown Select Option OptionList from 'react-native-option-select'; { ; thisstate = canada: '' ; } { return thisrefs'OPTIONLIST'; } { this; } { return <View => <Select = = ="Select a Province in Canada ..." => <Option = >Alberta</Option> <Option>British Columbia</Option> <Option>Manitoba</Option> <Option>New Brunswick</Option> <Option>Newfoundland and Labrador</Option> <Option>Northwest Territories</Option> <Option>Nova Scotia</Option> <Option>Nunavut</Option> <Option>Ontario</Option> <Option>Prince Edward Island</Option> <Option>Quebec</Option> <Option>Saskatchewan</Option> <Option>Yukon</Option> </Select> <Text>Selected province: thisstatecanada</Text> <OptionList ="OPTIONLIST"/> </View> ; } AppRegistry;
Configuration
Select:
Property | Type | Default | Description | Mandatory |
---|---|---|---|---|
width | number | 400 | Width of the selection | No |
onSelect | function(text, value) | null | function to be invoked when option is selected | Yes |
height | number | 50 | Height of the selection | No |
optionListRef | function | required | Reference to <OptionList /> to display the selection menu |
Yes |
style | object | null | Custom styles to be applied to the select container element if supplied | No |
styleOption | object | null | Custom styles to be applied to the option element displayed on select if supplied | No |
styleText | object | null | Custom styles to be applied to the text of the option element displayed on select if supplied | No |
defaultValue | string | first option | The value to be displayed if none of the options are selected. | Yes |
Option:
Property | Type | Default | Description | Mandatory |
---|---|---|---|---|
value | any | null | value will be passed on callback onSelect as second argument |
Yes |
style | object | null | Styles to be applied on 'Option' component | No |
styleText | object | null | Styles to be applied on text inside of 'Option' | No |
OptionList:
Property | Type | Default | Description | Mandatory |
---|---|---|---|---|
overlayStyles | object | null | Styles to be applied on 'overlay' backdrop | No |
useSelectHeight | object | null | If set to true, then each option element will take height equal to the height of the select element on the opening of the dropdown | No |
Demo
IOS and Android:
To be attached
Contributions
Please feel free to contribute. (✿◠‿◠)