@duocvo/react-native-dropdown

A high-performance, customizable, and interactive dropdown component for React Native. Built with Reanimated to ensure buttery-smooth.

Demo

Requirements

• react-native-reanimated >=3.

Installation

npm install @duocvo/react-native-dropdown
#or
yarn add @duocvo/react-native-dropdown

Usage

Basic Example (Single Select)

import SelectDropdown from '@duocvo/react-native-dropdown'

const fruits = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango'];

<SelectDropdown
  data={fruits}
  onSelect={(selectedItem, index) => {
    console.log(selectedItem, index);
  }}
  renderTrigger={({ selectedItem }) => {
    return (
      <View style={styles.dropdownButtonStyle}>
        <Text style={styles.dropdownButtonTxtStyle}>
          {selectedItem || 'Select a fruit'}
        </Text>
        <Text style={styles.dropdownButtonArrowStyle}>▼</Text>
      </View>
    );
  }}
  renderItem={(item, index, isSelected) => {
    return (
      <View
        style={[
          styles.dropdownItemStyle,
          isSelected && { backgroundColor: '#D2D9DF' },
        ]}
      >
        <Text style={styles.dropdownItemTxtStyle}>{item}</Text>
      </View>
    );
  }}
  dropdownStyle={styles.dropdownMenuStyle}
/>

Multiple Select Example

const emojis = [
  'happy',
  'cool',
  'lol',
  'sad',
  'cry',
  'angry',
  'confused',
  'excited',
  'kiss',
  'devil',
  'dead',
  'wink',
  'sick',
  'frown',
];

<SelectDropdown
  data={emojis}
  onSelect={(selectedItem, index) => {
    console.log(selectedItem, index);
  }}
  renderTrigger={({ selectedItems }) => {
    return (
      <View style={styles.dropdownButtonStyle}>
        <Text style={styles.dropdownButtonTxtStyle}>
          {selectedItems?.map(it => it.item).join(', ') || 'Select your mood'}
        </Text>
      </View>
    );
  }}
  multiple
  renderItem={(item, index, isSelected) => {
    return (
      <View
        style={[
          styles.dropdownItemStyle,
          isSelected && { backgroundColor: '#D2D9DF' },
        ]}
      >
        <Text style={styles.dropdownItemTxtStyle}>{item}</Text>
      </View>
    );
  }}
  dropdownStyle={styles.dropdownMenuStyle}
/>

Search Example

<SelectDropdown
  data={data}
  onSelect={(selectedItem, index) => {
    console.log(selectedItem, index);
  }}
  renderTrigger={({ selectedItem }) => {
    return (
      <View style={styles.dropdownButtonStyle}>
        <Text style={styles.dropdownButtonTxtStyle}>
          {selectedItem || 'Select an item'}
        </Text>
      </View>
    );
  }}
  renderItem={(item, index, isSelected) => {
    return (
      <View style={styles.dropdownItemStyle}>
        <Text style={styles.dropdownItemTxtStyle}>{item}</Text>
      </View>
    );
  }}
  search
  searchPlaceHolder="Search..."
  searchPlaceHolderColor="#999"
  dropdownStyle={styles.dropdownMenuStyle}
/>

Bottom Mode with Search Example

<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
  search
  dropdownPositionMode="bottom"
  keyboardHeight={300} // Optional: provide keyboard height for faster calculation
/>

Styling

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',
    },
    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',
    },
  });

Props

Core Props:

• data - Array of data items to display
• onSelect - Callback when an item is selected
• renderTrigger - Function to render the dropdown trigger/button
• renderItem - Function to render each dropdown item

Selection Props:

• defaultValue - Default selected item
• defaultValueByIndex - Default selected item by index
• multiple - Enable multiple selection
• disabled - Disable the dropdown
• disabledIndexes - Array of disabled item indexes

Search Props:

