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 Mobile Templates from instamobile
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:
Importance Notice for Android
-
Its highly suggested to use jdk-1.8. Using other versions of JDK might emit errors during deploying of project in android.
-
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.
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 to 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.
