Expo simplifie de nombreuses étapes du développement mobile avec React Native : démarrage d’un projet, aperçu sur appareil, accès à certaines fonctions natives et préparation des versions à distribuer. Cette formation de deux jours vous aide à comprendre ces outils et à les appliquer à un cas concret, sans perdre de vue les besoins du projet et les limites de chaque choix technique.
Vous alternerez explications, démonstrations et exercices guidés. Le fil rouge consiste à faire évoluer une petite application mobile, depuis sa structure initiale jusqu’à une version testable, en travaillant avec des pratiques que vous pourrez réutiliser dans vos projets professionnels.
Module 1 – Démarrer un projet Expo sur de bonnes bases
Comprendre l’environnement
Vous découvrirez le rôle d’Expo dans l’écosystème React Native et les différences entre démarrer rapidement avec un projet Expo et configurer soi-même davantage d’éléments natifs. Nous passerons en revue les prérequis, la création d’un projet, l’organisation des fichiers et les commandes courantes. Vous apprendrez à lancer l’application dans un navigateur ou sur un appareil, et à interpréter les messages utiles en cas d’erreur.
Un exemple concret vous permettra de comparer deux façons de partager un premier écran de démonstration avec un collègue : en lançant l’application localement et en utilisant les outils de développement disponibles. Nous discuterons aussi des situations où il est préférable de vérifier le comportement sur un vrai téléphone plutôt que de s’en tenir à l’aperçu dans le navigateur.
Exercice pratique
Créez un projet Expo, lancez-le, puis remplacez l’écran de départ par une page de présentation de service. Ajoutez un titre, un texte descriptif et un bouton, puis vérifiez le rendu sur un appareil ou un simulateur et repérez les éventuels écarts.
Module 2 – Construire des écrans React Native cohérents
Structurer l’interface
Vous verrez comment composer une interface avec les composants React Native, organiser les écrans et réutiliser des éléments communs. Nous aborderons la gestion des propriétés et de l’état, la saisie de données et les interactions simples. Une attention particulière sera portée aux différences avec le développement web : les composants ne sont pas des éléments HTML et les règles de mise en page demandent un raisonnement adapté au mobile.
À partir d’un exemple de prise de rendez-vous, nous construirons un formulaire lisible comprenant des champs, des indications de saisie et un retour visuel après validation. Vous apprendrez à éviter les écrans trop chargés et à rendre les actions principales faciles à repérer, y compris sur un petit appareil.
Exercice pratique
Ajoutez à l’application du fil rouge un écran de réservation avec plusieurs champs et un bouton de confirmation. Gérez l’état du formulaire et affichez un résumé des informations saisies après validation, en veillant à ce que l’interface reste compréhensible.
Module 3 – Organiser la navigation et les données
Faire circuler l’utilisateur dans l’application
Vous découvrirez les principes de navigation entre les écrans et la manière de structurer un parcours utilisateur. Nous aborderons le passage d’informations d’un écran à l’autre, les retours en arrière et les cas courants comme une liste menant vers une fiche de détail. Selon les besoins du projet et les outils retenus, nous verrons comment intégrer une solution de navigation compatible avec votre configuration Expo.
Pour les données, nous examinerons les options simples adaptées à un prototype et les précautions à prendre avant d’ajouter un service distant. Vous apprendrez à distinguer les données d’interface temporaires des informations qui doivent rester disponibles, et à prévoir les états de chargement, d’erreur ou d’absence de résultat. Par exemple, une liste de rendez-vous doit rester utile même si la connexion est lente.
Exercice pratique
Créez une liste de services et un écran de détail. Faites passer l’identifiant ou les informations nécessaires à l’écran suivant, puis ajoutez un état de chargement ou un message explicite lorsque les données ne sont pas disponibles.
Module 4 – Utiliser les fonctionnalités du téléphone
Relier l’application aux usages mobiles
Expo permet d’accéder à différentes capacités d’un appareil, selon les bibliothèques utilisées et la configuration du projet. Nous étudierons des exemples tels que la sélection d’une image, l’accès à la caméra ou la localisation, sans supposer que chaque fonction est disponible partout de la même manière. Vous apprendrez à demander les autorisations au bon moment, à expliquer leur utilité et à prévoir le cas où la personne les refuse.
Nous comparerons également le comportement d’un appareil réel et celui d’un simulateur. Cette vérification est essentielle pour les fonctions qui dépendent du matériel ou des réglages du téléphone. Un exemple concret : une application de suivi de visite peut proposer d’ajouter une photo, mais doit rester utilisable si l’accès à la caméra n’est pas accordé.
Exercice pratique
Ajoutez une action permettant de sélectionner une image pour illustrer une fiche. Gérez le refus d’autorisation ou l’absence de sélection avec un message clair, puis vérifiez le comportement sur un appareil ou dans l’environnement de test disponible.
Module 5 – Tester, préparer et faire évoluer l’application
Fiabiliser le parcours jusqu’à la livraison
Vous mettrez en place une démarche de vérification avant de partager une version : tester les parcours importants, contrôler les erreurs visibles et vérifier l’affichage sur plusieurs tailles d’écran. Nous aborderons le rechargement rapide pendant le développement, les limites des tests sur un seul environnement et les informations à réunir lorsqu’un problème survient.
Nous verrons aussi les grandes étapes de préparation d’une version destinée à être testée ou diffusée, ainsi que les paramètres de projet à contrôler. Les options et contraintes pouvant évoluer, l’objectif est de savoir où vérifier la documentation Expo correspondant à votre version et à votre mode de distribution, plutôt que de suivre une recette sans l’adapter.
Exercice pratique
Réalisez une vérification complète du fil rouge : testez le parcours principal, corrigez un défaut d’affichage ou de validation, puis préparez une liste de contrôle avant partage. Notez les appareils, versions et conditions de test à communiquer à votre équipe.
À retenir
Expo peut accélérer le développement React Native en facilitant le démarrage, les essais et l’accès à certaines fonctions mobiles. Pour en tirer pleinement parti, il faut choisir les outils en fonction du projet, tester sur les environnements pertinents et prévoir des alternatives lorsque les autorisations ou les données ne sont pas disponibles.
Pour aller plus loin
Après la formation, appliquez ces acquis à un petit parcours métier : décrivez les écrans, les données nécessaires et les fonctions natives réellement utiles avant d’ajouter de nouvelles dépendances. Consultez la documentation officielle d’Expo et de React Native pour vérifier les procédures correspondant à votre version, et partagez vos essais avec votre équipe afin de définir une méthode de test et de livraison adaptée à votre organisation.
