What is the Native Bridge?

The React Native Bridge is a communication layer that allows the JavaScript thread and the Native threads (iOS/Android) to talk to each other.

Because JavaScript and native languages (like Swift, Objective-C, Java, or Kotlin) cannot communicate directly, they require a middleman. The Bridge functions as a message broker.

How it works:

• Serialization: JavaScript converts actions or data into JSON strings.


• Asynchronous Transport: The JSON payload is sent asynchronously across the bridge.


• Deserialization: The native side decodes the JSON and executes the requested platform action (e.g., rendering a view or accessing hardware).

When is a Native Bridge Required?

By default, React Native handles everyday components (like or ) and APIs automatically. However, you must manually create a custom native bridge (via Native Modules or Native UI Components) in the following scenarios:

• Accessing Unsupported Hardware: When you need device features lacking a built-in React Native API—such as an advanced camera sensor, biometrics (FaceID/Fingerprint), or custom Bluetooth peripherals.
  


• Integrating Third-Party Native SDKs: When a service provider (like a payment gateway, analytics tool, or advertisement network) only gives you an iOS CocoaPod or an Android Gradle dependency.
  


• Reusing Existing Native Code: When you are migrating an older native app to React Native and want to salvage functional Kotlin, Swift, or Objective-C business logic.
  


• High-Performance Heavy Lifting: When executing intensive tasks—like image processing, audio manipulation, or complex database operations—that would otherwise freeze the single-threaded JavaScript environment.


• Custom UI Renders: When incorporating a platform-specific UI layout that cannot be fully built using React Native's standard cross-platform components.
  

Important Architectural Note

React Native heavily transitioned away from this legacy asynchronous Bridge.


The newer framework versions standardise the New Architecture, swapping out the JSON bridge for the JavaScript Interface (JSI). JSI allows JavaScript to hold direct C++ memory references to native methods. This shift unlocks synchronous execution and completely eliminates JSON serialization delays, solving historic performance bottlenecks. Instead of creating old "bridges", you will typically now build TurboModules and Fabric Components.

Are you planning to build a custom native module for a specific device feature, or are you troubleshooting a performance bottleneck in your current app? Let me know in the comments.

The transition away from the old JSON native bridge to JSI (JavaScript Interface) happened as a gradual rollout over several years.

The Transition Timeline

1. When did React Native move to JSI?

The transition to JSI began experimentally in March 2022 with the release of React Native 0.68. This release introduced the very first pillars of the New Architecture (TurboModules and the Fabric renderer), which relied on JSI rather than the old asynchronous bridge.

2. To which version was the Native Bridge supported?

The old bridge framework was supported as the primary, default engine up through React Native 0.75. Here is how the deprecation and complete removal unfolded:

• React Native 0.76 (October 2024): The New Architecture (JSI-powered) became the default for all new projects. An interoperability layer still existed, allowing legacy bridge-based modules to function via a temporary compatibility shim.


• React Native 0.82 (October 2025): The legacy architecture was permanently disabled. Developers lost the ability to opt out of the New Architecture via flags (newArchEnabled=false was removed).


• React Native 0.85 (April 2026): The legacy bridge code was removed from the codebase entirely. There is no longer a fallback mechanism or bridge interoperability layer.
  

Architectural Milestone Summary

Starting in React Native 0.85, you can no longer use the old, asynchronous JSON native bridge. The legacy bridge code has been completely removed from the framework's core repository.


However, this does not mean you can no longer write custom native code. It just means the mechanism has completely changed.

What is Gone vs. What Replaces It

• ❌ What you cannot do anymore: You can no longer use RCTBridgeModule (iOS) or ReactContextBaseJavaModule (Android) to pass serialized JSON data back and forth asynchronously. The "interop layer" that let these old modules run on newer versions has been fully deleted.
  


• ✅ What you must do instead: You must write Turbo Native Modules and Fabric Components. They achieve the exact same goal (allowing JavaScript to trigger native code) but use JSI to call C++ functions directly, providing instant, synchronous execution without JSON serialization.
  

The Practical Impact

1. For App Developers: If your project targets React Native 0.85, any internal native code you previously wrote using the old bridge format must be rewritten into TurboModules.


