Mobile App Prototypes with React-Native
Tags: reactnative, prototyping
Published: 2017-09-02 11:41:04

---
title: Mobile App Prototypes with React-Native
published: true
description: Why React-Native is good for app prototyping
tags: react-native, prototyping
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jx6assz45engsdswpw2q.jpg
---

Coming from Web-development, I'm used to setting up front-end prototypes quick. Almost every computer has a browser that runs JavaScript, even most mobile devices have one. So getting a prototype up and try it with some users is no big task, so I feared that would all be lost if I started native app development.

[React-Native](https://facebook.github.io/react-native/) and [Expo](https://expo.io/) to the rescue!

When I got my first inquiries to do native apps, I searched around and found React-Native, which allows me to use most of my JavaScript and React skills to write native apps. Contrary to some believe, React-Native apps don't render in a WebView.  Yes, writing RN feels a bit like meddling around with DOM elements, especially because a huge portion of CSS is also available, but there is no DOM, just native views managed by React, seemingly for performance reasons, but I never tried solutions like [Cordova](https://cordova.apache.org/)/[PhoneGap](https://www.phonegap.com/) so I don't know their pains.

When writing React-Native apps you are controlling its native parts via JavaScriptCore on iOS or V8 on Android. This allows you to compile your native parts once and then just update the _controlling_ JavaScript. Apple even explicitly allows you to update JavaScript running on JavaScriptCore _on-the-fly_, without going through the app-store approvement, _if you only use it for bugfixes_ and there are [services that allow you to do so](https://microsoft.github.io/code-push/index.html).

As if this alone wasn't kinda cool already, there is Expo.

One part of Expo is a pre-composed React-Native app called Expo Client, some sane defaults and a bunch of native modules that you would normally have to compile yourself. This app is in the [App Store](https://itunes.apple.com/app/apple-store/id982107779) and [Play Store](https://play.google.com/store/apps/details?id=host.exp.exponent) and can be installed like the omnipresent browsers I mentioned at the beginning. It uses the _on-the-fly_ JavaScript update to get your code and run it, _like a browser, but for native._

The other part is a cloud service that handles your new code and makes it available for their client. So you set up your local dev machine, write your app in JavaScript, push it to their service and pull it on the mobile client. _You don't need a Mac for this_.

The client brings a nice selection of native modules already and with the latest update it now has even more: vector-icons, GLView, Payment with Stripe, Facebook and Facebook Ads, Audio, Video, Camera, FileSystem, SQLite and much more.

You can even run this whole process without the cloud service in your LAN. Just use [Create-React-Native-App](https://github.com/react-community/create-react-native-app) instead. It runs a local server the Expo Client uses to pull your app.

The catch of Expo and Create-React-Native-App is, you can't use your _own_ native modules, but you can _detach_ from their client and do your own compilation.

I already build a few apps with it, _detached_ with own compilation and using the Expo client and it feels a bit like Web. Some things are missing, like implicit text nodes. On the other hand it also allows much of ES-next features that aren't in browsers yet, like class properties or static properties and object spread and rest operators.

To help you getting started, [I made a small video course on Skillshare](http://skl.sh/2tRgwpE).

If you need some help getting started with React, I also made a [free React basics course on Github](https://github.com/kay-is/react-from-zero#lessons).