How to add Bottom Tab inside Navigation Drawer in React Navigation V5 – React Native

In this example I will show you “How to add Bottom Tab inside Navigation Drawer in React Navigation V5 – React Native” using react-native.

We will use @react-navigation to make a navigation drawer and Tab. We will create a navigation drawer with 3 screens in the navigation menu and also on Bottom Tab on the first screen of the Navigation Drawer. When open Screen1 then Bottom Tab will be visible and on the other options, that Bottom Tab will be invisible(hide).

Create a Drawer Navigator

Create Bottom Tab Navigator

So let’s get started.

Init a React Native App

Now getting started with React Native. It will help you lots to know more about the way you can make a React Native project easily. So, we are going to use react-native init to make our React Native App. We are assuming that you have already node installed on your system, you can use simply npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Then run the following command to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the –version argument:

Screenshots