Expo, all you need to know

Rodrigo Curbelo


What’s Expo?

Expo was originally created by a team that had one objective, make react native developers stop writing native code for their React Native applications. Let’s talk about its main advantages:

 

Expo SDK

If you have worked with React Native you probably have ended up touching something inside android/ or ios/ at some point.

These guys made a great SDK which you can use super easily that provides you with the most common needs you could have, so, this way these modules are already configured and the only thing you have to do is take care of the easy part, to consume the services you want.

For instance, if you want to use react-native-maps (a great library made by Airbnb) here there is a manual that helps you to get it running. You’re going to need to follow several steps in order to get it working, but in fact, if you are already in the React Native world you’re probably already used to do this kind of thing, which is fine, and if you already have the knowledge to resolve problems when things get a little bit harder at the moment of touching native stuff like gradle configuration or adding new pods it shouldn’t mean a big challenge for you, but remember that a bunch of the React Native developers nowadays are Web Developers. Anyway, this is definitely easier:

 

import React from 'react;

import { MapView } from 'expo';

 

export default function() {

  <MapView

    style={{ flex: 1 }}

    initialRegion={{

      latitude: 37.78825,

      longitude: -122.4324,

      latitudeDelta: 0.0922,

      longitudeDelta: 0.0421,

    }}

  />

}

 

If your project is using the Expo SDK you’re all set to start using a bunch of libraries that otherwise you would install on your own, for example a lot of icons providers such as Material Design Icons or Fontawesome.

But, how does this work? react-native-maps and any other library of this kind need to have a native configuration. Who edited the Manifest or the Podfile to make this work? Is santa real?
Ok, all the configurations you need to run the big list of things provided by Expo are already done in the Expo Client which you use to connect with your app. Yeah, this is a little bit different now, and when you get why you’re going to see this as an advantage too.

  

Expo publishing system

Before telling you about this point I’ll tell you something first, you are not going to have neither android/ nor ios/ folders anymore, at least by default. This fact is only to make this “publishing system” possible. By generating a project with expo you’ll notice that you don’t have these folders anymore. And, that react-native run-android is no longer going to work, it’ll say that you are not in a react native project.

So, the way to get a project up and running is a little different now, you have 2 paths to follow:

By running the project you’re going to get a QR code, you’ll need to get the Expo Client from Playstore or from Appstore. Now, to run your development environment just scan the QR and that’s it.

Great, so, this way you can develop, but, what happens when you need to send a build to the client? you can publish a version for that, if you run exp publish or you press the publish button on the XDE, here:

 

 

 

That will compile your code, analyze your assets, and then publish your compiled code to the Expo CDN where anyone can consume it (depending on your privacy settings, we’ll talk about it later). You’ll get a url like this: https://expo.io/[your-expo-user]/[your-project-slug], that anyone can access by having the link. 

So, this is cool, but there are a few issues that come with this process, let’s talk about a few:

 

Privacy of your project

Ok, if you are working on a project that anyone can see you’re fine exactly like this, because this project is going to be published on https://expo.io/@[your-expo-user], and just by looking for the project name anyone will find it, which will be great for you in this case. But this is not the ideal case for most of the projects, so expo provides a way for you to kind of hide your project from the public ones. By changing your privacy key on your exp.json or app.json file by unlisted instead of public only people with the link will be able to access your app.

 

Versioning

Expo doesn’t provide a comfortable way to version your projects. But there is a simple thing that you can do to deal with this.

As we said above, what expo uses to know the name that it has to use to publish your project is the slug key on your exp.json or app.json file, so, by changing it you can publish things like my-project-0-0-1 or my-project-1-2-0, and in this way keep “different expo projects” for each of your versions.

Here is a script that we made and we usually use for achieving this: http://pastebin.ubuntu.com/25767495/. This is a comfortable way to publish stuff through the console by running this command. You can just add a script for running it to your package.json this way:

 

{

  // …

  “scripts”: {

    “publish”: “node publish-new-version.js”

  }

}

 

And then to publish stuff you just have to run npm run publish and that’s it. 

How do I install a module that is not in the Expo SDK yet?

Ok, everything looks fine so far, but even though Expo SDK includes a bunch of modules that you could need such as Audio, Camera, Lottie, Location, Payments, Svg, AdMob and a lot more, sometimes you need to install a module that Expo does not include and it needs a native configuration.

A lot of people see this as a big risk without knowing that you can detach your application from Expo at any moment, and you are always going to keep the Expo SDK. But you are not going to be able to keep using the expo deployment system anymore, given that you have native code changes now. So you’ll have to come back to HockeyApp or any way you prefer to distribute builds.

The important part to understand here is that you’re never going to lose the Expo SDK, which is the important part of Expo, you could even start the project using Expo and detach it starting from the first commit.

 

How accepted is Expo in the community?

A lot, actually Facebook made the create-react-native-app npm module that creates your app using Expo, so, it is becoming the way of starting applications now.

 

Conclusion

Expo is a great tool that we can use for saving ourselves time at the moment of consuming modules that require native installation, it is constantly growing and makes everything way easier. It also provides this great way to deploy applications and it reduces the learning curve for React Native significantly because you won’t need to touch native code anymore.

And the most important part is that you can always get your android/ and ios/ folders back to change anything you want there. At least from our perspective there is nothing you could lose by using Expo, so, go ahead and get started!



How to contact us

Our Location

DireccionArismendi 1420 Of. 102 Telefono(+598) 2409 15 66 Mailinfo@vairix.com

Follow us


Want to contact us?