React Native : qu'est-ce que c'est, comment fonctionne Bridge et l'environnement JavaScript

Qu'est-ce que React Native

React Native est un framework créé par l'équipe Facebook (devenue Meta) et publié en open-source en 2015. Contrairement aux approches hybrides (Cordova, Ionic), React Native n'utilise pas de WebView. Au lieu de cela, les composants JavaScript sont mappés sur des éléments d'interface utilisateur natifs : View → UIView / android.view.View, Text → UILabel / TextView, ScrollView → UIScrollView / ScrollView.

La première version de React Native ne supportait que iOS. Le support Android est arrivé en 2016. La version 0.60 (2019) a introduit Autolinking — liaison automatique des dépendances natives. React Native 0.68 (2022) a inclus la nouvelle architecture Fabric + TurboModules. La version stable actuelle 0.74 (2024) est entièrement migrée vers la New Architecture avec le support de Yoga 3.0 pour la mise en page Flexbox.

Selon Statista 2024, React Native est utilisé dans 38% des projets multiplateformes. Le framework est utilisé par Discord, Instagram, Shopify, Pinterest, Skype et Uber Eats. Meta utilise React Native dans Facebook et Instagram — l'application mobile principale avec 2 milliards d'utilisateurs.

Histoire et évolution de React Native

React Native a été annoncé à la React.js Conf en janvier 2015. L'idée était de transposer le paradigme déclaratif de React du web aux plateformes mobiles. Le premier commit dans le référentiel est apparu en 2013 en tant que projet interne de Facebook pour créer l'application Facebook Groups sur iOS.

La version 0.70 (2022) a présenté Hermes comme moteur JavaScript par défaut. Hermes est un moteur compilé à l'avance (AOT) optimisé pour les appareils mobiles. Il réduit le temps de démarrage de l'application de 50% et diminue la taille de l'APK de 30% par rapport à JavaScriptCore. Hermes prend en charge ES6 et partiellement ES2020.

Différence entre React Native et React Web

React Web rend les composants dans des éléments DOM (div, span, p) via ReactDOM. React Native rend dans des composants natifs de la plateforme. Au lieu de <div>, utilisez <View> ; au lieu de <span>, utilisez <Text>. Les styles sont définis via StyleSheet.create(), qui est traduit en propriétés CSS de la plateforme. Flexbox est inclus par défaut via le moteur Yoga.

La navigation dans React Native diffère du web. Au lieu de react-router-dom, on utilise React Navigation — une bibliothèque native avec prise en charge des navigateurs Stack, Tab et Drawer. React Navigation 6.x utilise des animations natives (useNativeDriver) et l'intégration Deep Links. Pour la navigation native d'écrans avec UINavigationController iOS et Fragment Android, on utilise la bibliothèque react-native-navigation de Wix.

Architecture de React Native

L'architecture de React Native reposait traditionnellement sur Bridge — un canal JSON asynchrone entre l'environnement JavaScript et le code natif. Depuis la version 0.68, Meta a introduit la New Architecture, qui remplace Bridge par JSI (JavaScript Interface) et Fabric. Examinons les deux modèles.

Bridge et Fabric

Bridge est un protocole JSON sérialisé fonctionnant sur plusieurs threads : JS Thread (interprétation du code React), Main Thread (UI) et Native Modules Thread (API). Chaque interaction entre JS et le code natif passe par la sérialisation et la désérialisation d'objets, créant des délais lors d'appels fréquents. Lors du défilement d'une liste de 1000 éléments, Bridge génère jusqu'à 10 000 messages JSON par seconde.

Fabric est un nouveau système de rendu dans React Native. Au lieu de Bridge, Fabric utilise un arbre d'ombre (Shadow Tree) en C++ qui se synchronise avec le thread UI via JSI. Cela élimine la sérialisation JSON : le code natif C++ appelle directement des fonctions dans l'environnement JavaScript et vice versa. Fabric réduit la latence de rendu de 16 ms (Bridge) à 2–4 ms.

TurboModules est la deuxième partie de la New Architecture. Dans l'ancien modèle, tous les modules natifs étaient chargés au démarrage de l'application. TurboModules charge les modules de manière différée (lazy loading) — uniquement lorsque le code JS les demande pour la première fois. Cela réduit le temps de démarrage à froid de 40% dans les applications avec 20+ modules natifs.

