Rapid Prototyping Native Mobile iOS and Android Apps in 5 minutes with React Native and Expo

Scott Becker · Mar 18, 2019

Rapid Prototyping · React Native · Expo

When you have a new idea for an app, you want to get feedback from users as quickly as possible to see if the idea has legs, and start refining it. The best feedback comes once people try it.

So, our primary goal is to make it possible to get real user feedback from people using the app as soon as possible.

In this post, we'll begin creating an app and make it possible to share it with others within 5 minutes so they can give you feedback as you build it.

Secondary goals

  • Native App - not a responsive web app running in the browser, a fully native app
  • Skip the app stores - getting an app approved in the app stores is an involved, time-consuming process.

Given these goals, one of the best sets of tools available today is React Native and Expo.

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

React Native is a framework for building native iOS and Android apps using React.

Expo is a tool for creating React Native apps quickly. With Expo, you can start a new app, preview it in the browser, then see it on your own device, and share it with others almost immediately (5 minutes).

Get a taste with Snack

Snack

Snack is a lightweight online IDE for Expo that allows you to run code in the browser in a matter of seconds. It's great for quick experiments and sharing examples.

Go to snack.expo.io. You'll see some code, and an image of an iPhone, with a large "Tap to play" button. Tap it, and the app will boot in a device simulator.

Change the text in the code and it will update.

Install the Expo toolchain

First, install Node.js. The latest version is recommended.

Second, install the Expo package for Node.

npm install expo-cli --global

Third, install the expo mobile app on your device. Either iOS or Android.

Create a new app

Once everything is installed, you can run the following commands from your terminal to get a new app running in development.

expo init my-new-project
cd my-new-project
expo start

Scan app QR code to run it on device

You will see a QR code in terminal and Dev Tools. To open your project on your device, simply scan the QR code with the Expo Client app on Android or using the built-in QR code scanner of the Camera app on iOS.

See your changes immediately

  • Edit the home screen screens/HomeScreen.js
  • Watch your device refresh

Notice what we did not do

  • No Apple developer program registration ($99 + days)
  • No creating code signing certificates
  • No cable from the computer to the device
  • No compiling in Xcode
  • No uploading to TestFlight
  • No inviting users to TestFlight
  • No app store review process

Of course, we will want to do these things too, but only when we are ready to launch. By that time, we will have validated and improved our idea with real user feedback so it can be truly great.

And we won't have to start over with a different platform or framework to get there. React Native and Expo supports the full life cycle from development to app store deployment.

Do you need an app prototyped or built fast? Olio Apps can help. We have built and shipped multiple iOS and Android apps to the app store. Tell us about your project!

Interested in working with us?