Fabric Renderer: React's Native UI Interpreter
Fabric is React Native's interpreter, translating abstract components into concrete native views for iOS and Android. It's the core renderer in the New Architecture, enabling more synchronous UI updates. The footgun is thinking it's a library you import.
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".
Interview question
In React Native's Fabric renderer, what is the main purpose of the C++ React Shadow Tree?
- a.To allow developers to import platform-specific UI components directly into their JavaScript code.
- b.To provide a lightweight, platform-agnostic representation of the UI for efficient communication.Correct
- c.To directly render pixels onto the device screen by interacting with the GPU.
- d.To manage the asynchronous communication bridge between JavaScript and native modules.
Why? this is the answer
The card explicitly states the C++ React Shadow Tree is a "lightweight, platform-agnostic representation of the UI" that enables "synchronously and very quickly" communication between JavaScript and native. Option D is incorrect because Fabric, and thus the shadow tree, replaces the asynchronous bridge with synchronous communication, rather than managing the old bridge.
Just read this? Test yourself on what you have been reading.
Read the original → reactnative.dev
- #react-native
- #fabric
- #architecture
- #jsi
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react-native — each one lists the topics its interview covers.
See open roles