A feature-rich and highly customizable select dropdown component for React Native.
How to use it:
1. Install and import the select dropdown component.
# Yarn $ yarn add react-native-select-dropdown # NPM $ npm i react-native-select-dropdown
import 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 */,
Preview:
Download Details:
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
