Customizable Dropdown for React Native

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-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  */,

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

#react #reactjs