Navigasi React Native

Navigasi adalah salah satu konsep terpenting dalam aplikasi React Native. Dengan navigasi yang baik, user dapat berpindah halaman, membuka detail, menavigasi menu, dan menghasilkan pengalaman aplikasi yang lebih profesional. Di React Native, navigasi paling populer menggunakan paket: @react-navigation.

1. Instalasi React Navigation

Pasang package utama terlebih dahulu:

npm install @react-navigation/native

Lalu install dependency tambahan:

npm install react-native-screens react-native-safe-area-context

2. Stack Navigation

Stack navigation digunakan untuk berpindah halaman secara vertikal (push & back). Cocok untuk halaman login → home → detail.

Contoh Stack Navigation

// navigation/StackNav.tsx
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from '../screens/HomeScreen';
import DetailScreen from '../screens/DetailScreen';

const Stack = createNativeStackNavigator();

export default function StackNav() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Detail" component={DetailScreen} />
    </Stack.Navigator>
  );
}

Navigate ke halaman lain

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

3. Tab Navigation

Cocok untuk menu utama, seperti Home – Order – Profile.

npm install @react-navigation/bottom-tabs

// navigation/TabNav.tsx
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function TabNav() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

4. Drawer Navigation

Drawer adalah sidebar yang muncul dari kiri, cocok untuk aplikasi dengan banyak menu.

npm install @react-navigation/drawer

// navigation/DrawerNav.tsx
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default function DrawerNav() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Dashboard" component={DashboardScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

5. Menggabungkan Stack + Tab + Drawer

Aplikasi modern biasanya menggabungkan semuanya.

export default function AppNav() {
  return (
    <NavigationContainer>
      <DrawerNav />
    </NavigationContainer>
  );
}

6. Best Practice Navigasi React Native

• Gunakan nama screen yang jelas (HomeScreen, DetailScreen).
• Simpen navigasi di folder khusus.
• Gunakan TypeScript untuk menghindari salah kirim data.
• Gunakan param terstruktur ketika navigate.
• Jangan taruh banyak logika di layar navigasi.

Dengan memahami Stack, Tab, dan Drawer, Anda bisa membangun navigasi yang kuat dan fleksibel, cocok untuk aplikasi skala kecil sampai enterprise.