Questions d'entretien React Native
1. Comment fonctionne React Native sous le capot ?
React Native utilise une architecture ou le code JavaScript s'execute dans un moteur JS (Hermes) et communique avec les composants natifs via un bridge (ancien) ou la New Architecture (JSI/Fabric/TurboModules). Les composants React sont mappes à des composants natifs réels (View -> UIView/Android View). Le thread JS gere la logique, le thread natif gere le rendu. La New Architecture (depuis RN 0.72+) utilise JSI (JavaScript Interface) pour des appels synchrones directs sans sérialisation JSON.
2. Expliquez la New Architecture de React Native (Fabric, TurboModules, JSI).
JSI (JavaScript Interface) : couche C++ permettant au JS d'appeler directement le C++/natif sans bridge ni sérialisation. Fabric : nouveau système de rendu qui gere les composants natifs via le JSI, permettant des mises à jour synchrones et le rendu concurrent. TurboModules : chargement paresseux des modules natifs (charges à la demande, pas au démarrage). Codegen : génération de code natif à partir des specs TypeScript/Flow. Ensemble, ces éléments améliorent significativement les performances.
3. Quelle est la différence entre Expo et React Native CLI ?
Expo est un framework au-dessus de React Native qui simplifie le développement : build dans le cloud (EAS Build), pas besoin de Xcode/Android Studio pour démarrer, modules preintegres (camera, notifications, etc.), mises à jour OTA (Over-The-Air). React Native CLI offre plus de contrôle : accès direct au code natif, configuration fine, intégration de bibliothèques natives arbitraires. En 2026, Expo est recommandé par défaut, même pour les projets complexes (Expo Dev Client permet d'ajouter du code natif).
4. Comment gérer la navigation dans React Native ?
React Navigation est la bibliothèque standard. Types de navigateurs : Stack (pile d'écrans), Tab (onglets en bas), Drawer (menu lateral), Bottom Tabs, Material Top Tabs. Chaque navigateur maintient son propre état. La navigation supporte le deep linking, les paramètres entre écrans, les headers personnalisés, les animations de transition, et les écrans modaux. Définissez les types TypeScript pour une navigation type-safe.
5. Comment optimiser les performances de React Native ?
Techniques : utilisez FlatList (pas ScrollView) pour les longues listes avec getItemLayout pour les items de taille fixe. useMemo et useCallback pour éviter les recalculs inutiles. Évitez les re-renders excessifs (React.memo, extraction de composants). Activez Hermes comme moteur JS (plus rapide, moins de mémoire). Utilisez InteractionManager pour differer les tâches lourdes après les animations. Profilez avec le Performance Monitor et Flipper.
6. Expliquez la gestion de l'état dans React Native.
Les mêmes solutions que React web : useState/useReducer pour l'état local, Context API pour l'état partage simple, Redux Toolkit pour l'état global complexe, Zustand (léger, minimaliste), Jotai (atomique), TanStack Query (React Query) pour l'état serveur (cache, revalidation, optimistic updates). Pour React Native specifiquement, MMKV (stockage cle-valeur ultra-rapide) est souvent utilisé comme couche de persistance pour le state.
7. Comment accéder aux fonctionnalités natives du téléphone ?
Avec Expo : les modules expo-camera, expo-notifications, expo-location, expo-sensors, etc. sont preintegres. Sans Expo : utilisez les packages de la communauté (react-native-camera, react-native-geolocation). Pour les fonctionnalités spécifiques non couvertes, créez un Native Module (TurboModule avec la New Architecture) : écrivez du code Swift/Kotlin et exposez-le au JS via le bridge/JSI.
8. Comment gérer les mises à jour OTA (Over-The-Air) ?
Les mises à jour OTA permettent de pousser du nouveau code JavaScript sans passer par l'App Store/Play Store. Solutions : EAS Update (Expo, gratuit pour un certain volume), CodePush (Microsoft, maintenance réduite). Limitations : vous ne pouvez mettre à jour que le code JS et les assets, pas le code natif. Pour les changements natifs, une soumission Store est nécessaire. Les mises à jour OTA sont instantanées et permettent des corrections rapides.
9. Comment gérer les styles et le responsive design ?
React Native utilise Flexbox (par défaut en column) avec des objets StyleSheet. Les dimensions sont en density-independent pixels (dp), pas en pixels réels. Pour le responsive : utilisez Dimensions API ou useWindowDimensions pour adapter le layout, Platform.select pour du style conditionnel iOS/Android, et des bibliothèques comme react-native-responsive-screen pour les pourcentages. Évitez les styles inline (recrees à chaque render), préférez StyleSheet.create.
10. Comment tester une application React Native ?
Jest : test runner par défaut (tests unitaires, snapshots). React Native Testing Library : tests de composants centres sur l'utilisateur (render, fireEvent, waitFor). Detox (Wix) : tests end-to-end sur simulateur/emulateur, le standard pour les tests E2E React Native. Maestro : alternative plus simple pour les tests E2E avec une syntaxe YAML. Moquez les modules natifs avec jest.mock(). Testez la logique métier séparément des composants UI.