Belajar React Native - Navigation

#Pendahuluan

Aplikasi dengan satu layar hanyalah demo. Aplikasi sungguhan punya banyak layar: list, detail, form, tab, dan modal. Semua transisi itu ditangani oleh navigasi — salah satu keputusan arsitektur paling penting di React Native.

Episode 6 membahas dua pendekatan utama: React Navigation, library de-facto dengan stack, tab, dan drawer, serta Expo Router, pendekatan file-based yang populer di ekosistem Expo. Kalian juga akan belajar deep linking agar layar bisa dibuka dari URL.

#React Navigation: Stack dan Tab

#Menginstall Dependency

Mulai dengan menginstall React Navigation dan dependency native-nya:

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

Package @react-navigation/native-stack menyediakan navigator stack modern yang memakai react-native-screens untuk performa. Jangan lupa bungkus aplikasi dengan NavigationContainer.

#Membuat Stack Navigator

Stack navigator dasar

import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { HomeScreen } from "./screens/HomeScreen";
import { DetailScreen } from "./screens/DetailScreen";
 
const Stack = createNativeStackNavigator();
 
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Dengan setup di atas, layar Home dan Detail bisa berpindah. Untuk berpindah dari dalam layar, gunakan navigation.navigate("Detail") yang disediakan lewat props.

#Passing Props antar Layar

Saat navigasi, kirim parameter lewat argumen kedua:

Navigasi dengan parameter

navigation.navigate("Detail", { id: 42 });

Di layar tujuan, baca parameter lewat route.params.id. TypeScript bisa mengetik parameter ini agar aman saat navigasi.

#Tab dan Drawer

Selain stack, React Navigation menyediakan @react-navigation/bottom-tabs untuk tab bawah dan @react-navigation/drawer untuk menu geser. Gabungan umum: tab di level luar, lalu stack di dalam setiap tab. Struktur ini disebut navigasi nested, dan pattern-nya:

Tab berisi stack

<Tab.Navigator>
  <Tab.Screen name="Beranda" component={HomeStack} />
  <Tab.Screen name="Profil" component={ProfileScreen} />
</Tab.Navigator>

Setiap component di tab bisa berupa Stack.Navigator tersendiri — itulah nested navigator.

#Expo Router: Navigasi File-Based

#Konsep Route dari Folder

Expo Router menggantikan kode navigator dengan struktur folder. Setiap file di direktori app/ menjadi route otomatis:

app/
├── _layout.tsx       # root layout navigator
├── index.tsx         # route "/"
├── detail/
│   └── [id].tsx      # route "/detail/:id"
└── settings.tsx      # route "/settings"

File _layout.tsx mendefinisikan navigator induk — misalnya stack atau tab — dan file lain menjadi layar. Pindah layar cukup dengan <Link href="/detail/42"> atau router.push("/detail/42").

#Kelebihan dan Kekurangan

Kelebihan Expo Router: routing terpusat di file system, mudah dibaca, deep linking otomatis, dan ekspektasi seragam tim. Kekurangan: butuh project Expo dan sedikit kehilangan kontrol granular dibanding React Navigation. Pilihan keduanya tergantung ekosistem yang kalian pakai.

#Deep Linking

#Apa itu Deep Linking

Deep linking memungkinkan aplikasi dibuka langsung ke layar tertentu dari luar — misalnya URL myapp://detail/42 dari notifikasi atau email. Di React Navigation, konfigurasinya lewat properti linking:

Konfigurasi deep linking

const linking = {
  prefixes: ["myapp://", "https://myapp.com"],
  config: {
    screens: {
      Home: "home",
      Detail: "detail/:id",
    },
  },
};
 
<NavigationContainer linking={linking}>
  ...
</NavigationContainer>

Dengan konfigurasi di atas, myapp://detail/42 langsung membuka layar Detail dengan parameter id = 42. Ekspo Router meng-handle pola ini otomatis dari struktur folder.

#Universal Links di iOS dan Android App Links

Untuk deep link dengan skema https (universal links di iOS, app links di Android), kalian perlu mendaftarkan domain aplikasi — konfigurasi apple-app-site-association dan assetlinks.json di server. Ini penting untuk pengalaman yang mulus saat user membuka tautan dari browser.

#Kesalahan Umum Navigasi

#Layar Blank Setelah Pindah

Jika layar baru blank, biasanya react-native-screens atau react-native-safe-area-context belum ter-link. Di project CLI, jalankan npx react-native run-android setelah install untuk memastikan native module ter-compile. Di Expo, pakai npx expo install agar versinya cocok.

#State Tertimpa Saat Navigasi

State layar hilang saat keluar dari stack — itu perilaku normal. Jika ingin mempertahankan state (misal input form), simpan di store global seperti Zustand (episode 7) atau pindahkan ke parent navigator.

#Penutup

Episode 6 memberi kalian peta jalan antarlayar: React Navigation dengan stack, tab, dan drawer, alternatif file-based Expo Router, serta deep linking agar layar terbuka dari URL eksternal.

Inti yang harus dibawa pulang:

• NavigationContainer membungkus seluruh navigator di React Navigation.
• Stack untuk hierarki layar; tab dan drawer untuk struktur navigasi tingkat atas.
• Parameter layar dikirim lewat navigate dan dibaca dari route.params.
• Expo Router memetakan file di folder app/ menjadi route.
• Deep linking menghubungkan URL ke layar via properti linking.
• Validasi selalu parameter dari deep link sebelum diproses.

Di episode 7 selanjutnya kita akan membahas networking dan data fetching: fetch dan Axios dengan error handling, base URL per environment, integrasi TanStack Query untuk caching dan optimistic updates, serta pengenalan state management dengan Zustand.