Preface

When we start developing react native apps using CLI, we need to touch android and ios folder
as well. Most of my readers have background as a web developer. So, we are less experienced
on Android and iOS. But in React Native, we cannot avoid configuration in android and ios
folder.

The most important thing is to check the requirement package first. If it works fine on Expo then
we can use it, otherwise we need to use CLI.

This book intends to show how I build app to serve content from my wordpress blog by using
react native. Since, my blog is talking about react-native, the book 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 book.

If you have any questions, we can just email me at me@kriss.io.

 Overview
React Navigation
Here, we will learn how to bootstrap bottom tab navigator in react native.
We will also learn how to fix issue when componentDidMount does not trigger when changing
the tabs.
We will also learn how to add react native vector icons.

Flatlist with API

We will start implementing Home screen. We start with pulling data from Wordpress API to
Flatlist.
Then, we learn to customize Flatlist item with react native paper. Then, we learn to activate pull
to refresh and load more features.

Single post and Share

Here, we will learn to implement the overall UI of Single article post to display all the contents of
an article from the wordpress API.
We will also learn how to add the share button and make it functionable.

Bookmark
Here, we will learn how to implement the bookmark button in the SinglePost screen using the
AsyncStorage. We will learn how to add and remove the bookmarks in any article. Then, we will
also display the bookmarked articles in the Bookmark Screen.

Categories
Here, we will implement the UI for the categories screen which will display the list of categories
from the WordPress API. Then, we are also going to set up the navigation to Category List
screen which will display the article post list based on particular category.

Contact Us screen
Here, we are going to configure the Settings and Contact screens. The contact screen is for
submitting simple message to Firebase Realtime database and then use Firebase Cloud
Function send this message to inbox. Lastly, we will also configure the limitation of sending the
message to the database.

Dark Theme
Here, we will learn how to add Dark Mode to app using hidden feature on react navigation and
react native paper. We will also learn how to manually switch the theme from dark to normal
and vice-versa using the app button toggle. Then, we will also configure the automatic switching
of theme when changing the theme in the device itself.
Offline handle
Here, we are going to learn how to handle the loss of connectivity using the offline mode. We
are going to cache the data for the offline mode and use the netinfo package to get the
connection data from the device. If online, we are going to cache the latest data. And then,
display the same data in the offline mode.

Splash Screen
Here, we are going to implement the Splash screen for both iOS and Android platform. We are
going to make various configurations in the Xcode for iOS and Android native files for Android in
order to make the Splash screen work. We are also going to learn about using react-native-
splash-screen package.
Contents
Preface ................................................................................................................................... 1
Overview .................................................................................................................................... 2
React Navigation ............................................................................................................... 2
Flatlist with API ................................................................................................................. 2
Single post and Share ...................................................................................................... 2
Bookmark .......................................................................................................................... 2
Categories ......................................................................................................................... 2
Contact Us screen ............................................................................................................ 2
Dark Theme ....................................................................................................................... 2
Offline handle .................................................................................................................... 3
Splash Screen ................................................................................................................... 3
Chapter 1 ................................................................................................................................... 1
Setting Up Your Environment ..................................................................................................... 1
Importance Notice for Android ................................................................................................ 3
To run on real device .............................................................................................................. 5
For iOS platform................................................................................................................ 5
For Android ....................................................................................................................... 6
Full source code ..................................................................................................................... 6
Caution ................................................................................................................................... 6
Summary ................................................................................................................................ 6
Chapter 2 ................................................................................................................................... 7
Handle Navigation with React navigation .................................................................................... 7
Install React navigation .......................................................................................................... 8
Adding Font Icons ...............................................................................................................12
Summary ..............................................................................................................................16
Chapter 3 ..................................................................................................................................17
Home Screen .............................................................................................................................17
Using react native paper .....................................................................................................18
Fetching Post Data ..............................................................................................................20
Using Html renderer and Moment ......................................................................................23
Adding pull to refresh and Infinite scroll ...........................................................................26
Implementing Pull to Refresh ..........................................................................................26
Implementing Infinite Scroll ............................................................................................27
Summary ..............................................................................................................................28
Chapter 4 ..................................................................................................................................29
Single Post and Share ...............................................................................................................29
Add new page to navigation ...............................................................................................30
Implementing SinglePost Screen .......................................................................................31
Share ....................................................................................................................................34
Summary ...............................................................................................................................36
Bookmark .............................................................................................................................37
SetUp ....................................................................................................................................38
Save Bookmark ...................................................................................................................40
Remove bookmark ..............................................................................................................41
Render Bookmark................................................................................................................41
Bookmark Index Screen ......................................................................................................42
Summary ..............................................................................................................................47
Categorie Screen .................................................................................................................48
Summary ..............................................................................................................................54
Chapter 7 ..................................................................................................................................55
Contact Screen ..........................................................................................................................55
Configuring firebase in iOS ....................................................................................................56
Implementing Settings Screen ...............................................................................................61
Implementing Contact Screen ...............................................................................................63
Implementing Form Submit....................................................................................................68
Saving message to Firebase database ..................................................................................70
Forwarding message to inbox with Cloud function .................................................................72
Prevent submit multiple time..................................................................................................75
Summary ...............................................................................................................................77
Chapter 8 ..................................................................................................................................78
Dark theme................................................................................................................................78
Moving Navigation code ..................................................................................................79
Activate dark mode in React navigation.........................................................................81
Activate dark mode on React native paper ....................................................................82
Fix react-native-render-html to change theme ...............................................................84
Implementing Card component ......................................................................................85
Dark theme in SinglePost.js ............................................................................................88
Manually changing Theme ..............................................................................................90
ThemeManager in Navigator.js .......................................................................................93
ThemeManager in Settings.js..........................................................................................94
Changing Theme Automatically ......................................................................................95
 Summary ..............................................................................................................................96
