React Native | Créer des applications mobiles multiplateformes Mixte : présentiel / à distance

Cette formation de 3 jours initie les développeurs à React Native : installation pas-à-pas, création d’interfaces adaptatives et navigation multi-écrans autour d’un projet fil rouge.

Elle montre comment centraliser les données, appeler un service Web et exploiter les capacités natives du téléphone, puis détaille les techniques essentielles d’optimisation et le processus de mise en production pour iOS et Android.

Une introduction à l’IA illustre enfin son usage pour générer des tests automatisés, tout en soulignant les bonnes pratiques de relecture et de confidentialité.

A l'issue de la formation, le stagiaire sera capable de créer des applications mobiles multiplateformes avec React Native

• Connaître les Framework de développement mobile et la spécificité de React Native.
• Mettre en place un environnement de développement React Native
• Concevoir l'architecture logicielle d'une application mobile multiplateforme
• Construire une interface utilisateur fluide et performante
• Utiliser les principaux composants et les API natives proposées par React Native

Développeurs mobiles, développeurs Web, architectes, chefs de projets techniques

Jour 1 – Prendre en main React Native

Objectifs du jour : 

• Installer l'environnement de travail et lancer la première application.
• Comprendre ce qu'apporte React Native face aux autres solutions mobiles à partir des bases techniques et de conceptuelles

Contenu :

• Panorama cross-platform : pourquoi un même code peut fonctionner sur iOS et Android ; comparaison rapide avec Flutter et Kotlin Multiplatform.
• Rappel rapide des bases JS et React (en fonction du niveau des apprenants)
• Installation guidée complète : Node, Expo, simulateur ou téléphone réel — chaque étape est montrée pas-à-pas pour que tout le monde parte du même point.
• Briques de l'interface : au lieu d'écrire du code natif, on compose l'écran avec des “puzzles” (View, Text, Image, etc.) que React Native transformera en éléments iOS/Android.
• Bonnes pratiques de l'accessibilité mobile.
• Mise en page fluide : principe du “Flex” et responsive pour des UI adaptables (comparable à un tableau Excel dont les cellules se redimensionnent) pour que l'écran s'adapte aux tailles variées).
• Boucle itérative pour expérimenter sans attendre : le Hot Reload — taper, enregistrer, voir le résultat instantanément.

• Atelier fil rouge :
  • Écran “Catalogue” : créer la page liste d'une appli « Librairie », avec trois cartes-livre stylisées et adaptatives.

Jour 2 – Architecture, navigation et données

Objectifs :

• Comprendre et construire la navigation multi-écrans et passer de l'un à l'autre.
• Centraliser et sauvegarder les données (panier, préférences, etc.).
• Récupérer des informations depuis un service Web.

Contenu :

• Navigation : principe du “GPS interne” qui mémorise l'historique des écrans (piles, onglets) ; ajout d'un lien profond pour ouvrir directement une fiche depuis un e-mail.
• Gestion d'état : pourquoi stocker les données partagées dans un “tiroir commun” plutôt que dans chaque composant ; présentation du Context API puis, pour les applis plus riches, de Redux.
• Dialogue avec un serveur : étapes pour appeler une API (exemple : récupérer la fiche d'un livre), afficher un indicateur de chargement, réagir à une panne réseau.
• Formulaires conviviaux pou gestion des inputs et contrôles d'erreur : saisir une adresse ou un commentaire tout en contrôlant les erreurs de saisie.
• Accéder aux capacités natives du téléphone : demander la géolocalisation ou prendre une photo pour illustrer un profil.
• Notions de sécurité : introduction au chiffrement local et bonnes pratoqies sur les appels des APi

• Atelier fil rouge :
  • Créer un parcours complet “Détail + Panier” : relier l'écran catalogue à une fiche livre ; récupérer la fiche via un appel Web, ajouter l'article au panier commun et le sauvegarder localement.

Jour 3 – Optimisation, natif & outillage (IA)

Objectifs :

• Optimiser l'UI et préparer la mise en production.
• Étendre l'appli via modules natifs légers
• Découvrir l'aide de l'IA pour accélérer les tests.

Contenu :

• Performance UI ressentie : comprendre pourquoi une liste peut “ramer” ; utiliser le profilage intégré pour repérer les lenteurs, appliquer des optimisations simples (mémo, listes virtuelles, animation légère).
• Fonctions natives ciblées : quand React Native ne suffit pas, intégration d'un module natif (ex. appareil photo) déjà prêt ; démonstration sans entrer dans le C++.
• Du projet au store : signer, générer un paquet Android/iOS et publier la mise à jour sans passer par les boutiques grâce aux mises-à-jour OTA (over-the-air), notions de CI/CD
• Tests automatisés : principe d'un scénario Jest (“appuie sur ce bouton → je m'attends à voir…”) ; comment il protège des régressions
• Intégration IA pour dev assisté : Risques et bonnes pratiques, démonstration concrète d'outils IA (GitHub) proposant la trame d'un test

• Atelier fil rouge :
  • Optimiser la liste : profiler la liste, ajouter une animation d'apparition, générer
  • Ajouter un test automatisé Jest avec Copilot, produire un build release Android.

Docaposte Institute propose plusieurs dispositifs pédagogiques adaptés aux apprenants :

• Formation en présentiel
• En groupe (inter-entreprises ou intra-entreprise)
• En individuel (monitorat)
• En journée ou en cours du soir (sur demande spécifique)
• Formation en distanciel
• Distanciel synchrone
• Distanciel asynchrone

• Apports des connaissances communes.
• Mises en situation sur le thème de la formation et des cas concrets.
• Méthodologie d'apprentissage attractive, interactive et participative.
• Equilibre théorie / pratique : 60 % / 40 %.
• Supports de cours fournis au format papier et/ou numérique.
• Ressources documentaires en ligne et références mises à disposition par le formateur.
• Pour les formations en présentiel dans les locaux mis à disposition, les apprenants sont accueillis dans une salle de cours équipée d'un réseau Wi-Fi, d'un tableau blanc ou paperboard. Un ordinateur avec les logiciels appropriés est mis à disposition (le cas échéant).

En amont de la formation :

• Recueil des besoins des apprenants afin de disposer des informations essentielles au bon déroulé de la formation (profil, niveau, attentes particulières...).
• Auto-positionnement des apprenants afin de mesurer le niveau de départ.

Tout au long de la formation : 

• Évaluation continue des acquis avec des questions orales, des exercices, des QCM, des cas pratiques ou mises en situation...

A la fin de la formation : 

• Auto-positionnement des apprenants afin de mesurer l'acquisition des compétences.
• Evaluation par le formateur des compétences acquises par les apprenants.
• Questionnaire de satisfaction à chaud afin de recueillir la satisfaction des apprenants à l'issue de la formation.
• Questionnaire de satisfaction à froid afin d'évaluer les apports ancrés de la formation et leurs mises en application au quotidien.

• Admission sans disposition particulière