Loading MOBILE::INTERNALS...
“Fabric is React Native’s New Architecture rendering engine. Fabric replaces the legacy UI manager by creating an immutable C++ Shadow Tree for every React element tree. Because shadow nodes are immutable C++ objects, layout calculations (via Yoga) and UI mutations can execute thread-safely across JavaScript, background worker, and UI threads.”
How Fabric achieves thread-safe concurrent rendering using immutable C++ shadow nodes and Yoga layout.
// Fabric C++ ShadowNode Representation
class ParagraphShadowNode : public ConcreteViewShadowNode<ParagraphProps, ParagraphEventEmitter> {
public:
void layout(LayoutContext layoutContext) override {
// Yoga calculates text bounding box directly in C++
Size size = measureText(props_.text, layoutContext.maxWidth);
layoutMetrics_.frame.size = size;
}
};React executes component render() on JavaScript thread
Fabric creates immutable C++ ShadowNodes representing the component hierarchy
Yoga layout engine computes bounding boxes (X, Y, Width, Height) in C++
Fabric calculates minimal diff between previous and new Shadow Tree
Mounts mutations directly to Native UI thread (UIView/Android View) in a single atomic transaction
Immutable shadow trees enable React 18 Concurrent Features (Transitions, Suspense) on mobile without thread race conditions.