react-native-select-dropdown-customized
v0.1.5
Published
react-native-select-dropdown customized project.
Downloads
9
Maintainers
Readme
react-native-select-dropdown-customized
"react-native-select-dropdown-customized" is a customized library based on "react-native-select-dropdown",
providing the "renderEmptyCustomizedRowChild" prop when the dropdown search results are empty.
Installation
# Using npm
npm install react-native-select-dropdown-customized
# Using yarn
yarn add react-native-select-dropdown-customized
Props
Methods
data
array of data that will be represented in dropdown 'can be array of objects
| Type | Required | | ----- | -------- | | array | Yes |
onSelect
function recieves selected item and its index in data array
| Type | Required | | -------- | -------- | | function | Yes |
defaultButtonText
default button text when no item is selected
| Type | Required | | ------ | -------- | | String | No |
buttonTextAfterSelection
function recieves selected item and its index, this function should return a string that will be represented in button after item is selected
| Type | Required | | -------- | -------------------------------------------------------------------- | | function | Yes "unless you customized button using renderCustomizedButtonChild" |
rowTextForSelection
function recieves item and index for each row in dropdown, this function shoud return a string that will be represented in each row in dropdown
| Type | Required | | -------- | ----------------------------------------------------------------- | | function | Yes "unless you customized button using renderCustomizedRowChild" |
defaultValue
default selected item in dropdown ( check examples in Demo1)
| Type | Required | | ---- | -------- | | any | No |
defaultValueByIndex
default selected item index
| Type | Required | | ------- | -------- | | integer | No |
disabled
disable dropdown
| Type | Required | | ------- | -------- | | boolean | No |
disableAutoScroll
disable auto scroll to selected value
| Type | Required | | ------- | -------- | | boolean | No |
disabledIndexs
disable choose all Rows index in the list
| Type | Required | | ----- | -------- | | array | No |
onFocus
function fires when dropdown is opened
| Type | Required | | -------- | -------- | | function | No |
onBlur
function fires when dropdown is closed
| Type | Required | | -------- | -------- | | function | No |
onScrollEndReached
function fires when dropdown scrolls to the end (for paginations)
| Type | Required | | -------- | -------- | | function | No |
buttonStyle
style object for button
| Type | Required | | ------ | -------- | | object | Yes |
buttonTextStyle
style object for button text
| Type | Required | | ------ | -------- | | object | No |
renderCustomizedButtonChild
function recieves selected item and its index, this function should return a React component as a child for dropdown button buttonStyle
should be used for parent button view style.
# check examples folder to make things clear
| Type | Required | | -------- | -------- | | function | No |
renderDropdownIcon
function that should return a React component for dropdown icon
| Type | Required | | -------- | -------- | | function | No |
dropdownIconPosition
dropdown icon position "left" || "right"
| Type | Required | | ------ | -------- | | string | No |
statusBarTranslucent
required to set true when statusbar is translucent (android only)
| Type | Required | | ------- | -------- | | boolean | No |
dropdownStyle
style object for dropdown view
| Type | Required | | ------ | -------- | | object | No |
dropdownOverlayColor
backdrop color when dropdown is opened
| Type | Required | | ------ | -------- | | string | No |
showsVerticalScrollIndicator
When true, shows a vertical scroll indicator.
| Type | Required | | ------- | -------- | | boolean | No |
rowStyle
style object for row
| Type | Required | | ------ | -------- | | object | Yes |
rowTextStyle
style object for row text
| Type | Required | | ------ | -------- | | object | No |
selectedRowStyle
style object for selected row
| Type | Required | | ------ | -------- | | object | Yes |
selectedRowTextStyle
style object for selected row text
| Type | Required | | ------ | -------- | | object | No |
renderCustomizedRowChild
function recieves item and its index, this function should return React component as a child for customized row rowStyle
should be used for parent row view style.
# check examples folder to make things clear
| Type | Required | | -------- | -------- | | function | No |
renderEmptyCustomizedRowChild
This function should return React component as a child for customized row rowStyle
should be used for parent row view style.
| Type | Required | | -------- | -------- | | function | No |
search
enable search functionality
| Type | Required | | ------- | -------- | | boolean | No |
searchInputStyle
style object for search input
| Type | Required | | ------ | -------- | | object | No |
searchInputTxtColor
text color for search input
| Type | Required | | ------ | -------- | | string | No |
searchInputTxtStyle
style object for search input text
| Type | Required | | ------ | -------- | | object | No |
searchPlaceHolder
placeholder text for search input
| Type | Required | | ------ | -------- | | string | No |
searchPlaceHolderColor
text color for search input placeholder
| Type | Required | | ------ | -------- | | string | No |
renderSearchInputLeftIcon
function returns React component for search input icon
| Type | Required | | -------- | -------- | | function | No |
renderSearchInputRightIcon
function returns React component for search input icon
| Type | Required | | -------- | -------- | | function | No |
onChangeSearchInputText
function callback when the search input text changes, this will automatically disable the dropdown's internal search to be implemented manually outside the component
| Type | Required | | -------- | -------- | | function | No |
| Method | Description |
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| reset()
| Remove selection & reset it to display defaultButtonText
check https://github.com/AdelRedaa97/react-native-select-dropdown/pull/1#issuecomment-818307624. |
| openDropdown()
| Open the dropdown. |
| closeDropdown()
| Close the dropdown. |
| selectIndex(index)
| Select a specific item by index. |
License
Version notes
- v0.1.4
Update Readme.
- v0.1.3
Change library registry. Change visibility into public.
- v0.1.2
Add renderEmptyCustomizedRowChild for custom empty row child component.
- v0.1.0
Add text component ("NO RESULT") when dropdown searching keywords are not working.