React Native and Expo: Native Apps without the Native Pain

By Keith Kurak

Elevator Pitch

React Native lets use JavaScript and React syntax to make cross-platform apps that are indistinguishable from “full native” apps. Most apps can be built without ever opening Xcode or downloading gigabytes of Android SDK’s- you just need a few NPM packages to get apps running on your phone.

Description

Native mobile development often requires you learn peculiar platform-specific languages, use build tools straight out of the 80’s, or deal with buggy emulators and certificate hell- and then you need to do go through all that again for another platform. React Native lets you create cross-platform apps that look like native apps because they use real native UI components (not HTML like Cordova) - all with JavaScript and React, tools you’re likely already using for the web. Expo is a set of tools that turns React Native up to 11 with a dead-simple out-of-the-box experience that enables near-instant beaming of test apps to your devices, over-the-air updates without the App Store, and building for iOS and Android without having to muck around with Xcode or Android Studio. Here we’ll unwrap the Expo toolbox, introduce the core concepts behind React Native, and peek under the hood of a live example wired up to data and navigation. No mobile or React experience is necessary.

Notes

Technical requirements: Just a projector and screen

Why talk about this: One of the most popular responses regarding mobile development in the State of JavaScript 2017 survey was “I want to learn React Native” (see https://stateofjs.com/2017/mobile/results/ ). It leverages skills a lot of people already have for the web in order build native mobile apps without the compromises of Cordova/ Ionic/ PhoneGap or the complications of native development in Xcode or Android Studio. It’s still a new technology, but it’s certainly production-ready and there’s a lot of people who could be using it productively that aren’t yet.

Why I should talk about it: I built the Coach Messenger app (https://itunes.apple.com/us/app/coach-messenger-by-nudge/id1321628683?mt=8) from scratch using React Native and Expo and am active in the Expo community. I’ve given talks on React Native at Cleveland Cocoaheads and the Akron Front-End Dev Meetup. I’m used to and enjoy helping audiences who might not be regular JavaScript or React developers understand just enough of the concepts to get the idea of why the platform is valuable, and why they might want to consider it even if they’re not into those technologies. The big deal is being able to cut out a lot of the annoyances of mobile development that aren’t related at all to actual coding, share 95%+ of code between iOS and Android while still having the app blend in with each platform, and simply avoiding the hassle of supporting separate apps on both platforms (which just isn’t in the cards for a lot of small teams).

Basic talk structure:

  1. React/ React native primer (what does React syntax look like, how is React Native puppeteering these actual native UI components over a JS bridge, etc.)

  2. What Expo (www.expo.io) brings to the table- it’s a curated version of React Native that has a ton of native plugins built-in, so you never have to deal with linking libraries to an Xcode project. Instead of compiling apps when you want to run them, it just serves a JS bundle to the Expo app “container” on your phone, just as if you’re testing a web app. You can publish “CodePush”-style OTA updates that don’t require you to submit a new version to the App Store. Because they control the actual binaries so tightly (combining what’s basically a fixed binary with your custom JavaScript bundle), they’ve put all of the build tools in the cloud. You can build iOS apps on a Windows machine. You could even build apps for both platforms with a Chromebook and a little elbow grease.

  3. Some code examples (not live-coded so disasters don’t happen, also will be shared with attendees) of a real app in action (start with hello world, move onto something that demonstrates things you’d try to do with a real mobile app- primarily multi-screen navigation).

  4. Finally, highlighting snack.expo.io - an IDE in a browser where you can write a little React Native, scan a QR code, and beam the app to your phone. Yes, you can technically write a phone app on your phone.