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

Extending Tumult Hype Symbols (using Hype Symbol Cache)

Vue & Typescript: Handling Types for Injected Properties

CRUD OPERATIONS

Stop using query selectors for EVERYTHING!

Running Laravel 7.x/8.x on Heroku

Objects in JavaScript are passed by reference, not by value

LetsGrowMore Internship Experience

Selection badge

Create a Blog App With Next.js and Contentful API

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

Epic SMART-on-FHIR Authentication In React Native

How can we use google translate in react native?

Smooth header animation when scrolling the page in React Native in 5 minutes

Usage of SafeAreaView and View in React native

Without SafeAreaView page contents display