Tujuan Pembelajaran

Mampu menginstal dan mengkonfigurasi React Navigation
Memahami konsep stack, screen, dan navigator
Mampu membuat navigasi antar screen dengan TypeScript

Analogi

Diagram


      Stack Navigator = Tumpukan Piring:
- Push = tambah piring di atas
- Pop = ambil piring paling atas
- Halaman saat ini = piring paling atas
- Halaman sebelumnya = piring di bawahnya

Push halaman baru → piring baru di atas
Back → ambil piring atas, tampak piring bawah

Stack navigator seperti tumpukan piring — push menambah di atas, pop mengambil yang paling atas. Halaman sebelumnya tetap di bawah.

Penjelasan Konsep

React Navigation adalah library navigasi standar di React Native. Stack Navigator menyediakan navigasi push/pop — user tap item di list, push ke halaman detail, back button pop kembali ke list.

Setup: (1) Install: npx expo install @react-navigation/native @react-navigation/native-stack react-native-screens react-native-safe-area-context. (2) Bungkus app dengan NavigationContainer. (3) Create stack dengan createNativeStackNavigator(). (4) Register screens dengan <Stack.Screen>.

Native stack vs JS stack: native stack (@react-navigation/native-stack) lebih performa karena pakai native UINavigationController (iOS) dan Fragment (Android). JS stack ditulis di JS, lebih fleksibel tapi lebih lambat. SELALU pakai native stack kecuali ada alasan spesifik.

TypeScript integration: definisikan RootStackParamList type — mapping nama route ke params. Setup: createNativeStackNavigator<RootStackParamList>(). Lalu setiap screen punya autocomplete params.

Konfigurasi screen: options untuk header style, animation, gesture. Setiap screen bisa punya option statis atau dinamis.

Header customization: title, headerStyle, headerTintColor, headerShown (true/false untuk sembunyikan header), headerRight untuk button di kanan.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu menginstal dan mengkonfigurasi React Navigation., memahami konsep stack, screen, dan navigator., dan mampu membuat navigasi antar screen dengan TypeScript. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca React Navigation, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Stack navigator seperti tumpukan piring — push menambah di atas, pop mengambil yang paling atas. Halaman sebelumnya tetap di bawah. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa tsx. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. NavigationContainer sebagai root. Stack.Navigator dengan screenOptions untuk style global header. navigation.navigate() untuk push ke screen lain.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

tsx

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator, type NativeStackScreenProps } from "@react-navigation/native-stack";
import { Text, View, Pressable, StyleSheet } from "react-native";

type RootStackParamList = { Home: undefined; Details: { id: string } };
const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: "#007AFF" }, headerTintColor: "#fff" }}>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: "Beranda" }} />
        <Stack.Screen name="Details" component={DetailsScreen} options={{ title: "Detail" }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

type HomeProps = NativeStackScreenProps<RootStackParamList, "Home">;
function HomeScreen({ navigation }: HomeProps) {
  return (
    <View style={styles.center}>
      <Pressable onPress={() => navigation.navigate("Details", { id: "123" })} style={styles.btn}>
        <Text>Go to Details</Text>
      </Pressable>
    </View>
  );
}

Penjelasan Kode

NavigationContainer sebagai root. Stack.Navigator dengan screenOptions untuk style global header. navigation.navigate() untuk push ke screen lain.

Prompt AI

Buat struktur navigasi untuk aplikasi e-commerce: Home → ProductList → ProductDetail → Cart → Checkout. Tulis RootStackParamList type dan semua screen registrations.

Pertanyaan Reflektif

Bagaimana perbedaan navigasi di mobile (stack, push/pop) vs web (URL, link)? Mana yang lebih intuitif untuk user?