The web gives you <select> for free. React Native gives you nothing. There is no dropdown in core, and the gap has been filled by a dozen libraries, half of them last published years ago, all with different ideas about whether a dropdown should look like iOS, like Android, or like a website. Pick wrong and you find out three months later when the list renders behind the next field on Android, or when product asks for search and the library cannot do it.
This is a practical comparison of the React Native dropdown and picker options that are worth considering in late 2026, with versions and maintenance status checked on npm in October, code for the ones I would actually ship, and a short decision table at the end.
First, decide what you mean by “dropdown”
Three different components hide behind that word, and most of the bad library choices I have seen come from not separating them:
- A native picker. The OS control: a menu button or wheel on iOS, a dropdown or dialog on Android. Short lists, single choice, zero styling effort, perfect accessibility. Looks different on each platform, which is the point.
- A custom select. A field that opens a list you render yourself, usually with search, icons, multi-select, or a design that must be identical on both platforms. More work, more control, more bugs.
- An action menu. A button that opens a native menu of commands (Edit, Share, Delete). Not a form field at all, but people reach for dropdown libraries to build it and regret it.
Answer that first and the library mostly picks itself.
The options at a glance
| Library | Type | Version (Oct 2026) | Last publish | Weekly downloads |
|---|---|---|---|---|
@react-native-picker/picker |
Native picker | 2.11.4 | Oct 2025 | ~1.04M |
@expo/ui (universal Picker) |
Native picker | 57.0.21 | Oct 2026 | ~5.5M (whole package) |
react-native-element-dropdown |
Custom select | 2.12.4 | Jan 2025 | ~188K |
react-native-dropdown-picker |
Custom select | 5.4.6 | Mar 2023 | ~190K |
react-native-picker-select |
Wrapper over the native picker | 9.3.1 | Aug 2024 | ~206K |
@rn-primitives/select |
Headless select | 1.5.2 | Jul 2026 | ~201K |
@react-native-menu/menu |
Native action menu | 2.0.0 | Sep 2025 | ~452K |
zeego |
Cross-platform menu | 3.0.6 | Mar 2025 | ~162K |
Download numbers are npm’s last-week figures and they mostly measure what old tutorials told people to install. Use them as a sign of how many people will have hit the same bug as you, not as a quality score.
Native pickers
@react-native-picker/picker
The direct descendant of the old core Picker, maintained by the community, and still the default answer for a short single-choice list. It is in Expo’s bundled module list (2.11.4 for both SDK 57 and the SDK 58 beta), so npx expo install @react-native-picker/picker just works.
import { useState } from 'react';
import { Picker } from '@react-native-picker/picker';
export function CountryField() {
const [country, setCountry] = useState('gb');
return (
<Picker
selectedValue={country}
onValueChange={(value) => setCountry(value)}
mode="dropdown" // Android: 'dialog' (default) or 'dropdown'
prompt="Country" // Android dialog title
accessibilityLabel="Country"
>
<Picker.Item label="United Kingdom" value="gb" />
<Picker.Item label="Germany" value="de" />
<Picker.Item label="Canada" value="ca" />
</Picker>
);
}
Things to know before you commit to it:
- On iOS it renders an inline wheel that takes up a lot of vertical space. Most designs put it in a modal or bottom sheet rather than inline in a form. Our modals guide covers both containers.
- Styling is limited by design.
itemStyleworks on iOS,dropdownIconColorandselectionColoron Android. If the designer wants custom rows with icons, this is the wrong component. - No search, no multi-select. Fine for 5 to 30 options. For 200 countries, users will hate scrolling a wheel.
@expo/ui universal Picker
If you are on Expo, this is the newer and better-looking way to get a native picker. @expo/ui ships a universal Picker that renders SwiftUI on iOS and Jetpack Compose on Android, with a menu appearance (a compact button that opens a popup, the default on both platforms) and a wheel appearance that is iOS only and falls back to the platform dropdown elsewhere. It needs to sit inside a Host:
import { useState } from 'react';
import { Host, Row, Spacer, Text, Picker } from '@expo/ui';
const PLANS = [
{ label: 'Monthly', value: 'month' },
{ label: 'Yearly', value: 'year' },
];
export function PlanField() {
const [plan, setPlan] = useState('month');
return (
<Host matchContents={{ vertical: true }} style={{ width: '100%' }}>
<Row alignment="center" spacing={12} style={{ padding: 16 }}>
<Text>Billing</Text>
<Spacer flexible />
<Picker selectedValue={plan} onValueChange={setPlan}>
{PLANS.map((p) => (
<Picker.Item key={p.value} label={p.label} value={p.value} />
))}
</Picker>
</Row>
</Host>
);
}
The menu appearance is what iOS users now expect from a settings-style field, and it is what @react-native-picker/picker does not give you on iOS. Expo’s docs say to prefer this universal Picker for new code, and to use @expo/ui/community/picker only if you need a drop-in shim for the @react-native-picker/picker API. The trade-off is that you are now mixing native UI trees into your React Native layout, which is great for a field and awkward for a whole form. For more on where Expo fits, see What is Expo.
Custom selects
react-native-element-dropdown
If I need a styled select with search on both platforms and I am not already on a component library, this is the one I reach for. It renders the list itself, positions it above or below the field automatically, and has a MultiSelect sibling with the same API.
import { useState } from 'react';
import { StyleSheet } from 'react-native';
import { Dropdown } from 'react-native-element-dropdown';
type Option = { label: string; value: string };
const LANGS: Option[] = [
{ label: 'TypeScript', value: 'ts' },
{ label: 'Kotlin', value: 'kt' },
{ label: 'Swift', value: 'swift' },
// ...
];
export function LanguageField() {
const [value, setValue] = useState<string | null>(null);
return (
<Dropdown
style={styles.field}
data={LANGS}
labelField="label"
valueField="value"
value={value}
onChange={(item) => setValue(item.value)}
placeholder="Select a language"
search
searchPlaceholder="Search"
maxHeight={320}
dropdownPosition="auto"
accessibilityLabel="Language"
/>
);
}
const styles = StyleSheet.create({
field: { height: 48, borderWidth: 1, borderColor: '#ccc', borderRadius: 8, paddingHorizontal: 12 },
});
Note that onChange hands you the whole item, not the value, which trips people up the first time. renderItem lets you draw custom rows, searchQuery lets you replace the default filter (useful for accent-insensitive search), and mode="modal" centers the list on screen, which is the escape hatch when the field sits near the bottom of a keyboard-heavy form.
The honest caveat: the last release was January 2025. It is pure JavaScript and still works on current React Native, but you are adopting a library without an active maintainer, so pin the version and be ready to patch it.
react-native-dropdown-picker
Still in a lot of tutorials. Version 5 uses a controlled API where you pass state setters in (open, setOpen, value, setValue, items, setItems), and listMode chooses between FLATLIST, SCROLLVIEW and MODAL. Its best-known problem is stacking: the open list renders in place, so with two pickers stacked vertically, the upper one’s list ends up behind the lower one on Android unless you juggle zIndex and zIndexInverse on each. Inside a ScrollView you also need listMode="SCROLLVIEW" or MODAL to avoid the nested VirtualizedList warning.
The npm package was last published in March 2023, although the repository shows activity this year. For a new project I would not start here. For an existing one that works, there is no urgent reason to rip it out.
react-native-picker-select
A wrapper that renders a text-input-looking field and opens @react-native-picker/picker under the hood (it lists it as a peer dependency). It is a reasonable way to make the native picker look like the rest of a form. It inherits the native picker’s limits (no search, no multi-select) and adds its own styling layer on top, and the last publish was August 2024.
@rn-primitives/select (headless)
If your app is built on a shadcn-style component layer such as NativeWind with react-native-reusables, @rn-primitives/select is the headless primitive underneath: Radix-like parts (Root, Trigger, Content, Item) with no styles, rendered through a portal, and published as recently as July 2026. It is the right choice when you want the select to match a design system exactly and you are willing to own the styling. It is the wrong choice if you just need a field by Friday.
Component library selects
If you already use a UI kit, use its select before adding another dependency. React Native Paper does not ship a select in core, and the community react-native-paper-dropdown (2.3.1, August 2024) fills that gap; our React Native Paper guide shows the Menu pattern you can build on instead. Tamagui and gluestack ship their own Select. Consistency with the rest of your forms beats a marginally better standalone library.
Action menus are not dropdowns
When the thing you are building is a button that opens a list of actions, do not use a select library. Use a native menu, because users already know how it behaves and it gets accessibility right without you trying.
import { MenuView } from '@react-native-menu/menu';
<MenuView
title="Message"
actions={[
{ id: 'reply', title: 'Reply' },
{ id: 'copy', title: 'Copy' },
{ id: 'delete', title: 'Delete', attributes: { destructive: true } },
]}
onPressAction={({ nativeEvent }) => handle(nativeEvent.event)}
shouldOpenOnLongPress={false}
>
<MoreButton />
</MenuView>
@react-native-menu/menu (2.0.0) wraps UIMenu on iOS and PopupMenu on Android. zeego (3.0.6) gives you a Radix-style API that also works on web, but check its peer dependencies before installing: 3.0.6 pins @react-native-menu/menu to exactly 1.2.2, which conflicts with menu 2.x. On Expo, @expo/ui also has native ContextMenu and Menu components for SwiftUI and a DropdownMenu for Compose.
Five dropdown bugs you will meet
- The list renders behind the next field. On Android, an in-place dropdown inside a parent with a lower
zIndexorelevationis drawn underneath its siblings. Either render the list in a modal or portal (element-dropdown and most headless selects do), or setzIndexon the containers, highest at the top. - The keyboard covers the list. A searchable select near the bottom of a form opens its list, then the keyboard slides over it. Use a modal mode for fields in the lower half of the screen, or move the whole picker into a bottom sheet.
- Nested VirtualizedList warning. A dropdown backed by a
FlatListinside aScrollView. Switch the dropdown to aScrollView-based list for short data, or a modal for long data. - Controlled value that does not update. Most libraries match the selected item by
valuewith strict equality. If your values are numbers in state and strings in the data (or the reverse), nothing ever looks selected. - Screen readers announce nothing useful. Custom selects are a
Pressableand a list. Give the trigger anaccessibilityLabeland make sure it announces the current value. The native options get this for free, which is a good reason to prefer them for simple fields.
Which React Native dropdown should you use?
| You need | Use |
|---|---|
| Short single-choice list, any setup | @react-native-picker/picker |
| Short single-choice list on Expo, modern iOS look | @expo/ui Picker (menu appearance) |
| Search, icons, identical look on both platforms | react-native-element-dropdown (pin it) |
| Multi-select with search | react-native-element-dropdown MultiSelect |
| Match a shadcn-style design system | @rn-primitives/select |
| Already on Paper, Tamagui, gluestack | Your kit’s select |
| A button that opens actions | @react-native-menu/menu or @expo/ui menus |
My default for a new app: native picker for anything under twenty options, element-dropdown in a modal for anything longer or searchable, native menus for actions. That covers almost every form I have built, and it keeps the custom code to the one place where the design actually needs it.
FAQ
Does React Native have a built-in dropdown?
No. The old core Picker was removed and now lives in the community package @react-native-picker/picker. Everything else is a third-party library.
What is the best dropdown library for React Native?
For a native control, @react-native-picker/picker or the @expo/ui Picker on Expo. For a styled, searchable select, react-native-element-dropdown. The right one depends on whether you need search and custom styling.
How do I make a searchable dropdown in React Native?
Native pickers do not support search. Use react-native-element-dropdown with the search prop, or build one from a headless select plus a TextInput and a filtered list.
Why is my dropdown list hidden behind other components on Android?
Android draws views in order and by elevation. Render the list in a modal or portal, or give each dropdown container a zIndex that decreases down the form.
Is react-native-dropdown-picker still maintained?
The last npm release, 5.4.6, was in March 2023. It still works in many apps, but for new projects a more recently published option is a safer start.