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
