Expo Router

Project Structure

app/
├── _layout.tsx           # Root layout
├── index.tsx             # Home (/)
├── +not-found.tsx        # 404 page
├── (tabs)/               # Tab group
│   ├── _layout.tsx       # Tab bar config
│   ├── index.tsx         # First tab
│   └── profile.tsx       # Profile tab
├── (auth)/               # Auth group (no tabs)
│   ├── _layout.tsx
│   ├── login.tsx
│   └── register.tsx
├── settings/
│   ├── _layout.tsx       # Stack layout
│   ├── index.tsx         # Settings main
│   └── notifications.tsx
└── details/[id].tsx      # Dynamic route

Root Layout

// app/_layout.tsx

  return (
    
      
        <Stack.Screen name="(tabs)" />
        <Stack.Screen name="(auth)" />
        <Stack.Screen
          name="details/[id]"
          options={{ presentation: 'modal' }}
        />
      
    
  );
}

Tab Layout

// app/(tabs)/_layout.tsx

  return (
    
      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color, size }) => (
            
          ),
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color, size }) => (
            
          ),
        }}
      />
    
  );
}

Navigation

// Programmatic navigation
router.push('/details/123');           // Push to stack
router.replace('/home');               // Replace current
router.back();                          // Go back
router.canGoBack();                     // Check if can go back

// With params
router.push({
  pathname: '/details/[id]',
  params: { id: '123', title: 'Item' },
});

// Link component

  
    Go to Profile
  

// Reading params
function DetailsScreen() {
  const { id, title } = useLocalSearchParams<{ id: string; title?: string }>();
  return Details for {id};
}

Protected Routes

// app/(auth)/_layout.tsx

  const { user, isLoading } = useAuth();

  if (isLoading) {
    return ;
  }

  if (user) {
    return ;
  }

  return ;
}

// app/(tabs)/_layout.tsx

  const { user, isLoading } = useAuth();

  if (isLoading) {
    return ;
  }

  if (!user) {
    return ;
  }

  return ...;
}

Deep Linking

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

// Handle: myapp://details/123
// app/details/[id].tsx handles automatically

Quick Reference