expo-routes

Files (1)

• SKILL.md

SKILL.md (first lines)

## Propósito

Configurar navegación en MyQuota App usando expo-router v6 (file-based routing).

---

## Estructura de Rutas

```
src/app/
├── _layout.tsx           # Stack raíz
├── index.tsx             # Splash / redirect
├── login.tsx             # Login (fuera del drawer)
└── (drawer)/
    ├── _layout.tsx       # Drawer config
    ├── dashboard.tsx     # Pantalla principal
    ├── creditCards.tsx
    ├── quotas.tsx
    └── ...
```

---

## Root Layout

```tsx
// src/app/_layout.tsx
import { Stack } from "expo-router";

export default function RootLayout() {
  return (
    <Stack screenOptions={{ headerShown: false }}>
      <Stack.Screen name="index" />
      <Stack.Screen name="login" />
      <Stack.Screen name="(drawer)" />
    </Stack>
  );
}
```

---

## Drawer Layout

```tsx
// src/app/(drawer)/_layout.tsx
import { Drawer } from "expo-router/drawer";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import CustomDrawerContent from "@/features/navigation/components/CustomDrawerContent";

export default function DrawerLayout() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <Drawer
        drawerContent={(props) => <CustomDrawerContent {...props} />}
        screenOptions={{
          headerShown: true,
          drawerType: "front",
        }}
      >
        {/* Pantallas visibles en el drawer */}
        <Drawer.Screen
          name="dashboard"
          options={{
            drawerLabel: "Dashboard",
            title: "Dashboard",
          }}
        />
        <Drawer.Screen
          name="creditCards"
          options={{
            drawerLabel: "Tarjetas",
            title: "Tarjetas de Crédito",
          }}
        />
        
        {/* Pantallas ocultas del drawer */}
        <Drawer.Screen
          name="creditCardDetail"
          options={{
            drawerItemStyle: { display: "none" },
            title: "Detalle de Tarjeta",
          }}
        />
      </Drawer>
    </GestureHandlerRootView>
  );
}
```

---

## Agregar Nueva Pantalla

### 1. Crear Screen en features

```tsx
// src/features/myFeature/screens/MyFeatureScreen.tsx
export default function MyFeatureScreen() {
  return <View>...</View>;
}
```

### 2. Crear thin wrapper en app

```tsx
// src/app/(drawer)/myFeature.tsx
import MyFeatureScreen from "@/features/myFeature/screens/MyFeatureScreen";

export default function MyFeature() {
  return <MyFeatureScreen />;
}
```

### 3. Registrar en Drawer (si visible)

```tsx
// src/app/(drawer)/_layout.tsx
<Drawer.Screen

From cabrerojas/myquota-app, MIT.

More from cabrerojas/myquota-app