Tutorial React Native Expo: Setup Project dan Menjalankan Hello World

 React Native menjadi salah satu pilihan populer untuk membuat aplikasi mobile menggunakan JavaScript atau TypeScript. Dengan bantuan Expo, proses memulai proyek menjadi jauh lebih sederhana karena tidak perlu mengatur konfigurasi Android atau iOS secara manual. Panduan ini merangkum langkah awal untuk menyiapkan proyek React Native menggunakan framework Expo, mulai dari instalasi alat yang dibutuhkan hingga membuat project dasar yang siap dijalankan.

Panduan ini akan fokus pada alur paling praktis: menggunakan create-expo-app sebagai langkah awal, lalu menjalankan proyek di emulator atau perangkat fisik.

Step 1 — Membuat Proyek React Native dengan Expo

Sebelum mulai membuat proyek, langkah terbaik adalah melihat dokumentasi resmi React Native mengenai cara memulai project dengan Expo. Pada halaman tersebut dijelaskan bahwa pembuatan project baru dapat dilakukan menggunakan perintah berikut:

npx create-expo-app@latest

Perintah ini digunakan untuk menginisialisasi proyek React Native berbasis Expo dengan konfigurasi dasar yang sudah siap digunakan.

Step 2 —  Menjalankan Perintah create-expo-app dan Menyiapkan Proyek

Setelah mengetahui perintah yang digunakan dari dokumentasi resmi, langkah berikutnya adalah menjalankan perintah tersebut di terminal untuk membuat proyek Expo.

1. Buka terminal (bisa melalui Visual Studio Code seperti pada gambar).

2. Jalankan perintah berikut:

   npx create-expo-app@latest
   

3. Terminal akan menampilkan pertanyaan “Ok to proceed?”. Ketik y untuk melanjutkan.

4. Setelah itu, Anda diminta memasukkan nama aplikasi. Masukkan nama proyek yang diinginkan, misalnya:

   PBP_Projects
   

5. Expo kemudian otomatis membuat struktur proyek, mengekstrak file template, dan memulai proses instalasi dependensi menggunakan npm install.

6. Tunggu hingga instalasi selesai. Pada akhir proses, proyek sudah siap dibuka dan dijalankan.

Tahap ini memastikan proyek Expo telah terbentuk sepenuhnya dan seluruh dependensi dasar terpasang sehingga dapat dilanjutkan ke proses menjalankan proyek.

Step 3 — Menjalankan Proyek Expo untuk Pertama Kali

Tujuan langkah ini: memulai development server Expo agar aplikasi dapat diuji pada emulator, perangkat fisik (Expo Go), atau di browser.

1. Pastikan berada di direktori proyek hasil pembuatan sebelumnya:

   cd PBP_Projects
   

2. Mulai development server Expo:

   npx expo start
   

   atau alternatif:

   npm start
   

3. Setelah perintah dijalankan, Metro bundler akan terbuka dan menampilkan status di terminal. Pada tampilan terminal atau browser Metro akan muncul QR code (seperti pada screenshot).

4. Opsi menjalankan aplikasi dari Metro bundler:
   a. Scan QR code dengan aplikasi Expo Go di Android untuk membuka aplikasi di ponsel.
   b. Untuk iOS, gunakan Camera app untuk memindai QR atau jalankan simulator iOS di macOS.
   c. Untuk emulator Android: jalankan AVD lalu pilih opsi “Run on Android device/emulator” di Metro bundler, atau gunakan perintah npm run android jika dikonfigurasi.
   d. Untuk menjalankan pada browser: klik opsi web (localhost:8081) di Metro bundler.

5. Perhatikan alamat yang ditampilkan Metro (mis. exp://192.168.x.x:8081) — itu adalah alamat yang dipakai Expo Go untuk terhubung. Pastikan komputer dan perangkat berada pada jaringan yang sama agar QR scan berhasil.

6. Biarkan terminal Metro tetap terbuka selama pengembangan; setiap perubahan pada file sumber akan otomatis dimuat ulang (hot reload).

Step 4 — Mengedit Tampilan dan Menampilkan Hello World

Setelah Expo berhasil menjalankan proyek, langkah berikutnya adalah mengubah tampilan awal aplikasi. Pada struktur Expo Router, tampilan halaman utama berada di dalam folder:

app > (tabs) > index.tsx

File ini adalah komponen yang ditampilkan pada tab Home. Agar aplikasi menampilkan teks “Hello world!” di layar, lakukan langkah berikut.

1. Buka file index.tsx pada folder (tabs).

2. Ganti isi fungsi HomeScreen() dengan struktur tampilan yang berisi dua komponen teks, yaitu judul dan teks tambahan.

3. Tambahkan juga style container untuk mengatur posisi teks agar berada di tengah.

Berikut isi kode:

import { StyleSheet } from "react-native";
import { ThemedText } from "@/components/themed-text";
import { ThemedView } from "@/components/themed-view";
export default function HomeScreen() {
  return (
    <ThemedView style={styles.container}>
      <ThemedText type="title">Hello world!</ThemedText>
      <ThemedText type="default">by Rayhan Septian Wijaya</ThemedText>
    </ThemedView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 8,
  },
});

4. Setelah disimpan, Expo akan melakukan auto reload dan perubahan langsung terlihat pada emulator perangkat.

5. Jika emulator sedang aktif, teks “Hello world!” dan keterangan tambahan akan muncul di bagian tengah layar.
   
   
   

Melalui rangkaian langkah di atas, proses membuat proyek React Native dengan Expo menjadi jauh lebih mudah untuk dipahami. Mulai dari menyiapkan perintah dasar, membuat proyek baru, hingga menjalankan aplikasi melalui Metro bundler, seluruh tahapannya dirancang agar memberi gambaran jelas tentang alur kerja React Native modern.

Dengan aplikasi “Hello World” yang berhasil tampil di emulator atau perangkat fisik, tahap dasar pengembangan sudah terpenuhi. Bagian selanjutnya dapat berfokus pada eksplorasi komponen, navigasi, styling, dan fitur lanjutan yang ditawarkan ekosistem Expo dan React Native.

Panduan ini dapat dijadikan catatan awal sebelum melangkah ke materi yang lebih mendalam pada pemrograman mobile berbasis JavaScript.