React Native
Expo

React Native | Expo

Overview

Expo menyediakan toolchain terkurasi untuk React Native dengan setup cepat, Expo Go untuk pratinjau, serta layanan build (EAS) untuk rilis iOS/Android tanpa Xcode/Android Studio di awal.

Membuat Proyek

npx create-expo-app AwesomeProject
cd AwesomeProject
npm start

npm start membuka Expo CLI (Metro) dan menampilkan QR code untuk Expo Go.

Menjalankan Aplikasi

  • Expo Go: buka aplikasi Expo Go di perangkat, scan QR (Android) atau gunakan kamera (iOS).
  • Simulator/Emulator: gunakan tombol i (iOS simulator, macOS) atau a (Android emulator) di terminal Expo.

Struktur Proyek Singkat

  • app/ (untuk Expo Router) atau App.tsx sebagai entry.
  • app.json/app.config.ts: konfigurasi Expo.
  • Tidak ada folder native secara default; ditambahkan jika di-"prebuild".

Styling & Komponen

Komponen core React Native, plus library Expo (mis. expo-router, expo-image, expo-linear-gradient). Styling sama dengan React Native (StyleSheet/flexbox).

Fitur Expo Utama

  • Expo Go untuk pratinjau cepat.
  • Pustaka siap pakai (kamera, sensor, push, image).
  • Expo Router untuk navigasi file-based.
  • OTA updates (Expo Updates).
  • EAS Build dan EAS Submit untuk CI/CD rilis.

Build & Rilis dengan EAS

  1. Install CLI:
npm install -g eas-cli

  1. Login: eas login.

  2. Konfigurasi:

eas build:configure
  1. Build:
eas build --platform android
eas build --platform ios
  1. Submit ke store:
eas submit --platform android
eas submit --platform ios

Gunakan profil rilis di eas.json untuk mengatur channel, credentials, dll. Lihat https://docs.expo.dev/build/introduction/ (opens in a new tab).

OTA Updates

Expo Updates memungkinkan push update JS tanpa rebuild biner. Atur channel dan release menggunakan EAS Update:

eas update --branch production --message "Fix bug"

Lihat https://docs.expo.dev/eas-update/introduction/ (opens in a new tab).

Menambah Modul Native

Jika butuh modul native kustom, lakukan npx expo prebuild untuk membuat folder android/ dan ios/ (bare-like), lalu tambahkan modul native. Pastikan kompatibel dengan Expo SDK yang digunakan.

Debugging

  • Gunakan Dev Menu (shake/perintah keyboard) untuk reload dan debug.
  • Flipper didukung untuk project EAS dengan arsitektur baru (lihat di bawah).
  • Reset cache Metro: npx expo start -c.

Migrasi ke Bare Workflow

Jika memerlukan kontrol penuh native, jalankan npx expo prebuild lalu kelola project seperti React Native CLI. Eksklusi fitur hanya-Expo jika tidak diperlukan.

Flipper dengan Expo/EAS

  • Flipper didukung pada build EAS (development build/custom client) dengan Arsitektur Baru.
  • Pastikan menggunakan Expo SDK terbaru dan buat development build via EAS:
eas build --profile development --platform android
# atau
eas build --profile development --platform ios
  • Instal Flipper desktop, jalankan app development build di perangkat/emulator, lalu hubungkan lewat Flipper.
  • Untuk Expo Go standar, koneksi Flipper tidak tersedia; gunakan logging bawaan Dev Menu atau Remote JS Debugging.

Referensi Resmi

React Native CLI