React Native App using EXPO
Tags: reactnative, webdev, beginners, javascript
Published: 2020-06-05 04:15:45

For beginner, who wants to start working on APP, it’s really easy to start with EXPO. We can build an app in short time using Native Base and Expo. Xcode or Android Studio are not required. We just have to install another tool called **expo**.

This toolchain includes over the air (OTA) updates, easy build tooling and a lot of extra API’s on top of React-Native.

<h3>What is OTA:</h3>

An OTA update does pretty much what it says. You send an update out, the user downloads it, and the app updates — much like the web. OTA updates are a strong point of React Native. Since we, the developers, usually write our logic in JavaScript (which doesn’t have to be compiled and installed) we can just send out a new JavaScript bundle, and once the user downloads `{"type":"block","srcIndex":0,"srcClientId":"9e83ea28-f3a5-4f1c-be6e-7ddde7f002cc","srcRootClientId":""}` it they have the updated logic! No waiting required.

**There are some pros and cons of using EXPO:**

<h3>PROS:</h3>

1. Easy to get started
2. Option to live reload on Expo app and others
3. Support both iOS and Android from the start.
4. Save valuable time when creating production builds
5. Publish updates for your apps faster
6. Easily we can integrate push notification

<h3>CONS:</h3>

1. If you need to keep your app size extremely lean, Expo may not be the best choice
2. Must stick with supported SDK’s

<h4>SETUP:</h4>

We can setup the EXPO react native app in following steps:
<ul>
<li>Make sure Node.js has been installed in the system</li>
<li>$ brew install watchman</li>
<li>Install: $ npm install -g create-react-native-app</li>
<li>Then run the following commands to create a new React Native project
<ul>
<li>Create Project:  $ create-react-native-app fooodie </li>
<li> $ cd create-react-native-app AwesomeProject </li>
<li> $ npm start </li>
</ul>
</li>
</ul>

Then we will start the server.
**Added the File structure for App:**
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9uo7jfoejmelnvin6ud9.png)

<h4>Explaining `app.json` file below:</h4>

In root we have `app.json` file which is configuration file for react native which contains many variables. Such as:

**Splash screen**: First screen where user comes first.

**androidStatusBar**: where the battery is present.

**associatedDomain**: write all the list of api’s which we are using in app.

**Android permission**: We have to give location information such as goole key.

certificateHash will be generated from android Xcode.

<h3> Debugging</h3>

To debug react native code install react-devtools:

```terminal
$ npm install -g react-devtools
```

Then run in your terminal inside current project:
```terminal
$ react-devtools
```

To work on single project, we can download into file by following steps:
```terminal
$ npm install –save-dev react-devtools
```

Then add into script section in package.json
```javascript
“react-devtools”: “react-devtools”
```

Run:
```terminal
$ npm run react-devtools
```

**To Access console logs in React Native:**
```terminal
$ react-native log-ios
```

**expo vector icons:**
Sharing URL for expo vector icons:

<a href='https://ionicframework.com/docs/ionicons/'>https://ionicframework.com/docs/ionicons/ </a>


<h4> Build</h4>
Once you have done this. You have to build and export using following commands:


1. To build android APK:

     $ exp build:android

2. To check the status:

      $ exp build:status

     That will give the result something like this:

     the Apk’s is hosted on amazon aws

      [exp] Android:

      [exp] APK: https://HOST/yourapp.apk

We can use <a href='https://sentry.io/welcome/'>sentry</a> for bug log.

We covered OTA, setup for Expo with react native and how can you add icons to the project.

Thanks for reading this article ♥

I hope you would find these article useful. Feel free to ping me in comment section or <strong><a href="https://twitter.com/suprabhasupi">@suprabhasupi</a> 😋</strong></p>
<!-- /wp:paragraph -->

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> Suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>