Dropdown no React Native: crie um com Modal + FlatList | We.Inc
Crie um dropdown no React Native sem biblioteca usando Modal e FlatList, ou use o Picker da comunidade. Código para copiar, uma prévia web ao vivo e uma tabela de props.
O React Native não traz nenhum dropdown ou select na sua lista de componentes principais. Você monta um a partir de um gatilho Pressable, um Modal e uma FlatList de opções, ou instala o pacote da comunidade @react-native-picker/picker, que encapsula o picker nativo no Android e no iOS. Monte o seu quando precisar de busca, linhas personalizadas ou o mesmo visual em todas as plataformas.
Três formas de mostrar uma lista de opções
Abordagem
Instalação
Melhor para
Pressable + Modal + FlatList
Nada, tudo nativo
Estilo personalizado, busca, listas longas
@react-native-picker/picker
npm install @react-native-picker/picker
O visual do picker da própria plataforma
ActionSheetIOS
Nada, só iOS
Uma lista curta de ações no iPhone
A prévia abaixo roda a mesma lógica do código React Native mais adiante, desenhada com elementos web para você testar aqui: abra a lista, filtre, escolha uma linha e feche com Escape. Depois copie o componente e troque as tags web por View, Text, Pressable, Modal e FlatList.
Um Pressable mostra a opção atual, ou um placeholder quando nada foi escolhido.
Tocar nele ativa uma flag de aberto, que torna um Modal visível.
Dentro do Modal, uma FlatList renderiza uma linha Pressable por opção.
Tocar em uma linha chama onChange com o valor e volta a flag para false.
onRequestClose trata o botão voltar do Android para que a lista sempre possa ser fechada.
Dê ao Modal um handler onRequestClose; a documentação o marca como obrigatório no Android e na Apple TV.
Defina transparent no Modal e desenhe o seu próprio fundo escurecido para que a tela atrás continue visível.
Use keyExtractor com os valores das opções para que as linhas mantenham keys estáveis quando o filtro muda.
Coloque accessibilityRole="button" no gatilho e marque a linha escolhida com accessibilityState selected.
Passe keyboardShouldPersistTaps="handled" para a FlatList quando houver um campo de busca acima dela, para que um toque escolha a linha em vez de só fechar o teclado.
Perguntas frequentes
O React Native tem um dropdown nativo?
Não. A página de componentes principais lista Button e Switch entre os controles de interface, e nada para selects. Para um select nativo pronto, instale o pacote da comunidade @react-native-picker/picker.
Como faço o Picker parecer um dropdown no Android?
Defina mode="dropdown" no Picker. Essa prop é só do Android; lá o padrão é "dialog", que abre uma lista em modal. No iOS o componente mostra a roda nativa.
Por que tocar em uma opção só fecha o teclado?
Uma lista com rolagem usa "never" como padrão em keyboardShouldPersistTaps, então o primeiro toque fora do campo em foco fecha o teclado e a linha nunca o recebe. Defina a prop como "handled" na FlatList.
Posso adicionar busca a um dropdown no React Native?
Sim, com a versão personalizada. Guarde uma string de busca no state, coloque um TextInput no topo do Modal e passe o array filtrado para a prop data da FlatList.
Quando montar o seu
O Picker da comunidade é o caminho mais rápido e tem visual nativo em cada plataforma, o que também significa que ele fica diferente no Android e no iOS. Se o seu design pede a mesma lista em todo lugar, uma caixa de filtro, ícones ou duas linhas por item, a versão com Modal dá controle total em cerca de cinquenta linhas.
A FlatList só renderiza as linhas próximas da tela, então uma lista de países ou fusos horários continua rápida dentro do Modal. Um map simples sobre um array longo dentro de uma ScrollView renderiza tudo de uma vez.
Acessibilidade em um select personalizado
Leitores de tela não conseguem adivinhar que o seu Pressable abre uma lista. Dê a ele accessibilityRole="button", um rótulo que diga o nome do campo e o valor atual, e defina accessibilityState com selected: true na linha escolhida dentro da lista.
Fechar a lista deve devolver o usuário ao gatilho. Mantenha o onRequestClose do Modal conectado e adicione um controle de fechar visível para quem não usa o gesto de voltar.
Props que importam em um dropdown
Props principais usadas pelo dropdown personalizado
Componente
Prop
O que faz
Modal
Mostra ou esconde a lista (padrão true)
Modal
Renderiza sobre um fundo transparente em vez de ocupar a tela inteira
Modal
animationType
"none" (padrão), "slide" ou "fade"
Modal
onRequestClose
Chamado pelo botão voltar do Android; obrigatório no Android
FlatList
data / renderItem
O array de opções e a função que desenha cada linha
FlatList
keyExtractor
Retorna uma key única por opção
FlatList
keyboardShouldPersistTaps
"never" (padrão), "always" ou "handled"
Picker
Só Android: "dialog" (padrão) ou "dropdown"
Código de dropdown para copiar
Dropdown com Pressable, Modal e FlatList
Sem dependências. O componente pai é dono do valor; o componente só informa a escolha por onChange.
O Picker da comunidade
Instale com npm install @react-native-picker/picker. onValueChange recebe o valor do item e a posição dele.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Prévia do dropdown
Versão web do componente React Native: a mesma lógica de abrir, filtrar e escolher, desenhada com HTML para rodar aqui.