Learn React Native Internals: From Zero to Bridge & Architecture Master
Goal: Deeply understand the internal plumbing of React Native—from the legacy asynchronous bridge to the modern JSI-powered New Architecture. You will learn to navigate the threading model, master native module creation in Java and Objective-C, and bridge the performance gap between JavaScript and host operating systems by building real-world native extensions.
Why React Native Internals Matter
React Native is often treated as a “black box” where React code magicially turns into mobile apps. However, to build high-performance, enterprise-grade applications, you must understand what happens between the render() call and the screen.
- Historical Context: Created by Facebook in 2015, React Native was a revolution because it didn’t use WebViews (like PhoneGap). It used real native components, but communicated via a JSON bridge. This “Bridge” became the bottleneck that the “New Architecture” (2022-2024) finally solved.
- Real-World Impact: Understanding internals allows you to fix “jank” (stuttering), handle high-frequency events (like gestures or sensor data), and integrate with any native SDK (Payment, Bluetooth, AI) that doesn’t have a JS wrapper.
- The Unlock: Mastering this makes you a “T-shaped” developer. You aren’t just a JS dev; you are a Systems Engineer who understands how C++, Java, and Swift interoperate through the JavaScript Interface (JSI).
Core Concept Analysis
1. The Threading Model
React Native operates on three primary threads. Understanding this is crucial for avoiding UI freezes.
┌─────────────────────────────────────────────────────────────────┐
│ Native Main Thread (UI) │
│ - Handles UI Rendering, Gestures, User Interaction │
│ - Where Android Views and iOS UIViews live │
└─────────────────────────────────────────────────────────────────┘
▲
│ (Asynchronous / Synchronous)
▼
┌─────────────────────────────────────────────────────────────────┐
│ JavaScript Thread │
│ - Where your Business Logic and React code runs │
│ - The "Brain" of the application │
└─────────────────────────────────────────────────────────────────┘
▲
│ (Layout Calculation)
▼
┌─────────────────────────────────────────────────────────────────┐
│ Shadow Thread │
│ - Uses "Yoga" (C++ Layout Engine) │
│ - Calculates absolute positions/sizes for Native Views │
└─────────────────────────────────────────────────────────────────┘
2. The Evolution: Bridge vs. JSI
The biggest shift in React Native history is the move from the Bridge to the JavaScript Interface (JSI).
The Legacy Bridge (Old Architecture)
Communication was like sending a letter through a slow post office.
- Serialization: JS object -> JSON String.
- Transfer: String sent over the Bridge.
- Deserialization: JSON String -> Native Object. Problem: Asynchronous and slow for large data (images/video).
JSI: The JavaScript Interface (New Architecture)
JSI allows the JavaScript engine (Hermes/JSC) to hold a C++ reference to native objects.
- Synchronous: JS can call a native function and get a result instantly in the same tick.
- Shared Memory: No more JSON serialization.
Legacy Bridge (JSON) Modern JSI (C++)
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ JS │ │ Native │ │ JS │ ←─┤ Host │
│ Object ├──▶│ Object │ │ Engine │ │ Object │
└────┬────┘ └────▲────┘ └─────────┘ └─────────┘
│ (JSON) │ ▲ │
└─────────────┘ └─────────────┘
(Direct Reference)
Concept Summary Table
| Concept Cluster | What You Need to Internalize |
|---|---|
| The Bridge | Asynchronous, JSON-based communication. The legacy way of passing data. |
| JSI | The C++ layer allowing direct, synchronous access to native memory from JS. |
| Native Modules | Code written in Java/Kotlin (Android) or Obj-C/Swift (iOS) exposed to JS. |
| TurboModules | Typed, JSI-powered native modules that load on demand. |
| Fabric | The rendering engine that replaces “UIManager” for high-perf UI updates. |
| Yoga | The cross-platform layout engine that implements Flexbox in C++. |
Deep Dive Reading by Concept
This section maps each concept from above to specific resources. Read these before or alongside the projects to build strong mental models.
Architecture & Internals
| Concept | Resource |
|---|---|
| The New Architecture | Official Docs: About the New Architecture |
| JSI Deep Dive | How JSI Works by Oscar Franco |
| Fabric Rendering | React Native Docs: Fabric |
| Hermes Engine | Hermes: An open source JavaScript engine optimized for React Native |
Native Bridge & Modules
| Concept | Resource |
|---|---|
| Android Native Modules | “React Native Cookbook” by Dan Ward — Ch. 7: “Native Modules on Android” |
| iOS Native Modules | “React Native Cookbook” by Dan Ward — Ch. 8: “Native Modules on iOS” |
| TurboModules | Native Modules: Introduction |
| C++ Core | “The C++ Programming Language” by Bjarne Stroustrup — Ch. 1-4 (Basic syntax for JSI) |
Essential Reading Order
- The Foundation (Week 1):
- React Native Docs: Architecture Overview
- “React Native Cookbook” Ch. 7 (Android Bridge basics)
- The New World (Week 2):
- JSI and the New Architecture (Various blog deep dives)
- React Native New Architecture Working Group Discussions
Project List
Projects are ordered from fundamental bridge basics to advanced JSI/TurboModule implementations.
Project 1: The “Pure” Logger Bridge (Foundations of Communication)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: Java / Objective-C
- Alternative Programming Languages: Kotlin / Swift
- Coolness Level: Level 2: Practical but Forgettable
- Business Potential: 1. The “Resume Gold”
- Difficulty: Level 1: Beginner
- Knowledge Area: Native Bridging / String Serialization
- Software or Tool: Android Studio / Xcode
- Main Book: “React Native Cookbook” by Dan Ward
What you’ll build: A native logging utility that bypasses the standard console.log to write directly to Android Logcat and iOS os_log, including custom tags and log levels that appear in native IDEs.
Why it teaches React Native Internals: This is the “Hello World” of native modules. You’ll learn the boilerplate required to register a module, export methods, and how simple data types (Strings) are automatically converted between JS and Java/Obj-C.
Real World Outcome
You will have a utility in JavaScript that looks like this:
import { NativeModules } from 'react-native';
const { CustomLogger } = NativeModules;
CustomLogger.logEvent("UserSignedIn", "INFO", "User ID: 12345");
Example Output (Android Logcat):
$ adb logcat | grep CustomLogger
I/CustomLogger(1245): [INFO] UserSignedIn: User ID: 12345
The Core Question You’re Answering
“How does a function call in a Chrome-based JS engine actually trigger code inside a JVM or an Objective-C runtime?”
Project 2: Native Battery & Sensor Monitor (Events & Callbacks)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: Java / Objective-C
- Coolness Level: Level 3: Genuinely Clever
- Difficulty: Level 2: Intermediate
- Knowledge Area: Native Events / Lifecycle
What you’ll build: An app that monitors the device battery level using native listeners, pushing updates to the JS thread only when changes occur.
Why it teaches React Native Internals: You’ll learn how to send data from Native to JavaScript using DeviceEventEmitter (Android) and RCTEventEmitter (iOS).
Project 3: High-Performance Key-Value Store (Synchronous JSI)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 3: Advanced
- Knowledge Area: JSI / Memory Management / C++
What you’ll build: A persistent storage module that uses JSI to provide synchronous access to data. Unlike AsyncStorage, this will allow you to read a value from native storage instantly.
Why it teaches React Native Internals: This is your first foray into the New Architecture. You’ll write C++ code that interacts with the JS engine directly.
Project 4: The Custom View Manager (Native UI Components)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: Java / Objective-C
- Difficulty: Level 2: Intermediate
- Knowledge Area: Native UI / View Hierarchy
What you’ll build: A custom “Circle Progress View” that isn’t made of React Native Views, but is a single native view drawn using Canvas on Android and CoreGraphics on iOS.
Why it teaches React Native Internals: You’ll understand the ViewManager lifecycles and how properties are mapped from JS to native.
Project 5: Headless JS (Background Task Mastery)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: Java / Obj-C
- Difficulty: Level 3: Advanced
- Knowledge Area: Android Services / Background Fetch
What you’ll build: A background data-syncing service that wakes up every 15 minutes and updates a local database without the user ever opening the app UI.
Why it teaches React Native Internals: You’ll learn that React Native can exist without a UI thread.
Project 6: Modern TurboModule (The Codegen Workflow)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: TypeScript / C++
- Difficulty: Level 4: Expert
- Knowledge Area: New Architecture / Codegen
What you’ll build: A high-performance mathematical library implemented as a TurboModule. You’ll use Codegen to generate the C++ glue code.
Why it teaches React Native Internals: You will experience the Type Safety of the new architecture and the state-of-the-art native workflow.
Project 7: Fabric Custom Component (Direct Rendering)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 5: Master
- Knowledge Area: Fabric / C++ Renderers
What you’ll build: A high-performance interactive chart component that uses the Fabric rendering system.
Why it teaches React Native Internals: Fabric is the “Holy Grail” of React Native UI. You’ll learn how the Shadow Tree works in C++.
Project 8: JSI “Pure” HostObject (The Performance Unlock)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 3: Advanced
- Knowledge Area: JSI / C++ Interop
What you’ll build: A math engine that exposes a C++ object directly to JavaScript using jsi::HostObject.
Project 9: ArrayBuffer Zero-Copy Data Transfer
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 3: Advanced
- Knowledge Area: Memory Management / Multimedia
What you’ll build: An image processing utility that receives a raw ArrayBuffer from JS, modifies it in C++, and returns it with zero copying.
Project 10: SharedArrayBuffer for Concurrency
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++ / JavaScript
- Difficulty: Level 4: Expert
- Knowledge Area: Concurrency / Shared Memory
What you’ll build: A real-time progress reporter where a background C++ thread writes into a SharedArrayBuffer and JS reads from it simultaneously using Atomics.
Project 11: Native Threading & Worklets (Custom Dispatcher)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++ / Java / Obj-C
- Difficulty: Level 4: Expert
- Knowledge Area: Threading / Task Queues
What you’ll build: A custom “Native Worklet” system that allows you to dispatch specific JS functions to run on a dedicated native background thread pool.
Project 12: JSI-based SQLite Wrapper (Native Library Bridge)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 4: Expert
- Knowledge Area: Database Internals / Library Wrapping
What you’ll build: A direct C++ wrapper for SQLite that exposes synchronous query methods to React Native.
Project 13: The “Catalyst” Interceptor (Network Hooking)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: Java / Obj-C
- Difficulty: Level 3: Advanced
- Knowledge Area: Networking / Interceptors
What you’ll build: A native module that hooks into the OS networking stack to log or modify all outgoing React Native fetch requests.
Project 14: Custom JSI Event Emitter (Observer Pattern)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 4: Expert
- Knowledge Area: Event Loops / Observers
What you’ll build: A high-frequency event emitter implemented in C++ that can push 120+ events per second to JS.
Project 15: Memory-Mapped File Access (Low-Level I/O)
- File: REACT_NATIVE_INTERNALS_MASTERY.md
- Main Programming Language: C++
- Difficulty: Level 5: Master
- Knowledge Area: Filesystems / mmap
What you’ll build: A JSI module that uses mmap to map a large data file into memory and provides JS with a direct view.
Project Comparison Table
| Project | Difficulty | Time | Depth of Understanding | Fun Factor |
|---|---|---|---|---|
| 1. Pure Logger | Beginner | Weekend | ★☆☆☆☆ | ★★☆☆☆ |
| 2. Battery Monitor | Intermed. | Weekend | ★★☆☆☆ | ★★★☆☆ |
| 3. Key-Value JSI | Advanced | 1 Week | ★★★★☆ | ★★★★☆ |
| 4. View Manager | Intermed. | 1 Week | ★★★☆☆ | ★★★☆☆ |
| 5. Headless JS | Advanced | 1 Week | ★★★★☆ | ★★★☆☆ |
| 6. TurboModule | Expert | 2 Weeks | ★★★★★ | ★★★★☆ |
| 7. Fabric Chart | Master | 1 Month | ★★★★★ | ★★★★★ |
| 9. Zero-Copy Data | Advanced | 1 Week | ★★★★☆ | ★★★★☆ |
| 12. SQLite Wrapper | Expert | 2 Weeks | ★★★★★ | ★★★★☆ |
| 15. Memory-Mapped | Master | 1 Month | ★★★★★ | ★★★★★ |
Recommendation
- For Beginners: Start with Project 1 (Logger) and Project 4 (View Manager) to see how the basic bridge works.
- For Advanced Developers: Jump to Project 6 (TurboModules) and Project 9 (Zero-Copy) to master the New Architecture.
Final Overall Project: The “Magma” Game Engine Bridge
What you’ll build: A cross-platform 2D game engine bridge using a custom Fabric Component for the game canvas, a TurboModule for high-speed input, and JSI to run a C++ physics engine at 60fps.
Summary
This learning path covers React Native Internals through 15 hands-on projects.
| # | Project Name | Main Language | Difficulty |
|---|---|---|---|
| 1 | Pure Logger Bridge | Java / Obj-C | Beginner |
| 2 | Battery Monitor | Java / Obj-C | Intermed. |
| 3 | Key-Value Sync JSI | C++ | Advanced |
| 4 | Custom View Manager | Java / Obj-C | Intermed. |
| 5 | Headless JS Sync | Java | Advanced |
| 6 | TurboModule Codegen | TypeScript/C++ | Expert |
| 7 | Fabric Component | C++ | Master |
| 8-15 | Advanced JSI/System | C++ | Advanced-Master |
Expected Outcomes
After completing these projects, you will deeply understand the threading model, the transition from Bridge to JSI, and how to build high-performance native extensions for React Native.