The Joys of building React Native Apps with Expo
Annoyed by needing XCode and Android Studio to work on your React Native app? Wish it took one button to share your mobile app with other users? Let’s have a look at Expo.
TL;DR Expo provides an expanded SDK and hosting services for your mobile app development without the need of touching XCode or Android Studio again (in most cases).
React Native is the beginning
React Native is still a pretty young project, but it’s definitely growing in popularity, and has become a go-to, united way of creating mobile apps (and beyond). Why would you need two separate languages (for Android and iOS) when you can learn only JavaScript and reach the same goals? Well, enough sweet talk, let’s hit it.
The framework covers some important APIs for things you might need in your mobile app, such as Animated for animating stuff (very powerful), Clipboard for manipulating the contents of the system clipboard, or FlatList for rendering lists in a perfomant way. Without React Native, you would have to write most of this stuff by yourself in one of the native languages.
There is a rather major pain point with React Native though: you need to have both XCode (which is available for Mac owners only) and Android Studio installed if you are planning on supporting both platforms. You will still need to use these (monstrous) development tools whenever you want to see the result of your app in an emulator/simulator.
Expo is like a painkiller for your React Native aches
Expo is a complementary toolkit for React Native. It gives you access to additional APIs, wrapping native code to do common tasks so you can stay in your beloved JavaScript, including reading contacts in a phone, accessing the phone gyroscope, or signing users in with Facebook. All these functions are commonly known as the Expo SDK, and it’s still growing.
With Expo you won’t have any scary ios/android folders, like you might have seen with pure React Native. This is completely normal, since you don’t need those. For more detail follow the guide here.
Aside from the SDK, there is another very important part of the Expo platform: building and distributing your app. It’s really as simple as pushing one button (once you’ve registered an account at expo.io) and within a couple of minutes, you’ll be sending public URLs to your friends or co-workers to live demo your app! The one little downside is that every person needs to install the Expo app (Android and iOS) on their device.
You can share your development version of the app directly from your computer, and other people can view changes you are making without any publish step needed!
When you publish an app with Expo the JavaScript code is bundled and sent to Expo servers. The public page (like this) will be created for you. Anyone can easily install your app and try it out. That’s right. You don’t need to bother with Google Play or Apple Store and their strict policies till you want to share your app with the general public. This gives you a great opportunity to dry run ideas that without creating any assumptions or generating bad reviews about the app for future consumers to read.
This process is technically very similar to CodePush or Rollout and it’s completely legal in the eyes of official stores. You don’t need to update the app in there unless you are changing the scope of the app or updating SDK version.
Expo might just be the cure
You might be thinking native development is all nice and easy now, but you might not be very fond of the idea of your users having to install some weird Expo app they’ve never heard of, just to run your app. Sometimes it’s hard to explain the reasons behind this to people who are used to installing apps only from official stores. They might even be afraid that this Expo app could harm their device. Why bother with Expo at all then?
That’s where standalone apps come in. Expo is providing build servers that are capable of creating APK/IPA files remotely for you which you can then distribute to your users or upload to official stores. Your users won’t need Expo app anymore (though it can be still used). Your app will be installed as usual with its own icon or customized loader screen (check out all of your options). And you still won’t need Android Studio or XCode for any of this. Isn’t that beautiful?
Note that if you are trying to build iOS standalone app, you will have to pay for the Apple Developer Program. It is required so that Expo can sign your app with a certificate provided by Apple. Without it, it’s not even possible to create an IPA package. Android apps can get away with a self signed certificate.
The standalone app works almost identically to the Expo app, except that there’s no Expo UI the user must launch the app through. It downloads the published JS bundle associated with it and runs it. That’s it.
Updating the app later on
So there is a standalone app and there is a JS bundle. Who knows when to update what? And how?
As long as you are working only in the JavaScript code, you don’t need to worry about a standalone app that your users have installed. Simply use XDE (or exp utility) to publish bundles. Next time the user opens your app, it will be updated.
Whenever you need to change settings from the app.json file, including updating the version of the SDK, then you need to rebuild a standalone app and distribute again.
There is one hiccup that can surprise you, though. Especially during first development runs. When a user opens the app, the JS bundle is downloaded in the background. There won’t be an immediate update during the use of the app. The user would need to actually close the app and, upon reopening, the update will be applied.
If you need to ensure that the user is always using the latest version of the app, there is a gist involved that can help you with that. You might want to expand on it, depending on your needs:
Conclusion
Expo is still a young project and needs to resolve a couple of pain points, but when it does, it could become a major tool for mobile development.
This article is covers only the ideal situation where you’re able to implement your app’s features by using React Native + Expo API only. Once you want more from it, you will have to detach to ExpoKit or leave the safe waters of Expo completely. I have covered the details about this in my follow up article Compile React Native with ExpoKit easily.