Chapter 9 ..................................................................................................................................97
Offline mode ..............................................................................................................................97
Notify user when offline .........................................................................................................98
Saving data to cache ...........................................................................................................101
In Android Emulator .............................................................................................................104
Summary ............................................................................................................................106
Chapter 10 ..............................................................................................................................107
Splash Screen ..........................................................................................................................107
Downloading Required Logo ........................................................................................108
Installing Splash Screen package.................................................................................108
For iOS ................................................................................................................................109
Activating splash screen in Xcode ...............................................................................111
For Android .........................................................................................................................114
Configuring AndroidManifest.xml file ................................................................................116
Creating SplashActivity class ...........................................................................................117
Resolving the White Screen Gap ..................................................................................... 117
Running Splash Screen in MainActivity ............................................................................ 118
Configuring layout of splash screen for MainActivity ........................................................ 119
Hiding the Splash Screen ..............................................................................................119
Summary ............................................................................................................................120
Final Recap and looking forward .....................................................................................121
 Page |1

Chapter 1
Setting Up Your
Environment

First, we are going to create a new React Native project. For that, we are going to use react-
native CLI. Now, in order to create a new project, we need to run the following command in our
desired project directory:

react-native init kriss_app

Now, we are going to open our project directory in Visual Studio Code as shown in the
screenshot below:
 Page |2

After we open the project in the VScode, we need to run the code in our Android as well as iOS
emulators.
In order to run the project on the iOS emulator, we need to run the following command in the
project directory command prompt:

react-native run-ios
 Page |3

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

Importance Notice for Android

1. Its highly suggested to use jdk-1.8. Using other versions of JDK might emit errors during
deploying of project in android.

2. Then, we need to create a new Emulator which uses Android 10 and Google play
service.
Now, we can run the project on the Android emulator. For that, we need to run the following
commands in the project directory command prompt:

react-native start

Then, we need to run:

react-native run-android
 Page |4

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

 Page |5

To run on real device

For iOS platform

If we want to run the project on an iOS device, then we need to open Xcode and set team target
for our app as shown in the screenshot below:
And, we need to test it as well as shown in the screenshot below:

Now, we are ready to implement our React native app.

 Page |6

For Android
Here, we are going to learn how to run the react native app in the actual physical device.Enable
Debugging over USB
In order to enable USB debugging on our device, we will first need to enable the "Developer
options" menu by going to Settings About phone and then tapping the Build number row at
the bottom seven times. We can then go back to Settings Developer options to enable
"USB debugging".
Plug in our device via USB
We need to plug in our device via USB to your development machine.
Now we need to check that our device is properly connected to ADB, the Android Debug Bridge,
by running the following commands in the command line:
For mac: adb devices
For Linux: lsusb
For Windows: adb devices
If we see the device in the right column means the device is connected. We must have only one
device connected at a time.

