The Drawer Navigation structure is similar to our stack structure, with a main create function that lets us define the Navigator and the screens.
With Drawer Navigation we still can make use of the navigation options, and navigation props in our screens. In addition we are given some functionality to open/close and toggle our drawer in addition to using the native gestures. These functions are:
The default drawer component provides scroll-able functionality, and only renders links to the routes (screens) provided to the navigator. This can be overridden with a contentComponent that allows us to create custom content for the drawer. To set up, we pass in props from the navigator to give it access to the navigator’s props. It consists of ScrollView and DrawerItems components - and is wrapped in a SafeAreaView.
The set up for Tab Navigation also follows along with the Stack Navigation structure with a createBottomTabNavigator function.
We have access to the same navigation object we would in Stack and Drawer navigation - and we have the ability to provide options on our screens to customize title, styling, or pass in an icon to render on the tab.
Usually our bottom tab appears on more than one screen, and thus we might want to be able to navigate within our tab screens. We can provide stack navigation inside our tab screens to provide additional functionality - for example we want to have a profile tab and be able to navigate to additional details. We can have a stack navigator for each of our screens: