0.1.0 • Published 5 years ago
react-native-modal-dropdown-flat v0.1.0
"author": "sohobloo sohobloo@live.cn (https://github.com/sohobloo)",
react-native-modal-dropdown-flat
A react-native dropdown/picker/selector component for both Android & iOS using flatlist.
Features
- Pure JS.
- Compatible with both iOS and Android.
- Auto position. (Won't be covered or clipped by the edge of screen.)
- Zero configuration. (Options are needed of course or a loading indicator will show.)
- Highly customizable.
- Controllable with API by code. (Show/Hide/Select)
- Change everything into a dropdown list trigger.
Demo
You can find them in the example.
Installation
npm i rreact-native-modal-dropdown-flat -save
Usage
Basic
Import this module:
import ModalDropdown from "react-native-modal-dropdown-flat";
Use as a component:
<ModalDropdown options={["option 1", "option 2"]} />
Use as a wrapper / container:
<ModalDropdown options={["option 1", "option 2"]}>...</ModalDropdown>
API
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
disabled | bool | Yes | false | disable / enable the component. |
defaultIndex | number | Yes | -1 | Init selected index. -1 : None is selected. This only change the highlight of the dropdown row, you have to give a defaultValue to change the init text. |
defaultValue | string | Yes | Please select... | Init text of the button. Invalid in wrapper mode. |
options | array | Yes | Options. The dropdown will show a loading indicator if options is null /undefined . | |
animated | bool | Yes | true | Disable / enable fade animation. |
showsVerticalScrollIndicator | bool | Yes | true | Show / hide vertical scroll indicator. |
style | object | Yes | Style of the button. | |
textStyle | object | Yes | Style of the button text. Invalid in wrapper mode. | |
dropdownStyle | object | Yes | Style of the dropdown list. | |
dropdownTextStyle | object | Yes | Style of the dropdown option text. | |
dropdownTextHighlightStyle | object | Yes | Style of the dropdown selected option text. | |
adjustFrame | func | Yes | This is a callback after the frame of the dropdown have been calculated and before showing. You will receive a style object as argument with some of the props like width height top left and right . Change them to appropriate values that accord with your requirement and make the new style as the return value of this function. | |
renderRow | func | Yes | Customize render option rows: function(option,index,isSelected) Will render a default row if null /undefined . | |
renderSeparator | func | Yes | Customize render dropdown list separators. Will render a default thin gray line if null /undefined . | |
renderButtonText | func | Yes | Use this to extract and return text from option object. This text will show on button after option selected. Invalid in wrapper mode. | |
onDropdownWillShow | func | Yes | Trigger when dropdown will show by touching the button. Return false can cancel the event. | |
onDropdownWillHide | func | Yes | Trigger when dropdown will hide by touching the button. Return false can cancel the event. | |
onSelect | func | Yes | Trigger when option row touched with selected index and value . Return false can cancel the event. | |
accessible | bool | Yes | true | Set accessibility of dropdown modal and dropdown rows |
keyboardShouldPersistTaps | enum('always', 'never', 'handled') | Yes | 'never' | See react-native ScrollView props |