Dropdown en React Native: créalo con Modal + FlatList | We.Inc
Crea un dropdown en React Native sin librerías usando Modal y FlatList, o usa el Picker de la comunidad. Código para copiar, una vista previa web en vivo y una tabla de props.
React Native no incluye ningún dropdown ni select en su lista de componentes básicos. O construyes uno con un Pressable como disparador, un Modal y una FlatList de opciones, o instalas el paquete de la comunidad @react-native-picker/picker, que envuelve el selector nativo en Android e iOS. Construye el tuyo cuando necesites búsqueda, filas personalizadas o el mismo aspecto en todas las plataformas.
Tres formas de mostrar una lista de opciones
Enfoque
Instalación
Ideal para
Pressable + Modal + FlatList
Nada, todo es del núcleo
Estilos personalizados, búsqueda, listas largas
@react-native-picker/picker
npm install @react-native-picker/picker
El aspecto del selector propio de la plataforma
ActionSheetIOS
Nada, solo iOS
Una lista corta de acciones en iPhone
La vista previa de abajo ejecuta la misma lógica que el código de React Native que aparece más adelante, dibujada con elementos web para que puedas probarla aquí: abre la lista, fíltrala, elige una fila y ciérrala con Escape. Luego copia el componente y cambia las etiquetas web por View, Text, Pressable, Modal y FlatList.
Un Pressable muestra la opción actual, o un texto de ejemplo cuando no hay nada elegido.
Al pulsarlo se activa un indicador de apertura, que hace visible un Modal.
Dentro del Modal, una FlatList dibuja una fila Pressable por cada opción.
Al tocar una fila se invoca onChange con el valor y el indicador vuelve a false.
onRequestClose gestiona el botón Atrás de Android para que la lista siempre se pueda cerrar.
Dale al Modal un handler onRequestClose; la documentación lo marca como obligatorio en Android y Apple TV.
Activa transparent en el Modal y dibuja tu propio fondo oscurecido para que la pantalla de detrás siga visible.
Usa keyExtractor con los valores de tus opciones para que las filas mantengan claves estables cuando cambia el filtro.
Pon accessibilityRole="button" en el disparador y marca la fila elegida con accessibilityState selected.
Pasa keyboardShouldPersistTaps="handled" a la FlatList cuando haya un campo de búsqueda encima, para que un solo toque elija una fila en lugar de solo cerrar el teclado.
Preguntas frecuentes
¿React Native tiene un dropdown integrado?
No. La página de componentes básicos incluye Button y Switch entre los controles de interfaz, y nada para selects. Para un select nativo ya hecho, instala el paquete de la comunidad @react-native-picker/picker.
¿Cómo hago que el Picker parezca un dropdown en Android?
Define mode="dropdown" en el Picker. Esa prop es solo de Android; allí el valor por defecto es "dialog", que abre una lista modal. En iOS el componente muestra en su lugar la rueda nativa.
¿Por qué al tocar una opción solo se cierra el teclado?
Una lista con scroll tiene keyboardShouldPersistTaps en "never" por defecto, así que el primer toque fuera del campo con foco cierra el teclado y la fila nunca lo recibe. Pon esa prop en "handled" en la FlatList.
¿Puedo añadir búsqueda a un dropdown de React Native?
Sí, con la versión hecha a mano. Guarda un texto de búsqueda en el estado, pon un TextInput en la parte superior del Modal y pasa el array filtrado a la prop data de la FlatList.
Cuándo construir el tuyo
El Picker de la comunidad es la vía más rápida y tiene aspecto nativo en cada plataforma, lo que también significa que se ve distinto en Android y en iOS. Si tu diseño pide la misma lista en todas partes, un cuadro de filtro, iconos o dos líneas por fila, la versión con Modal te da control total en unas cincuenta líneas.
FlatList solo dibuja las filas cercanas a la pantalla, así que una lista de países o zonas horarias sigue siendo rápida dentro del Modal. Un simple map sobre un array largo dentro de un ScrollView lo dibuja todo de golpe.
Accesibilidad en un select personalizado
Los lectores de pantalla no pueden adivinar que tu Pressable abre una lista. Dale accessibilityRole="button", una etiqueta que nombre el campo y su valor actual, y define accessibilityState con selected: true en la fila elegida dentro de la lista.
Al cerrar la lista, el usuario debe volver al disparador. Mantén conectado el onRequestClose del Modal y añade un control de cierre visible para quien no use el gesto de volver.
Las props que importan en un dropdown
Props básicas que usa el dropdown personalizado
Componente
Prop
Qué hace
Modal
Muestra u oculta la lista (true por defecto)
Modal
Se dibuja sobre un fondo transparente en lugar de ocupar toda la pantalla
Modal
animationType
"none" (por defecto), "slide" o "fade"
Modal
onRequestClose
Se invoca con el botón Atrás de Android; obligatorio en Android
FlatList
data / renderItem
El array de opciones y la función que dibuja cada fila
FlatList
keyExtractor
Devuelve una clave única por opción
FlatList
keyboardShouldPersistTaps
"never" (por defecto), "always" o "handled"
Picker
Solo Android: "dialog" (por defecto) o "dropdown"
Código de dropdown para copiar
Dropdown con Pressable, Modal y FlatList
Sin dependencias. El componente padre es dueño del valor; el componente solo comunica la elección mediante onChange.
El Picker de la comunidad
Instálalo con npm install @react-native-picker/picker. onValueChange recibe el valor del elemento y su posición.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Vista previa del dropdown
Versión web del componente de React Native: la misma lógica de abrir, filtrar y elegir, dibujada con HTML para que funcione aquí.