Drawer Navigator and Nested Navigators
Set up a drawer navigator, nest a stack inside one of its screens, and understand how nested navigators interact with the header and back button.
What is a Drawer Navigator?
A drawer navigator shows a slide-out side menu (drawer) that the user can open by swiping from the left edge or tapping a hamburger icon. It is ideal for apps with many top-level sections that do not fit in a tab bar. React Navigation provides it via the @react-navigation/drawer package.
Installing the Drawer Package
The drawer navigator requires additional gesture and animation libraries. Install the drawer package and its peer dependencies. The drawer relies on react-native-gesture-handler and react-native-reanimated for smooth animations.
npm install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimatedAll lessons in this course
- Installing and Configuring React Navigation
- Navigating Between Screens and Passing Params
- Bottom Tab Navigator
- Drawer Navigator and Nested Navigators