Expo Router Patterns Skill

Expo Router Patterns Skill

This skill covers Expo Router navigation for React Native.

When to Use

Use this skill when:

• Setting up navigation
• Creating screens and routes
• Implementing deep linking
• Protecting routes

Core Principle

FILE-BASED ROUTING - Routes are defined by file structure (like Next.js).

File Structure

app/
├── (auth)/             # Route group (not in URL)
│   ├── login.tsx      # /​login
│   ├── register.tsx   # /​register
│   └── _layout.tsx    # Layout for auth routes
├── (tabs)/            # Tab navigation group
│   ├── _layout.tsx    # Tabs layout
│   ├── index.tsx      # /
│   └── profile.tsx    # /​profile
├── settings/
│   ├── index.tsx      # /​settings
│   └── [id].tsx       # /​settings/​123 (dynamic)
├── _layout.tsx        # Root layout
├── +not-found.tsx     # 404 page
└── [...missing].tsx   # Catch-all route

Basic Navigation

Link Component

import { Link } from 'expo-router';

<Link href="/​profile">Go to Profile</​Link>

// With params
<Link
  href={{
    pathname: '/​user/[id]',
    params: { id: '123' },
  }}
>
  View User
</​Link>

// As child (for custom styling)
<Link href="/​settings" asChild>
  <TouchableOpacity>
    <Text>Settings</​Text>
  </​TouchableOpacity>
</​Link>

useRouter Hook

import { useRouter } from 'expo-router';

function Component(): React.ReactElement {
  const router = useRouter();

  const handleNavigate = () => {
    // Push new screen
    router.push('/​profile');

    // Replace current screen
    router.replace('/​login');

    // Go back
    router.back();

    // Navigate with params
    router.push({
      pathname: '/​user/[id]',
      params: { id: '123' },
    });
  };

  return <Button onPress={handleNavigate}>Navigate</​Button>;
}

Layout Components

Root Layout

// app/​_layout.tsx
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';

export default function RootLayout(): React.ReactElement {
  return (
    <>
      <StatusBar style="auto" />
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="(auth)" options={{ headerShown: false }} />
        <Stack.Screen
          name="modal"
          options={{
            presentation: 'modal',
            headerTitle: 'Modal',
          }}
        />
      </​Stack>
    </>
  );
}

Tab Layout

// app/(tabs)/​_layout.tsx
import { Tabs } from 'expo-router';
import { Ionicons } from '@expo/​vector-icons';

export default function TabLayout(): React.ReactElement {
  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: '#3B82F6',
        tabBarInactiveTintColor: '#6B7280',
        headerShown: false,
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="home" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="search"
        options={{
          title: 'Search',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="search" size={size} color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <Ionicons name="person" size={size} color={color} />
          ),
        }}
      />
    </​Tabs>
  );
}

Dynamic Routes

Single Parameter

// app/​user/[id].tsx
import { useLocalSearchParams } from 'expo-router';
import { View, Text } from 'react-native';

export default function UserPage(): React.ReactElement {
  const { id } = useLocalSearchParams<{ id: string }>();

  return (
    <View className="flex-1 items-center justify-center">
      <Text className="text-lg">User ID: {id}</​Text>
    </​View>
  );
}

Multiple Parameters

// app/[category]/[id].tsx
import { useLocalSearchParams } from 'expo-router';

export default function ProductPage(): React.ReactElement {
  const { category, id } = useLocalSearchParams<{
    category: string;
    id: string;
  }>();

  return (
    <View>
      <Text>Category: {category}</​Text>
      <Text>Product ID: {id}</​Text>
    </​View>
  );
}

Catch-All Route

// app/[...path].tsx
import { useLocalSearchParams } from 'expo-router';

export default function CatchAllPage(): React.ReactElement {
  const { path } = useLocalSearchParams<{ path: string[] }>();

  return (
    <View>
      <Text>Path segments: {path?.join('/')}</​Text>
    </​View>
  );
}

Protected Routes

// app/​_layout.tsx
import { Redirect, Stack } from 'expo-router';
import { useAuth } from '@/​hooks/​useAuth';
import { Loading } from '@/​components/​Loading';

export default function RootLayout(): React.ReactElement {
  const { user, isLoading } = useAuth();

  if (isLoading) {
    return <Loading />;
  }

  if (!user) {
    return <Redirect href="/​login" />;
  }

  return <Stack />;
}

Route Groups

app/
├── (auth)/           # Auth group (no /​auth in URL)
│   ├── login.tsx    # /​login
│   └── register.tsx # /​register
├── (app)/           # App group (no /​app in URL)
│   ├── home.tsx     # /​home
│   └── profile.tsx  # /​profile

Modal Routes

// app/​_layout.tsx
<Stack>
  <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
  <Stack.Screen
    name="modal"
    options={{
      presentation: 'modal',
      animation: 'slide_from_bottom',
    }}
  />
</​Stack>

// Navigate to modal
router.push('/​modal');

// Close modal
router.back();

Deep Linking

Configuration

// app.json
{
  "expo": {
    "scheme": "myapp",
    "web": {
      "bundler": "metro"
    }
  }
}

Links

myapp://                    # Opens app
myapp://profile             # Opens /​profile
myapp://user/​123            # Opens /​user/​123
https://myapp.com/​profile   # Universal link

Navigation Hooks

usePathname

import { usePathname } from 'expo-router';

function Component(): React.ReactElement {
  const pathname = usePathname();
  // Returns: "/​user/​123"

  return <Text>Current path: {pathname}</​Text>;
}

useSegments

import { useSegments } from 'expo-router';

function Component(): React.ReactElement {
  const segments = useSegments();
  // Returns: ["user", "123"]

  return <Text>Segments: {segments.join(', ')}</​Text>;
}

useFocusEffect

import { useFocusEffect } from 'expo-router';
import { useCallback } from 'react';

function Screen(): React.ReactElement {
  useFocusEffect(
    useCallback(() => {
      // Runs when screen is focused
      console.log('Screen focused');

      return () => {
        // Cleanup when screen loses focus
        console.log('Screen unfocused');
      };
    }, [])
  );

  return <View />;
}

Notes

• Use route groups (name) to organize without affecting URLs
• Layouts cascade (parent layouts wrap children)
• _layout.tsx defines the navigation structure
• +not-found.tsx handles 404 routes
• Deep linking is configured automatically
• Use typed params with generics for type safety