2. For Third-Party Libraries: Any community npm package that has not updated its code to support the New Architecture will break or crash your build immediately in 0.85.

🚀 Why Learning the React Native JSON Bridge Still Matters in 2026

Learning the legacy JSON bridge is incredibly valuable because it teaches you the fundamental, underlying mechanics of how cross-platform frameworks handle inter-process communication (IPC).

Even as modern frameworks transition to zero-latency, direct-memory solutions like the JavaScript Interface (JSI), mastering the bridge gives you a deep, conceptual understanding of data serialization, asynchronous thread management, and the architectural trade-offs inherent in decoupling user interfaces from native operating systems.

Furthermore, the vast majority of enterprise-level React Native applications currently running in production were built over the last decade and still rely heavily on legacy bridge systems. By knowing how the bridge operates, you instantly become a highly competitive engineer capable of maintaining, troubleshooting, and strategically migrating massive, real-world codebases to newer architectures.

🛠️ Step-by-Step Tutorial: Building Your First JSON Native Bridge

In this tutorial, we will build a custom native module that performs a simple arithmetic addition on the native side (Android and iOS) and returns the result back to JavaScript. This will give you a clear, hands-on understanding of how data flows across the legacy JSON bridge.

Step 1: Initialize a Bridge-Compatible React Native App

Because modern versions of React Native disable the legacy bridge by default, we need to explicitly initialize our project using React Native 0.75.4.

Run the following command in your terminal:

npx @react-native-community/cli@latest init JsonBridgeDemo --version 0.75.4

cd JsonBridgeDemo

📂 Get the Full Source Code

Want to skip the manual file configuration and see the complete working project immediately? I have uploaded the entire sandbox—including both the Java (Android) and Objective-C (iOS) bridge modules alongside the interactive React Native UI—to GitHub.

Feel free to clone it, explore the exact file organization we discussed, and use it as a reference playground for your own practice!

👉 View the Complete JSON Bridge Sandbox on GitHubQuick Start with the Repo:

# Clone the repository

git clone https://github.com

cd react-native-json-bridge-demo



# Install JS dependencies

npm install



# Run on Android

npx react-native run-android



# Run on iOS

cd ios && RCT_NEW_ARCH_ENABLED=0 bundle exec pod install && cd ..

npx react-native run-ios

🚀 Moving to the Future: Building Your First JSI / TurboModule Sandbox

Now that we have mastered how the legacy JSON bridge works, it is time to look forward. In modern React Native (versions 0.76 and newer), the asynchronous JSON bridge is replaced entirely by the JavaScript Interface (JSI).

With JSI, JavaScript references native C++ methods directly in memory. There is no JSON stringification, no message queuing, and execution is entirely synchronous. Instead of "native bridges", we now write Turbo Native Modules.

Step 1: Initialize a Modern JSI-Enabled Project

Unlike our previous playground, we want a framework version where the New Architecture and JSI are turned on by default. We will initialize a project using the latest version.

Run the following command in your terminal:

npx @react-native-community/cli@latest init JsiTurboModuleDemo

cd JsiTurboModuleDemo

Verify New Architecture State

Because we are using the latest version, the JSI engine is active out of the box. Let's verify it:

• For Android: Open android/gradle.properties and verify that newArchEnabled=true is set.


• For iOS: Run cd ios && bundle exec pod install && cd ... The CLI automatically configures the Fabric and TurboModule native pods.

Step 2: Define the JavaScript Spec (Codegen)

The modern architecture relies on strongly typed interfaces to automatically generate the type-safe C++ binding glue code between JavaScript and native files. This tool is called Codegen.

1. Create the Spec Folder Structure

Inside your root directory, create a folder named specs:

mkdir specs

2. Create the TypeScript Interface

Inside the specs folder, create a file named NativeCalculatorModule.ts. Paste this precise structural template:

import type { TurboModule } from 'react-native';

import { TurboModuleRegistry } from 'react-native';

// 1. Define the interface contract extending TurboModuleexport 

interface Spec extends TurboModule {

    addNumbers(a: number, b: number): number; // 👈 Synchronous execution! Returns a number directly instead of using a callback

}

