React Native digunakan untuk membuat aplikasi mobile berbasis JavaScript. Tetapi untuk membuat aplikasi yang memiliki banyak halaman, kita butuh navigator.
Di sinilah React Navigation sangat membantu.

Pada materi ini, kita akan belajar:

1. Apa itu React Navigation
2. Cara kerja React Navigation
3. Implementasi Stack Navigation
4. Implementasi Tab Navigation
5. Implementasi Drawer Navigation
6. Latihan praktik + kunci jawaban

1. Apa itu React Navigation?

React Navigation adalah library yang digunakan di React Native untuk:

• Pindah antar halaman
• Membuat navigasi berbasis tab
• Membuat menu samping (drawer)
• Mengatur header, parameter, dan state antar halaman

Library ini paling populer karena:

• Mudah digunakan
• Dokumentasi lengkap
• Cocok untuk kebanyakan aplikasi mobile

2. Konsep Utama React Navigation

React Navigation terdiri dari beberapa navigator:

a) Stack Navigator

Navigasi bertumpuk seperti halaman pada browser.

• Halaman baru ditaruh di atas stack
• Ada fitur "Back"

b) Bottom Tab Navigator

Navigasi dalam bentuk bar di bawah aplikasi.

• Biasanya untuk menu utama
• Contoh: Home, Search, Profile

c) Drawer Navigator

Menu geser dari samping kiri.

• Cocok untuk aplikasi dengan banyak menu
• Contoh: aplikasi email, marketplace

Cara Kerja Umum

1. Install react-navigation dan dependensinya
2. Bungkus aplikasi dengan <NavigationContainer>
3. Buat navigator (stack/tab/drawer)
4. Daftarkan screen ke dalam navigator
5. Gunakan navigation.navigate("ScreenName") untuk pindah halaman

3. Instalasi React Navigation

Jalankan pada terminal:

npm install @react-navigation/native npm install react-native-screens react-native-safe-area-context 

Install stack navigator:

npm install @react-navigation/stack 

Install tab navigation:

npm install @react-navigation/bottom-tabs 

Install drawer navigation:

npm install @react-navigation/drawer 

4. Implementasi React Navigation

4.1 Stack Navigation (Pindah Antar Halaman)

App.js

import * as React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { View, Text, Button } from 'react-native'; function HomeScreen({ navigation }) { return ( <View> <Text>Ini Halaman Home</Text> <Button title="Ke Detail" onPress={() => navigation.navigate('Detail')} /> </View> ); } function DetailScreen() { return ( <View> <Text>Ini Halaman Detail</Text> </View> ); } const Stack = createStackNavigator(); export default function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Detail" component={DetailScreen} /> </Stack.Navigator> </NavigationContainer> ); } 

4.2 Bottom Tab Navigation

App.js

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; const Tab = createBottomTabNavigator(); export default function App() { return ( <NavigationContainer> <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Profile" component={ProfileScreen} /> </Tab.Navigator> </NavigationContainer> ); } 

4.3 Drawer Navigation

App.js

import { createDrawerNavigator } from '@react-navigation/drawer'; const Drawer = createDrawerNavigator(); export default function App() { return ( <NavigationContainer> <Drawer.Navigator> <Drawer.Screen name="Home" component={HomeScreen} /> <Drawer.Screen name="Settings" component={SettingsScreen} /> </Drawer.Navigator> </NavigationContainer> ); }