An Introduction to React Native

Jan Monschke / @thedeftone / github.com/janmonschke

Frontend Engineer at SoundCloud

Who here has built a native mobile app before?

Dev workflow: web > mobile

• Just refresh the page
• Auto-Reload
• Hot Module Reload

Hybrid mobile apps

Hybrid mobile apps

• Web + Mobile not integrated
• Look & Feel
• No real cross-mobile solution
• Performance

React Native

develop web-ish, run natively

import React from 'react';

class Slide extends React.Component {
  render() {
    const { title, body } = this.props;

    return (
      <div>
        <h2>{title}</h2>
        <p>{body}</p>
      </div>
    );
  }
}

import React, { View, Text } from 'react-native';

class Slide extends React.Component {
  render() {
    const { title, body } = this.props;

    return (
      <View>
        <Text>{title}</Text>
        <Text>{body}</Text>
      </View>
    );
  }
}

.slide {
  display: flex;
  align-items: 'center';
  justify-content: 'center';
}

	<div className="slide">(...)</div>

import React, { View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center'
});

<View style={styles.slide}>(...)</View>

How does it work?

• Write code like in any other React app
• React can render arbitrary kind of view systems
• React Native has JS wrappers for native views and modules

View, Image, Navigator, List, Loading Indicator...

Cross-Platform

• Views render on both platforms
• Respecting platform environment
• look & feel, specific APIs
• Simple way to write platform-specific code

import SlidesMenu from './slides-menu';

Packager => Platform => slides-menu.ios.js,
                        slides-menu.android.js
				

Benefit from mobile- AND web-community

• Use existing native libraries
• Provide native interfaces to JS code
• Profit from NPM
• Share code with your web projects

Downsides

• XCode needed to build iOS apps
• React lock-in
• Code-signing, distribution profiles...
• Still dependend on app stores for distribution

What about fast deploys like on web?

(bug fixes, styling fixes...)

OTA updates!

Is it production-ready®?

• "Just over one year old"
• Battle-tested in FB apps (Ads, Groups)
• Used by many companies already (Runtastic, SoundCloud...)
• Only "battle-tested" code is released

Benefits

• Development speed
• Product reach
• (even with only web people)
• learn new things <3 mixed teams

Want to know more?

• facebook.github.io/react-native
• berlinjs-slack.herokuapp.com (#reactnative)

Thanks