TurboModules: Native Calls Without the Hold Music

The React Native bridge used to be like a polite but painfully slow customs officer. Every time JavaScript wanted to talk to native code—play a sound, open the camera, check the weather—it had to serialise a message, queue it, ship it across the “bridge,” and hope it made it to the other side in time. For simple apps, it was fine. For anything ambitious, it was a bottleneck in disguise.
‍

Enter TurboModules, part of the New Architecture, and the bridge is out of a job. TurboModules let JavaScript talk directly to native code using JSI (JavaScript Interface), a low-level C++ layer that connects your JS runtime (like Hermes) straight to your platform-native functions—no serialization, no batching, no delay.
‍

This isn’t just faster—it’s a different model entirely. It’s like swapping carrier pigeons for teleportation, or alien tech 🛸

‍

Wait, So What’s the Difference Between JSI and TurboModules?
‍

Let’s break it down:
‍

• JSI (JavaScript Interface) is the low-level plumbing. It’s a C++ interface built into React Native that allows JavaScript and native code to talk directly. You can think of it like a fast lane into the JavaScript engine. JSI doesn’t care what the function is—it just provides the hook.
  ‍
• TurboModules are the system built on top of JSI that exposes native modules (i.e., platform APIs) to JavaScript. It adds structure: lazy loading, auto-generated bindings, and type-safe access. It’s like saying: “JSI gives you a power outlet. TurboModules give you a toaster you can actually plug in.”

‍

So:

JSI is the capability → it makes the connection possible.
TurboModules are the implementation → they use that capability to expose native functionality in a fast, structured, and developer-friendly way.

‍

What Exactly Is a TurboModule?
‍

At its core, a TurboModule is a native module exposed to JavaScript via JSI. That means it lives on the native side (iOS or Android) but can be called from JavaScript like any other object. And unlike the old system, these modules are lazily initialized—they don’t even get loaded until you need them, reducing startup bloat.

Even better? You don’t have to hand-stitch all the native glue code yourself. Thanks to Codegen, you can define your module interface in TypeScript, and React Native’s tooling will auto-generate the necessary C++ and Java/Kotlin/Obj-C bindings for you.

Here’s what that looks like:
‍

// MyModule.spec.ts
import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  getDeviceName(): string;
  vibrateDevice(duration: number): void;
}

export default TurboModuleRegistry.get<Spec>('MyModule');

‍

This .spec.ts file becomes the source of truth—from it, Codegen produces everything needed to wire up the JavaScript and native layers, without you ever touching JNI (Java Native Interface) or writing JNI macros by hand at 2 a.m.

‍

Why You Should Care (Even If You Never Write C++)
‍

If you’re building native modules—great, TurboModules will save you hours and reduce bugs. But even if you’re a JS-only dev, this still affects you. Many community libraries are moving to TurboModules (especially those that require high performance, like camera, audio, and animation libs), and your app will benefit from:
‍

• Lower startup times (thanks to lazy loading)
• Synchronous access to native APIs (no more async dance)
• Better performance across the board
  ‍
  

It also enables features like Fabric, Concurrent Rendering, and Bridgeless Mode—things that are quickly becoming the default.
‍

You don’t have to use TurboModules directly to feel their impact. If your app scrolls smoother, starts faster, or stops freezing mid-swipe—it’s probably because a TurboModule is doing its job in the background.
‍

TurboModules are React Native’s way of saying: “The bridge was fine. Until it wasn’t.”
‍

👉 TurboModules Documentation

‍