React Native app
Tags: react, javascript, ios, android
Published: 2021-01-03 18:49:07

#React Native
[React Native](https://reactnative.dev/) is an open-source mobile application framework for cross-platform mobile app development for iOS and Android. It let you build native mobile apps using JavaScript. Normally, you’d need to program your mobile app using [Java](https://www.java.com/en/) programming language (for Android) and [Swift](https://www.swift.com/)/Obj-C (for iOS). React Native removes that requirement, leading to fully functional apps on both platforms using just one coding language.

Both, React Native and [ReactJS](https://reactjs.org/) were created by Facebook. React Native is being used in thousands of apps, [full list can be found here] (https://reactnative.dev/showcase) but it's likely you've already used it in one of these apps:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w9kv7y2yaqkykmgp0rrc.png)



#Setting up the development environment

This page will help you install and build your first React Native app.

If you are new to mobile development, the easiest way to get started is with [Expo CLI](https://docs.expo.io/). Expo is a set of tools built around React Native and, while it has many features, the most relevant feature for us right now is that it can get you writing a React Native app within minutes. 

You will only need a recent version of [Node.js](https://nodejs.org/en/) and a phone or emulator. 



```
npm install -g expo-cli
```
Then run the following commands to create a new React Native project called "NewProject":

```
expo init NewProject

```
However, I received this error at the very beginning
```
ERROR: Node.js v12.10.0 is no longer supported.

expo-cli supports following Node.js versions:
* >=10.13.0 <11.0.0 (Maintenance LTS)
* >=12.13.0 <13.0.0 (Maintenance LTS)
* >=14.0.0 <15.0.0 (Active LTS)
* >=15.0.0 <16.0.0 (Current Release)
```

After throwing some errors trying to install `node-v15.5.0` as supported version, and system fails to overwrite the current `version v12.10.0`, this fix a problem:

```
nvm install node --reinstall-packages-from=$(nvm current)

```

After:
```
cd NewProject
```

run:
```
npm start
```

This will start a development server for you: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bhryyfodb9frrjm4lpm9.png)

## Running your React Native application
Install the [Expo](https://docs.expo.io/) client app on your iOS or Android phone and connect to the same wireless network as your computer. Expo is a framework and a platform for React applications that helps develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

On Android, use the Expo app to scan the QR code from your terminal to open your project. 

On iOS, use the built-in QR code scanner of the Camera app. [Running on and starting the Simulator Guides can be found here](https://reactnative.dev/docs/running-on-simulator-ios)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtrlomz1v9f1x1o6jzk5.png)

## Modifying your app
Now that you have successfully run the app, let's modify it by opening App.js in your text editor and edit some lines. The application should reload automatically once you save your changes.

## That's it!
Congratulations! You've successfully run and modified your first React Native app.


### To connect with me
Please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) and follow me on [Twitter](https://twitter.com/LloydPile). 

Thanks for reading!