Aller au contenu
useffect.sh
Planifier 30 min avec un senior
Architecture

Fabric

Le renderer de la New Architecture : un cœur C++ partagé entre iOS et Android qui calcule le layout de façon synchrone.

Définition

Fabric est le système de rendu de React Native dans la New Architecture. Il remplace l’ancien UIManager, où chaque mise à jour de vue transitait par le bridge sous forme de JSON, par un renderer écrit en C++ et partagé entre iOS et Android. React produit un arbre d’éléments, Fabric le transforme en un shadow tree en C++, calcule le layout avec Yoga, puis monte les vues natives correspondantes (UIView ou android.view.View). Le layout devient synchrone : un composant peut mesurer et se repositionner dans le même commit, ce qui supprime le « saut » visuel que l’on voyait avec onLayout. Les props des composants natifs sont générées par Codegen, donc un écart entre JavaScript et natif casse le build. Fabric est aussi ce qui permet à React Native de supporter les fonctionnalités concurrentes de React (Suspense, transitions, batching automatique) et les événements à plusieurs niveaux de priorité. Un composant natif maison passe par lui : c’est un Fabric Native Component.

Dans une vraie app

Pour un composant natif custom, Fabric change le contrat : les props sont déclarées dans une spec TypeScript, Codegen en génère des structs C++, et un écart entre la spec et la vue native est une erreur de compilation plutôt qu’un bug silencieux en prod. C’est plus de rigueur au départ, mais c’est ce qui rend les crashs « prop undefined côté natif » bien plus rares.

Les pièges typiques se voient sur les librairies qui manipulaient directement la hiérarchie de vues ou s’appuyaient sur UIManager.measure asynchrone. Avec Fabric, measure et measureInWindow lisent le shadow tree C++ au lieu d’interroger la vue native à la frame suivante, et un code qui comptait sur ce délai peut se comporter différemment. Autre point : setNativeProps existe encore mais ne contourne plus le renderer comme avant ; une animation qui en dépendait doit passer par Reanimated ou par le backend d’animation partagé, expérimental depuis la 0.85.1.

En pratique, je regarde si les composants natifs du projet exposent une spec dans codegenConfig, si les warnings « not supported by Fabric » apparaissent dans les logs, et si les libs de la liste (react-native-screens, react-native-svg, cartes, vidéo) sont à une version qui déclare componentDescriptors. Le site reactnative.directory (nouvelle fenêtre) indique le support Fabric par librairie.

Nos offres sur ce sujet

Sources

Les 35 termes du glossaire

Un de ces sujets bloque votre app ?

30 minutes avec un senior pour regarder le problème dans votre code. Gratuit.