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:

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:

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:

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.

Here, we are going to learn how to run the react native app in the actual physical device. Enable

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”.

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:

If we see the device in the right column means the device is connected. We must have only one device connected at a time.

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:

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