Skip to main content

Nested navigators

Nesting navigators means displaying a navigator inside the screen of another navigator, for example:

const Home = () => {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Messages" component={Messages} />
    </Tab.Navigator>
  )
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

In the above example, the Home component contains a tabbed navigator. The Home component is also used for the Home screen in your stack navigator inside the App component. So here's the tab navigator nested within the stack navigator:

  • Stack.Navigator
    • Home (Tab.Navigator)
      • Feed (Screen)
      • Messages (Screen)
    • Profile (Screen)
    • Settings (Screen)

Nested navigators work the same way as regular components. To achieve the desired behavior, it is often necessary to nest multiple navigators.

How nesting navs affects behavior​

There are a few things to keep in mind when nesting navigators:

Each navigator keeps its own navigation history.​

For example, when you press the back button while on screen in a nested stack navigator, it will return to the previous screen inside the nested stack, even if there is another navigator as the parent.

Each navigator has its own parameters​

For example, specifying the title option on a screen nested within a child nav will not affect the title displayed in the parent nav.

If you want to achieve this behavior, see the Manual for Screen Options with Nested Navigators. this can be useful if you are rendering the tab navigator inside the stack navigator and want to show the title of the active screen inside the tab navigator in the header of the stack navigator.

Each screen in the navigator has its own parameters​

For example, any params passed to the screen in a nested navigator are in the prop route of that screen and are not available from the screen in the parent or child navigator.

If you need to access the parameters of the parent screen from the child screen, you can use React Context to provide parameters to the child elements.

For example, if you call navigation.goBack() on a nested screen, it will only return to the parent nav if you are already on the first nav screen. Other actions, such as navigate, work in a similar way, that is, navigation will happen in the nested navigator, and if the nested navigator cannot handle it, then the parent nav will try to process it. In the above example, when you call navigate ('Messages') inside the Feed screen, the nested tab navigator will handle it, but if you call navigate ('Settings') the parent stack navigator will handle it.

Special navigator methods are available in navigators nested inside​

For example, if you have a stack inside a drawer navigator, the drawer methods are openDrawer, closeDrawer, toggleDrawer, etc. Will also be available in navigation on the screen inside the stack navigator. But suppose you have a stack navigator as the parent of a drawer, then screens inside the stack navigator won't have access to these methods because they are not nested inside the drawer.

Likewise, if you have a tab navigator inside a stack navigator, screens in the tab navigator will get the push and replace methods for the stack in their navigation properties.

If you need to dispatch actions to nested child navs from the parent, you can use navigation.dispatch:

navigation.dispatch(DrawerActions.toggleDrawer())

Nested navigators do not receive parent events​

For example, if you have a stack navigator nested within a tab navigator, screens in the stack navigator will not receive events generated by the parent tab navigator, such as tabPress, when using navigation.addListener.

To receive events from the parent navigator, you can explicitly listen to the parent events using navigation.getParent():

const unsubscribe = navigation.getParent().addListener ('tabPress', (e) => {
  // Do something
})

The parent nav UI is displayed on top of the child nav​

For example, if you nest a stack navigator in a Drawer navigator, you will see the Drawer appear above the head of the stack navigator. However, if you nest a Drawer navigator inside a stack, the Drawer will appear under the stack header. This is an important point to keep in mind when deciding where to place your navigators.

Done​

To see how well you learned this lesson, take the test in our school's mobile app on this topic or in Telegram bot.

EnglishMoji!

React Navigation

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!