DOCSEARCHbyAlgolia
Submit Docs

react-native-select-dropdown

repository·master·Indexed 18 days ago

https://github.com/adelredaa97/react-native-select-dropdown

A highly customizable dropdown, picker, or menu component for React Native supporting Android and iOS. Version 4.0.1 utilizes renderButton and renderItem props for full UI customization and includes built-in search functionality.

Tokens
2.2K
Snippets
7
Records
8
Agent score
13%

What's inside react-native-select-dropdown

  2. Enable and configure search functionality

    master

    You can enable a search bar within the dropdown by setting the search prop to true.

    Related props for search customization:

    • search: boolean (Required to enable)
    • searchInputStyle: object - Style for the search input.
    • searchInputTxtColor: string - Text color for search input.
    • searchInputTxtStyle: object - Style for search input text.
    • searchPlaceHolder: string - Placeholder text.
    • searchPlaceHolderColor: string - Placeholder text color.
    • renderSearchInputLeftIcon: function - Returns a component for the left icon.
    • renderSearchInputRightIcon: function - Returns a component for the right icon.
    • onChangeSearchInputText: function - Callback when text changes. Setting this allows you to implement manual search logic outside the component.

  3. Basic Usage of SelectDropdown

    master

    To use SelectDropdown, import it and provide the required data and onSelect props. You must also provide renderButton and renderItem to define how the dropdown button and the individual items look.

    Note: In version 4.0+, customization is handled via renderButton and renderItem instead of the deprecated buttonStyle or rowStyle props.

    import SelectDropdown from 'react-native-select-dropdown'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

// ... inside component
<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}
/>

  5. Reference: SelectDropdown Props

    master

    A complete list of available props for the SelectDropdown component.

    - data: array of data that will be represented in dropdown (can be array of objects)
- onSelect: function receives selected item and its index in data array
- renderButton: function returns React component for the dropdown button
- renderItem: function returns React component for each dropdown item
- defaultValue: default selected item in dropdown
- defaultValueByIndex: default selected item index
- disabled: disable dropdown
- disabledIndexes: array of disabled items index
- disableAutoScroll: disable auto scroll to selected value
- testID: dropdown menu testID
- onFocus: function fires when dropdown is opened
- onBlur: function fires when dropdown is closed
- onScrollEndReached: function fires when dropdown scrolls to the end
- statusBarTranslucent: required to set true when statusbar is translucent (android only)
- dropdownStyle: style object for dropdown view
- dropdownOverlayColor: backdrop color when dropdown is opened
- showsVerticalScrollIndicator: When true, shows a vertical scroll indicator
- search: enable search functionality
- searchInputStyle: style object for search input
- searchInputTxtColor: text color for search input
- searchInputTxtStyle: style object for search input text
- 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

  7. Configure renderItem prop

    master

    The renderItem prop is a required function that returns a React component for each item in the dropdown list. This is used to customize the look of individual rows.

    Signature: (item, index, isSelected) => React.ReactElement

    renderItem={(item, index, isSelected) => {
  return (
    <View>
      {/* Your custom item UI */}
    </View>
  );
}}

  8. Configure renderButton prop

    master

    The renderButton prop is a required function that returns a React component for the dropdown button. It allows full customization of the button's appearance.

    Signature: (selectedItem, isOpened) => React.ReactElement

    renderButton={(selectedItem, isOpened) => {
  return (
    <View>
      {/* Your custom button UI */}
    </View>
  );
}}