react-native-select-dropdown

react-native-select-dropdown is a highly customized dropdown | select | picker | menu for react native that works for android and iOS platforms.

Installation

# Using npm

npm install react-native-select-dropdown

# Using yarn

yarn add react-native-select-dropdown

Demo

Code provided in Examples folder.

Search Functionality (Code provided in Examples folder).

🚀 Major Changes

Version 4.0

• (defaultButtonText, buttonTextAfterSelection, buttonStyle, buttonTextStyle, renderCustomizedButtonChild, renderDropdownIcon, dropdownIconPosition) have been removed and (renderButton) has been added to customize dropdown button
• (rowTextForSelection, rowStyle, rowTextStyle, selectedRowStyle, selectedRowTextStyle, renderCustomizedRowChild) have been removed and (renderItem) has been added to customize each dropdown item
• testID added to scroll the dropdown menu in e2e tests.
• Most of issues have been fixed.
• Updated readme.md file
• More examples in examples folder.

Usage

import SelectDropdown from 'react-native-select-dropdown'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
...
  const emojisWithIcons = [
    {title: 'happy', icon: 'emoticon-happy-outline'},
    {title: 'cool', icon: 'emoticon-cool-outline'},
    {title: 'lol', icon: 'emoticon-lol-outline'},
    {title: 'sad', icon: 'emoticon-sad-outline'},
    {title: 'cry', icon: 'emoticon-cry-outline'},
    {title: 'angry', icon: 'emoticon-angry-outline'},
    {title: 'confused', icon: 'emoticon-confused-outline'},
    {title: 'excited', icon: 'emoticon-excited-outline'},
    {title: 'kiss', icon: 'emoticon-kiss-outline'},
    {title: 'devil', icon: 'emoticon-devil-outline'},
    {title: 'dead', icon: 'emoticon-dead-outline'},
    {title: 'wink', icon: 'emoticon-wink-outline'},
    {title: 'sick', icon: 'emoticon-sick-outline'},
    {title: 'frown', icon: 'emoticon-frown-outline'},
  ];
...
  <SelectDropdown
    data={emojisWithIcons}
    onSelect={(selectedItem, index) => {
      console.log(selectedItem, index);
    }}
    renderButton={(selectedItem, isOpened) => {
      return (
        <View style={styles.dropdownButtonStyle}>
          {selectedItem && (
            <Icon name={selectedItem.icon} style={styles.dropdownButtonIconStyle} />
          )}
          <Text style={styles.dropdownButtonTxtStyle}>
            {(selectedItem && selectedItem.title) || 'Select your mood'}
          </Text>
          <Icon name={isOpened ? 'chevron-up' : 'chevron-down'} style={styles.dropdownButtonArrowStyle} />
        </View>
      );
    }}
    renderItem={(item, index, isSelected) => {
      return (
        <View style={{...styles.dropdownItemStyle, ...(isSelected && {backgroundColor: '#D2D9DF'})}}>
          <Icon name={item.icon} style={styles.dropdownItemIconStyle} />
          <Text style={styles.dropdownItemTxtStyle}>{item.title}</Text>
        </View>
      );
    }}
    showsVerticalScrollIndicator={false}
    dropdownStyle={styles.dropdownMenuStyle}
  />
...
  const styles = StyleSheet.create({
    dropdownButtonStyle: {
      width: 200,
      height: 50,
      backgroundColor: '#E9ECEF',
      borderRadius: 12,
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      paddingHorizontal: 12,
    },
    dropdownButtonTxtStyle: {
      flex: 1,
      fontSize: 18,
      fontWeight: '500',
      color: '#151E26',
    },
    dropdownButtonArrowStyle: {
      fontSize: 28,
    },
    dropdownButtonIconStyle: {
      fontSize: 28,
      marginRight: 8,
    },
    dropdownMenuStyle: {
      backgroundColor: '#E9ECEF',
      borderRadius: 8,
    },
    dropdownItemStyle: {
      width: '100%',
      flexDirection: 'row',
      paddingHorizontal: 12,
      justifyContent: 'center',
      alignItems: 'center',
      paddingVertical: 8,
    },
    dropdownItemTxtStyle: {
      flex: 1,
      fontSize: 18,
      fontWeight: '500',
      color: '#151E26',
    },
    dropdownItemIconStyle: {
      fontSize: 28,
      marginRight: 8,
    },
  });

Props

• data

• onSelect

• renderButton

• renderItem

• defaultValue

• defaultValueByIndex

• disabled

• disabledIndexes

• disableAutoScroll

• testID

• onFocus

• onBlur

• onScrollEndReached

• statusBarTranslucent

• dropdownStyle

• dropdownOverlayColor

• showsVerticalScrollIndicator

• 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

---

renderButton

function returns React component for the dropdown button

Type	Required
function	Yes

---

renderItem

function returns React component for each dropdown item

Type	Required
function	Yes

---

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

---

disabledIndexes

array of disabled items index

Type	Required
array	No

---

disableAutoScroll

disable auto scroll to selected value

Type	Required
boolean	No

---

testID

dropdown menu testID

Type	Required
string	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

---

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

---

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
openDropdown()	Open the dropdown.
closeDropdown()	Close the dropdown.
selectIndex(index)	Select a specific item by index.

---

License

MIT