Navigation (React Navigation) — Mobile

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…

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

Yang akan kamu pelajari