How to Build a WordPress App with React Native Part #2: Your Environment

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

Build WordPress Client App with React Native #1: Overview

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:

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

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

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

To run on a real device

For the 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 screen shot below:

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

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 connecting to ADB, the Android Debug Bridge, by running 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

• The firebase credential is not provided in the final source code.
• Please change the API for fetching data.
• 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.

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