A feature-rich and highly customizable select dropdown component for React Native.
1. Install and import the select dropdown component.
# Yarn
$ yarn add react-native-select-dropdown
# NPM
$ npm i react-native-select-dropdownimport SelectDropdown from 'react-native-select-dropdown'
2. Create a basic select dropdown in your app.
const countries = ["React", "Script", "Com"]
<SelectDropdown
data={countries}
onSelect={(selectedItem, index) => {
console.log(selectedItem, index)
}}
buttonTextAfterSelection={(selectedItem, index) => {
// text represented after item is selected
// if data array is an array of objects then return selectedItem.property to render after item is selected
return selectedItem
}}
rowTextForSelection={(item, index) => {
// text represented for each item in dropdown
// if data array is an array of objects then return item.property to represent item in dropdown
return item
}}
/>
3. Available component props.
data /* array */,
onSelect /* function */,
defaultButtonText /* String */,
buttonTextAfterSelection /* function */,
rowTextForSelection /* function */,
defaultValue /* any */,
defaultValueByIndex /* integer */,
disabled /* boolean */,
disableAutoScroll /* boolean */,
disabledIndexs /* array of disabled Row index */,
onFocus /* function */,
onBlur /* function */,
onScrollEndReached /* function */,
/////////////////////////////
buttonStyle /* style object for button */,
buttonTextStyle /* style object for button text */,
renderCustomizedButtonChild /* function returns React component for customized button */,
/////////////////////////////
renderDropdownIcon,
dropdownIconPosition,
statusBarTranslucent,
dropdownStyle,
dropdownOverlayColor /* string */,
showsVerticalScrollIndicator,
/////////////////////////////
rowStyle /* style object for row */,
rowTextStyle /* style object for row text */,
selectedRowStyle /* style object for selected row */,
selectedRowTextStyle /* style object for selected row text */,
renderCustomizedRowChild /* function returns React component for customized row */,
/////////////////////////////
search /* boolean */,
searchInputStyle /* style object for search input */,
searchInputTxtColor /* text color for search input */,
searchInputTxtStyle /* text style for search input */,
searchPlaceHolder /* placeholder text for search input */,
searchPlaceHolderColor /* text color for search input placeholder */,
renderSearchInputLeftIcon /* function returns React component for search input icon */,
renderSearchInputRightIcon /* function returns React component for search input icon */,
onChangeSearchInputText /* function callback when the search input text changes, this will automatically disable the dropdown's interna search to be implemented manually outside the component */,
Author: AdelRedaa97
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/AdelRedaa97/react-native-select-dropdown
License: MIT