expo-router-patternlisted

# expo-router-pattern Use when adding screens / navigation to an Expo app using `expo-router`. The convention mirrors Next.js App Router by design — same `(group)/`, `_layout.tsx`, `[param]`, dynamic segments — so a monorepo sharing web + mobile keeps one routing mental model. If your app uses React Navigation directly (not expo-router), this skill does not apply (different API entirely). ## File layout (Solaar archetype) ``` apps/mobile/app/ ├── _layout.tsx # root layout: providers, Stack navigator ├── (tabs)/ # tab navigation root │ ├── _layout.tsx # tab bar config │ ├── index.tsx # / → Home tab │ ├── contacts/ │ │ ├── index.tsx # /contacts │ │ └── [id].tsx # /contacts/123 │ ├── notes.tsx │ └── settings.tsx ├── (modal)/ # modal-presented screens │ ├── _layout.tsx # presentation: 'modal' │ ├── new-contact.tsx # /new-contact (slides up) │ └── share.tsx ├── (auth)/ # auth flow (no tabs) │ ├── _layout.tsx # presentation: stack, no tab bar │ ├── sign-in.tsx │ └── sign-up.tsx └── +not-found.tsx # 404 ``` ## Layouts: what each `_layout.tsx` does ### Root `app/_layout.tsx` - Wraps `<Stack />` (or `<Slot />` for layoutless) - Provides global Providers (Auth, Query Client, Theme, i18n) - Initializes Sentry, fonts, splash hide - Owns navigation theme (`DarkTheme` / `DefaultTheme`) ```tsx // app/