Belajar React Native - Native Modules & TurboModules

#Pendahuluan

React Native memberi akses ke fitur native lewat native modules. Tanpa module, kalian tidak bisa menjangkau sensor, keyboard sistem, atau library native yang hanya tersedia di SDK iOS dan Android. Kemampuan ini membedakan aplikasi native dari sekadar web app.

Episode 10 menjelaskan cara kerja module di arsitektur lama dan baru — bridge vs TurboModules — termasuk interop layer yang membuat library lama tetap jalan. Kalian juga akan menulis module native pertama di Kotlin dan memanggilnya dari JavaScript, lalu mengenal community modules populer.

#Legacy Bridge vs TurboModules

#Cara Kerja Module Lama

Di arsitektur lama, native module didaftarkan lalu dipanggil melalui bridge yang asinkron dan menyerialisasi data ke JSON. Setiap panggilan membawa overhead, dan semua module dimuat sekaligus saat aplikasi start — memakan waktu dan memory.

#TurboModules di New Architecture

TurboModules menggantikan mekanisme ini dengan JSI — panggilan langsung JavaScript ke native tanpa serialisasi JSON. Module juga di-load lazy: hanya dimuat saat pertama kali dipakai. Kombinasi keduanya mempercepat startup dan mengurangi penggunaan memory.

#Interop Layer untuk Library Lama

#Kenapa Interop Diperlukan

Puluhan ribu library di npm ditulis untuk arsitektur lama. Jika semua harus ditulis ulang, migrasi New Architecture akan memakan waktu bertahun-tahun. Karena itu React Native menyediakan interop layer: module bridge lama diadaptasi otomatis agar tetap berjalan di arsitektur baru tanpa mengubah kode library.

#Konsekuensi Interop

Interop bekerja, tapi kinerjanya tetap seperti bridge — serialisasi dan asinkron. Untuk performa terbaik, pilih library yang sudah memakai JSI asli. Saat memilih library, cek status dukungannya di reactnative.directory; episode 21 dan 17 akan membahas ini lebih dalam.

#Menulis Module Native Pertama di Kotlin

#Membuat Module Android

Di project CLI, module Android ditulis dalam Kotlin di folder android/app/src/main/java. Contoh module sederhana yang menambahkan dua angka:

package com.myapp
 
import com.facebook.react.bridge.Promise
import com.facebook.react.bridge.ReactContextBaseJavaModule
import com.facebook.react.bridge.ReactMethod
 
class CalculatorModule : ReactContextBaseJavaModule() {
    override fun getName(): String = "Calculator"
 
    @ReactMethod
    fun tambah(a: Double, b: Double, promise: Promise) {
        promise.resolve(a + b)
    }
}

getName() mengembalikan nama module yang dipakai dari JavaScript, dan @ReactMethod menandai fungsi yang bisa dipanggil. Fungsi dengan Promise memungkinkan hasil asinkron dikirim balik ke JS.

#Mendaftarkan Module

Module harus didaftarkan lewat package agar React Native mengenalinya. Buat class CalculatorPackage yang mengimplementasi ReactPackage dan mendaftarkan module ke createNativeModules, lalu tambahkan package tersebut ke MainApplication.

#Memanggil Module dari JavaScript

#NativeModules

Di sisi JavaScript, module dipanggil lewat NativeModules dengan nama yang sama:

Memanggil module native dari JS

import { NativeModules } from "react-native";
 
const { Calculator } = NativeModules;
 
async function hitung() {
  try {
    const hasil = await Calculator.tambah(2, 3);
    console.log("Hasil:", hasil);
  } catch (error) {
    console.error("Gagal memanggil module", error);
  }
}

Calculator.tambah(2, 3) mengembalikan promise yang resolve ke hasil native. Rebuild aplikasi diperlukan setelah mengubah kode native — Fast Refresh tidak menjangkau layer ini.

#Membuat TypeScript Typing

Definisikan typing agar editor memvalidasi pemanggilan module:

Typing untuk native module

import { NativeModules } from "react-native";
 
interface CalculatorInterface {
  tambah(a: number, b: number): Promise<number>;
}
 
export const Calculator = NativeModules.Calculator as CalculatorInterface;

Dengan typing di atas, kesalahan tipe terdeteksi saat development, bukan saat aplikasi crash di perangkat user.

#Community Modules Populer

#Camera, Biometric, dan Maps

Tiga modul yang sering dibutuhkan aplikasi produksi — semuanya native module yang dibungkus API JavaScript:

npm install react-native-vision-camera
npm install react-native-biometrics
npm install react-native-maps

• react-native-vision-camera: kamera dengan kontrol frame, dibahas di episode 12.
• react-native-biometrics: autentikasi sidik jari dan Face ID, dibahas di episode 15.
• react-native-maps: peta native Apple Maps dan Google Maps.

#Mencocokkan dengan Dukungan New Architecture

Sebelum menginstall, cek apakah library sudah memakai JSI atau masih bergantung interop. Library modern seperti vision-camera dan Reanimated berjalan di atas JSI dan menawarkan performa yang jauh lebih baik.

#Penutup

Episode 10 membuka kotak hitam native: bridge lama yang asinkron digantikan TurboModules berbasis JSI, interop layer menjaga library lama tetap jalan, dan kalian kini bisa menulis module Kotlin lalu memanggilnya dari JavaScript.

Inti yang harus dibawa pulang:

• Bridge lama seri JSON dan asinkron; TurboModules langsung via JSI.
• Module native di-load lazy untuk startup yang lebih cepat.
• Interop layer mengadaptasi library lama, tapi tanpa peningkatan performa.
• @ReactMethod dan getName() adalah kontrak antara native dan JS.
• NativeModules memanggil module; rebuild native diperlukan setelah perubahan.
• Pilih community modules yang sudah mendukung JSI untuk performa terbaik.

Di episode 11 selanjutnya kita akan membahas push notifications dan background task: FCM untuk Android dan APNs untuk iOS, alur permission, notification handler, serta react-native-background-fetch dengan strategi yang hemat baterai.