Prototyping native apps with React Native and Expo.io

Derry Birkett
Jan 21, 2019 · 3 min read

This weekend I tested out designing and building an App in record-time using Sketch, Marvel, Atom, React-Native and Expo.io. Here’s how it went. (yes, it’s a little sloppy, but hey!)

The objective was to throw together a quick prototype from Flow to Front-end. The theme is a Sleep tracker. I started with basic Flow.

Image for post
Image for post

The user flow leads the user from an overview, through sleep logs to sleep events. Then, I drew out some wireframes. You can view the prototype here: https://marvelapp.com/ah00fd4 (it’s crude I know)

Image for post
Image for post

I’ve used React Native before, but not to this depth — so I found a neat framework to help me set up the env and deployment etc. Expo.io. I only created some front-end, I didn’t wire it up — it doesn’t really “work” — that would require a lot more time.

Expo scaffolds and packages your React Native ready for Android or iOS platforms. Of course, you also need to take care of which packages you use to ensure they work on both platforms.

Here are the build tools and dependencies.

Image for post
Image for post

I built-in a basic styleguide to hold it together. I don’t really like having huge stylesheets in each page or component, so I compiled most styles into a /styleguide/folder and import them as modules. Here is a nice visual of the styleguide, you can get the code from the Github repo (posted further down).

Image for post
Image for post

Here are some a couple of built screens (as I say, only prototypes), I didn’t have time to create all the pages in the app demo this weekend, so I created two only.

Image for post
Image for post

It’s hard to find a good, full set of Material Design components for React Native. There are several libraries, but none of them are really complete.

Expo really shines in sharing and deploying to simulators, devices and even prepping Apps for the Apple and Google stores. Check this out: (caveat: had some issues with some Chart libraries not working when “online”. So I published a trimmed version without Charts)

Image for post
Image for post

Here is a quick link via Expo “Snack”.

Feel free to Fork or Download the source code from my repo

Hope this was helpful. For now. Onward!

Derry

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store