0Pricing
React Native Academy · Pelajaran

Modul Native Turbo dengan JSI

Tentukan file spesifikasi TypeScript untuk Turbo Native Module, implementasikan dalam Kotlin dan Swift menggunakan interface yang dihasilkan codegen, lalu panggil modul secara sinkron melalui JSI.

Modul Native Turbo dengan JSI adalah pelajaran React Native Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar React Native Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Native Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

The Problem with the Legacy Bridge

The legacy React Native bridge serializes every message between JavaScript and native into JSON, then deserializes it on the other side. This round-trip adds latency for every native call and blocks threads while serialization happens. For frequent calls like scroll events or animations, this overhead causes frame drops. JSI (JavaScript Interface) was created to eliminate this bottleneck.

What Is JSI

JSI (JavaScript Interface) is a lightweight C++ layer that lets JavaScript hold direct references to C++ host objects. Instead of sending a JSON-serialized message across the bridge, a JS call invokes a C++ function pointer directly and synchronously. This means native calls can be synchronous, zero-copy, and orders of magnitude faster than bridge-based calls.

Turbo Modules Architecture Overview

Turbo Native Modules are the new module system built on JSI. Key differences from legacy modules include: lazy loading (modules initialize only when first accessed instead of all at startup), typed interfaces (generated from a TypeScript spec so types are guaranteed on both sides), and synchronous calls possible without blocking the JS thread via JSI. The codegen tool generates the boilerplate C++ and native glue code automatically.

Writing the TypeScript Spec File

A Turbo Module starts with a TypeScript spec file that declares the module's interface. This file lives in your project and is processed by react-native-codegen to generate native interface files. The spec must import TurboModuleRegistry and define a type that extends TurboModule.

// NativeDeviceInfo.ts (spec file)
import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  getDeviceModel(): string;
  getBatteryLevel(): Promise<number>;
  addListener(eventType: string): void;
  removeListeners(count: number): void;
}

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

Running Codegen to Generate Native Code

After writing the TypeScript spec, you run React Native Codegen to generate the native interface files. For managed Expo projects, this happens automatically during expo prebuild. For bare React Native projects, run yarn react-native codegen. Codegen outputs Swift/Kotlin interfaces and C++ glue code in the build/generated folder that your native implementation must conform to.

# Bare React Native — run codegen manually
cd android && ./gradlew generateCodegenArtifactsFromSchema

# Then check generated files
ls android/app/build/generated/source/codegen/jni/
# NativeDeviceInfoJSI-generated.cpp
# NativeDeviceInfoJSI.h

Implementing the Module in Kotlin

The Kotlin implementation must extend the codegen-generated abstract class (e.g., NativeDeviceInfoSpec) and override each method declared in the spec. Because the signatures are generated from TypeScript, there is no type mismatch between JS and native — the codegen enforces them at build time rather than at runtime.

// DeviceInfoModule.kt
package com.yourapp

import com.facebook.react.bridge.ReactApplicationContext
import com.yourapp.NativeDeviceInfoSpec

class DeviceInfoModule(context: ReactApplicationContext) :
    NativeDeviceInfoSpec(context) {

    companion object {
        const val NAME = 'DeviceInfo'
    }

    override fun getName(): String = NAME

    override fun getDeviceModel(): String {
        return android.os.Build.MODEL
    }
}

Implementing the Module in Swift

The Swift implementation conforms to the codegen-generated protocol (e.g., NativeDeviceInfoSpec). Unlike legacy modules, there is no separate bridge .m file needed for Turbo Modules — the JSI layer handles the binding automatically once the module is registered. The protocol guarantees that the Swift method signatures match the TypeScript spec exactly.

// DeviceInfoModule.swift
import Foundation

@objc(DeviceInfoModule)
class DeviceInfoModule: NSObject, NativeDeviceInfoSpec {

  func getDeviceModel() -> String {
    return UIDevice.current.model
  }

  func getBatteryLevel(
    _ resolve: @escaping RCTPromiseResolveBlock,
    reject: @escaping RCTPromiseRejectBlock
  ) {
    UIDevice.current.isBatteryMonitoringEnabled = true
    resolve(UIDevice.current.batteryLevel * 100)
  }
}

