How to add a Bottom Tabs navigator to a React-Native app using React-Navigation 6.0 part 1

Hello, I always seem to say this but it has been a while since I have written an article, I have been busy with life and my own personal projects too. However, I thought I would write an article today describing how to create a bottom tabs navigator in a react native app using the React-Navigation page version 6.0.

The first thing we will need to do is create a react-native application, to do this use the below command

npx react-native@latest init BottomTabNavigatorProject

This may take a few minutes to complete.

The next step is to install the necessary react-navigation package, but before that, I will briefly explain what React-Navigation is.

React-Navigation is a fantastic package that is made up of a few core utilities which are then used by the navigators to provide your app with a navigation structure. There are a few options for navigation within this package such as stack, tab and drawer. React-Navigation has a few dependencies which also need to be installed as well.

Open the react-native project in your code editor and then open a terminal within the code editor too.