react-native-dropdown-menu

A performant, fully customizable dropdown for React Native — single & multi-select, searchable, auto-positioning, chips, zero dependencies.

Features

• ✅ Single & multi-select
• ✅ Searchable / filterable
• ✅ Auto-positioning (above/below)
• ✅ Chip display for multi-select
• ✅ Controlled & uncontrolled modes
• ✅ Full theming (colors, icons, styles)
• ✅ Custom render functions
• ✅ Android back button handling
• ✅ Keyboard-aware auto-dismiss
• ✅ TypeScript-first
• ✅ Zero runtime dependencies

Installation

‍‍‍bash npm install react-native-dropdown-menu

or

yarn add react-native-dropdown-menu ‍‍‍

No native linking required. Pure JS.

Quick Start

‍‍‍tsx import { DropDownMenu } from 'react-native-dropdown-menu';

const ITEMS = [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Cherry', value: 'cherry' }, ];

export default function App() { const [value, setValue] = useState(null);

return ( ); } ‍‍‍

Multi-Select

‍‍‍tsx const [values, setValues] = useState([]);

‍‍‍

Theming

‍‍‍tsx <DropDownMenu data={ITEMS} value={value} onSelect={setValue} colors={{ primary: '#6C63FF', background: '#1A1A2E', text: '#EAEAEA', border: '#333', chipBackground: '#2A2A3E', }} /> ‍‍‍

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | DropDownItem[] | required | Array of { label, value } | | value | string \| number \| null \| array | required | Selected value(s) | | onSelect | (value) => void | — | Selection callback | | placeholder | string | 'Select item' | Placeholder text | | title | string | — | Label above trigger | | multiple | boolean | false | Enable multi-select | | searchable | boolean | false | Enable search | | maxSelections | number | — | Max multi-select items | | dropDownDirection | 'AUTO' \| 'TOP' \| 'BOTTOM' | 'AUTO' | Force direction | | isOpen | boolean | — | Controlled open state | | onOpenChange | (open) => void | — | Open state callback | | showError | boolean | false | Show error message | | errorMessage | string | — | Custom error text | | colors | DropDownColors | defaults | Theme colors | | icons | DropDownIcons | fallbacks | Custom icon sources |

License

MIT