Skip to content
useffect.sh
Book 30 min with a senior
Architecture

Fabric

The New Architecture renderer: a C++ core shared by iOS and Android that computes layout synchronously.

Definition

Fabric is React Native’s rendering system in the New Architecture. It replaces the old UIManager, where every view update crossed the bridge as JSON, with a renderer written in C++ and shared between iOS and Android. React produces an element tree, Fabric turns it into a C++ shadow tree, runs layout through Yoga, then mounts the matching native views (UIView or android.view.View). Layout becomes synchronous: a component can measure and reposition itself within the same commit, which removes the visual “jump” you used to get with onLayout. Props for native components are generated by Codegen, so a mismatch between JavaScript and native fails the build. Fabric is also what lets React Native support React’s concurrent features (Suspense, transitions, automatic batching) and multi-priority events. A custom native view goes through it: that is a Fabric Native Component, with its spec and generated code.

In a real app

For a custom native component, Fabric changes the contract: props are declared in a TypeScript spec, Codegen turns them into C++ structs, and a mismatch between the spec and the native view is a compile error instead of a silent production bug. It is more ceremony up front, but it is why “prop undefined on the native side” crashes are far rarer now.

The usual pitfalls show up in libraries that manipulated the view hierarchy directly or relied on asynchronous UIManager.measure. Under Fabric, measure and measureInWindow read the C++ shadow tree instead of asking the native view on the next frame, and code that relied on that delay can behave differently. Another one: setNativeProps still exists but no longer bypasses the renderer the way it did; an animation that depended on it should go through Reanimated or the shared animation backend, experimental since 0.85.1.

In practice I check whether the project’s native components expose a spec through codegenConfig, whether “not supported by Fabric” warnings show up in the logs, and whether the usual suspects (react-native-screens, react-native-svg, maps, video) are on a version that declares componentDescriptors. reactnative.directory (opens in a new window) lists Fabric support per library.

Our services on this

Sources

All 35 glossary terms

One of these is blocking your app?

30 minutes with a senior to look at the problem in your code. Free.