Un guide complet pour créer de belles applications mobiles avec Expo et React Native
La création d'applications mobiles n'a jamais été aussi simple grâce à Expo et React Native. Que vous soyez développeur web et souhaitiez toucher iOS et Android sans apprendre Swift ou Kotlin, ou une équipe produit qui a besoin d'une base de code pour deux plateformes, Expo fournit les outils, bibliothèques et pipeline de déploiement pour livrer vite et itérer en confiance. Dans ce guide, nous explorons comment construire des applications mobiles belles et performantes avec Expo, de la configuration initiale à la soumission sur les stores.
Nous couvrons la structure du projet, les patterns de navigation, le style et le thème, les modules natifs quand vous en avez besoin, et les bonnes pratiques que nous avons apprises en construisant des apps en production pour nos clients. À la fin, vous aurez un chemin clair de l'idée à l'application publiée.
Pourquoi choisir Expo ?
Expo est plus qu'un template de démarrage. C'est une plateforme de développement complète pour React Native. Il abstrait une grande partie de l'outillage natif (Xcode, Android Studio, CocoaPods, Gradle) pour que vous puissiez vous concentrer sur la logique et l'interface de votre app. Voici ce que cela implique en pratique.
Développement unifié
Écrivez une fois, déployez sur iOS et Android. React Native vous donne une base de code JavaScript (ou TypeScript) unique qui se rend en vues natives sur chaque plateforme. Expo ajoute une couche cohérente par-dessus : un seul CLI, un seul format de config, une seule façon d'ajouter des capacités natives. Vous n'avez pas besoin d'un Mac pour développer pour iOS (Expo Go et EAS Build s'en chargent), et vous n'avez pas à toucher Xcode ou Android Studio tant que vous n'avez pas besoin de personnaliser le code natif.
Cette unification accélère le développement et réduit les bugs. Corrigez un bug une fois, il est corrigé sur les deux plateformes. Ajoutez une fonctionnalité une fois, elle est disponible partout. Votre équipe peut rester dans un seul dépôt et un seul modèle mental au lieu de maintenir deux codebases natives séparées.
Mises à jour Over-the-Air
Poussez des mises à jour vers votre app sans passer par le processus de revue des stores. Avec EAS Update, vous pouvez livrer des correctifs, des changements de texte et même de petites évolutions de fonctionnalités en quelques minutes. Les utilisateurs reçoivent la mise à jour à la prochaine ouverture de l'app (ou immédiatement selon la stratégie de mise à jour). C'est un changement majeur pour la vitesse d'itération et pour corriger des problèmes critiques sans attendre Apple ou Google.
Il y a des limites : vous ne pouvez pas modifier le code natif ni ajouter de nouvelles dépendances natives via OTA. Mais pour les changements JS/TS et assets, les mises à jour OTA gardent votre app à jour sans la friction des revues store.
Écosystème riche
Expo fournit un ensemble curé de modules pour les capacités natives courantes : caméra, localisation, notifications, système de fichiers, stockage sécurisé, etc. Ces modules sont bien documentés, maintenus et conçus pour fonctionner sur iOS et Android. Quand vous avez besoin de quelque chose qui n'est pas dans le SDK Expo, vous pouvez souvent trouver un package communautaire ou écrire un config plugin pour intégrer une bibliothèque native sans eject.
L'écosystème inclut aussi EAS Build (builds cloud pour iOS et Android), EAS Submit (soumission vers les stores), et EAS Update. Vous disposez d'un workflow unique du développement à la distribution.
Pour commencer
Initialisez votre projet avec :
npx create-expo-app@latest
Choisissez un template (blank, tabs, etc.) et si vous voulez utiliser TypeScript. Nous recommandons TypeScript pour une meilleure qualité de code et un meilleur support de l'éditeur. Une fois le projet créé, placez-vous dans le répertoire et lancez le serveur de développement :
cd my-app
npx expo start
Un QR code s'affiche dans le terminal. Scannez-le avec l'app Expo Go sur votre téléphone (iOS ou Android) pour lancer votre app sur un appareil réel, ou appuyez sur i ou a pour ouvrir un simulateur iOS ou Android si vous en avez un. Les changements de code se rechargent à chaud dans l'app.
Structure du projet et navigation
Une app Expo typique peut ressembler à ceci :
app/– Routage basé sur les fichiers (si vous utilisez Expo Router) ou vos écrans principauxcomponents/– Composants UI réutilisableshooks/– Hooks personnalisésconstants/– Couleurs, layout, configassets/– Images, polices
Avec Expo Router, le répertoire app définit vos routes : app/index.tsx est l'écran d'accueil, app/settings.tsx l'écran des paramètres, app/(tabs)/ peut être un navigateur à onglets. Ce pattern est proche de Next.js et garde le routage colocalisé avec les écrans.
Pour la navigation, Expo Router utilise par défaut le routage basé sur les fichiers. Vous pouvez aussi utiliser React Navigation directement si vous préférez une navigation impérative ou une structure différente. Dans tous les cas, définissez vos navigateurs (stack, tabs, drawer) une fois et utilisez-les de façon cohérente pour que le deep linking et le comportement retour fonctionnent comme prévu.
Style et thème
React Native utilise un sous-ensemble de styles de type CSS via l'API StyleSheet. Pas de noms de classes. Vous passez des objets de style aux composants. Expo ne vous enferme pas dans une approche de style ; vous pouvez utiliser StyleSheet brut, ou ajouter une bibliothèque comme NativeWind (Tailwind pour React Native) ou Tamagui pour une approche design system.
Pour le thème (ex. mode clair/sombre), utilisez le contexte React ou une bibliothèque comme react-native-themed. Stockez couleurs, espacements et typographie dans un objet theme et consommez-le dans vos composants. Respectez l'apparence système (useColorScheme()) pour que votre app paraisse native.
Modules natifs et config plugins
Quand vous avez besoin d'une capacité native qui n'est pas dans le SDK Expo, vous avez deux options principales. D'abord, vérifiez s'il existe un config plugin Expo qui enveloppe la bibliothèque native. Beaucoup de bibliothèques populaires (ex. cartes, analytics, paiements) ont des plugins officiels ou communautaires. Ajoutez le plugin dans votre app.json ou app.config.js, lancez un prebuild si nécessaire, et le code natif est intégré sans quitter le workflow managé.
Ensuite, s'il n'existe pas de plugin, vous pouvez en écrire un vous-même (la doc Expo l'explique) ou utiliser un development build avec du code natif personnalisé. EAS Build peut produire ces builds dans le cloud, donc vous n'avez toujours pas besoin d'installer Xcode ou Android Studio en local sauf pour déboguer le code natif.
Tests et qualité
Testez sur de vrais appareils tôt et souvent. Les simulateurs sont utiles pour itérer vite, mais ils ne détectent pas tous les problèmes de performance ou les particularités des plateformes. Utilisez EAS Build pour produire des development builds et les installer sur les appareils de l'équipe, ou utilisez Expo Go pour la majorité du développement et passez aux dev builds seulement quand vous avez besoin de code natif personnalisé.
Pour les tests automatisés, envisagez Jest pour les tests unitaires et Detox ou Maestro pour les tests end-to-end. Lint avec ESLint et vérifiez les types avec TypeScript. Mettez en place une CI (ex. GitHub Actions) pour lancer les tests et les builds à chaque PR et détecter les régressions avant la release.
Déploiement
Quand vous êtes prêt à livrer, utilisez EAS Build pour produire des builds de production pour iOS et Android. Configurez l'identifiant d'app, la version et les credentials de signature dans EAS (ou liez à vos comptes Apple et Google). EAS Submit peut ensuite envoyer les builds vers l'App Store et Google Play, ou vous pouvez télécharger les artifacts et soumettre manuellement.
Avant de soumettre, vérifiez les exigences des stores : politique de confidentialité, icônes, captures d'écran et texte de la fiche store. Apple et Google ont des guidelines de revue qui peuvent retarder ou refuser votre app si elles ne sont pas respectées. Prévoyez quelques jours à une semaine pour une première revue ; les mises à jour sont souvent plus rapides.
Conclusion
Expo rend le développement mobile accessible aux développeurs web tout en conservant les performances et capacités natives. Avec une base de code unique, des mises à jour over-the-air et un chemin clair du développement au store, c'est notre choix privilégié pour les projets mobiles clients chez Realsync. Commencez par les bases présentées ici, explorez la documentation Expo pour les sujets avancés, et contactez-nous si vous avez besoin d'aide pour concevoir ou construire votre prochaine application.
