- Notifications
You must be signed in to change notification settings - Fork473
A react-native dropdown/picker/selector component for both Android & iOS.
License
NotificationsYou must be signed in to change notification settings
sohobloo/react-native-modal-dropdown
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A react-native dropdown/picker/selector component for both Android & iOS.
- 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.
You can find them in the example.
- Quick fix for react native 0.60. (Thanks to@ibtesamlatif2997)
npm i react-native-modal-dropdown -save
Import this module:
importModalDropdownfrom'react-native-modal-dropdown';
Use as a component:
<ModalDropdownoptions={['option 1','option 2']}/>
Use as a wrapper / container:
<ModalDropdownoptions={['option 1','option 2']}> ...</ModalDropdown>
Give the style props as your choice:
style: Change the style of the button (basic mode) / container (wrapper mode).textStyle: Change the style of text of the button.Invalid in wrapper mode.dropdownStyle: Change the style of dropdown container.
You can also render your option row and row separator by implementrenderRow andrenderSeparator function.
| 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 adefaultValue 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 ifoptions isnull/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 likewidthheighttopleft andright. Change them to appropriate values that accord with your requirement andmake 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 ifnull/undefined. | |
renderSeparator | func | Yes | Customize render dropdown list separators.Will render a default thin gray line ifnull/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.Returnfalse can cancel the event. | |
onDropdownWillHide | func | Yes | Trigger when dropdown will hide by touching the button.Returnfalse can cancel the event. | |
onSelect | func | Yes | Trigger when option row touched with selectedindex andvalue.Returnfalse 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-nativeScrollView props |
| Method | Description |
|---|---|
show() | Show the dropdown.Won't triggeronDropdownWillShow. |
hide() | Hide the dropdown.Won't triggeronDropdownWillHide. |
select(idx) | Select the specified option of theidx. Select-1 will reset it to displaydefaultValue.Won't triggeronSelect. |
Any suggestion is welcome.
About
A react-native dropdown/picker/selector component for both Android & iOS.
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Contributors13
Uh oh!
There was an error while loading.Please reload this page.