Accueil > Formations > Développement et Ingénierie de Logiciels > Développement Mobile & Cross-Platform > React Native Avancé
Formation React Native Avancé
Passez de l'application qui fonctionne à l'application de production : nouvelle architecture, modules natifs, tests automatisés, performances et déploiement maîtrisés.
Vue d'ensemble
- Expérience réelle du développement React Native ou Expo (Hooks, navigation, gestion d'état) : avoir suivi notre formation React Native ou disposer de connaissances équivalentes
- Pratique de TypeScript
Objectifs pédagogiques
Programme détaillé
La nouvelle architecture de React Native
– Du bridge à JSI : appels synchrones entre JavaScript et le code natif, et partage direct de références
– Fabric : le moteur de rendu, le rendu concurrent (transitions, Suspense) et les mesures de mise en page synchrones
– TurboModules et Codegen : chargement à la demande des modules natifs et interfaces typées générées à partir des spécifications
– Hermes : bytecode précompilé, effets sur le temps de démarrage et la consommation mémoire
– Compatibilité des bibliothèques : couche d’interopérabilité, repérage des dépendances incompatibles, migration d’un projet existant
– Audit des dépendances d’un projet existant au regard de la nouvelle architecture
– Mesure du temps de démarrage d’une application et lecture de son bytecode Hermes
Modules natifs et étude de cas VisionCamera
– Quand recourir au natif : performances, API de plateforme non exposées, réutilisation de code C ou C++ existant
– Expo Modules API : écrire un module en Swift et en Kotlin et l’exposer à JavaScript
– Turbo Native Modules : spécification TypeScript, génération du code par Codegen, implémentation iOS et Android
– Étude de cas VisionCamera : architecture iOS et Android, code C++ relié via JSI, traitement d’images en temps réel
– Déboguer un module natif : points d’arrêt et journaux dans Xcode et Android Studio
– Modification d’un module natif simple fourni, exposant une fonction de l’appareil à JavaScript
– Lecture guidée de l’architecture de VisionCamera, du code JavaScript jusqu’au code natif
Couche de données et architecture applicative
– TanStack Query avancé : clés de requête, invalidation, requêtes parallèles et dépendantes, pagination infinie
– Mises à jour optimistes : refléter immédiatement une action de l’utilisateur et revenir en arrière en cas d’échec
– Offline-first : persistance du cache, file de mutations et reprise à la reconnexion
– Architecture en couches : séparer données, logique métier (domain) et interface pour faire évoluer l’application
– État client : critères de choix entre Zustand et Redux Toolkit en complément de l’état serveur
– Refactoring de l’accès aux données d’une application en couches data, domain et UI
– Ajout d’une pagination infinie et d’un cache persistant consultable hors ligne
Stratégie de tests automatisés
– Jest et React Native Testing Library avancés : mocks de modules natifs, tests de la navigation et des Hooks personnalisés
– MSW (Mock Service Worker) : simuler les réponses réseau pendant les tests et le développement
– Tests E2E avec Maestro : écriture de flux, interactions avec l’interface, comparaison avec Detox et Appium
– Intégration continue : exécuter les tests à chaque modification avec GitHub Actions, EAS Workflows ou Bitrise
– Mutation testing (Stryker) : mesurer la capacité d’une suite de tests à détecter les régressions
– Test d’un écran dont les appels réseau sont simulés avec MSW
– Écriture d’un flux Maestro de bout en bout et exécution dans une chaîne d’intégration continue
Debugging et profiling
– React Native DevTools : débogueur, console, inspection des composants et onglet Performance
– React DevTools Profiler : identifier les rendus superflus et leur origine
– Profiling natif : Xcode Instruments (Time Profiler, mémoire) et Android Studio Profiler (CPU, mémoire)
– Thread JavaScript et thread UI : reconnaître les blocages et les saccades, et en trouver la cause
– Corrections : mémoïsation (memo, useMemo, useCallback), React Compiler et découpage des composants
– Profilage d’un écran lent et identification de la cause des ralentissements
– Correction des rendus superflus, puis comparaison des mesures avant et après
Optimisations : listes, images et animations
– FlashList : recyclage des cellules, différences avec FlatList et migration
– Images : cache, chargement différé, redimensionnement et formats modernes (WebP, AVIF) avec expo-image
– Animations sur le thread UI : worklets Reanimated et gestes avec Gesture Handler
– Démarrage et bundle : réduire le temps de lancement et le poids de l’application
– Migration d’une liste lourde vers FlashList avec images optimisées
– Création d’une animation pilotée par un geste, exécutée sur le thread UI
Expo avancé et déploiement
– Continuous Native Generation (prebuild) : générer les projets iOS et Android à partir de la configuration, sans les maintenir à la main
– Config plugins : personnaliser la configuration native (permissions, SDK tiers, réglages iOS et Android)
– Development builds : un client de développement sur mesure, et les cas où il faut gérer soi-même les dossiers natifs
– EAS Build et EAS Submit : profils de build, signature, envoi vers TestFlight et Google Play
– EAS Update : canaux, déploiement progressif et retour à la version précédente
– Publication sans Expo : signature des APK et IPA, distribution TestFlight et Play Store
– Optimisations finales : minification et retrait des journaux de débogage
– Écriture d’un config plugin qui modifie la configuration native
– Configuration de deux canaux de mise à jour et publication d’une mise à jour OTA progressive
IA et développement React Native
– Agents de code IA sur un projet mobile : ce qu’ils accélèrent (montée de version, tests, diagnostic) et ce qui reste à vérifier
– Skills dédiés à React Native et Expo : fournir à l’agent des bonnes pratiques à jour sur les performances et les montées de version
– Serveurs MCP mobiles : accès à la documentation et à EAS (Expo MCP), pilotage des simulateurs et émulateurs, exécution de flux de test (Maestro MCP)
– Agents spécialisés : QA, performance, montée de version et préparation des releases
– Limites et bonnes pratiques : relecture du code produit, confidentialité du code source, maîtrise des coûts
Prochaines sessions
Ils nous font confiance
Cette année notre filière Développement Mobile & Cross-Platform a accompagné plus de 23 entreprises dont :
Avis des participants
Un grand merci à Marius, la formation était dense mais très riche et très claire.
Un grand merci à Arnaud LAGIEWKA
Il s'agissait d'une formation en cours particulier sur mesure, mon formateur a pu très bien s'adapter à mes besoins, il est très compétent.
Une formation riche et intense! Jean-Pierre le formateur est un e personne très sympathique et à l'écoute de nos questions et demandes.
Le formateur a su comprendre notre besoin, a pu adapter la formation selon nos souhaits, et tout s'est déroulé parfaitement!
Votre formateur
Marius S.
Formateur React
Marius intervient sur des formations portant sur le développement mobile et cross-platform. Parmi les formations qui lui sont confiées figure notamment « React Native Avancé ». Son activité de formation remonte à 2020.
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Questions fréquentes
Combien de temps dure la formation React Native Avancé ?
Cette formation se déroule sur 2 jours.
Quels sont les prérequis pour suivre la formation React Native Avancé ?
- Expérience réelle du développement React Native ou Expo (Hooks, navigation, gestion d'état) : avoir suivi notre formation React Native ou disposer de connaissances équivalentes - Pratique de TypeScript
Quel est le prix de la formation React Native Avancé ?
En inter-entreprises, elle est à 1 600 € HT par participant ; en intra-entreprise, elle est à 3 400 € HT pour le groupe. Un tarif sur-mesure est également disponible sur devis.
La formation React Native Avancé délivre-t-elle une certification ?
Cette formation ne délivre pas de certification. Une attestation de fin de formation vous sera remise à l'issue de la session.
La formation React Native Avancé est-elle éligible à un financement OPCO ?
Oui, cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
Choisissez votre formation
Mon contact chez SPARKS est professionnel et très réactif. Les échanges sont simples, efficaces, et la collaboration se déroule dans d'excellentes conditions.
