React Native

GM vibe coders!

Membangun aplikasi mobile untuk iOS dan Android secara bersamaan dulunya berarti harus menguasai dua bahasa dan dua ekosistem yang berbeda. React Native hadir sebagai solusi atas masalah itu—sebuah framework yang memungkinkan developer membangun aplikasi mobile native menggunakan JavaScript dan React.

Artikel ini membahas perjalanan React Native dari awal mula, arsitektur teknisnya, hingga bagaimana ia digunakan hari ini.

Sejarah Singkat React Native

Awal Mula: Hackathon Internal Facebook (2013)

React Native lahir dari sebuah hackathon internal di Facebook pada tahun 2013. Saat itu, tim engineering Facebook menghadapi masalah serius dengan pendekatan hybrid app menggunakan HTML5 yang lambat dan tidak responsif. Mark Zuckerberg sendiri pernah mengakui bahwa "bertaruh terlalu besar pada HTML5 adalah kesalahan terbesar kami."

Dari masalah itu, Jordan Walke—orang yang sama di balik ReactJS—memulai eksperimen: me-render komponen native iOS menggunakan JavaScript di background thread. Eksperimen ini menjadi cikal bakal React Native.

Open Source (2015)

Pada Januari 2015, Facebook memperkenalkan React Native di React.js Conf. Kemudian di Maret 2015, framework ini resmi di-open-source-kan untuk iOS. Dukungan Android menyusul di September 2015.

Respons komunitas sangat positif. Dalam hitungan bulan, ribuan developer mulai mengadopsinya. Perusahaan seperti Airbnb, Instagram, Uber Eats, Discord, dan Shopify mulai menggunakannya di production.

Evolusi Arsitektur: The New Architecture (2022–2024)

React Native tidak berhenti di situ. Tim Meta (sebelumnya Facebook) melakukan rewrite besar-besaran yang dikenal sebagai New Architecture, yang mencakup:

JSI (JavaScript Interface): Menggantikan bridge lama, memungkinkan komunikasi sinkron antara JavaScript dan native.
Fabric: Rendering system baru yang lebih efisien.
TurboModules: Lazy-loading native modules untuk performa startup yang lebih cepat.
Codegen: Otomatis generate type-safe native code dari JavaScript specs.

Perubahan ini secara fundamental mengubah cara React Native berkomunikasi dengan platform native—dari asynchronous bridge menjadi direct synchronous calls.

Bagaimana React Native Bekerja?

Arsitektur Dasar

Berbeda dengan framework hybrid seperti Cordova yang me-render UI di WebView, React Native me-render komponen native asli. Contoh sederhana:

jsx
import { View, Text, TouchableOpacity } from 'react-native'

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>
        Hello, React Native!
      </Text>
      <TouchableOpacity
        style={{ marginTop: 16, padding: 12, backgroundColor: '#007AFF', borderRadius: 8 }}
        onPress={() => alert('Pressed!')}
      >
        <Text style={{ color: 'white' }}>Tap Me</Text>
      </TouchableOpacity>
    </View>
  )
}

Komponen <View> akan menjadi UIView di iOS dan android.view.View di Android. Bukan WebView, bukan simulasi—native asli.

Thread Model

React Native beroperasi di beberapa thread:

JS Thread: Menjalankan business logic dan React rendering.
Main/UI Thread: Menangani rendering native dan gesture.
Shadow Thread (Legacy) / Background Thread: Menghitung layout menggunakan Yoga (Flexbox engine).

Dengan New Architecture (JSI), komunikasi antar thread menjadi jauh lebih cepat karena tidak perlu lagi serialisasi JSON melalui bridge.

Styling dengan Flexbox

React Native menggunakan Flexbox untuk layout, mirip dengan CSS di web tapi dengan beberapa perbedaan:

jsx

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column', // default di RN (beda dengan web yang 'row')
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  card: {
    padding: 20,
    borderRadius: 12,
    backgroundColor: 'white',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 8,
    elevation: 4, // Android shadow
  },
})

Tidak ada CSS file terpisah. Semua styling dilakukan inline menggunakan JavaScript objects melalui StyleSheet.create().

Expo: Mempercepat Development React Native

Apa itu Expo?

Expo adalah platform dan toolchain yang dibangun di atas React Native. Jika React Native menyediakan fondasi, Expo menyediakan seluruh infrastruktur pendukung agar developer bisa langsung produktif. Expo menyediakan:

Managed workflow: Tidak perlu sentuh Xcode atau Android Studio.
Pre-built native modules: Kamera, lokasi, notifikasi, dll—tinggal import.
OTA Updates: Push update ke user tanpa melalui App Store review.
EAS (Expo Application Services): Build dan submit ke store dari cloud.

Expo Go

Expo Go adalah aplikasi yang di-install di device fisik (iOS/Android). Fungsinya: menjalankan aplikasi React Native yang sedang di-develop tanpa perlu build native. Ini menghilangkan kebutuhan Xcode atau Android Studio di tahap awal development.

Workflow-nya:

bash

# Install Expo CLI
npx create-expo-app@latest my-app

# Masuk ke direktori
cd my-app

# Jalankan development server
npx expo start

Setelah itu, scan QR code yang muncul di terminal menggunakan Expo Go di device. Aplikasi langsung berjalan di device fisik dengan hot reload—setiap perubahan kode langsung terlihat tanpa restart.

Kapan Pakai Expo Go vs Development Build?

Skenario	Expo Go	Development Build
Prototyping cepat	✅	Overkill
Akses kamera/lokasi dasar	✅	✅
Custom native module	❌	✅
Library dengan native code (e.g., react-native-maps)	❌	✅
Production build	❌	✅

Expo Go cocok untuk prototyping, belajar, dan development awal. Ketika proyek membutuhkan native modules yang tidak tersedia di Expo Go, langkah selanjutnya adalah beralih ke Development Build:

bash

npx expo install expo-dev-client
npx expo run:android  # atau run:ios

Expo SDK dan Ekosistemnya

Expo menyediakan SDK yang sangat lengkap:

jsx

import * as Camera from 'expo-camera'
import * as Location from 'expo-location'
import * as Notifications from 'expo-notifications'
import * as FileSystem from 'expo-file-system'
import * as SecureStore from 'expo-secure-store'

Semua module ini sudah di-maintain, di-test, dan kompatibel satu sama lain. Tidak perlu berurusan dengan react-native link atau konfigurasi Gradle/CocoaPods secara manual.

React Native di 2026

React Native tetap menjadi salah satu pilihan utama untuk cross-platform mobile development. Beberapa fakta:

Meta masih aktif mengembangkan dan menggunakan React Native di Facebook, Instagram, dan Messenger.
Microsoft mengadopsinya untuk aplikasi Windows dan macOS (react-native-windows, react-native-macos).
Shopify memigrasikan seluruh aplikasi mobile mereka ke React Native.
New Architecture sudah menjadi default sejak React Native 0.76.

Ekosistem library-nya juga semakin matang: React Navigation, Reanimated, Gesture Handler, MMKV, Zustand—semuanya production-ready.

Kesimpulan

React Native adalah framework yang memungkinkan pembangunan aplikasi truly native dengan skill JavaScript/React. Ditambah dengan Expo yang menghilangkan friction setup, barrier untuk masuk ke mobile development menjadi jauh lebih rendah.

Bagi developer yang sudah familiar dengan React di web, transisi ke React Native terasa natural. Komponen, state management, hooks—semuanya konsep yang sama. Yang berbeda hanya target render-nya: bukan DOM, tapi native views.

Selamat vibe ngoding!