How To Build a WordPress App with React Native Part #3: the Navigation

This series intends to show how I build an app to serve content from my WordPress blog by using react-native. Since my blog is talking about react-native, the series and the articles are interconnected. We will learn how to set-up many packages that make our lives comfortable and learn how to deal with WordPress APIs. Here, the most prominent features talked about in the book are the dark theme, offline mode, infinite scroll and many more. You can discover much more in this series. this inspiration to do this tutorial series came from the React Native App Templates from instamobile

In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below:

Now, we need to organize our project structure with all the files and folders and also set up the navigation.

For that, we are going to install the react-navigation package version 4 and all its required dependency packages. Recently, most of the components and modules delivered by the react-navigation package have been separated into different packages. Hence, we need to install other packages as well in order to make our navigation fully work. For that, we need to run the following command in our project repository:

yarn add react-native-gesture-handler react-native-reanimated react-native-screens

Here, we have installed the react-navigation package along with the react-navigation-stack and react-navigation-tabs package. The react-navigation-stack package enables us to create the navigator stack of our app screens. The react-navigation-tabs package enables us to create the bottom tab navigation on our main screen.

Now, we also need to install the required dependencies in order to run the react-navigation package properly, Hence, we need to install the following package as well:

react-native link <package-name>

Here, we have installed three packages required for react-navigation to run smoothly. Some of the packages need some extra configurations in the case of Android. For that, we can follow the instructions from the documentation. And, for Android, we may need to link the packages if the version of react-native is less than 0.60. For that, we can run the following code for each package:

react-native link <package-name>

In case of iOS, we need to navigate to ‘./ios/’ folder and then run the following command:

cd ios ; pod install

To finalize installation of react-native-gesture-handler for Android, make the following modifications to

MainActivity.java

package com.reactnavigation.example;
    import com.facebook.react.ReactActivity;
    + import com.facebook.react.ReactActivityDelegate;
    + import com.facebook.react.ReactRootView;
    + import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
    public class MainActivity extends ReactActivity {
      @Override
      protected String getMainComponentName() {
        return "Example";
      }
    +  @Override
    +  protected ReactActivityDelegate createReactActivityDelegate() {
    +    return new ReactActivityDelegate(this, getMainComponentName()) {
    +      @Override
    +      protected ReactRootView createRootView() {
    +       return new RNGestureHandlerEnabledRootView(MainActivity.this);
    +      }
    +    };
    +  }
    }

Then, we can re-run our project in the respective emulators.

For the screens, we are going to create four screens first, which are shown in the screenshot below:

Then, we need to add the default react native template to each of the screen files. The default react native code for the Bookmark.js file is provided in the code snippet below:

 import React, {Component} from 'react';
    import {View, Text} from 'react-native';
    class Bookmark extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }
      render() {
        return (
          <View>
            <Text> Bookmark </Text>
          </View>
        );
      }
    }
    export default Bookmark;

Likewise, we can add the default template to each of the screens just changing the class name.

Next, we need to open our App.js file and make the following imports:

import React, { Component } from 'react';
    import {createAppContainer, createSwitchNavigator} from 'react-navigation';
    import {createBottomTabNavigator} from 'react-navigation-tabs';
    import {createStackNavigator} from 'react-navigation-stack';
    import Home from './src/screens/Home';
    import Categories from './src/screens/Categories';
    import Setting from './src/screens/Setting';
    import Bookmark from './src/screens/Bookmark';

Here, we have imported the respective components required to configure our navigation from the packages we installed below. We have also imported the screen files as well.

Then, we are going to create the bottom tab navigator using

createBottomTabNavigator

function from the react-navigation-tabs package. The overall implementation is provided in the code snippet below:

const DashboardTabNavigator = createBottomTabNavigator(
      {
        HomePage: {
          screen: Home,
          navigationOptions: {
            tabBarLabel: 'Home',
          },
        },
        Categories: {
          screen: Categories,
          navigationOptions: {
            tabBarLabel: 'Categories',
          },
        },
        Bookmark: {
          screen: Bookmark,
          navigationOptions: {
            tabBarLabel: 'BookMark',
          },
        },
        Setting: {
          screen: Setting,
          navigationOptions: {
            tabBarLabel: 'Setting',
          },
        },
      },
      {
        navigationOptions: ({navigation}) => {
          const {routeName} = navigation.state.routes[navigation.state.index];
          return {
            headerTitle: routeName
          };
        },
      },
    );

Here, we have defined each screen in the bottom tab navigator along with icons as well. Then, we have also configured each route with header title in the navigationOptions object.

Now, we need to create the stack navigator and add our bottom navigator to it. For that, we need to make use of createStackNavigator function provided by the react-navigation-stack package as shown in the code snippet below:

const StackNavigator = createStackNavigator({
      DashboardTabNavigator: DashboardTabNavigator,
    });
    export default createAppContainer(StackNavigator);

Then, lastly we need to register our stack navigator to createAppContainer method from the react-navigation package and export it.

Hence, we will get the following result in the emulator screens:

Summary

In this chapter, we learned how to set up the react-navigation package with all it’s dependencies packages. Then, using these packages we learned how to set up the bottom tab navigation in our project.