Full source code

It is definitely hard to develop the app for both Android and iOS together. First, we tried to iOS
development and completed it successfully. And, to make sure that there is no errors and side
effect for the Android development, we also successfully developed the app for the Android
platform with all the packages configured. For convenience, the final source code for both the
developments are provided below:
Final source for iOS
Final source for Android

Caution
1. The firebase credential is not provided in the final source code.
2. Please change the API for fetching data.
3. It is highly recommended to start with the blank starter react native project.

Summary
In this chapter, we learned how to get started on creating and running the react native project on
android and iOS platforms. Here, we learned create the react native project using React Native
CLI. Then, we learned configure our devices in order to run the react native project in the
Android and iOS emulator. Lastly, we learned how to run the react-native projects in the actual
physical Android and iOS devices as well.
 Page |7

Chapter 2
Handle
Navigation with
React navigation
 Page |8

Install React navigation

Now, we are ready to implement our React native app.
First, 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-navigation react-navigation-stack react-navigation-tabs

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:

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

native-screens

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 {

 Page |9

@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 = {};
}
 P a g e | 10

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',
},
},
 P a g e | 11

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:
 P a g e | 12

Adding Font Icons

Next, we need to install the vector icons package. In order to install this package, we can run
the following command:

yarn add react-native-vector-icons

Then, perform the same action that we perform before while installing other packages for both
the Android and iOS platforms.
For Android,

react-native link react-native-vector-icons

For iOS,

cd ios ; pod install

And for the iOS platform, we need to add icon to the project by manually.
 P a g e | 13

In order to do that, we need to open ios for our project with Xcode then add Font folder to
project as shown in the screenshot below:

Then, we need to open Info.plist and add font to this file as shown in the code snippet in next
page:

<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
<string>Entypo.ttf</string>
<string>EvilIcons.ttf</string>
<string>Feather.ttf</string>
<string>FontAwesome.ttf</string>
<string>FontAwesome5_Brands.ttf</string>
<string>FontAwesome5_Regular.ttf</string>
<string>FontAwesome5_Solid.ttf</string>
<string>Foundation.ttf</string>
<string>Ionicons.ttf</string>
 P a g e | 14

<string>MaterialIcons.ttf</string>
<string>MaterialCommunityIcons.ttf</string>
<string>SimpleLineIcons.ttf</string>
<string>Octicons.ttf</string>
<string>Zocial.ttf</string>
</array>

As a result, the Info.plist file will look as shown in the screen shown below:

Now, we need to add the icons to our bottom tab navigator. For that, we are going to use the
tabBarIcon method and return the icon template. But first, we need to import the react-native-
vector-icons package into our App.js file as shown in the code snippet below:

import Ionicons from 'react-native-vector-icons';

Then, we are going to add the icons to the bottom tab navigator as shown in the code snippet
below:

const DashboardTabNavigator = createBottomTabNavigator(

{
HomePage: {
screen: Home,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: () => <Ionicons name="md-home" size={30} />,
},
},
 P a g e | 15

Categories: {
screen: Categories,
navigationOptions: {
tabBarLabel: 'Categories',
tabBarIcon: () => <Ionicons name="md-apps" size={30} />,
},
},
Bookmark: {
screen: Bookmark,
navigationOptions: {
tabBarLabel: 'BookMark',
tabBarIcon: () => <Ionicons name="ios-bookmark" size={30} />,
},
},

Setting: {
screen: Setting,
navigationOptions: {
tabBarLabel: 'Setting',
tabBarIcon: () => <Ionicons name="md-settings" size={30} />,
},
},
},
{
navigationOptions: ({navigation}) => {
const {routeName} = navigation.state.routes[navigation.state.index];
return {
headerTitle: routeName
};
},
},
);

Now, if we re-run the project in our respective platform emulators, we will get the following
result:
 P a g e | 16

Hence, we have finally set up the bottom tab navigator along with navigation to different
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. Lastly, we learned how to set up the vector icons package and use it
along with our navigation configuration to set up the bottom tab bar icons.