React Native: React Navigation
We dive into React Navigation and explore how to create apps with tab, stack, drawer navigators, and combinations thereof.
In the last post, we took a look at React Native and created our first app. Today we’re going to go from a single screen to a multi screen application using navigators.
What are Navigators?
Navigators allow you to define your application’s structure. Through the use of routes and scenes (or in this case screens), they set up how your application is displayed to the user. Navigators also render common elements such as headers and tab bars.
React Navigation
There are many options to choose from when it comes to selecting a navigator for your application. For this article, we’re going to focus on React Navigation. It’s a solution backed by the React Native community that works with the native navigation components of both Android and iOS.
React Navigation stays consistent with the “learn once, write anywhere” methodology of the React Native framework. It’s also delightfully easy to use.
Built-in Navigators
React Navigation comes with three built in navigators: StackNavigator, TabNavigator, and DrawerNavigator. We’ll explore each with an example, and then look at how to combine them through nesting. First let’s set up a new application.
Open up a Terminal window, and navigate to where you want this new app to live. Once there, call on the React Native CLI to set up a new application called “ReactNav”.
react-native init ReactNavOnce your project is set up, navigate to your project folder. There call up Node Package Manager (NPM) to install the latest version of React Navigation.
npm install --save react-navigationGreat, now we’re all set with a new application initialized and React Navigation installed. Before we dive in, let’s make a few modifications so that our code can be used for both iOS and Android.
Open up your application’s “index.ios.js” and “index.android.js” files. Change the content in both to the following.
Next, we’ll need to create the file “App.js” in the same folder as your “index.ios.js” and “index.android.js” files. Inside of it, we’ll write out the code for our application. Add the following as a placeholder.
Let’s also create a file named “Styles.js” in that same folder to hold our Stylesheet for the application. Add the following to the “Styles.js” file.
Refresh the application and you should have a simple app with “Hello World” displayed in the center.
Screens
Screens are React components that define separate views in your application. Let’s set up a few using colors to differentiate between them. Add the following to your “App.js” file.
To actually give them color, add the following to the list of styles in your “Styles.js” file.
Great. With that we have four screens set up: Green, Red, Blue, and Purple. Let’s add some navigation.
Stack Navigator
We’re going to start off with the StackNavigator included in React Navigation. This navigator provides a way to transition between screens wherein new screens are placed over the existing. Like cards in a stack.
You’re probably familiar with this style of navigation as it’s fairly common in both iOS and Android. On iOS new screens slide in from the right, and on Android they fade in from the bottom. Let’s try it out.
First import the StackNavigator component from the react-navigation package. Open up the “App.js” file in your application and add the following to your imports list.
Now we’ll invoke an instance of the StackNavigator by adding the following between the PurpleScreen component and the AppRegistry.
Then modify the ReactNav class to render the new StackNav function.
What we’ve done is created a StackNavigator with our screens registered as routes within its navigation tree. The GreenScreen is set as the “screen” for the “Green” route and so on. Refreshing your application should bring up the Green Screen with gray header.
Let’s add a title to our header. To do that we’ll call on the Navigation options for the GreenScreen class. To do this, call a static method within the class.
Add similar titles to the other screens as well. Upon refresh we have a Green screen with a gray header and the title of “Green”. Excellent, now let’s add in some links to the other screens.
We’re going to set things up so that the Green screen is our landing page. From there, a button will lead to the Red screen.
We’ll do this by adding a TouchableHighlight. Inside the TouchableHighlight, the “onPress” method will call up “this.props.navigation.navigate(‘Red’)” a helper method used to load the Red screen.
Open up “App.js”, add TouchableHighlight to the react-native import list and then add a TouchableHighlight to your GreenScreen class’s render method.
Also add a “button” item to your styles list in “Styles.js”.
Refresh your app and try it out. Pressing on the button should bring in the Red screen. It also adds a button to the left of the Red screen’s header which will navigate you back to the Green screen. That’s basic StackNavigation, but not much else. Let’s change that.
We’re going to modify the Red screen a bit. The new screen will have a button that returns to the Green screen in the main view, and touchable objects to open the Blue and Purple screens in the header. First, the return button. Open “App.js” and add a TouchableHighlight to the RedScreen class.
The button added uses “this.props.navigation.goBack()” in the “onPress” method, it’s a helper built into the StackNavigator. When called, “goBack()” closes the active screen and moves back a route in the navigation list. Simple and effective.
In addition to adding the button, we removed the “static navigationOptions” from the RedScreen class. We do this because we cannot directly access the props to navigate to another screen within the static declaration. Instead, we’re going to define the “navigationOptions” separately bellow the class itself.
The headerRight and headerLeft elements define items displayed on the right and left of the header respectively. In this case buttons have been added with methods to navigate to the Purple and Blue screens. Also add “Button” to the react-native import list so that the app will run.
Refresh the app and try navigating between the different screens by using the buttons and the back methods as needed. You now have an app with Stack Navigation set up, and a custom header with embeded navigation links.
There is a lot more you can do with the StackNavigator component, and I encourage you to explore the documentation further.
Tab Navigator
To start, add the TabNavigator component to your react-navigation import list.
Then invoke the TabNavigator in a const function “TabNav” and set up the routes just like with the StackNavigator. There will be a bit of extra code here to manage the “tabBarOptions” for styling.
Then, swap “StackNav” for “TabNav” in the ReactNav class’s render method.
Refresh the app and you should be presented with a TabNavigator using the same routes as the StackNavigator before it. Various options exist to modify the TabNavigator as detailed in the documentation. Again, I encourage you to check it out and play around with the TabNavigator accordingly.
Drawer Navigator
Just as before, add DrawerNavigator to the react-navigation import list.</p>
After that, DrawerNavigator will be invoked with a const function “DrawerNav” and the routes will be set up just like in other two navigators.
Then swap “TabNav” for “DrawerNav” in the ReactNav class’s render method.
At this point if you refresh the app, you’ll get the Green screen with no header. The on screen button will navigate you to the Red screen as before, but that’s all. You’ll notice that the Red screen also lacks a header. The DrawerNavigator does not render them automatically.
You’ll also notice that you have no way to navigate to the other two screens (Blue, and Purple) yet. We need a way to open the drawer in order to use it for navigation.
To do this, add TouchableHighlights to each of the color screens with an “onPress” method that calls up the helper method “props.navigation.navigate(‘openDrawer’)”.
Now refresh your app and try out your DrawerNavigator. As with the other navigators, there are many options for customizing the DrawerNavigator and its contents. See the official documentation for more details.
Combining/Nesting Navigators
While each of the navigators are useful on their own, generally you will want to combine a couple of different navigators when it comes to handling navigation in your apps. Let’s explore how to do that through nesting.
For this example we’re going to set up the application to work like this. The Green screen will be the “landing/login” screen. It will have a button that will navigate to the Red/Blue screen which will serve as the application’s “logged in home”. From there, tabs will enable switching between the Blue and Red screens. In turn, both of these will have a button to open the “app menu” a drawer navigator that will enable navigation between the Red/Blue and Purple screens.
To do this, first declare a new const called “NestedNav” to hold the navigator. Start if off with a StackNavigator component to set the initial route of the Green screen and its ability to take us to the Blue/Red screen. In this navigator we’ll declare the initial route as normal, however the second route called “Drawer” will hold a DrawerNavigator method.
Inside of the DrawerNavigator add in the route for “Home” the screen for which will be a TabNavigator. This tab navigator will hold routes for “Red” (the RedScreen) and “Blue” (the BlueScreen). We’ll also include some formatting options to make the tab labels clearer like before.
Close out the TabNavigator, and add a “Purple” route to the Drawer navigator to access the Purple Screen.
Then, modify the Touchable Highlights on GreenScreen and RedScreen to reflect their new routing, and drop the “Open Drawer” button from the Green screen.
Now switch out “DrawerNav” with “NestedNav” in the ReactNav class.</p>
Refresh your app and play around. You should now have an App that includes three different types of Navigation in one.
Thanks for sticking around! That’s all for now. Join us next time for more development tutorials, tips, and tricks.
Github Gists and Repo
All of the Github Gists for this tutorial can be found here and the repo is here.
