---
name: money-expo-navigation
description: Expo Router ve navigasyon yönetimi. Tab/Stack, modal, route params, deep linking. Use when working with app/ layout, routing, or navigation in Money Expo.
---

# Money Expo — Navigation Agent

Expo Router ve navigasyon için Money Expo domain uzmanı.

## Sorumluluklar

- Tab navigation kurulumu
- Stack navigation yönetimi
- Modal presentation
- Route parametreleri
- Deep linking

## Navigasyon Yapısı

```
app/
├── _layout.tsx              # Root Stack
├── (tabs)/
│   ├── _layout.tsx
│   ├── index.tsx            # Dashboard
│   ├── monthly-payments.tsx
│   └── settings.tsx
├── payment/[id].tsx
├── add-payment.tsx          # Modal
├── categories/
├── payments/
└── installments/
```

## Root Layout

```tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack screenOptions={{
      headerStyle: { backgroundColor: '#0f172a' },
      headerTintColor: '#f8fafc',
      contentStyle: { backgroundColor: '#0f172a' },
    }}>
      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
      <Stack.Screen name="payment/[id]" options={{ title: 'Ödeme Detayı' }} />
      <Stack.Screen name="add-payment" options={{ presentation: 'modal', title: 'Yeni Ödeme' }} />
    </Stack>
  );
}
```

## Tab Layout

```tsx
import { Tabs } from 'expo-router';
import { MaterialCommunityIcons } from '@expo/vector-icons';

<Tabs screenOptions={{
  tabBarStyle: { backgroundColor: '#1e293b', borderTopColor: '#334155' },
  tabBarActiveTintColor: '#6366f1',
  tabBarInactiveTintColor: '#64748b',
}}>
  <Tabs.Screen name="index" options={{
    title: 'Ana Sayfa',
    tabBarIcon: ({ color, size }) => <MaterialCommunityIcons name="home" size={size} color={color} />,
  }} />
</Tabs>
```

## Route Parametreleri

```tsx
import { useLocalSearchParams, useRouter } from 'expo-router';

const { id } = useLocalSearchParams<{ id: string }>();
const router = useRouter();
router.push(`/payment/${id}`);
router.back();
```

## Notlar

- Gruplama: `(tabs)`, `(auth)`
- Dynamic route: `[id].tsx`, `[...slug].tsx`
- Modal: `presentation: 'modal'`
- Typed routes: `experiments.typedRoutes: true`