Turbo Modules overview in React Native

Introduction

Turbo Modules make React Native apps faster by improving how native code and JavaScript talk to each other.

When you want your app to load and run faster.

When you need smoother animations or quicker responses.

When your app uses a lot of native features and you want better performance.

When you want to reduce delays caused by communication between JavaScript and native code.

Syntax

React Native

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

Turbo Modules use a special registry to load native modules efficiently.

You define the native module interface in TypeScript or Objective-C/Java and access it via TurboModuleRegistry.

Examples

This example shows how to get a Turbo Module named 'MyModule' in React Native.

React Native

import {TurboModuleRegistry} from 'react-native';

const MyModule = TurboModuleRegistry.getEnforcing<MyModuleSpec>('MyModule');

Here we define the module's methods in TypeScript and then get the module instance.

React Native

interface MyModuleSpec {
  multiply(a: number, b: number): number;
}

const MyModule = TurboModuleRegistry.getEnforcing<MyModuleSpec>('MyModule');

Sample App

This React Native app uses a Turbo Module called 'MathModule' to multiply two numbers. When you press the button, it calls the native multiply method and shows the result.

React Native

import React from 'react';
import {Button, Text, View} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

interface MathModuleSpec {
  multiply(a: number, b: number): number;
}

const MathModule = TurboModuleRegistry.getEnforcing<MathModuleSpec>('MathModule');

export default function App() {
  const [result, setResult] = React.useState<number | null>(null);

  const handleMultiply = () => {
    const res = MathModule.multiply(3, 4);
    setResult(res);
  };

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Button title="Multiply 3 x 4" onPress={handleMultiply} />
      {result !== null && <Text>Result: {result}</Text>}
    </View>
  );
}

Important Notes

Turbo Modules improve app speed by reducing the time to call native code.

They require native code setup in Objective-C/Swift for iOS and Java/Kotlin for Android.

Turbo Modules are part of React Native's new architecture for better performance.

Summary

Turbo Modules speed up communication between JavaScript and native code.

Use TurboModuleRegistry to access native modules efficiently.

This helps make React Native apps faster and smoother.