React Native has no <select>. That is why “react native dropdown” is a search, not a component you import from react-native and ship.

On the web, a drop-down list is one tag. On a phone it is a control you have to design: how it opens, how it closes, whether it looks like iOS or Android, and whether the options sit on top of the rest of the screen instead of disappearing under it.

React Native Has No Built-In Select

Core React Native used to ship a Picker. It was pulled out into @react-native-picker/picker. You can still install that package. On iOS it still renders as a spinning wheel. On Android it looks closer to a spinner. Those two screens are not the same product.

If your form asks a field tech to mark a job Pending, In progress, or Done, a wheel that eats half the screen is the wrong control. A compact dropdown that opens a short list, then closes, is the one people expect from every other app on the phone.

That gap is why tutorials, npm packages, and Reddit threads all answer the same question: how do I add a dropdown that looks like a dropdown on both platforms.

Glowing cyan React atom logo floating over a purple ring in starry space

Build a React Native Dropdown With a Modal

A Pressable that opens a Modal is the pattern that survives real layouts. An absolutely positioned list looks fine on a blank demo screen. It vanishes the moment a parent uses overflow: 'hidden', a card clips it, or a sibling view sits higher in the stack.

import { useState } from "react";
import { FlatList, Modal, Pressable, Text, View } from "react-native";

const OPTIONS = ["Pending", "In progress", "Done"];

export function StatusDropdown({ value, onChange }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Pressable onPress={() => setOpen(true)} accessibilityRole="button">
        <Text>{value ?? "Select a status"}</Text>
      </Pressable>

      <Modal visible={open} transparent animationType="fade">
        <Pressable style={{ flex: 1 }} onPress={() => setOpen(false)}>
          <View>
            <FlatList
              data={OPTIONS}
              keyExtractor={(item) => item}
              renderItem={({ item }) => (
                <Pressable
                  onPress={() => {
                    onChange(item);
                    setOpen(false);
                  }}
                >
                  <Text>{item}</Text>
                </Pressable>
              )}
            />
          </View>
        </Pressable>
      </Modal>
    </>
  );
}

The trigger stays in the form. The list lives in a modal, so it is not fighting z-index with the next card. Tapping outside closes it. A FlatList keeps the options cheap if the list grows past a handful of statuses.

Style the trigger so it looks like a field — border, padding, a chevron — and keep the option list short enough to scan with a thumb. That is a React Native dropdown example you can ship without a package.

If this screen is one of several in a stack, pick the navigator first. File-based Expo Router and React Navigation handle a modal overlay differently than a nested stack, and that call is covered in our React Native navigation guide.

When a Dropdown Library Is Worth the Install

A custom control is enough for five to fifteen options and a single choice. A library starts to pay for itself when the list is the product.

  • Search: a city, a SKU, or a client name. You need a text field inside the menu, not a scroll of 400 rows.
  • Multi-select: tags, trades, or notification types. Building checked rows, a “done” button, and a chip row is more code than it looks.
  • Native look on purpose: if you want the iOS wheel or the Android spinner, @react-native-picker/picker is the honest choice. Do not fight it into a web-style dropdown.

Packages that show up in real projects include react-native-element-dropdown and react-native-dropdown-picker. Before you add either, read the last publish date and the open issues for Expo. An abandoned picker will cost more than the afternoon you saved.

Do not install a dropdown kit to avoid writing a Pressable. That extra native module is one more thing that can stall a Play Store or App Store build.

Three Bugs That Make the Control Feel Broken

These are the failures people actually search after the first install.

  • The list hides behind the next view: absolute position plus a parent that clips. Move the menu to a Modal (or a portal) instead of raising zIndex until something else breaks.
  • The keyboard covers the options: wrap the screen in KeyboardAvoidingView, and still prefer a modal so the list is not trapped in the scroll under the keyboard.
  • The screen hitch when the menu opens: mapping two hundred <Text> nodes will hitch. Use FlatList. If the whole app is already slow, the dropdown is not the first leak — start with React Native performance.

The trigger also needs a role and a label. The selected value should still make sense when VoiceOver or TalkBack reads the field with the menu closed.

If the Dropdown Is the Easy Part

A dropdown is a form control. The product question underneath it is whether that form belongs in a store app at all.

If people pick a status on a phone and also on a laptop at the shop, a web app versus a mobile app may be the cheaper split. React Native is the right bet when the phone has to act like hardware, or when you already committed to both stores — that path is native, cross-platform, or web.

If you are stuck between a browser tool and a React Native dropdown inside a store listing, that is the call we take on web app development. Bring the form you run today. Fifteen minutes on the calendar is enough to say which one you are actually building.