React Native: How To Navigate Between Screens

As with a related framework react, react-native is composed of multiple components that use JSX to create a custom UI. The main difference is of course that react-native converts its JSX to the native components for whatever mobile device is viewing it. These days Apps are rarely composed of a singular screen, thus there is a need to be able to navigate between them. This article assumes you are familiar with the basics of react-native, and will focus on how to setup multiple screen navigation with an example using expo.
Lets get started!

Installing React Navigation On Expo

The first step in this process is to install react-navigation/native to allow us to import a NavigationContainer into our project. In this same step we will also be installing react-navigation/stack in order to allow us to import createStackNavigator. With your app NOT running within terminal enter:

npm add @react-navigation/native @react-navigation/stack

At this point we will need to install some peer dependencies through expo. Once again in terminal you should enter the following:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

At this point it is safe to spin our react app back up so we can implement some of these useful dependencies.

Configuring React Navigation

I’d like to take a second before we continue to go over file structure. Because I have certain preferences on how I setup my react app, my file structure may look a bit different than yours. Feel free to setup your app to mirror mine if you’d like, but I figured I should mention how I like to setup mine due to some of the relative paths I’m going to use in the following example. I should also mention I generally make an App folder I keep everything in. Here is a pic of my basic setup:

The highlighted component index.js is at the topmost layer of this app. I am also hovering my cursor over Navigation.js because we will be doing some work in this as well.

Within Navigation.js you will need to import React, NavigationContainer, and createStackNavigator. You will also need to import the various screens you will be navigating between like so:

In this example the two screens we will navigate between are Home and Options

The next thing you’re going to want to do within Navigation.js is to declare a variable MainStack and have it equal the return of createStackNavigator() this will allow you to access Navigator (in our case it’ll be used as MainStack.Navigator. In the docs they use it simply as Stack.Navigator). You will not only use this to wrap your screens you’d like to navigate, but it will provide information for the screens to consume. Also this allows us to use Screen which will map to the various components you’ve made. These properties will both come from MainStack. If you were to use Screen to access both the Home and Options components mentioned above. The whole process we just went over will look something like this:

In this example I’ve disabled the headers because it is my personal preference. Feel free to leave them and see what it looks like on the various screens if you’d like.

At this point you might be asking “wait…what is Navigation.js going to export?” Well here we are at the final step in Navigation.js! We need to export a function that wraps MainStackScreen within NavigationContainer like so:

default export of Navigation.js

Implementing React Navigation

Within the top layer of our app (in this examples case index.js) we need to import our new Navigation component and render it. Like so:

Now we can focus on setting up our two screens to be able to navigate between one another. This will be done with an anonymous function we will pass to an onPress prop via a Text component. You will notice there is a mysterious prop called navigation we will use in the return to this onPress function. You might be wondering where this comes from? Well when we wrapped this component in MainStack.Navigator in a previous step, we passed a number of optional props to it implicitly. navigation happens to be one of them. In this example we will setup text on both Home.js and Options.js that provides a link between these two screens. Lets start with Home.js. In this example it will look like the following:

the highlighted portions are the aforementioned navigation prop. Once this Text is touched or clicked, the app will navigate to the Options screen.

This will render some setup text on the Home screen that reads “Goto Options Screen” in blue. In order to setup the link in Options.js we do a similar thing with reference to Home. At this point you should know what this looks like but I will add a picture of how Options.js should look for clarity:

This will render some centered text reading “Go back to Home Screen” that once clicked/touched will navigate the app back to the Home screen. Again the onPress function with navigation is highlighted.

With these two screens linked together through the use of the navigation prop and a clickable/touchable onPress anonymous function, we have successfully setup navigation between two of our screens.

Conclusion

The ability to navigate between screens is essential for any React Native app. It is important to note that onPress can be used with a number of different context (not just text) such as on images or buttons etc. In this way there are many different options available to link your screens together. This article just sought to focus on a very basic example. I hope you enjoyed it and happy coding!