What’s This React Na.ve Thing I Keep Hearing About?

Evan K. Stone Senior iOS Developer

Cloud City Development // San Francisco

An integrated design and so-ware consultancy specializing in web and mobile apps

iOS Dev Break Podcast

iOS Dev Break: 15 minutes of current events, 8ps, and advice for iOS Developers!

Quick Clarifica.on.

This talk is…

1. A brief overview of React Na.ve

2. Good Stuff/Bad Stuff in React Na.ve

3. Reasons why you may want to use React Na.ve…

…or not.

This talk is not…

A tutorial about React Na.ve

A deep-dive into React Na.ve

A mo.va.onal speech about why everyone should drop everything and switch to Javascript and learn a totally new development paradigm

for crea.ng mobile applica.ons

Reminder:

I’m an iOS/SwiV developer.

I run an iOS development podcast.

🤔

OK, but seriously, what is it?

What is this React Na.ve thing I keep hearing about?

A Javascript-based development framework for crea.ng mobile

applica.ons

Not a hybrid app running inside a webview

Not (always) a wrapper around na.ve components

Side note…

This was a big confusion point for me.

You can use ES6

…and some ES7.

Example: async/await

ES6 - Feels a li`le more "SwiVy"

let and const

🙄

JSXJavaScript XML

<View style={styles.headerContainer}> <Text style={styles.headerMessage}>Messages</Text> <TextInput style={styles.textInput} onChangeText={(entryText) => this.setState({entryText})} onSubmitEditing={(event) => this.onGoButtonPressed()} placeholder={'Enter Message'} value={this.state.entryText} returnKeyType="go" /> </View>

state

props

To learn more…

React Na.ve JavaScript Environment

h`ps://facebook.github.io/react-na.ve/docs/javascript-environment.html

JavaScript CSS and Flexbox

The Good, The Bad, and The Amazing

The Good.

It works!

Cross-Plahorm Magic

JavaScript

Debugging with Chrome

Wait, What???

CSS

Components

KeyboardAvoidingView

Build-your-own Components

<View style={Style.sceneContainer}> <View style={Style.subNav}> <Text style={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <View> <ActivityIndicator animating={this.state.animating} color={indicatorColor} size={indicatorSize} /> <Text style={styles.message}>{message}</Text> </View> </View> </View>

<View style={Style.sceneContainer}> <View style={Style.subNav}> <Text style={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <View> <ActivityIndicator animating={this.state.animating} color={indicatorColor} size={indicatorSize} /> <Text style={styles.message}>{message}</Text> </View> </View> </View>

<View style={Style.sceneContainer}> <View style={Style.subNav}> <Text style={Style.subNavText}></Text> </View> <View style={styles.loadingIndicatorContainer}> <LoadingIndicator containerStyle={styles.loadingIndicator} show={true} /> </View> </View>

PropTypes

AddButton.propTypes = { buttonText: PropTypes.string, onPress: PropTypes.func.isRequired, style: PropTypes.oneOfType([ PropTypes.object, PropTypes.array, PropTypes.number, ]), }

<View style={styles.buttonAlign}> <AddButton style={styles.addButton} buttonText="Add a Message" onPress={() => this.onAddMessageButtonPress()} /> </View>

The Bad.

Cross-Plahorm Oddi.es and Irrita.ons

Fonts

Picker

Developing for Android

Op.onal: Javascript

Docs

Pace of React Na.ve Releases(But it’s geing be`er!!!)

The Awesome.

Fetchh`ps://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

🐶

fetchMessages() { const url = 'http://localhost:3000/messages'; fetch(url, { method: 'GET', }) .then((response) => response.json()) .then((json) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(json) }); }) .catch(error => { console.log(error); Alert.alert( 'Refresh Failed', 'An error occurred while retrieving messages.', [ {text: 'OK'} ] ); }); }

fetchMessages() { const url = 'http://localhost:3000/messages'; fetch(url, { method: 'GET', }) .then((response) => response.json()) .then((json) => { this.setState({ dataSource: this.state.dataSource.cloneWithRows(json) }); }) .catch(error => { console.log(error); Alert.alert( 'Refresh Failed', 'An error occurred while retrieving messages.', [ {text: 'OK'} ] ); }); }

JSON

No parsing necessary.

It is the thing you want already.

Excep.on: Extrac.ng Per.nent Data

Flexboxh`ps://facebook.github.io/react-na.ve/docs/flexbox.html

Redux

Refreshing app in iOS Simulator with CMD-R

Automa.c Refresh!

Docs: Run This Example

The Elephant in the Room

Why?

Why should I care?

Who is this for?

Should I use it?

But seriously…

Who are your users?

Who are your clients?

Who are their customers?

Side note…

Who are their customers?

To learn more…

React Na.ve Docs h`ps://facebook.github.io/react-na.ve/docs/geing-started.html

Paul Hudson - Going Na.ve with React h`ps://forwardcourses.com/workshops/64

Tim Garcia - React Na.ve: Mobile Apps Without SwiV Free trial at Forward Courses!

Evan K. Stone

web: h<p://www.cloudcity.io

cloud city blog: h<p://blog.cloudcity.io

blog: h<p://www.interac?velogic.net

twi<er: @interac?vlogic

h`p://www.iosdevbreak.com

iOS Dev Break Podcast

Twi`er: @iOSDevBreak

Subscribe on iTunes/Overcast: iOS Dev Break