Getting Started with the New React Navigation v5

By now, we've all heard about React Navigation V5. It comes with a bunch of improvements and a completely new approach to configuration that is component based vs API based. You can learn more about this new version here.

React Navigation v5 is a big release that completely changes how your navigation is configured. That being said, it is understandable that with such a release, upgrading and understanding everything going on can be difficult. This is why boilerplates like Ignite Bowser are great. If you're starting with React Native today and want to start with the latest Navigation library, I highly recommend you give it a try!

That being said, before you use Bowser you might want to know how we've integrated React Navigation v5, that's why today I'm going to go over how we've upgraded Bowser to React Navigation v5. Hopefully by the end of this article you'll understand the decisions made in our boilerplate so that you can confidently use it and make changes to it to suit your project's needs.

Initial Setup

If you'd like to follow this guide step by step, I recommend you first start by generating a fresh React Native project using react-native cli. Paste the following command and follow along!

npx react-native init rnv5upgrade

After this script completes, you should see the above.

Once complete, go ahead and cd into the newly created directory. If you run yarn ios you'll be able to see your fresh react-native project running on the iOS simulator. We'll be using the iOS simulator to demo our work for the rest of this tutorial, but everything should work the same on Android.

The first step will be to install the required packages in your React Native project. The first package you'll want to install is @react-navigation/native. If you're using yarn, you'll want to run the following:

yarn add @react-navigation/native

The best explanation for what this package does is from the official react-native documentation:

React Navigation is made up of some core utilities and those are then used by navigators to create the navigation structure in your app. Don't worry too much about this for now, it'll become clear soon enough! To frontload the installation work, let's also install and configure dependencies used by most navigators, then we can move forward with starting to write some code.

The libraries we will install now are react-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. If you already have these libraries installed and at the latest version, you are done here! Otherwise, read on.

As the instructions say, we now need to install the missing dependencies for react-navigation to work (if you are using expo, refer to the official documentation on expo steps).

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

Finally, before we get to integrating React Navigation in our project, you'll want to import react-native-gesture-handler in your entry file (usually index.js).

Setting up the Navigation Structure

Now you'll notice that in Bowser, we chose to add all our navigators in app/navigation . Let's go ahead and do that. Create an app folder and a navigation folder inside it. Feel free to also create an index.js file inside the navigation folder.

Your directory structure should look like this so far:

In order React Navigation to work, we need to wrap our whole app in a NavigationContainer. The only thing you need to know about this component is that it's responsible for managing your app state and linking your top-level navigator. You can get an idea of what this looks like in Bowser here (keep in mind that this is a JSX template file for the generator).

So let's go ahead and create our root-navigator with the NavigationContainer. First you'll want to create a file called root-navigator.jsx and paste in the following code:

https://gist.github.com/harrisrobin/1a2ee7801d6a63ba1056318e2101ab42

Now that we've created the primary-navigator , we'll want to import it in root-navigator and use it inside our RootStack . Your root-navigator.js should now look like this:

https://gist.github.com/harrisrobin/546787cf27f7726e35b0f5ef3946be80

Let's shift gear really quickly and clean up our App.js file in order to get it ready for react-navigation!

The easiest thing to do here is to clear everything in your App.js and replace it with this:

https://gist.github.com/harrisrobin/1e6df5803cccca39c17326976b47b6d9

The main thing to look at here is that we are using react-native-screens which will allow us to use a native navigation instead of the JS stack which will allow us to benefit from better performance and memory management. Finally, we're simply importing <RootNavigator/> which is our entire app wrapped in React Navigation! We're almost ready to roll 🚗!

Your App.js file should now look like below. Also, I recommend moving the App.js file to the /app directory to better match Bowser.

Before we go ahead refresh our app, we'll need to actually build our first screen otherwise you'll just see an error. Let's go ahead and quickly setup our welcome-screen. I went ahead and built a very basic welcome screen layout for this tutorial, so feel free to copy paste it:

https://gist.github.com/harrisrobin/2c66ef7d24b1281e8e2d83f4c079e56e

By now, if you refresh your app you should see this:

Testing our setup

Now that we've got our navigation setup, let's create another screen and test our setup! I'm going to create a new screen that I'll call goodbye-screen. Here's the code for said screen:

https://gist.github.com/harrisrobin/5a9c7f823990dca25b4a5541822b9619

End Result 🎉

You can find a public repository of this app here.

Conclusion

This is a very minimal setup. In a real world app, you'll most likely want to benefit from a bunch of other things such as Navigation Persistence, Typescript, State Management, Enhanced Debugging and theme support. Setting all that up can take up quite a bit of unnecessary time that is unrelated to shipping your App, which is why we work on Ignite Bowser which comes with all of these things out of the box!

This guide was meant to help you understand how the navigation part of Bowser works, but if you're starting a project today I highly recommend you check out Bowser which comes with:

• React Native
• React Navigation
• MobX State Tree (Why MST?)
• TypeScript
• Reactotron (requires 2.x)
• And more!

Harris Robin is a fullstack developer based in Montréal, Quebec and a co-founder at Uplet. You can support him by clapping, following or by buying him a coffee.