Part 3 · Fundamentals

Fabric: from JSX to pixels

Prerequisites: 01-three-layers

Fabric: from JSX to pixels — mechanism

The common rendering path. Scheduling can differ; the final host-view mutation belongs on the UI thread. Nodes: JSX + state, Shadow tree, Commit + Yoga, Mount, Host views.
The common rendering path. Scheduling can differ; the final host-view mutation belongs on the UI thread. [S02] [S03] [S04]

Mental model verified

Fabric is the React Native renderer. It builds an immutable C++ shadow tree for host components, calculates layout, diffs the next tree, and mounts host views. Render and commit may be scheduled in several ways; the UI thread owns host view manipulation.

[S02] [S03] [S04]

Worked example synthesis

Changing a card title creates affected React elements and shadow nodes, then commits layout and applies a host view update. The native control is not rebuilt from scratch for every React render.

[S03]

Engineering choice synthesis

Use normal declarative props for view state. A native view is justified when a platform SDK owns a complex surface, such as a map or camera preview. Keep events and props small and well typed.

[S03] [S07]

Pitfall and next step synthesis

Do not equate React render with immediate on-screen paint. Draw the render → commit → mount phases and inspect a slow frame for JS work, layout, or UI-thread mount cost.

[S02] [S03] [S12]
Keep this: Render creates a C++ shadow tree, commit computes layout, and mount changes host views on the UI thread.
Check yourself: What thread can actually change an Android View or iOS UIView?

The UI/main thread performs the host view mutation during mount.

Sources & further reading

  1. [S02] Threading Model

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JS and UI thread responsibilities; render can run in more than one scheduling scenario.

    Read the diagrams and API boundaries for js and ui thread responsibilities; render can run in more than one scheduling scenario.

  2. [S03] Render, Commit, and Mount

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: Fabric render, commit, layout and host view mount phases.

    Read the diagrams and API boundaries for fabric render, commit, layout and host view mount phases.

  3. [S04] Fabric

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: Cross-platform C++ renderer and host platform interoperability.

    Read the diagrams and API boundaries for cross-platform c++ renderer and host platform interoperability.

  4. [S07] Expo Modules API: Reference

    Expo · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JSI abstraction; Function, AsyncFunction, queues, views, events and lifecycle.

    Read the diagrams and API boundaries for jsi abstraction; function, asyncfunction, queues, views, events and lifecycle.

  5. [S12] Performance Overview

    React Native · official documentation · accessed 2026-10-08 · current documentation as accessed

    Supports: JS and UI frame rates and practical performance diagnosis.

    Read the diagrams and API boundaries for js and ui frame rates and practical performance diagnosis.