Name: react-native-modal-dropdown
Owner: Codemate Ltd
Description: A react-native dropdown/picker/selector component for both Android & iOS.
Forked from: katariinalaakkonen/react-native-modal-dropdown
Created: 2017-12-14 13:07:05.0
Updated: 2017-12-14 13:07:06.0
Pushed: 2017-10-17 04:27:53.0
Size: 1639
Language: JavaScript
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
A react-native dropdown/picker/selector component for both Android & iOS.
You can find them in the example.
i react-native-modal-dropdown -S
Import this module:
rt ModalDropdown from 'react-native-modal-dropdown';
Use as a component:
alDropdown options={['option 1', 'option 2']}/>
Use as a wrapper / container:
alDropdown options={['option 1', 'option 2']}>
.
dalDropdown>
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 implement renderRow
and renderSeparator
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 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
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
.
Any suggestion is welcome.