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 Its highly suggested to use Using other versions of JDK might emit errors during deploying of project in android. jdk-1.8. 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 → and then tapping the Build number row at the bottom seven times. We can then go back to → to enable “USB debugging”. Settings About phone Settings Developer options 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: : adb devices For Mac : lsusb For Linux : adb devices For Windows 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 from instamobile React Native App Templates

Google

Target

visit more my tutorial

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

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

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Companies Mentioned

krissanawat

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES