expo-router

expo-router

File-based routing discipline for Expo Router (v3+). Guides the app/ directory structure, dynamic routes, layout chains, deep linking, and navigation patterns. Stays out of build/release or native config.

What It Does

• app/ directory structure recommendation (tabs, stack, drawer, modal)
• Configures dynamic and catch-all route patterns
• _layout.tsx chains and nested-layout discipline
• Deep linking (expo-linking) + scheme + universal links configuration
• Prefetch, redirects, error boundaries, not-found handling
• Typed routes and useLocalSearchParams type discipline

Basic Setup

npx expo install expo-router react-native-safe-area-context react-native-screens \
  expo-linking expo-constants expo-status-bar

package.json:

{ "main": "expo-router/entry" }

app.json:

{
  "expo": {
    "scheme": "myapp",
    "plugins": ["expo-router"],
    "experiments": { "typedRoutes": true }
  }
}

Directory Structure (recommended)

app/
  _layout.tsx              # Root layout (providers, theme, fonts)
  index.tsx                # / route
  +not-found.tsx           # 404
  (auth)/                  # group — not reflected in the URL
    _layout.tsx
    login.tsx
    register.tsx
  (tabs)/                  # tab navigator
    _layout.tsx            # Tabs definition
    index.tsx              # /
    profile.tsx            # /profile
    settings.tsx
  posts/
    index.tsx              # /posts
    [id].tsx               # /posts/:id  (dynamic)
    [...slug].tsx          # /posts/* (catch-all)
  modal.tsx                # presentation: modal

Layout Examples

Root Layout

// app/_layout.tsx
import { Stack } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function RootLayout() {
  return (
    <SafeAreaProvider>
      <Stack screenOptions={{ headerShown: false }}>
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="modal" options={{ presentation: "modal" }} />
        <Stack.Screen name="+not-found" />
      </Stack>
    </SafeAreaProvider>
  );
}