React Native: apa itu, cara kerja Bridge dan lingkungan JavaScript

Apa itu React Native

React Native — adalah framework yang dibuat oleh tim Facebook (sekarang Meta) dan dirilis sebagai open-source pada tahun 2015. Berbeda dengan pendekatan hybrid (Cordova, Ionic), React Native tidak menggunakan WebView. Sebaliknya, komponen JavaScript dipetakan ke elemen UI native: View -> UIView / android.view.View, Text -> UILabel / TextView, ScrollView -> UIScrollView / ScrollView.

Versi pertama React Native hanya mendukung iOS. Dukungan Android ditambahkan pada tahun 2016. Versi 0.60 (2019) memperkenalkan Autolinking — menghubungkan dependensi native secara otomatis. React Native 0.68 (2022) menambahkan arsitektur baru Fabric + TurboModules. Versi stabil saat ini 0.74 (2024) telah sepenuhnya dipindahkan ke arsitektur New Architecture dengan dukungan Yoga 3.0 untuk tata letak Flexbox.

Menurut Statista 2024, React Native digunakan dalam 38% proyek lintas platform. Framework ini digunakan oleh Discord, Instagram, Shopify, Pinterest, Skype dan Uber Eats. Meta menggunakan React Native di Facebook dan Instagram — aplikasi mobile utama dengan 2 miliar pengguna.

Sejarah dan evolusi React Native

React Native diumumkan di React.js Conf pada Januari 2015. Idenya adalah memindahkan paradigma deklaratif React dari web ke platform mobile. Komit pertama di repositori muncul pada tahun 2013 sebagai proyek internal Facebook untuk membuat aplikasi Facebook Groups di iOS.

Versi 0.70 (2022) memperkenalkan Hermes sebagai mesin JavaScript default. Hermes adalah mesin dengan kompilasi awal (AOT), dioptimalkan untuk perangkat mobile. Ini mengurangi waktu mulai aplikasi hingga 50% dan ukuran APK hingga 30% dibandingkan dengan JavaScriptCore. Hermes mendukung ES6 dan sebagian ES2020.

Perbedaan antara React Native dan React Web

React Web merender komponen ke elemen DOM (div, span, p) melalui ReactDOM. React Native merender ke komponen native platform. Alih-alih <div> digunakan <View>, alih-alih <span> — <Text>. Gaya ditetapkan melalui objek StyleSheet.create(), yang diterjemahkan ke properti CSS platform. Flexbox diaktifkan secara default melalui mesin Yoga.

Navigasi di React Native berbeda dari web. Alih-alih react-router-dom digunakan React Navigation — pustaka native dengan dukungan untuk navigator Stack, Tab dan Drawer. React Navigation 6.x menggunakan animasi native (useNativeDriver) dan integrasi dengan Deep Links. Untuk navigasi native layar iOS UINavigationController dan Android Fragment, digunakan pustaka react-native-navigation dari Wix.

Arsitektur React Native

Arsitektur React Native secara tradisional dibangun di sekitar Bridge — saluran JSON asinkron antara lingkungan JavaScript dan kode native. Mulai versi 0.68, Meta memperkenalkan New Architecture, yang menggantikan Bridge dengan JSI (JavaScript Interface) dan Fabric. Mari kita lihat kedua model.

Bridge dan Fabric

Bridge — adalah protokol JSON yang diserialisasi yang berjalan di beberapa thread: JS Thread (interpretasi kode React), Main Thread (UI) dan Native Modules Thread (API). Setiap interaksi antara JS dan kode native melalui serialisasi dan deserialisasi objek, yang menyebabkan penundaan pada panggilan yang sering. Saat menggulir daftar 1000 elemen, Bridge menghasilkan hingga 10.000 pesan JSON per detik.

Fabric — sistem render baru di React Native. Alih-alih Bridge, Fabric menggunakan C++ Shadow Tree yang sinkron dengan thread UI melalui JSI. Ini menghilangkan serialisasi JSON: kode C++ native langsung memanggil fungsi di lingkungan JavaScript dan sebaliknya. Fabric mengurangi latensi render dari 16 ms (Bridge) menjadi 2–4 ms.

TurboModules — bagian kedua dari New Architecture. Dalam model lama, semua modul native dimuat saat aplikasi dimulai. TurboModules memuat modul secara lambat (lazy loading) — hanya ketika kode JS pertama kali memintanya. Ini mengurangi waktu mulai dingin hingga 40% pada aplikasi dengan 20+ modul native.

Contoh aplikasi di React Native

import React from 'react';
import { View, Text, StyleSheet, FlatList } from 'react-native';

