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

// 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:

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.