• search - Enable search functionality
• searchInputStyle - Style for search input
• searchInputTxtColor - Text color for search input
• searchInputTxtStyle - Text style for search input
• searchPlaceHolder - Placeholder text for search input
• searchPlaceHolderColor - Placeholder text color
• autoFocusSearchInput - Auto focus search input on open
• isRemoveDiacritics - Remove diacritics from search text
• renderSearchInputLeftIcon - Render left icon in search input
• renderSearchInputRightIcon - Render right icon in search input
• onChangeSearchInputText - Callback when search text changes

Styling Props:

• dropdownStyle - Style object for dropdown view
• dropdownOverlayColor - Backdrop color when dropdown is opened
• dropdownContentContainerStyle - Style for dropdown content container
• showsVerticalScrollIndicator - Show vertical scroll indicator

Behavior Props:

• dropdownPositionMode - Position mode: 'default' or 'bottom'
• keyboardHeight - Keyboard height for position calculation
• disableAutoScroll - Disable auto scroll to selected value
• statusBarTranslucent - Enable when statusbar is translucent (Android only)

Event Props:

• onFocus - Callback when dropdown is opened
• onBlur - Callback when dropdown is closed
• onScrollEndReached - Callback when scroll reaches end

Other Props:

• testID - Test ID for testing

Methods

The component exposes the following methods via ref:

| Method | Description | | -------------------- | -------------------------------- | | reset() | Remove selection & reset it | | openDropdown() | Open the dropdown. | | closeDropdown() | Close the dropdown. | | selectIndex(index) | Select a specific item by index. |

Example:

import { useRef } from 'react';
import SelectDropdown, { DropdownRef } from '@duocvo/react-native-dropdown';

const dropdownRef = useRef<DropdownRef>(null);

// Open dropdown programmatically
const handleOpen = () => {
  dropdownRef.current?.openDropdown();
};

// Close dropdown programmatically
const handleClose = () => {
  dropdownRef.current?.closeDropdown();
};

// Reset selection
const handleReset = () => {
  dropdownRef.current?.reset();
};

// Select item by index
const handleSelectIndex = (index: number) => {
  dropdownRef.current?.selectIndex(index);
};

<SelectDropdown
  ref={dropdownRef}
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
/>

isRemoveDiacritics

Remove diacritics from search input text

| Type | Required | | -------- | -------- | | boolean | No |

autoFocusSearchInput

Option focus input in search section

| Type | Required | | -------- | -------- | | boolean | No |

multiple

Enable multiple selection

| Type | Required | | -------- | -------- | | boolean | No |

renderTrigger

function returns React component for the dropdown trigger/button (both single and multiple modes)

| Type | Required | | -------- | -------- | | function | No |

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 |

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 |

dropdownContentContainerStyle

style object for flatlist content container

| Type | Required | | ------ | -------- | | object | No |

dropdownPositionMode

Dropdown position mode: 'default' positions dropdown near button, 'bottom' positions dropdown at bottom of screen

| Type | Required | Default | | ------------------------- | -------- | ------- | | 'default' | 'bottom' | No | 'default' |

Example:

// Default mode - dropdown appears near the button
<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
/>

// Bottom mode - dropdown appears at bottom of screen
<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
  dropdownPositionMode="bottom"
/>

keyboardHeight

Keyboard height in pixels. When provided, this value will be used to calculate dropdown position when keyboard is opened. If not provided, the component will automatically detect keyboard height using the useKeyboardHeight hook.

Benefits of providing keyboardHeight prop:

• Faster position calculation (no need to wait for keyboard events)
• More reliable when keyboard detection might be delayed
• Useful for custom keyboard implementations

| Type | Required | Default | | ------- | -------- | ------- | | number | No | undefined |

Example:

// Using automatic keyboard height detection (default)
<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
  search
/>

// Providing keyboard height manually (faster calculation)
const { keyboardHeight } = useKeyboard();

<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
  search
  keyboardHeight={keyboardHeight}
/>

// Using fixed keyboard height
<SelectDropdown
  data={data}
  onSelect={onSelect}
  renderTrigger={renderTrigger}
  renderItem={renderItem}
  search
  keyboardHeight={300}
/>

License

MIT