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

• data

• onSelect

• defaultButtonText

• buttonTextAfterSelection

• rowTextForSelection

• defaultValue

• defaultValueByIndex

• disabled

• disableAutoScroll

• disabledIndexs

• onFocus

• onBlur

• onScrollEndReached

• buttonStyle

• buttonTextStyle

• renderCustomizedButtonChild

• renderDropdownIcon

• dropdownIconPosition

• statusBarTranslucent

• dropdownStyle

• dropdownOverlayColor

• showsVerticalScrollIndicator

• rowStyle

• rowTextStyle

• selectedRowStyle

• selectedRowTextStyle

• renderCustomizedRowChild

• renderEmptyCustomizedRowChild

• search

• searchInputStyle

• searchInputTxtColor

• searchInputTxtStyle

• searchPlaceHolder

• searchPlaceHolderColor

• renderSearchInputLeftIcon

• renderSearchInputRightIcon

• onChangeSearchInputText

Methods

• reset
• openDropdown
• closeDropdown
• selectIndex

---

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 AdelRedaa97/react-native-select-dropdown#1 (comment).
openDropdown()	Open the dropdown.
closeDropdown()	Close the dropdown.
selectIndex(index)	Select a specific item by index.

---

License

MIT

---

Version notes

• v0.1.5

Hot fix: index.d.ts

• 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.