1.2.0 • Published 4 years ago
native-drop-down v1.2.0
native-drop-down
A react-native dropdown component for both Android and iOS.
Installation
npm i native-drop-down -S
Usage
Import
import ModalDropdown from 'native-drop-down';
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. 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 . | |
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 |
Methods
Method | Description |
---|---|
show() | Show the dropdown. Won't trigger onDropdownWillShow . |
hide() | Hide the dropdown. Won't trigger onDropdownWillHide . |
select(idx) | Select the specified option of the idx . Select -1 will reset it to display defaultValue . Won't trigger onSelect . |
License
MIT