nesting-navigators

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Nesting navigators allows rendering a navigator inside another navigator's screen

Nesting navigators enable you to render a navigator inside the screen of another navigator. This is an extension of React Navigation's nesting navigators concept adapted for Expo Router.

Example file structure for nested navigators with Stack root and Tabs in home

A common nesting pattern uses src/app/_layout.tsx as a Stack navigator at the root, with src/app/home/_layout.tsx as a Tabs navigator nested inside. The routes src/app/home/feed.tsx and src/app/home/messages.tsx match the paths /home/feed and /home/messages respectively and are rendered as tabs.

Root layout using Stack navigator

The root layout file src/app/_layout.tsx can export Stack as the default export to establish a Stack navigator for the entire app.

Nested layout using Tabs navigator

A nested layout file like src/app/home/_layout.tsx can export Tabs as the default export to render its child routes as tabs within the parent Stack navigator.

Stack inside native tabs pattern

When using native tabs, you can nest a Stack layout inside each tab to support headers and pushing screens. This allows for hierarchical navigation within individual tabs.

Navigate to nested screen with router.push in Expo Router

In Expo Router, navigating to a specific nested screen is simpler than React Navigation. Instead of passing screen names in params, use router.push() with the full path. For example, to navigate to the media screen inside settings inside root, use router.push('/root/settings/media').

Difference between React Navigation and Expo Router for nested navigation

React Navigation requires passing screen names explicitly in params: navigation.navigate('root', { screen: 'settings', params: { screen: 'media' } }). Expo Router simplifies this by allowing direct path-based navigation with router.push('/root/settings/media').

Navigation UI elements may move out of Expo Router library

Navigation UI elements such as Link, Tabs, and Stack may be moved out of the Expo Router library in the future.

Stacks inside tabs: nested stack navigator pattern

To create tabs where one or more tabs contain multiple screens, nest a Stack navigator inside a Tabs navigator. This pattern results in intuitive URLs and scales well to desktop web apps where primary tabs remain visible. The root layout should return a Tabs component with screenOptions={{ headerShown: false }} to hide the outer header, since each navigator adds its own header. Inside a tab directory with multiple screens, create a _layout.tsx file that returns a Stack component.

initialRouteName ensures stack integrity in nested navigators

When nesting a Stack inside a Tab, set unstable_settings = { initialRouteName: 'index' } in the stack's _layout.tsx file. This ensures that deep links into the stack will push the index route onto the stack first, maintaining proper navigation state.

withAnchor prop for tab navigation in nested stacks

Use the withAnchor prop on Link components when navigating to nested stack routes from other tabs. For example, <Link href="/feed/123" withAnchor>Go to post</Link> will properly push the route onto the stack instead of replacing the current screen.

Expo Router automatically manages react-native-safe-area-context

Expo Router automatically adds react-native-safe-area-context support, so you do not need to add it manually.

NavigationContainer is managed by Expo Router

The global React Navigation <NavigationContainer /> is completely managed in Expo Router. You do not need to use it directly. Expo Router provides systems for achieving the same functionality as the NavigationContainer without needing to use it.

Nested navigators and multiple mounted pages

In apps with nested navigators, multiple pages are often mounted at the same time. For example, a stack has the previous page and current page in memory when a new route is pushed. This is why Expo Router provides separate hooks for local versus global URL parameters.

Give your agent this brain