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.

Payment#

Now you are on a stripped-down version of the site, after subscribing to Patreon, you will get full access to the training course, as well as access to our server's private channels in Discord.

Download our mobile application or get tested in our JavaScript telegram bot, and also subscribe to our news.

Become a Patron!

Sumerian school

Contributors โœจ#

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev

๐Ÿ“–๐Ÿ’ฒ

Become a Patron!