title: Expo Router navigation

Expo Router navigation

Templates use Expo Router's file-based routing. A _layout.tsx in any directory defines a navigator for the files in that directory.

Drawer + tabs (Monochrome)

app/
├── _layout.tsx           ← Root <Stack>
├── (drawer)/
│   ├── _layout.tsx       ← <Drawer>
│   └── (tabs)/
│       ├── _layout.tsx   ← <Tabs>
│       ├── index.tsx     ← Home
│       ├── categories.tsx
│       ├── search.tsx
│       ├── favorites.tsx
│       └── cart.tsx

Flat tabs (Warmth)

app/
├── _layout.tsx
├── (tabs)/
│   ├── _layout.tsx       ← <Tabs>
│   ├── explore.tsx
│   ├── wishlists.tsx
│   ├── orders.tsx
│   ├── inbox.tsx
│   └── profile/...
├── cart.tsx              ← modal presentation
└── search-modal.tsx      ← modal presentation

Patterns

  • Parentheses (group) = route group, no URL segment
  • Square brackets [param] = dynamic route
  • presentation: 'modal' on a screen options → sheet-style
  • Use router.push() / router.back() / router.replace() from useRouter()