// 2. Register the module naming convention with the TurboModule provider registry



export default TurboModuleRegistry.getEnforcing<Spec>('NativeCalculatorModule');

💡 Dev Note: Look at addNumbers. Notice that it returns a primitive number synchronously. In the legacy JSON bridge, everything had to be an asynchronous callback. JSI completely alters this rule!

Step 3: Configure package.json for Codegen

We must tell React Native to scan our new specs folder and generate the matching native code layouts during compilation.

Open your root package.json file and look for the "dependencies" block. Add a new configuration key named "codegenConfig" right at the bottom of the JSON object:

  "codegenConfig": {

    "name": "AppSpecs",

    "type": "modules",

    "jsSrcsDir": "specs",

    "android": {

      "javaPackageName": "com.jsiturbomoduledemo.specs"

    }

  }

Step 4: Implement the JSI Module on Android (Kotlin)

With the specification established, let's write our modern addition module using Kotlin.

1. Create the Kotlin Module File

Navigate to android/app/src/main/java/com/jsiturbomoduledemo/ and create a file named CalculatorModule.kt:

package com.jsiturbomoduledemo



import com.facebook.react.bridge.ReactApplicationContext

import com.jsiturbomoduledemo.specs.NativeCalculatorModuleSpec // 👈 Automatically available via Codegen



class CalculatorModule(reactContext: ReactApplicationContext) : NativeCalculatorModuleSpec(reactContext) {



    // Must match the string declared in the TypeScript Spec registry

    override fun getName(): String = NAME



    // Implement the addition method synchronously

    override fun addNumbers(a: Double, b: Double): Double {

        return a + b

    }



    companion object {

        const val NAME = "NativeCalculatorModule"

    }

}

2. Create the Package Registration File

In the same folder directory, create CalculatorPackage.kt:

package com.jsiturbomoduledemo



import com.facebook.react.TurboReactPackage

import com.facebook.react.bridge.NativeModule

import com.facebook.react.bridge.ReactApplicationContext

import com.facebook.react.module.model.ReactModuleInfo

import com.facebook.react.module.model.ReactModuleInfoProvider



class CalculatorPackage : TurboReactPackage() {



    override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {

        return if (name == CalculatorModule.NAME) {

            CalculatorModule(reactContext)

        } else {

            null

        }

    }



    override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {

        return ReactModuleInfoProvider {

            val moduleInfos = HashMap<String, ReactModuleInfo>()

            moduleInfos[CalculatorModule.NAME] = ReactModuleInfo(

                CalculatorModule.NAME,

                CalculatorModule.NAME,

                false, // canOverrideExistingModule

                false, // needsEagerInit

                false, // isCxxModule

                true   // isTurboModule 👈 Tells the runtime this is a JSI module!

            )

            moduleInfos

        }

    }

}

3. Update MainApplication.kt

Open android/app/src/main/java/com/jsiturbomoduledemo/MainApplication.kt and register the package inside your getPackages() list:

        override fun getPackages(): List<ReactPackage> =

            PackageList(this).packages.apply {

              // Packages that cannot be autolinked yet can be added manually here:

              add(CalculatorPackage()) // 👈 Add this line to register your TurboModule

            }

Step 5: Implement the iOS JSI TurboModule (Objective-C++)

On iOS, TurboModule JSI bindings must be implemented in Objective-C++ (.mm) so C++ types can be used for runtime bindings.

1. Create CalculatorModule.h

Create ios/JsiTurboModuleDemo/CalculatorModule.h:

#import <Foundation/Foundation.h>

#import <AppSpecs/AppSpecs.h> // Generated by RN Codegen



@interface CalculatorModule : NSObject <NativeCalculatorModuleSpec>

@end

2. Create CalculatorModule.mm

Create ios/JsiTurboModuleDemo/CalculatorModule.mm:

#import "CalculatorModule.h"

#import <React/RCTBridgeModule.h>



@implementation CalculatorModule



RCT_EXPORT_MODULE(NativeCalculatorModule)



- (NSNumber *)addNumbers:(double)a b:(double)b

{

  return @(a + b);

}



- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params

{

  return std::make_shared<facebook::react::NativeCalculatorModuleSpecJSI>(params);

}



@end

3. Ensure files are in the iOS target

Open ios/JsiTurboModuleDemo.xcworkspace in Xcode and confirm:

• 
  CalculatorModule.h and CalculatorModule.mm are added to the project.


• 
  CalculatorModule.mm is included in the JsiTurboModuleDemo target’s Compile Sources.

Step 6: Consume the synchronous module in JavaScript

Update App.tsx:

import React, {useState} from 'react';

import {StyleSheet, Text, View, TextInput, Button} from 'react-native';

import NativeCalculatorModule from './specs/NativeCalculatorModule';



export default function App() {

  const [number1, setNumber1] = useState('50');

  const [number2, setNumber2] = useState('25');

  const [result, setResult] = useState<number | null>(null);



  const handleCalculate = () => {

    const num1 = parseFloat(number1) || 0;

    const num2 = parseFloat(number2) || 0;



    // Synchronous TurboModule call over JSI

    const nativeResult = NativeCalculatorModule.addNumbers(num1, num2);

    setResult(nativeResult);

  };



  return (

    <View style={styles.container}>

      <Text style={styles.title}>JSI / TurboModule Calculator</Text>



      <TextInput

        style={styles.input}

        keyboardType="numeric"

        value={number1}

        onChangeText={setNumber1}

      />

      <Text style={styles.plus}>+</Text>

      <TextInput

        style={styles.input}

        keyboardType="numeric"

        value={number2}

        onChangeText={setNumber2}

      />



      <Button title="Calculate instantly via JSI" onPress={handleCalculate} />



      {result !== null && (

        <Text style={styles.resultText}>Instant Result: {result}</Text>

      )}

    </View>

  );

}



const styles = StyleSheet.create({

  container: {

    flex: 1,

    justifyContent: 'center',

    alignItems: 'center',

    backgroundColor: '#fff',

    padding: 20,

  },

  title: {

    fontSize: 20,

    fontWeight: 'bold',

    marginBottom: 20,

  },

  input: {

    width: 200,

    height: 40,

    borderColor: 'gray',

    borderWidth: 1,

    textAlign: 'center',

    marginVertical: 10,

    borderRadius: 5,

    fontSize: 18,

  },

  plus: {

    fontSize: 24,

    fontWeight: 'bold',

    marginVertical: 10,

  },

  resultText: {

    fontSize: 22,

    color: 'blue',

    marginTop: 20,

    fontWeight: '600',

  },

});

Step 7: Build and run

From project root:

# iOS (run once after native/codegen changes)

cd ios && pod install && cd ..

npx react-native run-ios



# Android

npx react-native run-android

If iOS build still uses stale artifacts, clean build folder in Xcode and rerun.

📂 Get the Full JSI Source Code

Want to skip the file configurations and explore a fully functional, zero-latency production setup right now? I have published the entire sandbox codebase—featuring the TypeScript spec files, Kotlin (Android) configurations, and Objective-C++ (iOS) native interfaces—to GitHub.

Feel free to clone it, reference the layout files, and use it as your modern, New Architecture practice template!

👉 View the Complete JSI / TurboModule Sandbox on GitHub

Quick Start with the Repo:

Clone the repository

git clone https://github.com

cd react-native-jsi-turbo-module-demo

Install project dependencies

npm install

Run on Android (New Architecture active by default)

npx react-native run-android

Run on iOS (Installs Fabric and TurboModule pods dynamically)

cd ios && bundle exec pod install && cd ..

npx react-native run-ios

⚖️ Summary: Legacy JSON Bridge vs. Modern JSI

To wrap up this evolution timeline, let's look at a direct architectural comparison between what we built in the first playground versus our modern JSI sandbox:

🏁 Conclusion

Understanding where React Native came from helps you appreciate where it is today. While the legacy JSON bridge was a groundbreaking concept that powered cross-platform apps for nearly a decade, the shift to JSI turns React Native into a truly native-speed engine.

As a mobile developer, mastering both sides of this equation prepares you to support aging enterprise apps while confidently architecting high-performance modern applications.