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.
Instructions
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
createStackNavigatoron top of our current code. - After you created this navigator, define
OverviewScreenandProfileNavigatorcomponents. - In the
ProfileNavigator, add theOverviewScreenwith the nameOverview. TheProfileNavigatorshould also have theSettingsScreen, but we will skip it in this exercise for simplicity.
Great! Now add this new ProfileNavigator as a screen to our current tab navigator. You can give it the name Profile.
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.