Fabric in React Native — what it is, rendering architecture and how it works

What is Fabric?

Fabric is a new rendering system for React Native that replaced the old renderer, which worked through Shadow Thread and Bridge. In the old architecture, the rendering process involved three steps: JavaScript computes Virtual DOM, Shadow Thread (Yoga) calculates the layout, Native Thread draws UIView. Fabric combines all these steps into a single C++ pipeline that works synchronously.

Fabric development began in 2019 as part of the Lean Core initiative and the “The New Architecture” project. The main goal was to solve performance problems associated with asynchronous three-round rendering. In the old architecture, each state change required three passes through different threads, creating a delay between data change and UI rendering.

Fabric is based on the concept of an Immutable Shadow Tree. Each tree node represents a React component with its props and state. When state changes, a new tree is created, and Fabric computes the difference between the old and new tree and applies only the necessary changes to the native UI. This minimizes the number of UIView/ViewGroup operations and reduces rendering time.

How Shadow Tree Works

Shadow Tree is the foundation of Fabric’s operation. Unlike the old architecture, where the Shadow Tree existed only on the C++ side and was separated from the JS tree through the async Bridge, Fabric creates a fully synchronized hierarchical representation of the UI. Shadow Tree nodes store component props, state, and styles, while Yoga calculates the layout directly at the C++ level.

When a React component updates its state, React Native sends a new Shadow Node to Fabric. Fabric does not re-render the entire UI — it uses a diffing algorithm at the C++ level to determine which nodes have changed. Only changed nodes are sent for native rendering, which significantly reduces the amount of work.

Three-Phase Fabric Rendering

The rendering process in Fabric consists of three phases that execute synchronously at the C++ level without thread switching. The first phase is Render: React calls the component’s render function, which returns a React Element Tree. The second phase is Commit: React Native creates a new Shadow Tree and computes changes based on the old version. The third phase is Mount: Fabric applies changes to the native UI, creating, updating, or deleting UIViews.

• Render — executed on the JS thread, creates a React Element Tree.
• Commit — C++ Shadow Tree computes the diff and forms a list of mutations.
• Mount — mutations are applied to the native UI on the main thread.

All three phases work as a single pipeline where data is transferred through JSI without serialization. This is a key difference from the old architecture, where there were gaps between phases: JS → (JSON) → Shadow Thread → (layout) → Native Thread.

Fabric vs Old Renderer: Comparison

The comparison of Fabric with the old renderer demonstrates how significantly the React Native architecture has changed. The old renderer worked asynchronously, splitting the rendering process across three independent threads. Fabric combines everything into a single C++ pipeline.

In practice, Fabric is especially beneficial for applications with frequent UI updates: animations, scrolls with floating headers, real-time data. For static pages (text, buttons) the difference is less noticeable. According to Meta benchmarks, Fabric reduces initial list rendering time by 40–60%.

JSI and Fabric: New Communication

JSI (JavaScript Interface) is a key component that makes Fabric possible. Through JSI, Fabric gets direct access to JavaScript values without serialization. When React passes props to Fabric, they are not copied through JSON — JSI passes pointers to data in the JS engine’s memory.

The JSI architecture allows Fabric to work with any JavaScript engine — Hermes, JSC, or V8. The Fabric C++ code does not depend on a specific JS engine implementation, which simplifies maintenance and testing. All UI operations — creation, update, deletion — are performed through JSI, ensuring minimal latency.

// Fabric C++ rendering pipeline via JSI
void mountShadowNode(
    jsi::Runtime& runtime,
    const ShadowNode::Shared& shadowNode,
    const ShadowNode::SharedList& children
) {
    auto props = shadowNode->getProps();
    auto state = shadowNode->getState();

    // Synchronous prop transfer via JSI
    jsiValue.asObject(runtime)
        .getProperty(runtime, "style")
        .asObject(runtime);

    // Layout calculation through Yoga directly
    auto layoutMetrics =
        YogaLayoutableShadowNode::layout(children);

    // Apply mutations to native UI
    UIManager::synchronouslyUpdateViewOnUIThread(
        shadowNode->getTag(), layoutMetrics
    );
}

The key advantage is synchronous update. In the old architecture, the UI was updated through an async queue: React sent a command through the Bridge, Shadow Thread processed the layout, Native Thread rendered. In Fabric, all steps are executed sequentially in a single pass. This eliminates race conditions and ensures the UI matches the current application state.

Migrating to Fabric

Migrating to Fabric does not require rewriting React components — all existing React Native components continue to work. However, libraries with native code (Native Module, custom ViewManager) may require updates. Meta recommends checking the compatibility of each library before enabling the new architecture.

To enable Fabric in a React Native 0.76+ project, set the newArchEnabled: true flag in react-native.config.js. Fabric will enable automatically along with Turbo Module. If issues arise, Fabric can be disabled by reverting to the old renderer without changing application code — both architectures are supported in parallel.

// package.json — check Fabric-compatible libraries
"react-native": "0.76.6",
"react-native-safe-area-context": "^5.0.0",
"react-native-screens": "^4.0.0",
"react-native-reanimated": "^3.16.0",
"react-native-gesture-handler": "^2.21.0"

When migrating, it’s important to update all native libraries to versions compatible with Fabric. Major libraries such as react-native-reanimated and react-native-gesture-handler already support the new architecture. For libraries that have not yet been updated, Fabric provides a compatibility mechanism — if a library does not support Fabric, the renderer automatically falls back to the old one for that library.