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 a des composants natifs reels (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 serialisation 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 serialisation. Fabric : nouveau systeme de rendu qui gere les composants natifs via le JSI, permettant des mises a jour synchrones et le rendu concurrent. TurboModules : chargement paresseux des modules natifs (charges a la demande, pas au demarrage). Codegen : generation de code natif a partir des specs TypeScript/Flow. Ensemble, ces elements ameliorent significativement les performances.
3. Quelle est la difference entre Expo et React Native CLI ?
Expo est un framework au-dessus de React Native qui simplifie le developpement : build dans le cloud (EAS Build), pas besoin de Xcode/Android Studio pour demarrer, modules preintegres (camera, notifications, etc.), mises a jour OTA (Over-The-Air). React Native CLI offre plus de controle : acces direct au code natif, configuration fine, integration de bibliotheques natives arbitraires. En 2026, Expo est recommande par defaut, meme pour les projets complexes (Expo Dev Client permet d'ajouter du code natif).
4. Comment gerer la navigation dans React Native ?
React Navigation est la bibliotheque standard. Types de navigateurs : Stack (pile d'ecrans), Tab (onglets en bas), Drawer (menu lateral), Bottom Tabs, Material Top Tabs. Chaque navigateur maintient son propre etat. La navigation supporte le deep linking, les parametres entre ecrans, les headers personnalises, les animations de transition, et les ecrans modaux. Definissez 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 eviter les recalculs inutiles. Evitez les re-renders excessifs (React.memo, extraction de composants). Activez Hermes comme moteur JS (plus rapide, moins de memoire). Utilisez InteractionManager pour differer les taches lourdes apres les animations. Profilez avec le Performance Monitor et Flipper.
6. Expliquez la gestion de l'etat dans React Native.
Les memes solutions que React web : useState/useReducer pour l'etat local, Context API pour l'etat partage simple, Redux Toolkit pour l'etat global complexe, Zustand (leger, minimaliste), Jotai (atomique), TanStack Query (React Query) pour l'etat serveur (cache, revalidation, optimistic updates). Pour React Native specifiquement, MMKV (stockage cle-valeur ultra-rapide) est souvent utilise comme couche de persistance pour le state.
7. Comment acceder aux fonctionnalites natives du telephone ?
Avec Expo : les modules expo-camera, expo-notifications, expo-location, expo-sensors, etc. sont preintegres. Sans Expo : utilisez les packages de la communaute (react-native-camera, react-native-geolocation). Pour les fonctionnalites specifiques non couvertes, creez un Native Module (TurboModule avec la New Architecture) : ecrivez du code Swift/Kotlin et exposez-le au JS via le bridge/JSI.
8. Comment gerer les mises a jour OTA (Over-The-Air) ?
Les mises a 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 reduite). Limitations : vous ne pouvez mettre a jour que le code JS et les assets, pas le code natif. Pour les changements natifs, une soumission Store est necessaire. Les mises a jour OTA sont instantanees et permettent des corrections rapides.
9. Comment gerer les styles et le responsive design ?
React Native utilise Flexbox (par defaut en column) avec des objets StyleSheet. Les dimensions sont en density-independent pixels (dp), pas en pixels reels. Pour le responsive : utilisez Dimensions API ou useWindowDimensions pour adapter le layout, Platform.select pour du style conditionnel iOS/Android, et des bibliotheques comme react-native-responsive-screen pour les pourcentages. Evitez les styles inline (recrees a chaque render), preferez StyleSheet.create.
10. Comment tester une application React Native ?
Jest : test runner par defaut (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 metier separement des composants UI.