Belajar Mobile Developer - Cross-Platform React Native + Expo

#Pendahuluan

Setelah menguasai dua native platform di episode 3 dan 4, saatnya strategi yang mendominasi industri 2026: React Native (RN) + Expo. Ide dasarnya brilian dan sederhana — tulis sekali dengan JavaScript/TypeScript, jalankan di Android dan iOS sekaligus. Di web kalian menulis React; di mobile, React Native membawa pola yang sama (komponen, hooks, state) ke layar ponsel.

Mengapa RN penting? Karena bagi kalian yang berasal dari web, ini jalur tercepat masuk ke mobile. Expo menyederhanakan build, device testing, dan update over-the-air — sehingga 2026 adalah era terbaik untuk memulai RN.

#Prinsip Kerja React Native

RN tidak men-render HTML seperti React di web. Ia memetakan komponen React ke native view (UIView di iOS, View di Android) lewat bridge atau, di arsitektur baru, lewat JSI (JavaScript Interface). Artinya kalian dapat komponen yang berperilaku dan tampil native, tetapi ditulis dalam JS.

import { Text, View, Pressable } from "react-native";
 
export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Halo dari Fitku</Text>
      <Pressable onPress={() => console.log("mulai workout")}>
        <Text>Mulai Workout</Text>
      </Pressable>
    </View>
  );
}

Perhatikan: tidak ada <div> atau <button> — semua komponen native (View, Text, Pressable). Styling memakai objek style (StyleSheet) yang mirip CSS tetapi berbasis Yoga layout engine.

#New Architecture (Fabric)

RN generasi baru — New Architecture — menggantikan bridge lama dengan arsitektur berbasis JSI dan renderer Fabric:

• Fabric renderer: sinkronisasi UI lebih cepat, dukungan concurrent rendering, dan interop penuh dengan API native.
• TurboModules: panggilan native async dengan memori lebih kecil.
• Codegen: menghubungkan kode JS dengan native secara type-safe.

RN Lama (Bridge)          RN Baru (New Architecture)
JS ──serialize──▶ Bridge  JS ──JSI──▶ C++ core
    ◀──async──── ┤            ◀─sync─┘
                  └─▶ Native        └─▶ Fabric (renderer) ─▶ Native

Dampak praktisnya: aplikasi lebih responsif, start-up lebih cepat, dan interoperasi native lebih mudah. Proyek baru 2026 sudah memakai New Architecture secara default.

#Kenapa Expo?

Expo adalah framework + platform di atas RN yang membuat pengembangan jauh lebih mudah:

• Expo Go: langsung uji di device fisik dengan scan QR — tanpa build Xcode/Gradle.
• EAS (Expo Application Services): cloud build untuk Android/iOS, submit ke store, dan update over-the-air.
• Kaya API terkelola: kamera, lokasi, notifikasi, biometrik — tanpa menulis native.
• SDK terpin: versi dependensi selaras, mengurangi konflik build.

Bagi proyek produksi kecil-menengah, Expo bahkan menjadi rekomendasi resmi pertama di dokumentasi RN. Kalian tetap bisa me-prebuild untuk mengakses kode native bila perlu.

#Praktik: Aplikasi Fitku dengan Expo

Mulai proyek dengan template TypeScript:

npx create-expo-app@latest fitku --template blank-typescript
cd fitku
npx expo start

Setelah berjalan, tekan a untuk emulator Android atau i untuk iOS simulator, atau scan QR di Expo Go. Sekarang bangun layar beranda Fitku:

import { useState } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
export default function HomeScreen() {
  const [steps, setSteps] = useState(0);
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Halo, Fitku!</Text>
      <View style={styles.card}>
        <Text style={styles.label}>Langkah hari ini</Text>
        <Text style={styles.count}>{steps}</Text>
      </View>
      <Pressable
        style={({ pressed }) => [styles.button, pressed && styles.buttonPressed]}
        onPress={() => setSteps((s) => s + 1)}
      >
        <Text style={styles.buttonText}>Tambah langkah</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 16 },
  title: { fontSize: 28, fontWeight: "bold" },
  card: { backgroundColor: "#e0f2fe", padding: 16, borderRadius: 12 },
  label: { fontSize: 12, color: "#475569" },
  count: { fontSize: 40, fontWeight: "bold", marginTop: 4 },
  button: { backgroundColor: "#2563eb", padding: 14, borderRadius: 10 },
  buttonPressed: { opacity: 0.8 },
  buttonText: { color: "#fff", textAlign: "center", fontWeight: "600" },
});

Perhatikan kemiripannya dengan React web — kalian hanya mengganti DOM element dengan komponen RN dan menyesuaikan styling.

#Common Pitfalls React Native

• Memakai gaya CSS murni: RN tidak mendukung semua properti CSS. Pakai StyleSheet dan ketahui properti yang didukung.
• Navigasi manual: jangan bangun tab sendiri — pakai React Navigation/Expo Router (episode 12).
• Mengabaikan bundle size: aplikasi membengkak; audit dependensi dan pakai lazy loading (episode 15).
• Lupa state preservation: FlatList/SectionList untuk daftar panjang, bukan .map().

#Penutup

Pada episode 5 ini, kalian telah menguasai fondasi cross-platform RN:

• RN memetakan komponen React ke native view; New Architecture (Fabric + JSI) membuatnya lebih cepat.
• Expo menyederhanakan setup, device testing (Expo Go), dan cloud build (EAS).
• Kalian membangun halaman beranda Fitku yang berjalan di Android & iOS dari satu codebase TS.
• Ekosistem JS (navigation, state, data fetching) tinggal dipetakan dari skill web.

Di episode 6 selanjutnya kita jelajahi pesaing utama RN: Flutter dengan Dart — memahami widget tree, perbedaan pendekatan rendering (Impeller), dan membangun halaman Fitku versi Flutter. Sampai jumpa!