Mengenal React Navigation di React Native

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

---

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> (penggunaan NavigationContainer cukup pada satu file saja, jika lebih dari 2 file terdapat deklarasi <NavigationContainer> maka akan muncul error). Namun seandainya jika Anda mendeklarasikan <NavigationContainer> ini pada lebih dari 1 file maka <NavigationContainer> wajib dibungkus dengan NavigationIndependentTree
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.jsx

import * as React from "react";
import { NavigationContainer, NavigationIndependentTree } 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 (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Detail" component={DetailScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

---

4.2 Bottom Tab Navigation

App.jsx

import * as React from "react";
import { NavigationContainer, NavigationIndependentTree } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text, Button } from "react-native";
import { IconSymbol } from "@/components/ui/icon-symbol";

/*sumber antdesain : https://icons.expo.fyi/Index*/
import AntDesign from "@expo/vector-icons/AntDesign";

function HomeScreen({ navigation }) {
  return (
    <View>
      <Text>Ini Halaman Home</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View>
      <Text>Ini Halaman Profile</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen
            name="Home"
            component={HomeScreen}
            options={{
              title: "Home",
              tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
            }}
          />
          <Tab.Screen
            name="Profile"
            component={ProfileScreen}
            options={{
              title: "Profile",
              tabBarIcon: ({ color }) => <AntDesign name="user" size={24} color="black" />,
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

---

4.3 Drawer Navigation

App.jsx

import { createDrawerNavigator } from "@react-navigation/drawer";
import { NavigationIndependentTree, NavigationContainer } from "@react-navigation/native";
import { View, Text, Button } from "react-native";

function HomeScreen() {
  return (
    <View>
      <Text>Ini Halaman Home</Text>
    </View>
  );
}
function SettingsScreen() {
  return (
    <View>
      <Text>Ini Halaman Setting</Text>
    </View>
  );
}

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationIndependentTree>
      <NavigationContainer>
        <Drawer.Navigator>
          <Drawer.Screen name="Home" component={HomeScreen} />
          <Drawer.Screen name="Settings" component={SettingsScreen} />
        </Drawer.Navigator>
      </NavigationContainer>
    </NavigationIndependentTree>
  );
}

---