How to start with React Native
Tags: softwaredevelopment, reactnative, ios, android
Published: 2020-03-17 15:09:18

---
title: How to start with React Native
published: true
date: 2020-03-17 11:15:04 UTC
tags: software-development,react-native,ios,android
canonical_url: https://revs.runtime-revolution.com/how-to-start-with-react-native-c743e5afd9ec
---

In this article, I’ll tell you what you need to bootstrap a React Native app.

![](https://cdn-images-1.medium.com/max/1024/0*4hJESi7DgtPFHRfu)<figcaption>Photo by <a href="https://unsplash.com/@monicasauro?utm_source=medium&amp;utm_medium=referral">Monica Sauro</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

### **So what is React Native?**

> React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces. (…)

> \* from [React Native](https://reactnative.dev/)

React Native allows you to create Android and iOS applications with the same code base, that behave nearly the same using all the resources of React with a little tweak.

### Setting Up Your Development Environment

The installation process that is described on the React Native site is well documented and easy to follow, but here is the short version. I use a MacBook Pro as my development machine so the commands will be for macOS.

**Installation process**

1. Install [Xcode](https://developer.apple.com/xcode/) and [Android Studio](https://developer.android.com/studio)
2. Install [node](https://nodejs.org/en/) and [watchman](https://facebook.github.io/watchman/docs/nodejs.html)

{% gist https://gist.github.com/anunes9/ab4e79da64b1174bdbbc661a53d53d88 %}

3. Install Java SDK

{% gist https://gist.github.com/anunes9/49522d382247f72c2e4ee43cd321554d %}

4. Install Xcode command line tools

{% gist https://gist.github.com/anunes9/88af9f3723b5be09dc6a60f37c62e707 %}

Open Xcode, then choose the **Preferences…** menu.  
Go to **Locations** panel and install the tools by selecting the most recent version in the **Command Line Tools** dropdown.

5. Install CocoaPods

{% gist https://gist.github.com/anunes9/36d3683598cd35003b6ccd589b0aa30e %}

6. Install [react-native-debugger](https://github.com/jhen0409/react-native-debugger)

{% gist https://gist.github.com/anunes9/a1e3e258f8e408f11db2b8efb965b47d %}

And you are ready to go.

Now what you need to do is bootstrap your application.

> React Native has a built-in command line interface, which you can use to generate a new project. You can access it without installing anything globally using npx, which ships with Node.js. (…)

> \* from [React Native](https://reactnative.dev/)

{% gist https://gist.github.com/anunes9/59ef25dbdcba02fe7ef2bc6f2a57e241 %}

After you create your app you can choose to run the app on iOS or Android.

To open the app on iOS just run this command, it will open the iOS simulator and install the app.

{% gist https://gist.github.com/anunes9/913c8e28ea0d14b000ac78a56cc8f558 %}

To open the app on Android you will need to create a virtual device on Android Studio, open the virtual device and run the following command.

{% gist https://gist.github.com/anunes9/066a04089bb385996c9d91d3a6038e93 %}

And there you go, the app is running!

![](https://cdn-images-1.medium.com/max/249/1*WANqxyiI6zLXB981kE_g0A.png)

### Debugging

To use **react-native-debugger** you need to enable remote JS debugging on the simulator option:

- On iOS press **_CMD + D_** and click on **Debug JS Remotely**.
- On Android press **_CMD + P_**  .

A nice feature of React Native is Hot Reloading, which allows you to see the code changes in real time without having to restart the app.

To enable this option, open the simulator options and click on **Enable Hot Reloading**.

![](https://cdn-images-1.medium.com/max/760/1*rA2F8oNEpGILBvujuuhTtg.png)

At this point you have your React Native environment set and ready to start coding some apps.

### Recommended links

- [React Native](https://reactnative.dev/)
- [React Native Community](https://github.com/react-native-community)
- [Awesome React Native](https://github.com/jondot/awesome-react-native)
- [VSCode React Native](https://github.com/microsoft/vscode-react-native)

[anunes9 - Overview](https://github.com/anunes9)

_If you have any questions or comments, don’t hesitate to reach out. I’d be happy to help you. Thanks for reading!_

_I’m a software developer from Portugal, currently working at_ [_Runtime Revolution_](https://www.runtime-revolution.com/) _as a front-end and mobile developer._

[Runtime Revolution](https://www.runtime-revolution.com/)

* * *