Expo Router Patterns

Stack Navigator Configuration

Root Layout Setup

Use screenOptions on the Stack component to set defaults for all screens. Do NOT explicitly list every screen - routes are auto-discovered from the file structure.

tsx
1// app/_layout.tsx
2import { Stack } from 'expo-router';
3
4export default function RootLayout() {
5  return (
6    <Stack screenOptions={{ headerShown: false }} />
7  );
8}

Per-Screen Configuration

Individual screens configure their own options using <Stack.Screen> within the component file:

tsx
1// app/lesson/[id].tsx
2import { Stack } from 'expo-router';
3
4export default function LessonScreen() {
5  return (
6    <View>
7      <Stack.Screen
8        options={{
9          title: 'Lesson',
10          headerShown: true,
11          headerBackTitle: 'Back',
12        }}
13      />
14      {/* Screen content */}
15    </View>
16  );
17}

Dynamic Header Configuration

Use useNavigation with setOptions for dynamic header content like buttons:

tsx
1import { useNavigation } from 'expo-router';
2import { useLayoutEffect } from 'react';
3
4export default function Screen() {
5  const navigation = useNavigation();
6
7  useLayoutEffect(() => {
8    navigation.setOptions({
9      headerRight: () => (
10        <Pressable onPress={handlePress}>
11          <Ionicons name="add" size={28} />
12        </Pressable>
13      ),
14    });
15  }, [navigation]);
16
17  return <View>{/* content */}</View>;
18}

Native Tabs (expo-router/unstable-native-tabs)

Native tabs provide platform-native tab bar with SF Symbols on iOS:

tsx
1// app/(tabs)/_layout.tsx
2import { Icon, Label, NativeTabs } from 'expo-router/unstable-native-tabs';
3
4export default function TabLayout() {
5  return (
6    <NativeTabs>
7      <NativeTabs.Trigger name="index" options={{ title: 'Home' }}>
8        <Icon sf="house.fill" drawable="custom_android_drawable" />
9        <Label>Home</Label>
10      </NativeTabs.Trigger>
11    </NativeTabs>
12  );
13}

Key Principles

1. File-based routing: Routes are auto-discovered from the app/ directory structure
2. Minimal configuration: Only configure what you need to override
3. Screen-level options: Screens configure their own headers/options using <Stack.Screen> within the component
4. Layout files: _layout.tsx files define navigation structure for their directory
5. Route groups: Parentheses like (tabs) create route groups without affecting the URL path

Common Mistakes to Avoid

• Don't list every screen explicitly in Stack - they're auto-discovered
• Don't use screenOptions for route-specific settings - use <Stack.Screen> in the route file
• Don't nest navigators deeply - use file-based routing for cleaner structure