React Native architecture (bridge, new architecture) - Deep Dive

Overview - React Native architecture (bridge, new architecture)

What is it?

React Native architecture is the way React Native apps connect JavaScript code with native mobile code. It uses a system called the bridge to send messages between JavaScript and native parts. Recently, a new architecture was introduced to improve speed and efficiency by changing how this communication happens.

Why it matters

Without this architecture, React Native apps would be slow and hard to maintain because JavaScript and native code would not work well together. The architecture solves the problem of making apps feel fast and smooth while letting developers write code mostly in JavaScript. Without it, mobile apps would be less responsive and harder to build cross-platform.

Where it fits

Before learning this, you should know basic React Native app structure and JavaScript basics. After this, you can learn about performance optimization, native modules, and advanced app debugging.

Mental Model

Core Idea

React Native architecture is a communication system that connects JavaScript and native mobile code to build fast, cross-platform apps.

Think of it like...

It's like a translator between two people who speak different languages: JavaScript speaks one language, native code speaks another, and the architecture helps them understand each other smoothly.

┌───────────────┐       ┌───────────────┐
│  JavaScript   │──────▶│    Bridge     │──────▶
│    Thread     │       │ (Message Bus) │       │
└───────────────┘       └───────────────┘       │
                                                ▼
                                         ┌───────────────┐
                                         │  Native Code  │
                                         │ (iOS/Android) │
                                         └───────────────┘

Build-Up - 6 Steps

1

Foundation

What is React Native Architecture

Concept: Introduction to the basic idea of React Native architecture and its role.

React Native architecture connects JavaScript code with native mobile code. It allows developers to write app logic in JavaScript while using native components for UI and device features. The architecture manages how these two parts talk to each other.

Result

You understand that React Native is not just JavaScript but a system that links JavaScript with native mobile code.

Understanding this connection is key to grasping how React Native apps work under the hood.

2

Foundation

Role of the Bridge in React Native

Concept: The bridge is the communication channel between JavaScript and native code.

The bridge sends messages back and forth between JavaScript and native threads. JavaScript runs on its own thread, and native code runs on the main UI thread. The bridge serializes data into JSON and sends it asynchronously to avoid blocking the UI.

Result

You see how JavaScript commands reach native code and how native events come back to JavaScript.

Knowing the bridge is asynchronous explains why some operations can feel delayed or slow.

3

Intermediate

Limitations of the Original Bridge Architecture

🤔Before reading on: do you think the bridge can handle unlimited data instantly or does it have performance limits? Commit to your answer.

Concept: The original bridge has performance limits due to its asynchronous JSON message passing.

Because the bridge sends data as JSON strings asynchronously, it can cause delays and overhead. Large data or frequent messages slow down the app. This limits animation smoothness and responsiveness in complex apps.

Result

You understand why some React Native apps feel less smooth or have lag.

Recognizing these limits helps explain why a new architecture was needed.

4

Intermediate

Introduction to the New React Native Architecture

🤔Before reading on: do you think the new architecture removes the bridge entirely or improves it? Commit to your answer.

Concept: The new architecture replaces the old bridge with a faster, more direct communication system.

The new architecture uses a system called the Fabric renderer and JSI (JavaScript Interface). Instead of JSON messages, it uses direct calls and shared memory to communicate. This reduces overhead and improves performance.

Result

You see how the new system speeds up communication and makes UI updates faster.

Understanding this shift shows how React Native can now compete better with fully native apps.

5

Advanced

How JSI and Fabric Work Together

🤔Before reading on: do you think JSI is a replacement for JavaScript or a bridge? Commit to your answer.

Concept: JSI is a new interface that allows JavaScript to call native functions directly without going through the old bridge.

JSI exposes native functions as JavaScript objects, letting JavaScript call them synchronously. Fabric is the new UI layer that uses JSI to update native views efficiently. Together, they remove the JSON serialization step and enable synchronous, faster communication.

Result

You understand the technical details of how React Native's new architecture improves speed and responsiveness.

Knowing these internals helps when debugging or optimizing React Native apps.

6

Expert

Trade-offs and Migration Challenges

🤔Before reading on: do you think migrating to the new architecture is automatic or requires code changes? Commit to your answer.

Concept: Moving to the new architecture requires changes and has trade-offs in compatibility and complexity.

Not all native modules or third-party libraries support the new architecture yet. Migration involves updating native code and JavaScript. The new system is more complex but offers better performance and future-proofing. Developers must balance stability and new features.

Result

You realize migration is a careful process, not just flipping a switch.

Understanding these trade-offs prepares you for real-world React Native development decisions.

Under the Hood

The original React Native architecture uses a multi-threaded model where JavaScript runs on its own thread and communicates with native code via an asynchronous bridge. This bridge serializes commands and data into JSON messages sent over a message queue. The new architecture replaces this with JSI, which exposes native functions directly to JavaScript as callable objects, enabling synchronous calls and shared memory access. Fabric, the new UI layer, uses this to batch and apply UI changes efficiently on the native side.

