Panduan React Native

Memulai Pemrograman Mobile dengan React Native Menggunakan Expo SDK 54

Langkah praktis membangun aplikasi Android & iOS modern berbasis New Architecture dan Expo Router V4.

Perkembangan aplikasi mobile yang pesat menuntut pengembang untuk dapat membangun aplikasi berkinerja tinggi secara efisien di Android dan iOS. React Native bersama Expo menjadi salah satu ekosistem paling populer untuk pengembangan aplikasi cross-platform.

Dengan hadirnya Expo SDK 54, proses pengembangan menjadi semakin cepat, stabil, dan modern berkat dukungan fitur-fitur terbaru seperti Expo Router, arsitektur React Native New Architecture yang aktif secara bawaan (default), serta performa bundling yang jauh lebih optimal.

Mengapa Memilih Expo SDK 54?

⚡

New Architecture Default

Peningkatan performa render dan interoperability native yang lebih solid melalui Fabric dan TurboModules.

🗺️

Expo Router V4

Navigasi berbasis berkas (file-based routing) yang intuitif, mirip dengan ekosistem Next.js di dunia web.

🚀

Performa Bundling Metro

Proses hot-reloading dan build lokal yang jauh lebih cepat dan responsif.

🔌

Akses API Native Mudah

Modul seperti kamera, GPS, dan sensor siap pakai tanpa perlu utak-atik kode Swift/Kotlin secara manual.

Prasyarat Sebelum Memulai

Pastikan perangkat pengembangan Anda telah terpasang beberapa perkakas dasar berikut:

• 🟢 Node.js (Versi LTS 18 atau 20+)
• 🐙 Git untuk versi kontrol
• 💻 VS Code sebagai Editor Kode
• 📱 Expo Go App di Play Store / App Store

Langkah 1: Inisialisasi Proyek Baru

Expo menyediakan perintah CLI serbaguna untuk membuat proyek baru yang sudah dikonfigurasi dengan Expo SDK 54.

TERMINAL BASH

npx create-expo-app@latest my-first-app

💡

Tips: Perintah @latest secara otomatis memilih SDK versi stabil terbaru (Expo SDK 54).

Masuk ke dalam direktori proyek yang baru dibuat:

TERMINAL BASH

cd my-first-app

Langkah 2: Memahami Struktur Proyek

Secara default, instalasi Expo SDK 54 menggunakan Expo Router untuk menangani navigasi antarhalaman.

my-first-app/
├── 📁 app/               # Direktori utama untuk halaman & navigasi
│   ├── 📄 _layout.tsx     # Layout dasar (Stack, Tabs, dll)
│   ├── 📄 index.tsx       # Halaman utama aplikasi
│   └── 📄 explore.tsx     # Halaman tambahan
├── 📁 assets/            # Gambar, font, dan ikon
├── 📁 components/        # Komponen UI reusable
├── 📄 app.json           # Konfigurasi utama Expo
└── 📄 package.json       # Dependensi JavaScript

Langkah 3: Menulis Kode Komponen Pertama

Buka berkas app/index.tsx pada editor teks Anda, lalu ubah isinya menjadi kode komponen interaktif berikut:

app/index.tsx TYPESCRIPT

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, SafeAreaView } from 'react-native';

export default function HomeScreen() {
  const [count, setCount] = useState<number>(0);

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.card}>
        <Text style={styles.title}>Selamat Datang di Expo SDK 54!</Text>
        <Text style={styles.subtitle}>
          Aplikasi React Native pertama Anda berhasil berjalan.
        </Text>

        <View style={styles.counterBox}>
          <Text style={styles.counterText}>{count}</Text>
        </View>

        <TouchableOpacity 
          style={styles.button} 
          onPress={() => setCount(count + 1)}
          activeOpacity={0.8}
        >
          <Text style={styles.buttonText}>Tambah Hitungan</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f4f6f8',
    justifyContent: 'center',
    alignItems: 'center',
  },
  card: {
    backgroundColor: '#ffffff',
    padding: 24,
    borderRadius: 16,
    width: '85%',
    alignItems: 'center',
    elevation: 4,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    color: '#1e293b',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 14,
    color: '#64748b',
    textAlign: 'center',
    marginBottom: 24,
  },
  counterBox: {
    marginVertical: 16,
  },
  counterText: {
    fontSize: 48,
    fontWeight: '800',
    color: '#2563eb',
  },
  button: {
    backgroundColor: '#2563eb',
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 8,
    width: '100%',
    alignItems: 'center',
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
});

Langkah 4: Menjalankan Server Pengembangan

Jalankan perintah berikut di terminal Anda:

TERMINAL BASH

npx expo start

1

Pengujian via Perangkat HP:

Buka aplikasi Expo Go di Android/iOS, lalu pindai (scan) QR Code yang muncul di terminal.

2

Pengujian via Emulator:

Tekan tombol a untuk Android Emulator, i untuk iOS Simulator, atau w untuk tampilan Web Browser.

🎉 Kesimpulan

Expo SDK 54 menyederhanakan alur kerja pembuatan aplikasi React Native modern. Dengan keunggulan arsitektur baru berbasis New Architecture dan integrasi navigasi Expo Router V4, Anda dapat berfokus pada logika bisnis dan tampilan UI aplikasi tanpa terhambat kerumitan konfigurasi lingkungan native!