Sesi#1 Pemrograman Perangkat Mobile I – Materi Instalasi Expo (React Native)

npm install expo

expo --version

// Import library dan komponen yang dibutuhkan
import { ThemedText } from '@/components/themed-text'; // Komponen teks yang mendukung tema (dark/light mode)
import { ThemedView } from '@/components/themed-view'; // Komponen view yang mendukung tema (dark/light mode)
import { StyleSheet } from 'react-native'; // StyleSheet untuk membuat styling CSS-like

// Fungsi komponen utama untuk halaman Home
export default function HomeScreen() {
  // Return JSX - struktur tampilan yang akan ditampilkan
  return (
    // ThemedView = container utama yang mendukung tema
    // style={styles.container} = menerapkan styling dari StyleSheet di bawah
    <ThemedView style={styles.container}>
      {/* ThemedView kedua = container untuk konten di tengah */}
      <ThemedView style={styles.content}>
        {/* ThemedText untuk judul utama */}
        {/* type="title" = memberikan styling default untuk judul */}
        {/* style={styles.title} = menambahkan styling custom */}
        <ThemedText type="title" style={styles.title}>
          Hello World!
        </ThemedText>
        
        {/* ThemedText untuk subtitle */}
        <ThemedText style={styles.subtitle}>
          Selamat datang di aplikasi Expo pertama Anda! 🎉
        </ThemedText>
        
        {/* ThemedText untuk deskripsi */}
        <ThemedText style={styles.description}>
          Ini adalah halaman pertama yang Anda buat. Mari belajar lebih lanjut tentang React Native dan Expo!
        </ThemedText>
      </ThemedView>
    </ThemedView>
  );
}

// StyleSheet untuk styling komponen (seperti CSS tapi untuk React Native)
const styles = StyleSheet.create({
  // Style untuk container utama
  container: {
    flex: 1, // Menggunakan seluruh ruang yang tersedia
    justifyContent: 'center', // Menempatkan konten di tengah secara vertikal
    alignItems: 'center', // Menempatkan konten di tengah secara horizontal
    padding: 20, // Jarak dari tepi layar
  },
  // Style untuk container konten
  content: {
    alignItems: 'center', // Menempatkan semua item di tengah
    maxWidth: 300, // Lebar maksimal konten
  },
  // Style untuk judul utama
  title: {
    fontSize: 32, // Ukuran font besar
    fontWeight: 'bold', // Font tebal
    marginBottom: 16, // Jarak bawah dari elemen berikutnya
    textAlign: 'center', // Teks di tengah
  },
  // Style untuk subtitle
  subtitle: {
    fontSize: 18, // Ukuran font sedang
    marginBottom: 12, // Jarak bawah
    textAlign: 'center', // Teks di tengah
    opacity: 0.8, // Transparansi 80%
  },
  // Style untuk deskripsi
  description: {
    fontSize: 16, // Ukuran font normal
    textAlign: 'center', // Teks di tengah
    lineHeight: 24, // Jarak antar baris
    opacity: 0.7, // Transparansi 70%
  },
});