Why designed this way?

The original bridge was designed to separate JavaScript and native code cleanly, allowing asynchronous communication to avoid blocking the UI. However, as apps grew complex, this caused performance bottlenecks. The new architecture was designed to reduce overhead by removing JSON serialization and enabling synchronous calls, improving responsiveness and enabling more advanced features like concurrent rendering.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ JavaScript VM │──────▶│    Bridge     │──────▶│ Native Modules│
│  (Old Arch)   │       │ (JSON Queue)  │       │  & UI Thread  │
└───────────────┘       └───────────────┘       └───────────────┘


┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│ JavaScript VM │──────▶│      JSI      │──────▶│ Fabric Renderer│
│ (New Arch)    │       │ (Direct Calls)│       │  & Native UI  │
└───────────────┘       └───────────────┘       └───────────────┘

Myth Busters - 3 Common Misconceptions

Quick: Does the original React Native bridge allow synchronous calls from JavaScript to native code? Commit to yes or no.

Common Belief: The bridge allows JavaScript to call native code synchronously.

Reality: The original bridge only supports asynchronous calls using JSON messages, so JavaScript cannot call native code synchronously.

Why it matters: Believing synchronous calls are possible leads to wrong assumptions about app responsiveness and debugging difficulties.

Quick: Is the new React Native architecture fully backward compatible with all existing native modules? Commit to yes or no.

Common Belief: The new architecture works with all existing native modules without changes.

Reality: Many native modules require updates to support the new architecture due to changes in communication and UI rendering.

Why it matters: Assuming full compatibility can cause app crashes or bugs during migration.

Quick: Does removing the bridge mean JavaScript and native code no longer communicate? Commit to yes or no.

Common Belief: Removing the bridge means no communication between JavaScript and native code.

Reality: The new architecture replaces the bridge with a more efficient communication system, but communication still happens actively.

Why it matters: Misunderstanding this can confuse developers about how React Native works internally.

Expert Zone

1

The new architecture's JSI allows embedding multiple JavaScript engines, enabling advanced use cases like Hermes or V8 interchangeably.

2

Fabric's concurrent rendering model aligns React Native with React 18's concurrency features, enabling smoother UI updates.

3

Migration to the new architecture can expose subtle bugs in native modules due to differences in threading and synchronization.

When NOT to use

The new architecture may not be suitable if your app relies heavily on third-party native modules that lack support or if you need maximum stability without migration effort. In such cases, continuing with the original bridge or using fully native development might be better.

Production Patterns

In production, teams often adopt the new architecture incrementally, updating native modules first and enabling Fabric selectively. Performance-critical apps use JSI to write custom native modules for faster data processing. Debugging tools have evolved to support both architectures during transition.

Connections

Operating System Kernel

Both manage communication between different system parts using message passing and shared memory.

Understanding OS kernels helps grasp how React Native's bridge and JSI coordinate between JavaScript and native code efficiently.

Compiler Optimization

The new architecture optimizes communication like compilers optimize code execution paths.

Knowing compiler optimizations clarifies why removing JSON serialization and enabling direct calls improves app speed.

Human Language Interpretation

The bridge acts like an interpreter translating between two languages asynchronously, while the new architecture is like a bilingual person speaking both languages directly.

This cross-domain view helps understand the cost of translation layers and benefits of direct communication.

Common Pitfalls

#1 Assuming all native modules work automatically with the new architecture.

Wrong approach:

Using third-party native modules without checking compatibility, leading to crashes.
Example: import SomeNativeModule from 'some-native-module'; // no update for new arch

Correct approach:

Verify and update native modules to support the new architecture before use.
Example: import SomeNativeModule from 'some-native-module'; // updated for new arch

Root cause:

Misunderstanding that the new architecture changes native module communication.

#2 Trying to call native code synchronously using the old bridge.

Wrong approach:

const result = NativeModules.SomeModule.syncMethod(); // expecting immediate result

Correct approach:

Use asynchronous calls with callbacks or promises.
Example: NativeModules.SomeModule.asyncMethod().then(result => { /* use result */ });

Root cause:

Not knowing the original bridge only supports asynchronous communication.

#3 Disabling the bridge without enabling the new architecture.

Wrong approach:

Turning off the bridge in config but not enabling Fabric or JSI, causing app failure.

Correct approach:

Enable the new architecture fully with Fabric and JSI when disabling the old bridge.

Root cause:

Confusing the bridge removal with partial migration steps.

Key Takeaways

React Native architecture connects JavaScript and native code to build cross-platform mobile apps.

The original bridge uses asynchronous JSON messages, which can cause performance bottlenecks.

The new architecture replaces the bridge with JSI and Fabric for faster, synchronous communication and UI updates.

Migrating to the new architecture improves app speed but requires updating native modules and careful planning.

Understanding this architecture helps developers optimize, debug, and build better React Native apps.