The navigation structure above doesn’t work when you want to have a screen cover up all elements including the tab bar.

This ultimately has a flaw where there aren’t ways to hide the bottom tab bar. This allows each tab to have its own navigation stack in which it could push more screens. The Home, Profile, and Settings screens are to be part of the tab bar Each of them has their own stack navigator. One project that I’ve worked with had the tab navigator as the topmost navigator such as below: “Nesting navigator means rendering a navigator inside a screen of another navigator” ( React Navigation Documentation) Another example is having a tab navigator to display the application main screens and then using a stack navigator to show more screens that relate to each tab. You can nest a stack navigator inside a drawer and allow additional screens to be displayed within that drawer. Nesting navigators are combining more than one navigation type in a React Native app. I found another solution to the same problem on GitHub in case pod install isn’t enough. The package react-native-gesture-handler isn’t installing properly so it needs to be installed manually. Run pod install and this should install the necessary package to remove the error.You may get the following error message: null is not an object ( evaluating ‘RNGestureHandlerModule.Direction’) Npm install install install we get started ensure the project can run: Npx react-native init nested-stack-navigationĪfter the project was created I installed all dependencies that relate to React Navigation 5. I have included the steps outlined in the official Getting Started documentation below: Installing React Native and dependenciesĬreate a new React Native project. Let’s see how we can implement nested navigators without sacrificing functionality. Nesting the stack navigator this way doesn’t give you the ability to hide the tab bar, because each navigator keeps its own navigation history. The stack navigator was nested in the tab navigator. The designs required certain views to cover the entire screen, including over the bottom tab bar. Those issues made it difficult to match the design specs.

I’ve worked on two projects that had navigation issues.

Tabnavigator inside stacknavigator