Synchronous Calls via JSI

One of the biggest JSI benefits is the ability to call native synchronously from JS. When a Turbo Module method returns a non-Promise type (like string or number in the spec), JSI can return the value immediately without scheduling an async callback. This unlocks patterns like reading cached values synchronously that were impossible with the legacy bridge.

// TypeScript spec — synchronous return type
export interface Spec extends TurboModule {
  getDeviceModel(): string;  // synchronous
  getBatteryLevel(): Promise<number>;  // still async
}

// Usage in JS — getDeviceModel() is synchronous
import NativeDeviceInfo from './NativeDeviceInfo';

const model = NativeDeviceInfo.getDeviceModel(); // no await needed
console.log('Model:', model);

Enabling the New Architecture

Turbo Modules require the New Architecture to be enabled in your project. For Android, set newArchEnabled=true in android/gradle.properties. For iOS, set RCT_NEW_ARCH_ENABLED=1 in the Podfile and run pod install. Expo SDK 50+ enables the new architecture automatically for managed workflow projects using the latest config.

# android/gradle.properties
newArchEnabled=true

# ios/Podfile — add before use_react_native!
ENV['RCT_NEW_ARCH_ENABLED'] = '1'

# Then reinstall pods
cd ios && pod install

Registering a Turbo Module

Turbo Modules are registered via a TurboModuleManagerDelegate instead of a ReactPackage. On Android you modify MainApplicationTurboModuleManagerDelegate.kt; on iOS you modify RCTAppDelegate.mm. The codegen also generates a ModuleProvider that wires up the module automatically when you follow the standard naming conventions.

// Android: MainApplicationTurboModuleManagerDelegate.kt
override fun getModule(
    reactApplicationContext: ReactApplicationContext,
    name: String
): NativeModule? {
    return when (name) {
        DeviceInfoModule.NAME -> DeviceInfoModule(reactApplicationContext)
        else -> null
    }
}

Comparing Legacy vs Turbo Module Performance

Benchmarks show Turbo Modules can be 2–3x faster for high-frequency calls compared to legacy bridge modules. The improvement is most noticeable for calls made in rapid succession — such as gesture handlers or animation drivers. For infrequent calls like camera setup, the difference is negligible. Migrate to Turbo Modules when performance-critical native code needs to keep up with 60fps interactions.

// Performance benchmark pattern
const ITERATIONS = 10000;
const start = Date.now();

for (let i = 0; i < ITERATIONS; i++) {
  // Synchronous JSI call
  const model = NativeDeviceInfo.getDeviceModel();
}

const elapsed = Date.now() - start;
console.log('10k JSI calls in', elapsed, 'ms');
// Turbo: ~8ms  vs  Legacy bridge: ~80ms

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

In this lesson you learned: how JSI eliminates JSON serialization overhead from the legacy bridge, how to write a TypeScript spec file that codegen uses to generate native interfaces, and how to implement the generated spec in both Kotlin and Swift. You also saw how to enable the New Architecture and the performance benefits of synchronous JSI calls. Next up we explore async callbacks, promises, and native events.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Modul Native Turbo dengan JSI” gratis?

Ya — teks lengkap “Modul Native Turbo dengan JSI” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus React Native Academy, upgrade ke CoddyKit PRO. Kursus React Native Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Modul Native Turbo dengan JSI”?

Tentukan file spesifikasi TypeScript untuk Turbo Native Module, implementasikan dalam Kotlin dan Swift menggunakan interface yang dihasilkan codegen, lalu panggil modul secara sinkron melalui JSI. Kamu berlatih React Native Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai React Native Academy?

Tidak diperlukan pengalaman sebelumnya. React Native Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “Modul Native Turbo dengan JSI” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran React Native Academy ini?

Ya. Setiap pelajaran React Native Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Menulis Modul Native Lama dalam Kotlin
  2. Menulis Modul Native Lama dalam Swift
  3. Modul Native Turbo dengan JSI
  4. Callback Asinkron, Promise, dan Event dari Native
← Kembali ke React Native Academy