Liste déroulante React Native : avec ou sans librairie
Guide de la liste déroulante React Native
Liste déroulante React Native : la créer avec Modal + FlatList | We.Inc
Créez une liste déroulante React Native sans librairie avec Modal et FlatList, ou utilisez le Picker communautaire. Code à copier, aperçu web en direct et tableau des props.
React Native ne fournit aucune liste déroulante ni aucun select parmi ses composants de base. Soit vous en construisez une à partir d'un déclencheur Pressable, d'un Modal et d'une FlatList d'options, soit vous installez le paquet communautaire @react-native-picker/picker, qui enveloppe le sélecteur natif sur Android et iOS. Construisez la vôtre quand vous avez besoin d'une recherche, de lignes personnalisées ou d'un rendu identique sur toutes les plateformes.
Trois façons d'afficher une liste de choix
Approche
Installation
Idéal pour
Pressable + Modal + FlatList
Rien, tout est natif
Style personnalisé, recherche, longues listes
@react-native-picker/picker
npm install @react-native-picker/picker
Le rendu du sélecteur propre à la plateforme
ActionSheetIOS
Rien, iOS uniquement
Une courte liste d'actions sur iPhone
L'aperçu ci-dessous exécute la même logique que le code React Native plus bas, dessinée avec des éléments web pour que vous puissiez l'essayer ici : ouvrez la liste, filtrez-la, choisissez une ligne et fermez-la avec Échap. Copiez ensuite le composant et remplacez les balises web par View, Text, Pressable, Modal et FlatList.
Un Pressable affiche le choix actuel, ou un texte indicatif quand rien n'est sélectionné.
Un appui active un indicateur d'ouverture, qui rend un Modal visible.
Dans le Modal, une FlatList affiche une ligne Pressable par option.
Un appui sur une ligne appelle onChange avec la valeur et remet l'indicateur à false.
onRequestClose gère le bouton retour d'Android pour que la liste puisse toujours être fermée.
Donnez au Modal un gestionnaire onRequestClose : la documentation l'indique comme obligatoire sur Android et Apple TV.
Activez transparent sur le Modal et dessinez votre propre fond assombri pour que l'écran derrière reste visible.
Utilisez keyExtractor avec les valeurs de vos options pour que les lignes gardent des clés stables quand le filtre change.
Mettez accessibilityRole="button" sur le déclencheur et marquez la ligne choisie avec accessibilityState selected.
Passez keyboardShouldPersistTaps="handled" à la FlatList quand un champ de recherche se trouve au-dessus, pour qu'un seul appui sélectionne une ligne au lieu de seulement fermer le clavier.
Questions fréquentes
React Native a-t-il une liste déroulante intégrée ?
Non. La page des composants de base liste Button et Switch parmi les contrôles d'interface, et rien pour les select. Pour un select natif prêt à l'emploi, installez le paquet communautaire @react-native-picker/picker.
Comment donner au Picker l'apparence d'une liste déroulante sur Android ?
Définissez mode="dropdown" sur le Picker. Cette prop existe uniquement sur Android ; la valeur par défaut y est "dialog", qui ouvre une liste modale. Sur iOS, le composant affiche plutôt la roue native.
Pourquoi un appui sur une option ferme-t-il seulement le clavier ?
Une liste défilante règle keyboardShouldPersistTaps sur "never" par défaut : le premier appui hors du champ actif ferme le clavier et la ligne ne le reçoit jamais. Réglez la prop sur "handled" dans la FlatList.
Puis-je ajouter une recherche à une liste déroulante React Native ?
Oui, avec la version personnalisée. Gardez une chaîne de recherche dans le state, placez un TextInput en haut du Modal et passez le tableau filtré à la prop data de la FlatList.
Quand construire la vôtre
Le Picker communautaire est la voie la plus rapide et a un rendu natif sur chaque plateforme, ce qui signifie aussi qu'il diffère entre Android et iOS. Si votre design demande la même liste partout, un champ de filtre, des icônes ou deux lignes par option, la version avec Modal vous donne un contrôle total en une cinquantaine de lignes.
FlatList n'affiche que les lignes proches de l'écran, donc une liste de pays ou de fuseaux horaires reste rapide dans le Modal. Un simple map sur un long tableau dans une ScrollView affiche tout d'un coup.
Accessibilité d'un select personnalisé
Les lecteurs d'écran ne peuvent pas deviner que votre Pressable ouvre une liste. Donnez-lui accessibilityRole="button", un libellé qui nomme le champ et sa valeur actuelle, et définissez accessibilityState avec selected: true sur la ligne choisie dans la liste.
Fermer la liste doit ramener l'utilisateur au déclencheur. Gardez le onRequestClose du Modal branché et ajoutez un bouton de fermeture visible pour les personnes qui n'utilisent pas le geste retour.
Les props utiles pour une liste déroulante
Props de base utilisées par la liste déroulante personnalisée
Composant
Prop
Rôle
Modal
Affiche ou masque la liste (true par défaut)
Modal
S'affiche sur un fond transparent au lieu de remplir l'écran
Modal
animationType
"none" (par défaut), "slide" ou "fade"
Modal
onRequestClose
Appelé pour le bouton retour d'Android ; obligatoire sur Android
FlatList
data / renderItem
Le tableau d'options et la fonction qui dessine chaque ligne
FlatList
keyExtractor
Renvoie une clé unique par option
FlatList
keyboardShouldPersistTaps
"never" (par défaut), "always" ou "handled"
Picker
Android uniquement : "dialog" (par défaut) ou "dropdown"
Code de liste déroulante à copier
Liste déroulante avec Pressable, Modal et FlatList
Aucune dépendance. Le parent détient la valeur ; le composant ne fait que signaler le choix via onChange.
Le Picker communautaire
Installez-le avec npm install @react-native-picker/picker. onValueChange reçoit la valeur de l'élément et sa position.
Toronto
Vancouver
Montréal
Calgary
Ottawa
Halifax
Winnipeg
Victoria
Aperçu de la liste déroulante
Équivalent web du composant React Native : la même logique d'ouverture, de filtre et de sélection, dessinée en HTML pour fonctionner ici.