🧠 How React Native Internally Works (2025 Edition)

React Native is a powerful framework for building cross-platform mobile applications using JavaScript. But how does it bridge the gap between JavaScript and native mobile platforms? Let’s dive into the internals of React Native and understand its architecture.

🏗️ 1. Core Architecture Overview

React Native’s architecture has evolved significantly:

Era	Key Feature
Legacy Architecture	Bridge model with async JSON message passing
Fabric (2022+)	Synchronous layout + native rendering
New Architecture (2023+)	TurboModules + JSI + Codegen + Fabric

🔗 2. JavaScript & Native Bridge (Legacy)

In the legacy model, JavaScript and native code communicated via an asynchronous bridge using serialized JSON. This meant:

• Separate JS and native threads
• Asynchronous message queue
• Performance bottlenecks, especially for animations

⚙️ 3. JavaScript Interface (JSI)

JSI is a C++ interface allowing JavaScript to interact directly with native/C++ objects. It removes the old message bridge and enables faster, synchronous access:

// Native C++ JSI module example
jsi::Function myFunc = jsi::Function::createFromHostFunction(
  runtime,
  jsi::PropNameID::forAscii(runtime, "add"),
  2,
  [](jsi::Runtime &rt, const jsi::Value &thisVal, const jsi::Value *args, size_t count) {
    return jsi::Value(args[0].asNumber() + args[1].asNumber());
  });

🧩 4. TurboModules

TurboModules are the new way of loading native modules on demand:

• Lazy-loaded for efficiency
• Accessed via JSI
• Better performance and lower memory usage

🧱 5. Fabric UI Manager

Fabric is the modern UI manager that synchronously manages layout and rendering:

• Uses Yoga layout engine
• Shadow tree replaces virtual DOM
• Sends commit instructions via JSI

🧪 6. Hermes Engine

Hermes is an open-source JavaScript engine by Meta optimized for mobile:

• Improves startup time
• Reduces memory usage
• Optimized garbage collection
• Fully supports JSI

🖇️ 7. Native Rendering

Once the layout is resolved by Fabric and Yoga, the platform-specific UI is rendered:

• Android uses ViewManagers
• iOS uses UIView/UIViewController
• Rendering is completely native, offering smooth experiences

🔄 8. React Native Internals Workflow (Diagram)

 ┌────────────┐
 │ JS Bundle  │
 └────┬───────┘
      │
   [Hermes/JSC]
      │
  [React Reconciler]
      │
      ▼
[Shadow Tree (Fabric)]
      │
  [Yoga Layout Engine]
      │
      ▼
[Native UI via JSI]
   (iOS/Android Views)
  

🔄 9. What Happens on Button Press?

1. User taps a button.
2. Native sends event to JS thread.
3. JS executes onPress handler.
4. State updates cause virtual DOM diff.
5. Fabric generates new shadow tree.
6. Yoga recalculates layout.
7. JSI commits UI updates to native.

⚖️ 10. Old Architecture vs New

Feature	Old Bridge	New Architecture
Communication	Async JSON bridge	JSI (synchronous)
Native Modules	Classic Modules	TurboModules
Layout Engine	UI Manager	Fabric + Yoga
JS Engine	JSC	Hermes
Startup Time	Slower	Faster

🧠 Final Thoughts

The evolution of React Native’s internals — from the legacy bridge to JSI, TurboModules, and Fabric — brings a closer-to-native performance model. As developers in 2025, understanding this architecture helps us build faster, more efficient, and scalable mobile apps.