Building a React Native App w/ Expo
Tags: reactnative, react, javascript, tutorial
Published: 2020-07-02 11:14:39


In this article I will try to guide you on how to start a react native application from scratch using expo and consequently build it into an apk.

![](https://cdn-images-1.medium.com/max/1000/1*tfC90FJmjrjSxdPLNQPgkA.jpeg)

For quite some time I wanted to learn Swift and enter the world of Mobile Software Development, but the opportunity never arose.

Around 2019, I came across an opportunity to develop a mobile application which had a simple requisite. The application had to work both on Android and iOS. Since me and my team did not have knowledge whatsoever about Swift and little time to deliver, we decided to use something we already knew and that would work both on Android and iOS.

This was React Native. Since I had already worked with React, this was the best option for us.

**What is React Native?**

> React Native is a JavaScript framework for writing real, native rendering mobile applications for iOS and Android. It’s based on React, Facebook’s JavaScript library for building user interfaces, but instead of targeting the browser, it targets mobile platforms.

We had no experience using React Native, however there is a really neat tool that really helped us developing our application. This tool is called Expo.

**What is Expo?**

> Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

I was very satisfied with this and would absolutely try it again to develop mobile applications. But right now, I will help you develop your own. 😄

Enough talking. Let’s get down to business.

----------

### Prerequisites

What’s required for us to get started?

React Native’s language is JavaScript so we are going to need a package manager for JavaScript which is _npm_. You can go [here](https://nodejs.org/en/download/) and install Node and NPM.

After installing you can open a terminal and validate using this command:

```
npm --version
```

Next will be to install, using _npm_, expo command line interface using the following commands:

```
npm install --global expo-cli
```

----------

### Step by Step

**Step 1: Create your app using Expo**

```
expo init --template blank
```

After executing this command, you’ll need to provide the name you want to give your app. This name will be used to create the folder where your project will be. Within this new folder there will be a bunch of stuff already configured which are necessary for you to run your app.  
I’ll leave below an image of what should have been created.

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

Pretty standard stuff here, but what’s most important and what’s required for your app to run here are the _assets_ folder, the _node_modules_ folder, the _App.js_, _app.json_, _babel.config.js_ and the _package.json._

If you want to deep dive on any of these files, I’ll leave some links for you to have fun. 😄

-   For _babel.config.js_ related stuff, go [here](https://babeljs.io/docs/en/config-files).
-   For _package.json_ related stuff, go [here](https://docs.npmjs.com/files/package.json).
-   For _app.json_ related stuff, go [here](https://docs.expo.io/versions/latest/workflow/configuration/).

**Step 2: Run the App**

```npm run start```

After running that command, Expo Command Line Interface will start Metro Bundler, which is an HTTP server that compiles the JavaScript code of your app using [Babel](https://babeljs.io/) and serves it to the Expo app.  
It also pops up Expo Developer Tools, a graphical interface for Expo CLI.

The Expo Developer Tool should look like this:

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

Expo does have some nice features. Did you know you can install your app on your phone with a tiny app that Expo developed and reading that QR code? You can also install your app into your Android Virtual Device or plug in your Phone with a USB cable, but the QR code option was quite welcoming for me. 😄

Since I am using the QR code, I had to install this [App](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en) on my Android.

After installing the app, the only thing you need to worry about is putting the connection to Tunnel (_if expo shows a warning saying_ **_Tunnel URL not found, falled back to LAN URL_**_, please stop and start the app again_) and make sure the Phone and the Computer are on the same internet, otherwise it won’t work. 😞

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

You should see something like this on your phone. From this step forward, you can start and explore your React abilities and make your app pretty and useful.

If you want to use some basic components from React Native, you can see their documentation [here](https://facebook.github.io/react-native/docs/components-and-apis#basic-components).

For more complex stuff, like device permissions and so on, you can see this [documentation](https://docs.expo.io/versions/latest/sdk/permissions/) from Expo.

#### Step 3: Build your Android Package with Expo

The next logical step after you’ve developed your App, would be to build it and distribute it. Since I haven’t distributed the App we were developing to Apple Store, or to Google Play Store, I can only guide you on how to build your **Android Package** (**APK**) using Expo.

In order for us to be able to generate an APK using Expo we need to create an account. You can create one [here](https://expo.io/signup).

Next, we will need to change some settings on the `app.json` file.

Since we are creating an Android Package, the only thing we need to worry is to define the Android package name like this:

```json
{  
  ...  
  "android": {  
    "package": "com.tutorial.reactnative"  
  }
  ...  
}
```

If you want to deep dive on this matter, you can follow this [link](https://docs.expo.io/versions/latest/workflow/configuration/#android). It is the documentation for every supported field on the `app.json` file.

Start your app using `npm run start` and then open a new terminal on the same directory and execute the following:

```
expo build:android -t apk
```

If you are not logged in yet, it will ask you to log in or to create a new user, since we’ve done this previously, we can choose to log in.

Afterwards, it will ask you for a Keystore, don’t worry about it and let them handle it.

This will trigger a build of your app and after that build is concluded, it will be sent to the expo servers to be transformed into an APK.

This may take some time as Android builds are the most popular within Expo servers. If you want an estimate on how much time it will take, you can follow this [link](https://expo.io/turtle-status). It shows how many Android builds are on Expo servers waiting for processing.

You do not need to wait in the terminal for the build to complete. Generally, you will receive an info stating that the terminal command timed out. No worries. Just check the build status on the expo website.

After some time, your APK will appear on your Expo Dashboard and it will be ready for download! 🎉

----------

### Wrap up

Now that we have a functioning react native application and you know how to build your own APK for delivery, you can continue and develop that app which we know will be the next big thing.

----------

### Useful Links

-   [Github Repo](https://github.com/no0law1/react_native_tutorial)
-   [Expo](https://docs.expo.io/versions/latest/)