Create Turbo Module in the new Architecture of React Native 0.76

Create Turbo Module in the new Architecture of React Native 0.76: Improve Performance of Dynamic Pricing

This series of build for scale is about the advanced way to use React Native app.

Introduction

I will talk about methods, best practices, how-to use guides, and advanced approaches on how to use the most used tools and packages. Taking into account how to structure it in your app, how to architect the solution, and advanced approaches for a performant, secure, and scalable app.

This series is perfect for React Native developers of all levels who want to take their skills to the next level and build apps that stand the test of time. Whether you're a seasoned professional or just starting, you'll find invaluable knowledge and practical guidance to transform your React Native development journey.

Understanding the New Architecture

React Native has evolved significantly in recent years, introducing a new architecture designed to enhance performance, reduce complexity, and provide better native integration. At the heart of this architecture are Fabric and TurboModules — two key concepts that modern React Native developers should understand.

Understanding Fabric, TurboModules and Codegen

Fabric is the new rendering engine in React Native, offering improved rendering speed and efficiency. It works by aligning React Native more closely with React's Fiber architecture, enabling synchronous rendering for better performance.

TurboModules reimagine how native modules communicate with JavaScript. Unlike the older architecture, where communication was handled through a bridge with JSON serialization, TurboModules are designed to improve performance and reduce memory overhead. They achieve this by using JSI (JavaScript Interface) to provide a direct, synchronous link between JavaScript and native code.

Codegen is a tool in React Native that automates the generation of repetitive code, particularly for custom modules and components in the new architecture. It streamlines development by generating interface and implementation files based on specifications defined in a spec file.

New Performance Improvements

With the new React Native architecture, they get rid of the Bridge. According to the official announcement, removing the bridge improves startup time by avoiding bridge initialization, and the communication between native and React Native becomes much faster.

Dynamic Pricing Example

Understanding Dynamic Pricing

If you open any travel booking website on Apple Mac vs Windows machine, there is a difference in the pricing. The same applies for location (try using an Indian VPN to book a flight vs a Canadian VPN).

In mobile apps like Uber, prices change based on different aspects, with two particularly interesting factors:

• Battery state: It's common for the battery state to influence pricing in Uber
• Phone Model: iPhone users are often perceived as higher-value customers, influencing pricing

While Uber doesn't use React Native, dynamic pricing is a great model in the modern technological world.

Creating a Turbo Module - Step by Step Guide

Step 0: Read the Documentation

Best advice: Read the Official Documentation first to understand Turbo Modules and their implementation.

Step 1: Create the Module Specification

Create a folder called specs and create a file called NativeDeviceInfoTest.ts:

import { TurboModule, TurboModuleRegistry } from "react-native";
export interface Spec extends TurboModule {
  getBatteryState(): string;
  getDeviceModule(): string;
}
export default TurboModuleRegistry.getEnforcing<Spec>(
  'NativeDeviceInfoTest',
) as Spec;

Step 2: Configure Codegen

Add to your package.json:

{
  "codegenConfig": {
    "name": "NativeDeviceInfoTestSpec",
    "type": "modules",
    "jsSrcsDir": "specs",
    "android": {
      "javaPackageName": "com.newarchitecturern"
    }
  }
}

Run the following commands:

For iOS:

npx react-native codegen

For Android:

npx react-native run-android

Step 3: Implement the Native Module

Create a file called NativeDeviceInfoTest.m in the ios folder:

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
} from 'react-native';
import NativeDeviceInfoTest from './specs/NativeDeviceInfoTest';

const EMPTY = '<empty>';

function App(): React.JSX.Element {
  const [batteryState, setBatteryState] = React.useState<string | null>(null);
  const [deviceModel, setDeviceModel] = React.useState<string | null>(null);

  React.useEffect(() => {
    try {
      const nativeBatteryValue = NativeDeviceInfoTest?.getBatteryState() ?? EMPTY;
      const nativeDeviceModel = NativeDeviceInfoTest?.getDeviceModule() ?? EMPTY;
      setBatteryState(nativeBatteryValue);
      setDeviceModel(nativeDeviceModel);
    } catch (e) {
      console.error(e);
    }
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.sectionTitle}>Battery State</Text>
      <Text style={styles.sectionDescription}>{batteryState ?? EMPTY}</Text>
      <Text style={styles.sectionTitle}>Device Model</Text>
      <Text style={styles.sectionDescription}>{deviceModel ?? EMPTY}</Text>
    </SafeAreaView>
  );
}

Resources

• GitHub Repository
• React Native 0.76 and New Architecture
• Build for Scale Series

Conclusion

The new architecture of React Native combined with Fabric and TurboModules opens up a wide range of possibilities to build very dynamic and efficient applications. Whether for features related to dynamic pricing, user personalization, or advanced hardware integrations, TurboModules provide the flexibility and performance needed in modern mobile applications.

For more insights about React Native, React, and TypeScript, follow me on LinkedIn or Medium.