Navigasi di Mobile App

Navigasi mobile berbeda dari web. Tidak ada URL bar — user berpindah antar screen lewat gesture (swipe back), tab bar, atau drawer menu.

Expo Router (File-based Routing)

// Expo Router: mirip Next.js file-based routing
// app/
// ├── _layout.tsx      → Root layout
// ├── index.tsx         → Home screen (/)
// ├── profile.tsx       → Profile screen (/profile)
// └── settings/
//     ├── _layout.tsx   → Nested layout
//     └── index.tsx     → Settings screen (/settings)

// app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Home' }} />
      <Stack.Screen name="profile" options={{ title: 'Profile' }} />
    </Stack>
  );
}

Stack Navigation

// Navigasi push/pop seperti tumpukan kartu
import { Link, router } from 'expo-router';

// Cara 1: Link component
<Link href="/profile">Go to Profile</Link>

// Cara 2: Imperative navigation
router.push('/profile');         // push ke stack
router.replace('/profile');      // replace current screen
router.back();                    // go back

Tab Navigation

// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';

export default function TabLayout() {
  return (
    <Tabs>
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <Ionicons name="home" size={24} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: 'Search',
          tabBarIcon: ({ color }) => (
            <Ionicons name="search" size={24} color={color} />
          ),
        }}
      />
    </Tabs>
  );
}

Drawer Navigation

// app/_layout.tsx
import { Drawer } from 'expo-router/drawer';

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

Passing Params

// Dynamic route: app/user/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function UserScreen() {
  const { id } = useLocalSearchParams();
  return <Text>User ID: {id}</Text>;
}

// Navigate with params
router.push('/user/42');

Pola Navigasi Umum

• Stack — Alur linear (detail page, form wizard)
• Tabs — Switching antar section utama (Home, Search, Profile)
• Drawer — Side menu (settings, navigation banyak item)
• Modal — Layar overlay (login, konfirmasi)