> ## Documentation Index
> Fetch the complete documentation index at: https://committ.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# App Routes

> Complete Expo Router navigation structure with 11 route groups.

# App Routes

CommitT uses **Expo Router** (file-system routing) with a root Stack navigator. The app defines 11 route groups.

***

## Route Group Map

```typescript theme={null}
// apps/native/app/_layout.tsx
<Stack screenOptions={{ headerShown: false, animation: "slide_from_right" }}>
  <Stack.Screen name="(auth)"           options={{ animation: "fade" }} />
  <Stack.Screen name="(main)"           />
  <Stack.Screen name="(create-commit)"  options={{ presentation: "transparentModal" }} />
  <Stack.Screen name="(strict-mode)"    options={{ presentation: "transparentModal" }} />
  <Stack.Screen name="(edit-preset)"    options={{ animation: "fade" }} />
  <Stack.Screen name="(penalties)"      options={{ presentation: "transparentModal" }} />
  <Stack.Screen name="(penaltywaiver)"  options={{ presentation: "transparentModal" }} />
  <Stack.Screen name="(settings)"       options={{ presentation: "transparentModal" }} />
  <Stack.Screen name="(verify-commit)"  />
  <Stack.Screen name="(dev)/chaos"      options={{ presentation: "modal" }} />
  <Stack.Screen name="auth/callback"    />
</Stack>
```

***

## Route Details

| Group               | Purpose                     | Key Screens                                 |
| :------------------ | :-------------------------- | :------------------------------------------ |
| **(auth)**          | Login and registration      | OAuth callback, Google Sign-In              |
| **(main)**          | Primary tabs                | Commits, Schedules, Alerts, Profile         |
| **(create-commit)** | Commitment wizard           | conditions, time-set, choose, final         |
| **(strict-mode)**   | Strict Mode activation      | setup, confirmation                         |
| **(edit-preset)**   | Preset editing              | location, blocklist, rule editors           |
| **(penalties)**     | Penalty configuration       | photo, email, money sub-screens             |
| **(penaltywaiver)** | Waiver configuration        | CAPTCHA count, paragraph, intensity         |
| **(settings)**      | Permissions and preferences | 8-point permission audit                    |
| **(verify-commit)** | Active verification         | GPS check, photo capture, waiver challenges |
| **(dev)**           | Developer tools             | Chaos FAB, DB debug, alarm testing          |
| **auth/callback**   | OAuth redirect handler      | Token exchange via Better Auth              |

***

## Wizard Hydration

The `(create-commit)` layout calls `usePresetHydration()` at the layout level, ensuring all location, blocklist, and rule presets are loaded before any child screen mounts:

```typescript theme={null}
export default function CreateCommitLayout() {
  usePresetHydration(); // One-shot hydration at layout mount
  return (
    <Stack screenOptions={{ animation: "fade", headerShown: false }}>
      <Stack.Screen name="time-set" />
      <Stack.Screen name="location-set" />
      <Stack.Screen name="choose" />
      <Stack.Screen name="captcha-setup" />
      <Stack.Screen name="picture-set" />
    </Stack>
  );
}
```

***

## Navigation Patterns

| Pattern               | Usage                                    | Example                          |
| :-------------------- | :--------------------------------------- | :------------------------------- |
| **Transparent Modal** | Wizard screens sliding over current view | `(create-commit)`, `(penalties)` |
| **Fade**              | Auth and preset editing                  | `(auth)`, `(edit-preset)`        |
| **Slide from Right**  | Standard forward navigation (default)    | Most screens                     |
| **Slide from Bottom** | Developer tools modal                    | `(dev)/chaos`                    |

All modal presentations use `animationDuration: 250` for consistent transitions.