Learn

When creating your app’s navigational structure, you often need to use a combination of multiple different navigators. For example, a bottom tab might need more screens to help users perform actions. These screens could be anything, like a dedicated “create” screen.

To help you structure more complex use cases, you can combine multiple navigators. Instead of rendering a screen, you can also render a navigator as a screen. Nesting navigators sounds simple, but you have to be careful when doing so. When rendering a stack navigator inside another stack navigator, you might get two headers on top. To fix that, you can customize or turn off the header in one stack navigator.

In our example of the Codecademy Go app, we want to add a stack navigator to the profile tab. Here, we show an overview screen and a settings screen. The settings screen shouldn’t be a tab on its own. By adding this stack navigator, we group the profile functionality under a single tab. It also adds a nice screen animation when users go to the settings screen and keeps the profile tab marked as active.

Nested navigator with Overview and Settings nested under Profile

Instructions

1.

Let’s reuse the tab navigator from the previous exercise. Instead of refactoring the tab navigator to a stack navigator, let’s add a new stack navigator as a screen.

  • First, we need to create a new stack navigator with createStackNavigator on top of our current code.
  • After you created this navigator, define OverviewScreen and ProfileNavigator components.
  • In the ProfileNavigator, add the OverviewScreen with the name Overview. The ProfileNavigator should also have the SettingsScreen, but we will skip it in this exercise for simplicity.
2.

Great! Now add this new ProfileNavigator as a screen to our current tab navigator. You can give it the name Profile.

3.

Awesome! If you click on the Profile tab, we can see our OverviewScreen. Did you notice that the stack navigation header is rendered too? That’s the standard UI you get with the stack navigator. If you add another screen to this stack navigator and navigate to it, the back button will be visible. This is fully customizable in react-navigation, you can find all available options in the documentation.

Press run to continue to the next exercise.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?