Week 5: Nested Navigators & Deep Linking Basics

1. Nesting Navigators

A tab bar that disappears every time you push a detail screen feels wrong on both platforms. The fix is structural: each tab gets its own stack navigator, and the tab navigator only ever sees the stack's root screen.

const FeedStack = createNativeStackNavigator();
function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen name="Feed" component={FeedScreen} />
      <FeedStack.Screen name="PostDetail" component={PostDetailScreen} />
    </FeedStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();
function MainTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="FeedTab" component={FeedStackScreen} options={{ headerShown: false, title: 'Feed' }} />
      <Tab.Screen name="ProfileTab" component={ProfileStackScreen} options={{ headerShown: false, title: 'Profile' }} />
    </Tab.Navigator>
  );
}

Two details matter here. First, headerShown: false on the tab screen — otherwise you get two headers stacked on top of each other, the tab's and the stack's. Second, pushing PostDetail from inside FeedStack only affects that tab's stack; switching tabs and back preserves where you were.

2. Auth Flows: Conditional Navigators

The standard pattern for a login flow isn't a screen you can navigate away from — it's a different navigator entirely, rendered conditionally based on whether the user is signed in. Once state flips, React unmounts one tree and mounts the other; there's nothing to "go back" to.

function RootNavigator() {
  const { isSignedIn, isLoading } = useAuth();

  if (isLoading) return <SplashScreen />;

  return (
    <NavigationContainer>
      {isSignedIn ? <MainTabs /> : <AuthStack />}
    </NavigationContainer>
  );
}

const Auth = createNativeStackNavigator();
function AuthStack() {
  return (
    <Auth.Navigator screenOptions={{ headerShown: false }}>
      <Auth.Screen name="SignIn" component={SignInScreen} />
      <Auth.Screen name="SignUp" component={SignUpScreen} />
    </Auth.Navigator>
  );
}

A brief loading state while you check for a stored session (covered properly in Week 9's storage lesson) avoids a flash of the sign-in screen for users who are already logged in.

3. Deep Linking Configuration

A linking object, passed to NavigationContainer, maps URL paths onto your navigator's screen names — turning myapp://post/42 into "open PostDetail with {'{'} postId: '42' {'}'}", automatically.

import type { LinkingOptions } from '@react-navigation/native';

export const linking: LinkingOptions<RootParamList> = {
  prefixes: ['myapp://', 'https://myapp.example.com'],
  config: {
    screens: {
      FeedTab: {
        screens: {
          Feed: 'feed',
          PostDetail: 'post/:postId',
        },
      },
      ProfileTab: 'profile',
    },
  },
};

<NavigationContainer linking={linking} fallback={<SplashScreen />}>
  <MainTabs />
</NavigationContainer>

The nested screens object mirrors your navigator's actual nesting — PostDetail is nested under FeedTab here because that's where it lives in the component tree above. A mismatch between the two is the single most common reason a deep link "does nothing."

4. Testing Links

You don't need a real domain or App/Universal Links entitlements (that comes in Week 15) to test the mapping — a custom URL scheme, opened from the terminal or another app, is enough during development.

npx uri-scheme open myapp://post/42 --ios
npx uri-scheme open myapp://post/42 --android

import * as Linking from 'expo-linking';

<Pressable onPress={() => Linking.openURL('myapp://post/42')}>
  <Text>Open post 42</Text>
</Pressable>

Note that uri-scheme needs a native dev build (or the classic Expo Go scheme) — it won't hot-swap into a build that's already running without a reload, so keep Metro's terminal visible while you test.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.