const App = () => {
  const data = [
    { id: '1', title: 'React Native' },
    { id: '2', title: 'Flutter' },
  ];

  return (
    <View style={styles.container}>
      <FlatList
        data={data}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Text>{item.title}</Text>
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 16,
  },
});

export default App;

Modul native

Modul native — adalah mekanisme untuk memanggil API platform dari JavaScript. Jika fungsionalitas tidak tercakup oleh komponen standar React Native (kamera, Bluetooth, biometrik), pengembang menulis modul dalam Swift/Kotlin dan mendaftarkannya melalui RCTBridgeModule atau TurboModule. Fungsi native dipanggil dari JS melalui NativeModules.CameraModule.takePhoto().

React Native menyediakan modul native siap pakai untuk akses ke akselerometer (react-native-sensors), geolokasi (@react-native-community/geolocation), biometrik (react-native-biometrics) dan notifikasi lokal (@notifee/react-native). Untuk skenario khusus, Expo menawarkan Expo Modules API — antarmuka yang lebih sederhana untuk membuat modul native tanpa Xcode atau Android Studio.

Keunggulan React Native

Komunitas besar — React Native memiliki komunitas terbesar di antara framework lintas platform. Di GitHub, proyek ini memiliki 117.000+ bintang, 1800+ kontributor. npm mengunduh react-native 3 juta+ kali per minggu. Pertanyaan tentang React Native mencakup 5% dari semua pertanyaan di bagian pengembangan mobile Stack Overflow.

Ekosistem JavaScript — pengembang React menggunakan alat yang sama seperti di web: npm, Babel, ESLint, Prettier, Jest, TypeScript. Logika bisnis dapat digunakan kembali antara versi web (React) dan aplikasi mobile (React Native). Pustaka Redux, Zustand, React Query, React Hook Form berfungsi di kedua platform tanpa perubahan.

Expo — adalah SDK dan alat yang menyederhanakan pengembangan di React Native. Expo menyediakan modul siap pakai (kamera, notifikasi, peta, OAuth), build cloud (EAS Build) dan pembaruan OTA (EAS Update). Expo Go memungkinkan menjalankan aplikasi di perangkat fisik tanpa Xcode dan Android Studio. Menurut data Expo 2024, 70% proyek React Native baru menggunakan Expo.

Pembaruan OTA — fitur yang tersedia melalui Expo Update dan CodePush (Microsoft). Pengembang dapat mengirim pembaruan paket JavaScript langsung ke pengguna tanpa melalui tinjauan App Store atau Google Play. Ini mempercepat perbaikan bug kritis dari 2–5 hari (menunggu tinjauan) menjadi 1–2 jam.

Dukungan TypeScript diaktifkan secara default sejak React Native 0.71. Templat proyek mencakup tsconfig.json, tipe untuk semua komponen dan dukungan untuk strict mode. Flow (pengetikan statis dari Facebook) juga didukung, tetapi Meta secara resmi merekomendasikan TypeScript. Templat TypeScript mencakup 85% proyek baru menurut survei State of React Native 2024.

Ekosistem dan pustaka populer

npm — registri paket utama untuk React Native. Pencarian pustaka difilter dengan kata kunci react-native. Untuk instalasi digunakan npm install atau yarn add. React Native CLI secara otomatis menautkan dependensi native (sejak versi 0.60). Untuk proyek Expo, instalasi dikelola melalui expo install, yang memilih versi pustaka yang kompatibel.

Pustaka utama

@react-navigation/native — standar de facto untuk navigasi di React Native. Pustaka ini mencakup Stack Navigator (transisi animasi), Tab Navigator (menu bawah untuk iOS/Android), Drawer Navigator (menu samping) dan Material Top Tab. React Navigation 7.x (2024) memperkenalkan konfigurasi rute statis dan dukungan penuh untuk React 18 dengan useSyncExternalStore.

react-native-reanimated — pustaka untuk animasi berkinerja tinggi. Reanimated 3.x menjalankan animasi di thread UI (worklet), melewati thread JS. Ini menjamin 60 FPS bahkan saat menganimasikan 100+ elemen. useSharedValue, useAnimatedStyle dan withSpring menggantikan Animated API dari paket standar. Reanimated menangani gerakan sentuh melalui react-native-gesture-handler.

@tanstack/react-query — pustaka untuk mengelola status server. React Query menyimpan cache respons API, secara otomatis meminta ulang data saat jaringan berubah (refetchOnReconnect) dan mendukung paginasi dengan useInfiniteQuery. Versi 5.x menyertakan pembaruan optimis untuk UX — antarmuka diperbarui sebelum menerima respons server, kemudian dikoreksi.