Pendant une décennie, le débat « hybride contre autochtone » a été une guerre sainte. Les puristes natifs affirmaient que JavaScript ne pourrait jamais atteindre 60 FPS. Les partisans du multiplateforme ont affirmé que le développement strict des autochtones était un suicide financier.

En 2025, la guerre est finie. React Native a gagné. Non pas parce que c’est « plus simple », mais parce que la Nouvelle architecture (sans pont) a fondamentalement résolu l’écart de performances. Des applications comme Discord, Shopify et Coinbase fonctionnent sur React Native et vous ne pouvez pas faire la différence.

Chez Maison Code Paris, nous utilisons React Native non pas comme un compromis, mais comme une arme stratégique. Il nous permet de livrer sur le Web, iOS et Android à partir d’un seul monorepo, partageant 95 % de notre logique métier.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de piles « modernes » qui ont été construites sans une compréhension fondamentale de l’échelle. Nous voyons des API simples qui mettent 4 secondes à répondre en raison de problèmes de requête N+1, et des « microservices » qui coûtent 5 000 €/mois en frais de cloud inactif.

Nous abordons ce sujet car il représente un point pivot critique dans la maturité de l’ingénierie. La mise en œuvre correcte de cela différencie un MVP fragile d’une plate-forme résiliente de niveau entreprise qui peut gérer le trafic du Black Friday sans transpirer.

L’Architecture : Pourquoi le “Pont” est mort

Pour comprendre React Native moderne, vous devez comprendre pourquoi l’ancienne version était lente.

Le Vieux Monde : Le pont asynchrone

Dans l’architecture classique (2015-2022), le thread JavaScript et le thread UI (Main) étaient isolés. Pour rendre une vue, JS devait :

Sérialisez un message JSON ({ type : 'createView', width : 100 }).
Envoyez-le via le « Pont ».
Attendez que le côté natif le désérialise et effectue le rendu.

Si vous faisiez défiler une liste rapidement, le pont était obstrué par des milliers de messages JSON. Le thread de l’interface utilisateur se figerait en attendant JS. Cela provoquait le fameux “White Flash” lors d’un défilement rapide.

Le Nouveau Monde : JSI & Fabric

La Nouvelle Architecture a complètement supprimé le pont. Il a introduit l’interface JavaScript (JSI). Cela permet au moteur JavaScript (Hermes) de contenir une référence C++ à un objet natif. JS peut appeler des méthodes sur les éléments de l’interface utilisateur de manière synchrone.

TurboModules : chargez les modules natifs (Bluetooth, appareil photo) uniquement en cas de besoin, pas au démarrage.
Tissu : Le nouveau système de rendu. Donne la priorité aux mises à jour de l’interface utilisateur, tout comme un navigateur donne la priorité au CSS.

Résultat : 60 FPS (ou 120 FPS sur les écrans ProMotion) est désormais l’état par défaut, ce n’est plus un combat.

The Stack : Expo est le cadre

En 2025, nous n’exécutons pas npxreact-native init. Nous utilisons Expo. Expo est à React Native ce que Next.js est à React. C’est le méta-framework qui gère les choses ennuyeuses.

1. Routeur Expo (routage basé sur des fichiers)

Le routage sur mobile était notoirement difficile (passe-partout de React Navigation). Expo Router apporte le modèle Next.js au mobile.

// application/produit/[id].tsx
importer { useLocalSearchParams } depuis 'expo-router' ;
importer {Texte} depuis 'react-native' ;

exporter la fonction par défaut ProductScreen() {
  const { identifiant } = useLocalSearchParams();
  return <Text>ID du produit : {id}</Text> ;
}

Ce fichier devient automatiquement un lien profond : myapp://product/123. Sur le Web, cela devient « https://myapp.com/product/123 ». Un routeur. Exécution universelle.

2. Plugins de configuration (CNG)

Nous ne touchons presque plus aux dossiers ios/ ou android/. Cela nous permet d’utiliser la Continuous Native Generation (CNG). Au lieu de valider les fichiers de projet natifs (qui pourrissent et provoquent des conflits de fusion), nous les générons au moment de la construction sur la base de « app.json ».

Besoin d’ajouter des autorisations de caméra ?

// app.json
{
  "plugins": [
    [
      "expo-caméra",
      {
        "cameraPermission": "Autoriser Maison Code à scanner les codes QR."
      }
    ]
  ]
}

