Fabric Renderer: React's Native UI Interpreter

WHY IT EXISTS React was designed to describe a UI abstractly, but it doesn't know how to draw pixels on a screen. On the web, ReactDOM translates React's description into DOM nodes. React Native needs a similar translator for iOS and Android, which have entirely different UI toolkits. Fabric is the modern, high-performance engine built to solve this translation problem efficiently.

THE MENTAL MODEL Think of Fabric as a multilingual interpreter at a summit. React speaks a universal language: "I want a view with this text inside." Fabric, the interpreter, listens to this request. It then turns to the iOS delegate and says, "Create a UIView with a UILabel." Then it turns to the Android delegate and says, "Create an android.view.ViewGroup with a TextView." Fabric handles the platform-specific commands so React doesn't have to.

HOW IT WORKS The process starts when React creates an element tree in JavaScript. The Fabric Renderer receives this tree and creates a corresponding "React Shadow Tree" in C++. This shadow tree is a lightweight, platform-agnostic representation of the UI. Because it lives in C++, it can communicate synchronously and very quickly with both the JavaScript world (via JavaScript Interfaces, or JSI) and the native platform code. This C++ shadow tree then orchestrates the creation and updates of the actual native UI elements, called "Host Views," on the device's screen.

WHEN TO USE IT You don't choose to use Fabric on a component-by-component basis. Instead, you enable the "New Architecture" for your entire React Native project. When you opt-in, Fabric becomes your app's default rendering engine. This is the recommended path for new projects to gain performance benefits like smoother animations and faster startup.

WHEN NOT TO USE IT If you are not using React Native's New Architecture, you are using the older rendering system which relies on an asynchronous "Bridge" instead of Fabric. While this is still common in legacy projects, the ecosystem is moving towards Fabric. The main reason to not use it would be reliance on older third-party libraries that have not yet been updated to support the New Architecture.

ONE CANONICAL EXAMPLE When your JSX code contains <View><Text>Hello</Text></View>, React informs Fabric. Fabric creates a C++ shadow node for the View and another for the Text. These nodes contain all the props and style information. Fabric then uses this shadow tree to directly instruct the host platform—for example, telling iOS to create and display a UIView that contains a UILabel with the text "Hello".