Dropdown in React Native: crealo con Modal + FlatList | We.Inc
Crea un dropdown in React Native senza librerie usando Modal e FlatList, o usa il Picker della community. Codice da copiare, un'anteprima web dal vivo e una tabella delle props.
React Native non include né dropdown né select tra i suoi componenti core. O ne costruisci uno con un Pressable come trigger, un Modal e una FlatList di opzioni, oppure installi il pacchetto della community @react-native-picker/picker, che incapsula il picker nativo su Android e iOS. Costruisci il tuo quando ti servono ricerca, righe personalizzate o lo stesso aspetto su ogni piattaforma.
Tre modi per mostrare un elenco di scelte
Approccio
Installazione
Ideale per
Pressable + Modal + FlatList
Niente, tutto core
Stile personalizzato, ricerca, elenchi lunghi
@react-native-picker/picker
npm install @react-native-picker/picker
L'aspetto del picker nativo della piattaforma
ActionSheetIOS
Niente, solo iOS
Un breve elenco di azioni su iPhone
L'anteprima qui sotto esegue la stessa logica del codice React Native più in basso, disegnata con elementi web così puoi provarla qui: apri l'elenco, filtralo, scegli una riga e chiudilo con Escape. Poi copia il componente e sostituisci i tag web con View, Text, Pressable, Modal e FlatList.
Un Pressable mostra la scelta attuale, o un placeholder quando non è scelto nulla.
Premerlo imposta un flag di apertura, che rende visibile un Modal.
Dentro il Modal, una FlatList disegna una riga Pressable per ogni opzione.
Toccare una riga chiama onChange con il valore e riporta il flag a false.
onRequestClose gestisce il tasto indietro di Android, così l'elenco si può sempre chiudere.
Dai al Modal un handler onRequestClose; la documentazione lo indica come obbligatorio su Android e Apple TV.
Imposta transparent sul Modal e disegna tu uno sfondo scurito, così la schermata dietro resta visibile.
Usa keyExtractor con i valori delle opzioni, così le righe mantengono chiavi stabili quando cambia il filtro.
Metti accessibilityRole="button" sul trigger e segna la riga scelta con accessibilityState selected.
Passa keyboardShouldPersistTaps="handled" alla FlatList quando sopra c'è un campo di ricerca, così un solo tocco sceglie una riga invece di chiudere soltanto la tastiera.
Domande frequenti
React Native ha un dropdown integrato?
No. La pagina dei componenti core elenca Button e Switch tra i controlli dell'interfaccia utente, e nulla per le select. Per una select nativa pronta all'uso, installa il pacchetto della community @react-native-picker/picker.
Come faccio a far sembrare il Picker un dropdown su Android?
Imposta mode="dropdown" sul Picker. Quella prop vale solo su Android; lì il valore predefinito è "dialog", che apre un elenco modale. Su iOS il componente mostra invece la rotella nativa.
Perché toccare un'opzione chiude soltanto la tastiera?
Un elenco scorrevole ha keyboardShouldPersistTaps impostato di default su "never", quindi il primo tocco fuori dall'input attivo chiude la tastiera e la riga non lo riceve mai. Imposta la prop su "handled" nella FlatList.
Posso aggiungere la ricerca a un dropdown React Native?
Sì, con la versione personalizzata. Tieni una stringa di ricerca nello state, metti un TextInput in cima al Modal e passa l'array filtrato alla prop data della FlatList.
Quando costruire il tuo
Il Picker della community è la strada più rapida e ha un aspetto nativo su ogni piattaforma, il che significa anche che appare diverso su Android e iOS. Se il tuo design richiede lo stesso elenco ovunque, una casella di filtro, icone o due righe per voce, la versione con Modal ti dà il pieno controllo in circa cinquanta righe.
FlatList disegna solo le righe vicine allo schermo, quindi un elenco di paesi o fusi orari resta veloce dentro il Modal. Un semplice map su un array lungo dentro una ScrollView disegna tutto in una volta.
Accessibilità per una select personalizzata
Gli screen reader non possono indovinare che il tuo Pressable apre un elenco. Dagli accessibilityRole="button", un'etichetta che nomini il campo e il suo valore attuale, e imposta accessibilityState con selected: true sulla riga scelta nell'elenco.
Chiudere l'elenco deve riportare l'utente al trigger. Tieni collegato l'onRequestClose del Modal e aggiungi un controllo di chiusura visibile per chi non usa il gesto indietro.
Le props che contano per un dropdown
Props core usate dal dropdown personalizzato
Componente
Prop
Cosa fa
Modal
Mostra o nasconde l'elenco (predefinito true)
Modal
Si disegna su uno sfondo trasparente invece di riempire lo schermo
Modal
animationType
"none" (predefinito), "slide" o "fade"
Modal
onRequestClose
Chiamata per il tasto indietro di Android; obbligatoria su Android
FlatList
data / renderItem
L'array delle opzioni e la funzione che disegna ogni riga
FlatList
keyExtractor
Restituisce una chiave univoca per ogni opzione
FlatList
keyboardShouldPersistTaps
"never" (predefinito), "always" o "handled"
Picker
Solo Android: "dialog" (predefinito) o "dropdown"
Codice del dropdown da copiare
Dropdown con Pressable, Modal e FlatList
Nessuna dipendenza. Il valore appartiene al genitore; il componente si limita a comunicare la scelta tramite onChange.
Il Picker della community
Installa con npm install @react-native-picker/picker. onValueChange riceve il valore dell'elemento e la sua posizione.
Toronto
Vancouver
Montreal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Anteprima del dropdown
Sostituto web del componente React Native: la stessa logica di apertura, filtro e scelta, disegnata in HTML così funziona qui.