Expo UI (@expo/ui)

@expo/ui rend une véritable interface native depuis React : SwiftUI sur iOS, Jetpack Compose sur Android. Commencez par ses composants universels (un seul arbre pour iOS, Android et web) et passez aux couches spécifiques à chaque plateforme (SwiftUI/Jetpack Compose) uniquement quand la couche universelle ne suffit pas. Elle propose aussi des remplaçants clés en main pour migrer depuis les bibliothèques d'UI de la communauté React Native.

Ces instructions suivent le dernier Expo SDK. La couche universelle nécessite SDK 56+. Les remplaçants clés en main et les couches spécifiques à chaque plateforme existent aussi sur SDK 55. Pour les détails des composants sur un SDK particulier, consultez la documentation Expo UI pour cette version.

Installation

npx expo install @expo/ui

Sur SDK 56, @expo/ui fonctionne dans Expo Go, donc npx expo start l'exécute directement — aucune build personnalisée requise. Sur les anciens SDKs, créez d'abord un dev client (npx expo run:ios / npx expo run:android).

Chaque arbre @expo/ui — universel ou spécifique à une plateforme — doit être enveloppé dans Host.

Choisir une approche (lisez d'abord ceci)

Parcourez cette liste et arrêtez-vous au premier niveau qui répond à votre besoin :

1. Composants universels — commencez ici. Importez depuis la racine @expo/ui. Un seul arbre de composants s'exécute sans modification sur iOS, Android et web depuis une seule source (Compose sur Android, SwiftUI sur iOS, react-native-web/react-dom sur web). Aucune séparation de fichiers par plateforme. → ./references/universal.md

2. Spécifiques à la plateforme (SwiftUI / Jetpack Compose). Importez depuis @expo/ui/swift-ui ou @expo/ui/jetpack-compose. Utilisez uniquement quand la couche universelle manque d'un composant ou d'un modificateur dont vous avez besoin, ou quand vous avez besoin d'un comportement ou d'une optimisation spécifique à la plateforme. Inconvénient : vous écrivez deux arbres et les séparez en fichiers .ios.tsx / .android.tsx (ou avec une branche sur Platform.OS) — plus de code à maintenir. → ./references/swift-ui.md et ./references/jetpack-compose.md

Vous utilisez déjà une bibliothèque d'UI de la communauté RN ? @expo/ui propose aussi des remplaçants clés en main — des substituts API-compatibles pour les bibliothèques populaires (@gorhom/bottom-sheet, @react-native-community/datetimepicker, et plus), importés depuis @expo/ui/community/<name>. C'est un chemin de migration latéral pour remplacer une dépendance existante, pas une étape dans la décision universel-vs-plateforme ci-dessus. → ./references/drop-in-replacements.md

Références

Consultez ces ressources au besoin :

references/
  universal.md             Composants universels @expo/ui et quand les utiliser (SDK 56+)
  drop-in-replacements.md  Remplaçants API-compatibles pour les bibliothèques d'UI de la communauté RN
  swift-ui.md              Interface utilisateur iOS spécifique à la plateforme : composants @expo/ui/swift-ui, modificateurs, RNHostView, useNativeState
  jetpack-compose.md       Interface utilisateur Android spécifique à la plateforme : composants @expo/ui/jetpack-compose, modificateurs, caveat LazyColumn, icônes, useNativeState