Monospace® Studio
Published in

Monospace® Studio

Prototyping native apps with React Native and Expo.io

This weekend I tested out designing and building an App in record-time using Sketch, Marvel, Atom, React-Native and Expo.io. 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.

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 crude wireframe prototype here: https://marvelapp.com/ah00fd4

I’ve tried 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.

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).

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.

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)

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

--

--

--

The Monospace® Studio brand represents pride in work; it stands for craftsmanship and holding to the highest standards of design work. It’s a promise. A promise to deliver the highest standards of design service across the board. The journey is the destination.

Recommended from Medium

Passing Objects between an Activity and Fragments.

Saving private IPA and APK builds from Fabric

How to Safely Upgrade Magento 1 to Magento 2

A Curious Glitch in XSS Sanitizing

It’s A Wonder Full Life

Developing A Game Engine with Perl: Part 3 — Hardware Failure & Server Upgrade

Really killer features of GIT

Revealing our secret project — Tokenflip.io

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
Derry Birkett

Derry Birkett

Thoughts, stories and ideas from a UX Designer.

More from Medium

Deep linking React Native — iOS and Android using Branch

branch.io — dashboard

How to add animations to your NativeBase App

Universal Links (App Links) in React Native for iOS & Android