Memulai React Native dengan Expo

Cara tercepat memulai React Native adalah dengan Expo — toolchain yang menghilangkan kerumitan setup native (Xcode, Android Studio) di awal.

Setup Environment

# Pastikan Node.js terinstall (v18+)
node --version

# Buat project baru dengan Expo
npx create-expo-app@latest MyFirstApp
cd MyFirstApp

# Jalankan di development
npx expo start

Setelah expo start, scan QR code dengan app Expo Go di HP kamu (iOS/Android). Perubahan kode langsung terlihat (hot reload).

Struktur Project

MyFirstApp/
├── app/                 # Routing (Expo Router - file-based)
│   ├── _layout.tsx      # Root layout
│   ├── index.tsx        # Home screen
│   └── about.tsx        # /about screen
├── components/          # Reusable components
├── assets/              # Gambar, fonts
├── app.json             # Konfigurasi Expo
├── package.json
└── tsconfig.json

Hello World

// app/index.tsx
import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>
        Selamat datang di mobile development
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 8,
  },
});

Expo Go vs Development Build

• Expo Go — App sandbox, tidak perlu build native. Cocok untuk prototyping dan belajar.
• Development Build — Build native custom via EAS. Diperlukan saat pakai native module (camera, notifications).
• Tips: Mulai dengan Expo Go, upgrade ke Development Build saat butuh fitur native.