Understanding Expo with React Native
Tags: reactnative
Published: 2020-02-12 13:44:57

When you are thinking of developing a new <a href="http://www.reactnative.com/">React Native</a> app, it's common to think in terms of two choices- Using Expo, or not using Expo. 

Expo has become immensely popular in the past few years for several reasons:

1. Expo handles a bunch of config steps for deploying your application. A large number of people learning React Native come from a background that has nothing to do with mobile development, so doing this configuration seems daunting.

2. Expo has an SDK to handle all kinds of things like using the camera, accelerometer, maps, location tracking, analytics, etc. Granted, most of these features can be implemented using open source packages, but it is nice that Expo provides so many of these in one place.

<b>How Expo works?</b>

For knowing how Expo works, we need to discuss React Native

React Native is a compiled app that is running in Javascript. Whenever you build and run your React Native project, a package called Metro starts up.

<img src= "https://s3.amazonaws.com/exp-brand-assets/ExpoIcon_200.png">

The packager does a few things

1. Combines the entire Javascript code into a single file, and translates any Javascript code that your device won't understand (like JSX).

2. Converts assets (e.g. PNG files) into objects that can be displayed by an Image component. 

When you aren’t using Expo, you run your app like this.

<i>react-native start</i>

With Expo though, you run it like this (using their CLI tool).

<i>exp start</i>

Both of these commands start up the same packager that we discussed. The difference is that exp start also starts something called the Expo Development Server. This server runs a process that grabs your Javascript bundle created by the React Native packager (Metro) and runs it inside the Expo app on your simulator.

Also, Expo when combined <a href="https://codersera.com/blog/running-expo-react-native-together/">together with React Native</a>, creates a great combination that is great for app development.  

<b><h2>Distributing your App with Expo</b></h2>

There are two ways to distribute your app with <a href="https://medium.com/appandflow/yes-you-should-start-your-react-native-project-with-expo-9fbfb20d1f99">Expo</a>. The easiest way is to let people download the Expo app from Google Play or App Store. This Expo app can run your app inside it. It loads apps via a URL that you provide. You’ll need to push your Javascript code to the remote location accessed by this URL.

<i>exp publish</i>

That’ll do it, as well as print your URL in the terminal. Give that URL to others so they can type it into Expo and run your app.

Running your app inside the Expo app is OK for getting started. But at some point, you’ll want to put your app straight on people’s devices. Like putting it on Hockeyapp to distribute it to testers, or putting it on the Google Play or App Store. To do this, you’ll need to create a “standalone app”.

A standalone app is an Expo’s term for an app that runs outside of the Expo app. It’s just like an app you’d download from the App Store. To create the iOS app, you run this command.

<I>exp build: ios</I>

The final product is an IPA file that you can submit to Apple. For Android, you run exp build: android and get the APK file for the Google Play Store.

<b><h2>Updating your App</b></h2>

Normally, the updated version has to be submitted to the app store of the respective platform (Android or iOS). However, with Expo, your Javascript code is hosted remotely, meaning your app will download any changes to this Javascript code remotely.

<b><h2>Conclusion</b></h2>

<a href="https://pusher.com/tutorials/build-to-do-app-react-native-expo">Expo</a> is a great app for getting a jumpstart with React Native. However, it's not always something that can get you to the finish line. The Expo team is making a lot of developments but it has lead to many bugs in its features.

But I wouldn't isolate Expo. It has its shortcomings but it has great potential when coupled with React Native. It has definitely made React Native more approachable for the beginners and deserves applause for it.

Thanks for reading!!