Exemple d'application React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Modules natifs

Les modules natifs sont un mécanisme pour appeler les API de la plateforme depuis JavaScript. Si la fonctionnalité n'est pas couverte par les composants standard de React Native (appareil photo, Bluetooth, biométrie), le développeur écrit un module en Swift/Kotlin et l'enregistre via RCTBridgeModule ou TurboModule. La fonction native est appelée depuis JS via NativeModules.CameraModule.takePhoto().

React Native fournit des modules natifs prêts à l'emploi pour accéder à l'accéléromètre (react-native-sensors), la géolocalisation (@react-native-community/geolocation), la biométrie (react-native-biometrics) et les notifications locales (@notifee/react-native). Pour les scénarios personnalisés, Expo propose Expo Modules API — une interface plus simple pour créer des modules natifs sans Xcode ni Android Studio.

Avantages de React Native

Communauté massive — React Native a la plus grande communauté parmi les frameworks multiplateformes. Sur GitHub, le projet compte 117 000+ étoiles et 1800+ contributeurs. npm télécharge react-native 3 millions+ de fois par semaine. Les questions React Native représentent 5% de toutes les questions Stack Overflow dans la section développement mobile.

Écosystème JavaScript — les développeurs React utilisent les mêmes outils que sur le web : npm, Babel, ESLint, Prettier, Jest, TypeScript. La logique métier peut être réutilisée entre la version web (React) et l'application mobile (React Native). Les bibliothèques Redux, Zustand, React Query et React Hook Functionnent sur les deux plateformes sans modifications.

Expo est un SDK et un ensemble d'outils qui simplifient le développement React Native. Expo fournit des modules prêts à l'emploi (appareil photo, notifications, cartes, OAuth), des builds cloud (EAS Build) et des mises à jour OTA (EAS Update). Expo Go permet d'exécuter l'application sur un appareil physique sans Xcode ni Android Studio. Selon les données Expo 2024, 70% des nouveaux projets React Native utilisent Expo.

Mises à jour OTA — une fonctionnalité disponible via Expo Update et CodePush (Microsoft). Les développeurs peuvent envoyer des mises à jour du bundle JavaScript directement aux utilisateurs sans passer par la validation App Store ou Google Play. Cela accélère la correction des bugs critiques de 2–5 jours (attente de validation) à 1–2 heures.

Support TypeScript inclus par défaut depuis React Native 0.71. Le modèle de projet inclut tsconfig.json, des types pour tous les composants et la prise en charge du mode strict. Flow (typage statique de Facebook) est également pris en charge, mais Meta recommande officiellement TypeScript. Le modèle TypeScript représente 85% des nouveaux projets selon l'enquête State of React Native 2024.

Écosystème et bibliothèques populaires

npm est le registre de paquets principal pour React Native. La recherche de bibliothèques est filtrée par le mot-clé react-native. Pour l'installation, on utilise npm install ou yarn add. React Native CLI lie automatiquement les dépendances natives (depuis la version 0.60). Pour les projets Expo, l'installation est gérée via expo install, qui sélectionne la version compatible de la bibliothèque.

Bibliothèques clés

@react-navigation/native — le standard de facto pour la navigation dans React Native. La bibliothèque inclut Stack Navigator (transitions animées), Tab Navigator (menu inférieur pour iOS/Android), Drawer Navigator (menu latéral) et Material Top Tab. React Navigation 7.x (2024) a introduit la configuration statique des routes et la prise en charge complète de React 18 avec useSyncExternalStore.

react-native-reanimated — une bibliothèque pour les animations haute performance. Reanimated 3.x exécute les animations dans le thread UI (worklet), contournant le thread JS. Cela garantit 60 FPS même lors de l'animation de 100+ éléments. useSharedValue, useAnimatedStyle et withSpring remplacent l'API Animated de la bibliothèque standard. Reanimated gère les gestes tactiles via react-native-gesture-handler.

@tanstack/react-query — une bibliothèque pour la gestion d'état serveur. React Query met en cache les réponses API, récupère automatiquement les données en cas de changement de réseau (refetchOnReconnect) et prend en charge la pagination avec useInfiniteQuery. La version 5.x inclut des mises à jour optimistes pour l'UX — l'interface se met à jour avant de recevoir la réponse du serveur, puis s'ajuste.