TurboModules

Learn TurboModules and JSI-based modules.

What are TurboModules?

TurboModules are native modules bound to the JS side through JSI. They replace the old NativeModules; modules are loaded lazily, on demand.

A TurboModule is defined by a TypeScript spec file and registered with TurboModuleRegistry.getEnforcing. Codegen produces the C++/Java/Objective-C skeleton from this spec.

The spec file

The TurboModule spec file is a .ts file. It defines an interface extending TurboModule; each method's signature is written there. Codegen reads this file.

The file name should follow Native<Name>.ts; e.g. NativeMath.ts. It usually lives at src/NativeMath.ts.

Exercise Write the TurboModule spec

Write a TurboModule spec file named NativeMath.ts. Define a Spec interface extending TurboModule with a method add(a: number, b: number): number. Export it with export.

Show example solution

import type { TurboModule } from 'react-native/Libraries/TurboModule/RCTExport';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): number;
}

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

Test yourself

Write the TurboModule registration call

const Module = TurboModuleRegistry.____('MyModule');

Show answer

const Module = TurboModuleRegistry.getEnforcing('MyModule');

Match the TurboModule pieces

Spec file

TypeScript interface
getEnforcing

Fetches module
Codegen

Generates C++ skeleton
NativeModules

Old system
When are TurboModules loaded?
- On demand (lazy)
- All at app startup
- Only in release builds
- Only on iOS
Show answer

Only on iOS — TurboModules are loaded lazily on first call.

Next lesson: Codegen

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies