09. REACT NATIVE –NAVIGATION

Navigasi merupakan struktur menu yang ada dalam sebuah aplikasi yang memungkinkan pengguna dapat beralih dari satu halaman ke halaman lainnya. Pada react native secara default sudah menyediakan navigasi dengan expo router. Expo Router adalah solusi navigasi yang mirip Next.js, di mana setiap file dalam folder /app otomatis menjadi rute dalam aplikasi React Native. Ini mempermudah pengelolaan rute tanpa perlu mendefinisikan stack atau tab secara manual.

NAVIGASI PADA EXPO-ROUTER
Expo Router bekerja dengan berbasis file system. Struktur folder menentukan navigasi secara otomatis.Berikut contoh struktur folder pada project yang menggunakan navigasi expo router.

/app
├── index.jsx # Halaman utama ("/")
├── about.jsx # Halaman "/about"
├── profile.jsx # Halaman "/profile"
├── (tabs)/ # Grup untuk Tab Navigation
│ ├── index.jsx # Tab pertama (Home)
│ ├── search.jsx # Tab kedua (Search)
│ ├── settings.jsx # Tab ketiga (Settings)
| ├── _layout.jsx # Layout khusus untuk Tab Navigation, hanya berlaku
untuk halaman di dalam (tabs).
│

├── _layout.jsx # Layout utama untuk seluruh aplikasi

Contoh Implementasi :
file app/index.jsx

import { View, Text, Button } from "react-native";
import { useRouter } from "expo-router";

export default function Home() {
  const router = useRouter();

  return (
    <View>
      <Text>Home Page</Text>
      <Button title="Go to About" onPress={() => router.push("/about")} />
    </View>
  );
}

file app/about.jsx

import { View, Text } from "react-native";

export default function About() {
  return (
    <View>
      <Text>About Page</Text>
    </View>
  );
}

Expo Router mendukung Tab Navigation tanpa perlu react-navigation.
Buat file app/_layout.jsx atau kalian bisa gunakan file _layout.jsx yang sudah dibuatkan sendiri oleh react untuk mengelola navigasi global

file app/layout.jsx

import { Tabs } from "expo-router";

export default function Layout() {
  return (
    <Tabs>
      <Tabs.Screen name="index" options={{ title: "Home" }} />
      <Tabs.Screen name="search" options={{ title: "Search" }} />
      <Tabs.Screen name="settings" options={{ title: "Settings" }} />
    </Tabs>
  );
}

Lalu buat file app/search.jsx dan app/settings.jsx seperti berikut:

import { View, Text } from "react-native";

export default function Search() {
  return (
    <View>
      <Text>Search Page</Text>
    </View>
  );
}

import { View, Text } from "react-native";

export default function Settings() {
  return (
    <View>
      <Text>Settings Page</Text>
    </View>
  );
}