1.6 React Navigation - Part 2

In this tutorial, we continue to develop navigation support for our application. We explore the use of side drawer set up with React Navigation's Drawer Navigator support. At the end of this tutorial, you will be able to:

  • Configure your application with drawer based navigation using the Drawer Navigator
  • Set up and configure the side drawer to support drawer based navigation


1.6.1 Dataflow


1.6.2 How to

  • 1. Install react-navigation/drawer (tested on v6.4.3), react-native-gesture-handler (tested on v2.2.1) and react-native-reanimated (tested on v2.8.0).
$ expo install @react-navigation/drawer
$ expo install react-native-gesture-handler react-native-reanimated
  • 2. Update 'babel.config.js' file.
  • 3. Create 'components/HomeComponent.js' file.
  • 4. Update 'components/MainComponent.js' file.


1.6.3 Screenshots