Using React Navigation 5.x

Kenny Marks
Jun 28, 2020 · 5 min read

A little while ago I wrote an article on how to set up the react-navigation package for react-native projects. When writing that article I had only been exposed to react navigation 4.x and wrote a quick how-to on setting navigation within a mobile application. After having used react-navigation 5.x a little bit, I wanted to write another quick tutorial on once again setting up basic navigation within your react-native application.

Installation

Regardless of how you initialize a react-native project you will need to install the core library. CD in to your project directory and run the following line in your terminal:

Next we need to install the dependencies. If you initialized your project using the expo-cli you will need to run the following line terminal:

On the other hand if you initialized your project using the react-native-cli then run the following line:

Finally we are going to install the ‘Stack’ navigation library. This will provide a project with the ability to use the ‘Stack Navigator’. There are several other navigators you can choose from such as ‘Tab’ and ‘Drawer’, but ‘Stack’ provides us the general functionalities we would want in any mobile application. Like before we are going to run another line in our terminal:

With this we have installed all of our dependencies so now it is time to set up our navigation.

Adding Screens To Navigate To

For this example our next step is to add a few screens to navigate too. I am setting up three screens below: a HomeScreen, FirstScreen, and SecondScreen. The Home Screen will render two buttons, and the First and Second will render a single string of text once we navigate to them:

Setting up the Navigator

Now that we have some screens to navigate to, our next step will be to enter our applications ‘App.js’ file and add four import statements. First, the ‘NavigationContainer’ from the ‘react navigation’ library. Second, the ‘createStackNaivigator’ function from ‘react-navigation/stack’. Finally, we will import the Home, First and Second screens.

Our next step will be to create our navigation stack through the ‘createStackNavigator’ function above our component:

Following this we can now wrap we can now remove everything in our App.js component render and add in our ‘NavigationContainer’:

Next we can add our Stack and call on the ‘Navigator’ function so that we can set up our navigation routes:

After this we can begin wiring up our screens by adding a Stack.Screen element inside our Stack.Navigator. To do so we will also pass each Stack.Screen a few props. A component prop and a name prop. The component prop will be a piece of ‘JSX’ that points to the appropriate component; while the name will be a string that should also correspond to the component. Finally, we also need to pass our Stack.Navigator a prop called initialRouteName which will receive a string that correspond to one of the name props under our Stack.Screen in this case our HomeScreen:

With this our navigator is set up we now just need to add a little bit of logic to our home screen so that we can navigate to our First and Second screens.

Wiring up the Navigator in the HomeScreen

To finish up the setup we just need to pass the navigation prop to our HomeScreen:

Next we can add the on press events to our buttons and in our callback functions for those events call on the navigate function on our navigation prop passing the name of our navigation route as an argument:

With this we can now start our sever, press on the buttons and watch what happens:

Final Code Snippets

Conclusion

That’s all it takes to get started with react-navigation 5x. Happy Coding!

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Kenny Marks

Written by

A full stack developer with an interest in Cybersecurity, International Relations, and Gaming.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store