Navigating React Native apps using React Navigation - Part One

Introduction

Mobile apps are made up of multiple screens. When building mobile apps, of primary concern is how we handle a user’s navigation through the app — the presentation of the screens and the transitions between them. React Navigation is a standalone library that allows a developer to implement this functionality easily.

React Navigation vs. React Native Navigation

Of the several navigation libraries out there, React Navigation and React Native Navigation are two of the more well known.

React Navigation is written in JavaScript and does not directly use the native navigation APIs on iOS and Android; rather, it recreates some subset of those APIs. This allows for the integration of third-party JS plugins, maximum customization, and easier debugging, with no need to learn Objective-C, Swift, Java, Kotlin, etc.

React Native Navigation differs slightly in that it directly uses native navigation APIs on iOS and Android, which allows for a more native look and feel.

Installation

Assuming you have Yarn installed, the first step is to set up a React Native app. The easiest way to get started with React Native is with Expo tools because they allow you to start a project without installing and configuring Xcode or Android Studio. Install Expo by running this:

npm install -g expo-cli

If you encounter any error on Mac, try running it this way:

sudo npm install --unsafe-perm -g expo-cli

Then run the following to create a new React Native project:

expo init ReactNavigationDemo

This will kickstart some downloads and ask you to enter some configuration variables. Select expo-template-blank and choose yarn for the dependency installation, as shown below:

Next, cd into the project folder and open your code editor:

cd ReactNavigationDemo

If you are using VS Code, you can open the current folder in the editor using:

code .

Start up the app with:

yarn start

The next step is to install the react-navigation library in your React Native project:

yarn add react-navigation

Navigation patterns

As we discussed earlier, React Navigation is built with JavaScript and lets you create components and navigation patterns that look and feel like truly native ones.

React Navigation uses what’s called a stack navigator to manage the navigation history and presentation of the appropriate screen based on the route taken by a user inside the app.

Only one screen is presented to a user at a given time. Imagine a stack of paper; navigating to a new screen places it on top of the stack, and navigating back removes it from the stack. The stack navigator also provides the transitions and gestures that feel like those of native iOS and Android.

Note that an app can have more than one stack navigator.

In this section, we’ll explore various navigation patterns used in mobile apps and how to achieve them using the React Navigation library.

Using stack navigator to navigate between screen components

Let’s begin by first creating a /components folder in the root of our project. Then we create two files namely Homescreen.js and Aboutscreen.

// Homescreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class Homescreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
          <Button
          title="Go to About"
          onPress={() => this.props.navigation.navigate('About')}
/>
      </View>
    )
  }
}

Note the onPress prop of the button above — we’ll explain what it does later.

// Aboutscreen.js
import React, { Component } from 'react';
import { Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

export default class Aboutscreen extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>About Screen</Text>
      </View>
    )
  }
}

Your project folder should look like what’s shown in the image below:

Let’s also make some changes to App.js. We’ll import what we need from react-navigation and implement our navigation there.

It is useful to implement our navigation in the root App.js file because the component exported from App.js is the entry point (or root component) for a React Native app, and every other component is a descendant?

As you will see, we will encapsulate every other component inside the navigation functions.

// App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator, createAppContainer } from "react-navigation";

import HomeScreen from './components/HomeScreen';
import AboutScreen from './components/AboutScreen';


export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
});

const AppContainer = createAppContainer(AppNavigator);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

In the code above, createStackNavigator provides a way for our app to transition between screens, where each new screen is placed on top of a stack. It is configured to have the familiar iOS and Android look and feel: new screens slide in from the right on iOS and fade in from the bottom on Android.

We pass in a route configuration object to the createStackNavigator function. The Home route corresponds to the HomeScreen, and the About route corresponds to AboutScreen.

Note that an optional, more concise way of writing the route configuration is the { screen: HomeScreen } configuration format.

Also, we can optionally add another option object, as specified by the API. If we wanted to indicate which is the initial route, we can add a separate object:

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  About: {
    screen: AboutScreen
  }
},{
        initialRouteName: "Home"
});

Note that the Home and About route name-value pairs are enclosed by an overall route object. The options object isn’t enclosed but is a separate object.

The createStackNavigator the function passes behind the scenes, a navigate prop to the HomeScreen and AboutScreen components. The navigate prop allows for navigation to a specified screen component. This is why we are able to use it on a button at HomeScreen.js, which, when pressed, leads to the AboutScreen page, as shown below.

<Button title="Go to About" 
onPress={() => this.props.navigation.navigate('About')}
/>

In the App.js code, we finally created an app container using const AppContainer = createAppContainer(AppNavigator);. This container manages the navigation state.

To run the app, you’ll need to download the Expo client app. You can get the ‎iOS and Android versions. Make sure your command line is pointed to the project folder and run the following command.

npm start

You should see a QR code displayed on the terminal. Scan the QR code with the Expo app on Android, and for the iOS app, you can scan using the normal iPhone camera, which will prompt you with a command to click to open the Expo app.

If you are looking forward to learning React Native, consider subscribing to my newsletter. By subscribing you will be able to read all of my tutorials straight from your inbox