Ingénierie des performances

Même avec Fabric, vous pouvez écrire du code React lent. Voici comment nous optimisons la sensation « Butter Smooth ».

1. FlashList (Le recycleur)

La FlatList standard crée un nouveau composant React pour chaque ligne. L’utilisation de la mémoire augmente de manière linéaire. Nous utilisons FlashList (par Shopify). Il s’exécute sur le thread de l’interface utilisateur et “recycle” les vues. Lorsqu’une ligne défile hors de l’écran, cela ne la détruit pas ; il le déplace vers le bas et modifie le texte. Cela réduit les listes énormes (10 000 éléments) à une utilisation constante de la mémoire (seulement environ 10 éléments existent en mémoire).

importer { FlashList } depuis "@shopify/flash-list" ;

<Liste Flash
  data={produits}
  renderItem={({ item }) => <ProductCard item={item} />}
  estimateItemSize={200} 
/>

2. MMKV (stockage synchrone)

AsyncStorage est lent car il traite les E/S disque comme une promesse JSON. Nous déchargeons le stockage sur MMKV (écrit par Tencent pour WeChat). Il s’agit d’un magasin clé-valeur mappé en mémoire C++. C’est environ 30 fois plus rapide. Nous l’utilisons pour stocker les jetons d’authentification et les préférences utilisateur afin que l’application démarre instantanément avec l’utilisateur connecté.

Stratégie de partage de code : le Monorepo

Le plus gros retour sur investissement de React Native est le Partage de code. Mais vous ne devriez pas simplement copier-coller des fichiers. Vous devez concevoir un Monorepo (en utilisant TurboRepo ou Nx).

/applications
  /web (Suivant.js)
  /mobile (Expo)
/paquets
  /ui (composants Tamagui/NativeWind partagés)
  /logic (magasins Zustand, hooks React Query, schémas Zod)
  /api (client API typé)

L’application « mobile » importe : importer { useCart } depuis '@maison/logic'; importer { Bouton } depuis '@maison/ui';

L’application « Web » importe exactement la même chose. Nous écrivons la logique « Ajouter au panier » une fois. Nous le testons une fois. Nous l’expédions partout. La seule divergence concerne la navigation et les gestes spécifiques à la plateforme.

Mises à jour OTA : contourner l’App Store

Les mises à jour Over-The-Air (OTA) via EAS Update constituent un avantage commercial essentiel. Si vous trouvez un bug critique dans votre flux de paiement le Black Friday :

Application native : Soumettez le correctif -> Attendez 24 h pour l’examen Apple -> Attendez que les utilisateurs effectuent la mise à jour. Coût : Des milliers de ventes perdues.
Expo App : eas update --branch production. Le nouveau bundle JS se télécharge silencieusement en arrière-plan. Les utilisateurs obtiennent le correctif au prochain lancement. Durée : 10 minutes.

Remarque : Vous ne pouvez modifier JavaScript/Actifs que via OTA. Vous ne pouvez pas modifier le code binaire natif (par exemple, en ajoutant un nouveau module d’autorisation).

10. Accessibilité (VoiceOver / TalkBack)

Les applications natives doivent être accessibles. React Native mappe les accessoires standard aux API d’accessibilité natives. <View accessible={true} AccessibilityLabel="Ajouter au panier"> Utilisez l’Inspecteur d’accessibilité dans Xcode pour vérifier. Si votre application n’est pas utilisable par les aveugles, vous laissez derrière vous 15 % du marché (et vous invitez à des poursuites judiciaires).

11. Tests E2E automatisés : Maestro

La détox était la norme, mais elle était feuilletée. Maestro est le nouveau roi. Il pilote l’interface utilisateur comme un humain (en utilisant les identifiants d’accessibilité).

runFlow : app_flow.yaml


## 11. Conclusion

React Native n'est plus « l'alternative ». C'est la valeur par défaut.
Si vous créez une application grand public en 2026 et que vous n'utilisez pas Expo + React Native, vous choisissez de travailler deux fois plus dur pour le même résultat.
Nous aidons les marques à migrer des anciennes bases de code « natives » vers des piles modernes et unifiées.

<hr style="margin: 1rem 0" />

**[Embauchez nos architectes](/contact)**.