Sesi#3 Pemrograman Perangkat Mobile I – Navigasi Antar Halaman di Aplikasi Mobile (Expo)

👋 Halo, teman-teman!

Kalian udah bisa bikin tampilan dasar dan layout UI di Expo kan? Nah, sekarang kita naik level dikit nih 🚀
Kali ini, kita bakal belajar cara membuat beberapa halaman (screen) dan menghubungkannya satu sama lain dengan sistem navigasi.

Bayangin aja kayak aplikasi nyata:

• Dari halaman “Home” → pindah ke “Profil”
• Dari “Profil” → balik lagi ke “Home”
• Semua itu butuh navigasi agar user bisa berpindah dengan mudah.

---

🎯 Tujuan Pembelajaran

Setelah kamu belajar materi ini, kamu akan bisa:

1. Membuat lebih dari satu halaman (screen) di React Native.
2. Menggunakan React Navigation untuk berpindah antar halaman.
3. Menambahkan tombol navigasi seperti “Next” dan “Back”.
4. Memahami struktur folder dan sinkronisasi antar komponen di Expo.

---

⚙️ 1. Persiapan Awal

Pastikan kamu sudah punya Expo CLI dan proyek yang aktif (misalnya folder project-ui dari pertemuan sebelumnya).

Selanjutnya, install <strong>React Navigation</strong> menggunakan perintah berikut di terminal proyek:
npx expo install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-context
npx expo install @react-navigation/native-stack

💡 React Navigation adalah library resmi yang dipakai banyak developer untuk navigasi di Expo dan React Native.

📁 2. Membuat Struktur Folder

Biar rapi, kita buat folder screens untuk menampung halaman.

project-ui/
├── App.js
├── screens/
│ ├── HomeScreen.js
│ └── ProfileScreen.js

🏠 3. Buat Halaman Pertama (HomeScreen.js)

import React from ‘react’;
import { View, Text, Button, StyleSheet } from ‘react-native’;

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Selamat datang di Halaman Utama!</Text>
      <Button
        title="Ke Halaman Profil"
        onPress={() => navigation.navigate('Profile')}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 20, marginBottom: 20 },
});

🧠 Penjelasan:

• navigation.navigate('Profile') → fungsi untuk pindah ke halaman lain.
• Properti navigation otomatis disediakan oleh React Navigation.

👤 4. Buat Halaman Kedua (ProfileScreen.js)

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function ProfileScreen({ navigation }) {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Ini Halaman Profil!</Text>
      <Button
        title="Kembali ke Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 20, marginBottom: 20 },
});

🧠 Penjelasan:

• navigation.goBack() digunakan untuk kembali ke halaman sebelumnya.
• Kamu juga bisa pakai navigation.navigate('Home') untuk pindah langsung ke halaman Home.

---

🌍 5. Mengatur Navigasi di App.js

Sekarang kita atur agar kedua halaman tadi bisa saling terhubung.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

🧭 Penjelasan:

• NavigationContainer adalah “pembungkus utama” navigasi.
• createNativeStackNavigator() digunakan untuk membuat sistem stack navigation (seperti tumpukan halaman).
• Stack.Screen digunakan untuk mendefinisikan halaman yang bisa diakses.

---

🧩 6. Hasil Akhir

Kalau semua sudah benar, maka hasilnya:

✅ Di halaman Home, muncul teks dan tombol “Ke Halaman Profil”.
✅ Saat tombol ditekan, kamu akan berpindah ke halaman Profil.
✅ Di Profil, kamu bisa klik tombol “Kembali ke Home”.
✅ Semua peralihan halaman terlihat halus dan responsif.

🎉 Selamat! Sekarang aplikasimu sudah punya dua halaman yang saling terhubung.

---

💡 7. Menambahkan Desain Header dan Judul

Kamu bisa kustomisasi tampilan judul di atas halaman.

<Stack.Screen
  name="Profile"
  component={ProfileScreen}
  options={{ title: 'Halaman Profil Pengguna', headerStyle: { backgroundColor: '#00796b' }, headerTintColor: '#fff' }}
/>

👉 Warna header bisa disesuaikan agar tampilan lebih menarik.

---

🧠 8. Latihan Praktek Mahasiswa

Tugas Praktek:

1. Buat 3 halaman:
   • HomeScreen
   • AboutScreen
   • ContactScreen
2. Gunakan navigasi antarhalaman.
3. Tambahkan tombol di setiap halaman untuk berpindah ke halaman lain.
4. Ganti warna header agar tampilannya lebih menarik.

Bonus:
Tambahkan ikon di header menggunakan library @expo/vector-icons.

---

📚 Kesimpulan

Dari materi ini kamu sudah belajar:

• Cara membuat beberapa halaman dalam aplikasi.
• Menghubungkan antarhalaman menggunakan React Navigation.
• Mengatur tampilan header dan tombol navigasi.

Navigasi adalah jantung dari pengalaman pengguna. Dengan paham cara kerja navigasi, kamu sudah selangkah lebih dekat ke pembuatan aplikasi mobile yang “beneran” fungsional! 🚀