Expo iPhone & Android App in 7 lines

Tim Moreton
4 min readMar 20, 2018

--

CREATE, PUBLISH, BUILD & DEPLOY

MUST HAVE BELOW INSTALLED FIRST

Download XcodeWe don’t actually have to interact directly in Xcode for Expo to work but we do need it installed for the iPhone Simulator

Download NodeIf you have created any type of React or Node app in the past then skip this step

CREATE

First off we will want to download the Expo Command Line tool which allows us to forgo using Xcode at all! If you have ever dealt with dependency issues in a React Native build before you will understand why this is such a big deal.

npm install -g exp

By using Expo’s create-react-native-app feature we skip the need to even create a Expo account. This is very similar feature to the react-create-app for React Web Apps. What both commands both for Web Apps and iPhone/Android apps respectively is to create a separate node module in which the Expo community handles the updates to prevent any dependency issues…simply awesome!

npm install -g create-react-native-app

Once everything is installed we now have access to the create-react-native-app command in the terminal which will then create the necessary files for a basic Expo app.

create-react-native-app YOURAPPNAME
Files created for Expo Create App command

Now we have our folder all we have to do to get started is yarn start. That’s it! Once that gets started it will give you a few options for testing which is where Expo really differentiates itself from React Native. You can view in an Android or iOS simulator (hence the need to download Xcode). OR the best part just download the expo app, scan the barcode and boom, it’s on your phone with live reload. As long as you are on the same network, anyone with the Expo can view your local dev environment. I don’t know about you but I thought this was the coolest feature when I first used Expo.

cd YOURAPPNAMEyarn start OR npm start
The default code for our app

PUBLISH

One of the great things about Expo is the testing phase. With React Native you would have to build your app, submit to the app store and then add test users through iTunes connect, which requires people to sign up and use their AppleID account…too many steps for testers. Meanwhile, for Expo all you do it exp publish and send that to your users which you can do through text or email, that’s it since it’s done through Expo hosting rather than iTunes connect. SO much easier.

exp publish

Above is a Tinder Clone I created and published to Expo which you can test out. To check out this app download the expo app in the iTunes or Google Play store and scan the barcode above or link https://expo.io/@tmoreton89/tinder

BUILD

Now publishing your app to Expo doesn’t mean it is available to users in the App Store, that is just for testing purposes. So now ideally we would obviously want more to an app than the default code but for testing purposes we will assume our app is done and tested. Now we want to build for iTunes or Google Play and since both versions share the same code (unlike in React Native) we just use one or both of the commands below to create our .apk (Android) or .ipa (Apple) file for upload.

exp build:ios OR exp build:android

DEPLOY

I will be brief in this section but if you wanted to upload to iTunes here then you will have to download the Application Loader (one downside is you can’t use Xcode like you normally would) to upload to iTunes connect and respectively the Google Play store with the .apk file.

CONCLUSION

After building a few apps in React Native over the last fews years and loving every minute of development, I was a bit hesitant to try my hand at Expo. After building a complete Tinder Clone though in Expo I quickly learned to love it even more the the extensive list of new features and dependency hell-free nature I know anyone else that tries it will love it as well.

CALL TO ACTION

With this article I wanted to show how simple it was to get from initial install, to final app upload to get started building your own iPhone and/or Android app. If you are interested in learning more though check out my tutorial of How to Build Tinder from Scratch with React Native & Expo.

The first 15 people will get a huge discount with the link below! https://www.udemy.com/how-to-build-tinder/?couponCode=CREATE

--

--

Tim Moreton
0 Followers

Traveler, Developer, Teacher & Entrepreneur @ Useful.ly