Build a WordPress App with React Native #2: Your Environment
Tags: reactnativewordpre, reactnative
Published: 2019-12-05 06:52:13

---
title: Build a WordPress App with React Native #2: Your Environment
published: true
date: 2019-12-02 05:41:14 UTC
tags: React native Wordpre,react native,react native wordpre
canonical_url: https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/
cover_image:  https://cdn-images-1.medium.com/max/1024/1*0qWyQ1BHUL6FoFfa-uPTYg.png
series: Build Wordpress Client App with React Native
---

This series 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 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](https://www.instamobile.io/) from instamobile

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](https://kriss.io/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:

![](https://kriss.io/wp-content/uploads/2019/12/Untitled-1024x617.png)

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:

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/94dc9cff-d766-4cea-a5f3-8b6bcb672de0/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45FOHQH4SH%2F20191204%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191204T113508Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIAvGp5OPoTyzbjiXJSqcY5oT%2Fu2v27MClaque%2FEIxF%2FAAiAHEY9QirO6bV22t8bmPWidID9zaXKZs4l%2BYRW8qqZVTCrSAghAEAAaDDI3NDU2NzE0OTM3MCIMN7WGD%2BktwIaNfWg%2FKq8Chs8ZPaDhybOuyxvL9v936onJgUC7zAicORJzBHfzcr7aFb91ax3v6boWWDCmbyP1MvlbhNTt7uTf1iqyzk6TRV5YhUqK4dWpygY1yqNyMnTL%2FBW9xqD5aKZ1KjBUYcDmd3V1FIc0CGMiEVwiMkgHdNTy3McRpcud%2BvO7ZN0d2aA8UPuThkg0XeeKBbfAw0M4XgSiY6NWShCrXlA59mNhHW0WfM0GksmKDYGbjuswgdiI%2Fb4mJLEdpxzhuXK3S8H6QyukRBrkTnm6qd7u9VWQQ2sD8%2BKC7%2BpwFPIYG4dZhT1gqH2oX4738YHtNI%2Bc1wMrUS6qMMdn2PFuvhfK0i4sn1Rp4ppnhcig2G7zloLD4aVqbEwOzWo2nHTMkNNn1tvtZ8ytTwQ4%2FF4%2BMlCyxI9gMKytne8FOs4CXUkHZftvl5tFXne%2FHpkCFCoLhujbl3cy8SIRrtSjoySXdUmSyKr5LPirjNOIB3U9WfpNs5%2Bo6lxBUy2Bfvdeggd687rn0Yhq3%2F0bKufCPuXnhYKV%2B9%2FaFdYb%2BEczl0ZA47Un%2BQhRaNC9yVp7pBFzDSqn6vShGHgsQHEsUxOOX%2FoGmC57ekEx1eQFfnYNzvEduaf%2Ff4YuXZSAAaVlcNECD2UgCHxJeQ15kfk2e4od9CatXgzGxb99rWiMI9N4XsVu1uj3aLxQkGN%2BlozSTcWAkEteDVLgSZFYdh89rPYpSGWjuvC6iLXBDHTQzemirtgxJfCQxUAKjclXtKkws0Sbr%2BD2ilrvfTA%2F4e8cHqeHFR2PMgkUwtOEBxeRuf4btRMG3%2FuR96GDcamvlyAhBM08BuJs49wpHjb0feHHF1YHJYc1O9n1ViVbY5K9eSAKSQ%3D%3D&X-Amz-Signature=bb89521d085533a3be8f68444cafa167204e492d494a4dd579db886abf8164fa&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

## 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.  
 ![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/9b429cc1-8b83-49e5-8cc0-d4fd1299d132/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45GT7TBU77%2F20191204%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191204T113540Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIA0an00PQOiE%2FIa1Cp%2FbHtO70FraHmCih60GrfIS1UxkAiAEeRosnrbA1BxjelUybtQfK1%2BBjZdHSsaSnuwMoAkyqyrQAghAEAAaDDI3NDU2NzE0OTM3MCIM9%2BHt1UJPhbrnXgyfKq0CrLnqb7MBuyq1i0b%2F4tmuaQ0WffqGg1stykjxHH%2FAfVq704plM769vDpfXmNgxGSBCFfrUsyhpE77Qz%2BjDTS2XRjm4X9Tu4E7WsWUrppMYUWmMsL1mRq3t0wsJQawEs1wOJUSTZc2Joi0a0CdPL97sqge64WCZzS9tTi1sliy6t%2BLw38ij8Fm0eQLi3mN5akKyjA20FdM7Ae%2FllKuBTrUgQ52fXWyEyfsqwE7nI6g8QEi6h5SsYJorEtpxSk0oLwlYc3CmBDI5AtP%2FqhvpZNKghvb3Ek2W4uG56PR5r8cvY8tsZhJMgz0XAxBj9UNHOvwH1faHn8JN3o%2Brf82yMY9KdxzosPTg2rmeTn9lpQST6pKzhUuEsS%2BI5G5bumg7U%2BAP%2Ba09LwtEXLpdN8rGDC%2BpZ3vBTrQAq%2FI5c8KXMNNukMDBR7l4mYEbjRwD5Fs2bBeLlVbinjlfSsjtie4kFM4JI%2FC%2BdEVZE7M1%2FEN9KRKNznlnHR%2B%2Fjm%2F5a%2BpGhDBqpgm4v4bwQpPLp2w7txesvym7TmGnYozWmHfr%2Fb4N3egaQhgrrg2kWZ5fyFQmO0mjZVUr9KPKTLBkjelfcqp8NaRr8G%2BwXwTnMWAejAo3WU11DDCOx18UWmB9TeTPGuhH9sOW9imN8%2Fvx0PxgK1dORbPFthIhC%2FmIcBevrK0JJNVgJdOfNC%2FRJSn2Ap%2BDFCIN6MkWLyGpNcOOtrl4M9GSy8grD7ijQPdLEO1ymCC5k2zbAhRQWgVRzPossVkwIKffB9CdIyLpC1oPlFkpnYtUKHMcGDiL1kUGn7iYe59UyyQ4qGtNBdlA%2BLxb1%2FQW4oGyt%2FIn6Rc08F37Hq7tzTYhAZKJzOPrZ7ZEg%3D%3D&X-Amz-Signature=d0bc6a92582aadf5350660689242026406e10a02196c35f22cc936db0a43c8de&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

1. 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:

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/19e109a3-1baa-40b7-8c8e-1ef0312e4ee3/Screenshot_2019-11-22_144153.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45IMFZQ3DM%2F20191204%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191204T113606Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQCjz7COn9I5LpIHU8d618aoHZ0fGNMKhhDlFYAxHWE5twIhAKycgUPO0%2BTVgJqv4gSK1s5mnPpY92HpskKjZteDFVCWKtECCEAQABoMMjc0NTY3MTQ5MzcwIgzqTgsaO1U0homXLNEqrgK8435A20m%2FnRYSprBtbbBdVZis5uk0EJ5nHtP4nZvVdH2BEN9IqDQ12ljEVp%2BlhqN%2BRTP434jjh9Q9G9Sn3gAnyv0NaWcluWA9ibwpjm2r16yWyW2AAQJtzWDnApFhWv1rod1zma%2FxEifZwAhVSYFwIc3b2jGy0lIVdtCrglL3UQ6yDX2FwI0euuU5ksBwioOsc9sbuwiGmh%2B2yGoQ174Wem%2BErw9TerGubmMiHvfBklv%2F3dBX5X9V79wicrj8M5WnYXF%2Bsl6k68AanihBQCdRcXeEUq1s7tz%2F5q%2BIiGlo%2BVywXwp8NkBCR3aSuPr9x5zcIfLO%2BO50QAXOsftDwd1dY2kC5v%2BBtHO8fMtZNvyR9VdJVSMyqG1WInEupfF0%2FVc1anPth5Y%2Bq8dMQQcg9zDWrZ3vBTrNApLzomcvtIB1hJ%2BxoPDXxE1Yno8uJg0w9ZsMGdjl%2BfFodEyjpPA4X%2F69r5Msl9NQACfIVL5A66OF77lv1XLCUAoKFQIMarJ%2Baf20XC7xbDQbKI6s6b0wvG7nVcL%2Bg8PwESJH2ycRUbwSJJ9sYtcYhIs3mBjRJNcF4XyttILUWQltfSvsIgFbmutc8tu2fvaLpjs4xNG%2FlVAAObR9AGCr%2F3urvGTfaEDMrKGaJQTc6rWEk%2BVVdPUICaSRC61btyH0lB46BKH3gu4bycO5nQh3q7o%2F9P3DDbi17kZwh%2BDdZcLudcGZxSKqroxsz7oqnj3I%2F4AOXAH%2B9fwOAOfqyuiSuAfvE7SCbCAWOQPrfIgPKG6gvvEjCSBWWjA8k1vYZ%2F2IZ2QiX4ZZ%2F1htOq%2BZa2kziU3houF%2F4ghL5tHw8ZDy2Xn4TQaGcc0aK0BcGmUtnA%3D%3D&X-Amz-Signature=6543f878ef574752cbc6fc19ff3d22f30b02616e4cc3cfa578391a719a1e45dc&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Screenshot_2019-11-22_144153.png%22)

## 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:

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/a8befcad-736d-456a-8983-68d7420153b1/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45OUFE77TJ%2F20191204%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191204T113640Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPv%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIEbyqJ4gnzXOGOYVcN4tGd%2Byr%2BUgDziiXKT7FRg4hwDUAiB95Ag%2FIhfb668489p0FtKbNwkWOER2T46cXfRwxnERIirQAghEEAAaDDI3NDU2NzE0OTM3MCIMA9zVaSKhEclSPjnTKq0CAHyv48JhcjqD2AjU6D5ouBk%2FFnSTh%2FqJffrYAiwqX%2F36DmUtvG9NzOcIT756JEcoG%2FkvZYPj9YduklGdpCf73XIzQ4UR4IX7UvB2KNKHYU1u6xBJoa7N3lEqhWIC73eDoZbTifcAJ0tY7gZvgZOiq77msy4CZNlPCMssi%2FmhAtjlTgHfLMl%2BUTpDefCA6g%2FZuPPgBnIYeMJEfmcxCmO642YtXsWo%2F4BMimw44w2quKOU09Ls3Eid1%2F9h5i40wTu9rrV0XtgIeh9wB0No6oYyU47orGUT%2FZ11gvxqeTaSYlD2hYfjEGu8i2OlfYRvEb2iHD1oudbG6CAE6gHqzaKMuBhT%2FRZzSP1dFRLTNE6gGarpq4t70ZDgkQXDiZrrLURG6KVurtqoKwdXWnj8KTDmnZ7vBTrQArk%2FQE4g41MAvN4ABQB%2BfDjl3A8DZ8fQw8qujoAssKqNCwaIQg2%2BJRTNpwHY%2BOqNzniJpFTWfRjxZeRmlXDfcX0%2Bg26g8CA46b%2FBMfhYf4faLzxkx7N3J%2FrripR8I2kpf7QYBC48NIWYH7XwkLREUL7ev%2BuyyOjVq3ahyKn1ENi%2B0EJHRFWKVWxj6%2BEjEwwHwHJcNNPUEGfHloP8dEo0qQLIOdw%2BAZVWjUqtjEXxLjS9zQFOjpHR9YTeQdnTiJhvxaZtiNFZXh8lsihO2tJs%2B7M0RL5SLWMMYBi4DF5SOfQ0hUsy0Q2X2VNqxplb1pAmVGm%2BmDZ0blkeNTpyXkEx6y28iHiTA8eqayDa%2Bju9COPYHbF9bGaybJUlpT%2FD1ie2KgINqDSR04R6gjnXIKV4wRiLcrbLcISEd8MmByszVmL4e37QnCosk9oPFUAh%2Fusb4A%3D%3D&X-Amz-Signature=5266eea4d6bd0049cad43e2d2b85e6420a169de65bfc1e8d3cced815605c09c2&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

And, we need to test it as well as shown in the screen shot below:

![](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/a3790927-df4e-46b5-96e7-b109d6857820/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=ASIAT73L2G45OE5ILJJ4%2F20191204%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20191204T113704Z&X-Amz-Expires=86400&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEPf%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQDV9KYNCLFqryBttjaoI%2B2Ya0rmE1DuwTjZDiSr6skvMwIgbvWdg2B7zr%2BomIfNFSnke1A8cKtUuh%2FmIF%2FYhe%2F2sjsq0QIIQBAAGgwyNzQ1NjcxNDkzNzAiDKaKVVKDChqfTz99TiquAlJJ9UG7crIEdtctKTmKeI6CEmglwG9wMvIO0xGf8XYmPEstA1b00oU0kIdHQNPyJVhdyiUBmvB44SE440YGSLCEiIxd4tlqQhFWXn3wG8TQsBJHbZxsYl78yu8uAefIucjl1tv353FafWkozbcdkBSfX2SVwewmGf%2FQHwgyNytJ7QzAp07ENLlvPscU4a9PatuOlk2zKzObu5yX6IkUQtF2TvgBzb26VAV0yGdl3mMmNiEfMdtS4jP1XEMPM1lJhFP4Kihhd%2BHKEf4b3oqzxcIeRWi27Wq9X%2BD69OR77HSi%2BAypSJQA6ks1Htb%2F6t6mF%2B3wbewcnoMErO4SnN9aVFMGvtVVeQ8W2wZU0AB7ClQW4QTSWhKmHTB%2BsttV1pRZo9C1dBLtQ4pDkPpiG34xMP%2Bone8FOs4C9hWwpAj%2BBKo9KAIE4yXd7wZVrgbYafi0ITfAXemPyEVuuFs4LsbaZLExbkz%2FpW5zHmRff3tC3n663hkwrnHirvmAdNjLjk%2BbFHJvtAismLqJjhMbu%2FPPK%2BE63zzYZjkAWZq0%2BJKfaAKU2MIkYMNc6jalsBk1TTjFvCR4anbaCelOZE6OjAB227kNsWRDuB180ZylMA4MDZCGvi92Z6OXHOt5k879kbHNE1I%2B%2B3RLGgUvUP8NaBEo7sCY4D3Aq7v%2FItS%2B9YfVZJEtm2sT4T4mf1tsl1zXgfpwtmV8DjrX5tv3U6bbrkdgoTjvz%2F9dTQudQArLcYsx3F%2B5QUVTvbzzehR%2BYQT9fdoKrIrgZhvoMfbW5LVk1nia2HMdHENjIvIiqfjYITXQcZQKj4%2FAis7a0hymFgt5pa%2FKHOq6Z7YKaVYDiu%2F715Swew%2Bm5xcuMQ%3D%3D&X-Amz-Signature=229d35d1fb0ea244452604637df8535c603021115af894e3d52023d7995426d3&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22Untitled.png%22)

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

The post [Build WordPress Client App with React Native #2: Setting Up Your Environment](https://kriss.io/build-wordpress-client-app-with-react-native-2-setting-up-your-environment/) appeared first on [Kriss](https://kriss.io).