React Native Navigation: Too Easy? How?

As we agreed in the last post, today we will discuss React Native Navigation. Meaning now our app can have multiple screens and our users can Navigate between them. Let’s get started.

Navigate through these mountains

Missed the last post? :

Check out Part 1: React Native: The Easy Way — Beginning

Check out Part 2: React Native: Styling Forms — The Easy Way

Check out Part 3: React Native: Making A Beautiful Home Screen

Navigation

Now coming to the navigation options available in React Native — we have plenty!.

We have React Router, React Native Navigation, React Navigation, React Native Router Flux, and also a Navigation option provided by Airbnb.

As a beginner, I know you are overwhelmed by the list, but trust me it isn’t my intention to do that. These are all the possible “routes” ( pun intended ) you can take to approach navigation in React Native.

In this article, We will choose React Native Router Flux. The naming convention-not so great, but the library is solid.

First thing first, we will need to install this library. Yes, this does not come — pre-shipped with React Native or Expo in our case. Installation is going to be very very simple to follow along.

Step 1: Go to your project directory and open cmd prompt/terminal. The same directory where we execute the expo start command.

Step 2: Type in

npm install react-native-router-flux --save

and enter.

That’s it! The library is now installed and we are ready to use it. We can check its installation in the package.json file in our directory.

Under the dependencies in the package.json file we can see

"react-native-router-flux": "^4.0.6"

React Native is improving at an amazing rate and due to that, there is a need for dependencies to also move forward with the same pace to keep up. Due to this there could be crashes that could occur during development. This wont be the case for 95% of the time but the remaining 5% is where it gets frustrating. Hence, while writing these articles I will make sure to let you guys know which dependency version I would be using, so just in case something goes wrong you can work along with me on the same version. This wont be the case for most of the time but its good to know.

Okay, so to navigate we will need components. You can refer components as screens or parts of UI on a screen. Multiple components can form a screen.

If you are following from the previous post. You can use the Login Page that we have created and you can navigate our user from that Login page to Home Page. Sounds good?

For readers who are new, you can either opt to follow that and come back or continue reading where we create a simple and basic login screen.

In our project folder lets create a new directory called ‘screens’. It is always a good practice to create specific directories to hold specific type of components, just like how we store all our images in our “assets” folder. Its a good practice to store our screens ( components ) in our screens folder.

We can also have a components folder which will host the smaller components that will make up a screen. But its up to you, choose which style you are most comfortable with.

Create two screens. Screen 1 and Screen 2. Namely ( ScreenOne.js and ScreenTwo.js )

So here is the code for a simple Login Screen which will contain two input fields and a button. ( you can customize as per your needs ).

Screen One

Another component is the home screen. As of now we will just have a text welcoming the user to the home screen. Here is the code.

Screen Two

I know this screens are very empty and have no styling in them, since it is just for demonstrating the use of the React-Native-Router-Flux library, I just went with these, you can learn more about styling React Native components here.

Now that we are done with setting up our screens. Lets create a router. Consider router as central navigation place. Router itself helps the user to navigate from one screen to another. It can be imagined as a route map that our components or screens can refer to, so that they can navigate the user in his preferred direction.

In our root directory, lets create a file and name it as Router.js.

In the Router.js file, lets import React and Router and Scene from ‘react-native-router-flux’

import React from 'react'
import { Router, Scene } from 'react-native-router-flux'

Also, lets import the two new Screens we created above.

import SceneOne from './Screens/ScreenOne.js'
import ScreenTwo from './Screens/ScreenTwo.js'

Alright. In this import Router will be used a root element and the Scene will represent the components or Screens in our case. Lets create a new Routes object that will return a Router element that will consist of Scene components as its children. We can do that as such:

Now, we can add Scenes inside our Router element. Each Scene component will consist of ‘key, title, component’ props.

Key prop is used as the identifier for the navigation. You will understand more as we go on.

Title is used to display the text on the NavBar for that Screen.

Component is used to link the Scene to the imported component or Screen.

React Native Router Flux should contain only one scene. So we need to wrap all our scenes under one root scene.

Lets create a root scene. This is done as such:

As we can see, the top most scene has the key ‘root’. React-Native will render this scene as a whole and under that the remaining scenes can navigate.

Now. we need to define our Screens as Scenes. Each scene will contain a key, title and component props.

Now after declaring both the scenes in the Router.js file, we have to export the Routes variable.

export default Routes

The next step is to import the exported Routes variable into our App.js and we should be almost done.

import Routes from './Router'

Now we have to return Routes from App.js.

Now you should see our ScreenOne a.k.a Login Screen. If the background is gray just add a background property as “white” to the View.

Now the main EVENT -> Navigation.

Step 1: import Actions from ‘react-native-router-flux’ into ScreenOne.js

import { Actions } from 'react-native-router-flux'

Step 2: Declare an OnPress event for the button. It will trigger a function when the user clicks the button.

<Button onPress={()=>this.navigate()} title="Login"></Button>

Step 3: This is where it gets interesting.

Create the ‘navigate()’ function outside the “render()” and inside we can access the Actions, which we imported from ‘react-native-router-flux’

Now to navigate, we have to use the key which we assigned to each scene in our Router.js.

navigate(){
Actions.home()
}

The Whole Component:

And now upon pressing the Login Button. It should redirect us to the Home Screen. VOILA!

In the screenTwo I included a Go Back button which you can write for practice.

Check out the live version of this project

Hope this has been helpful. If it has consider sharing the article.

Check out Previous Posts:

Check out Part 1: React Native: The Easy Way — Beginning

Check out Part 2: React Native: Styling Forms — The Easy Way

Check out Part 3: React Native: Making A Beautiful Home Screen