React Navigation to add routing to your React Native application

If you have used React before, you probably gotten a lot of aid from utilizing react-router. However, it is difficult to apply it to a React Native application. After all, react-router relies on using the DOM, but a RN app doesn’t provide one.

In a RN application, we will be using React Navigationto help us navigate through pages. React Navigation is the officially supported library from the RN team, and you can also study up on some alternatives (etc, React Native Navigation)

So, since I don’t want to waste your time, lets get started!

Note: I will be assuming you know the basics ;)

Initialize Project

First, we will create a new project. You can name the project whatever you like.

$ react-native init reactNavPractice // make sure to use RN version > 0.6

Then, install the necessary dependencies for the project. I will be using yarn for this project, but feel free to use npm is you like.

$ yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/native

After you do that, you will probably have the following structure.

__tests__
android
ios
node_modules
.buckconfig
.eslintrc.js
.flowconfig
.gitattributes
.gitignore
.prettierrc.js
.watchmanconfig
App.js
app.json
babel.config.js
index.js
metro.config.js
package.json
yarn.lock // or package-lock.json

Apply React Navigation

Now we if you go to App.js, you are going to see the following code:

We are going to erase it and replace it with this code.

Note: If you want a different UI instead of header navigation, you can replace createStackNavigator() with following alternatives.

createBottomTabNavigator() // will create a navigation on the bottom
createDrawerNavigator() // will create a drawer navigation 

Now since we have added the default settings of React Navigation, it’s time to add some pages.

Create a directory called /app/views/Home/index.js and add some code.

Add another directory called /app/views/About/index.js and add some code.

Now, go back to App.js and add some more code

And there you have it! You can now navigate between pages in your React Native application.