React Native: Introduction

React-Native: Introduction
Ilya Ivanov
Mobile Team Lead at Payoneer Team
Ciklum
static.ila@gmail.com
skype: innerself89

About me
• 1.5 years in react-native
• 3 years in web react.js
• 3 years in C#/.NET

What to expect
• React-Native in context
• Give you a vision of React-Native
• Help you avoid silly mistakes I did
when started

Agenda
• Ways to create mobile UI
• React.js in 5 minutes
• React-Native key concepts
• How React-Native works
• Advanced concepts
• React-Native pitfalls

Ways to create mobile UI
1. Native application (Objective-C/Java)
2. Website running within mobile browser
3. Hybrid application (HTML/JS/CSS in WebView)

MountainRoad
Hybrid
Cyclo-cross Cross-country
Types of bikes

Ways to create mobile apps summary
• React-Native and NativeScript are new ways to create native apps
• Each approach is a balance between UX and development speed

React.js in 5 minutes
• Declarative components
• Virtual DOM
• One-way data binding

Declarative components
import React, {Component} from 'react';
class App extends Component {
render() {
return (
<div>
<Title/>
<form>
<div>
<label>Email address</label>
<input type="text"/>
</div>
<br/>
<input type="button" value="Submit"/>
</form>
</div>
);
}
}

Title component
const Title = () =>
<h1>Sign me up!</h1>;

Virtual DOM
div
h1 form
div
label
input
br input
div
Browser DOM
div
h1 form
div
label
input
br input
div
DiffPatch
react-dom
react

One way data binding
Event loop
Handle
Event
Update
state
Re-render
to Virtual
DOM
Reconcile
Browser
DOM

One way data binding
state = {};
render() {
return (
<div>
{
this.state.submitted &&
<span>Thanks for submitting your email!</span>
}
<br/>
<input type="button"
value="Submit"
onClick={() => this.setState({submitted: true})}/>
</div>
);
}
}

React.js summary
• Declarative components
• Return virtual DOM elements
• Virtual DOM
• Abstracts away browser’s DOM
• Change DOM via patches
• One-way data binding
• Unidirectional data flow
• Triggered on explicit state changes (via setState call)

React-Native key concepts
• Ways to bootstrap
• Primitives
• Styling
• Platform-specific code

Bootstrapping your application
react-native init MyApplication
Pros:
• Can use custom native code
• Stable in terms of dev experience
create-react-native-app MyApplication
Pros:
• No need to install Android Studio and Xcode
• Can publish your apps
• You can always eject

Initial app
render() {
return (
<View style={styles.container}>
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}

Primitives
• View – fundamental component for building a UI. Supports layout
with flexbox.
• Similar to div
• Text – all text should be wrapped into Text component.
• Similar to span
• TouchableOpacity – component to handle user press.
• Somewhat similar to button

state = {
count: 0,
};
increment = () =>
this.setState({count: this.state.count + 1});
render() {
return (
<View>
<TouchableOpacity
onPress={this.increment}
>
<Text
{this.state.count}
</Text>
</TouchableOpacity>
</View>
);
}
}

Styling and flexbox
<View style={styles.box}/>
<View style={[styles.box, styles.red]}/>
<View style={styles.box}/>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
box: {
height: 50,
width: 50,
backgroundColor: '#006064',
},
red: {
backgroundColor: 'red',
},
});

Flexbox native/web
• flexDirection defaults
• web: row
• native: column
• flex:
• web: flex-grow, flex-shrink, flex-basis
• flex: 2 2 10%;
• native: flex
• flex: 1;

Platform specific code
//from Home.js
import MyComponent from './MyComponent';

Platform specific code
import {Platform} from 'react-native';
const MyComponent = () =>
<Text>{Platform.OS === 'android' ?
'This is Android' :
'This is iOS'}
</Text>;

Key concepts summary
• Bootstrapping
• Start with Expo, eject if needed
• Primitives
• View => div
• Text => span
• TouchableOpacity => button
• Styling
• Flexbox almost identical to web
• Syntax similar to react-style library styling
• Platform-specific code
• Platform-aware vs platform-agnostic components

React-Native Virtual DOM
View
Text
Android
react-native
react android.view
android.text
iOS
UIView
UILabel
Reconciliation
render() {
return (
<Text>
Welcome to React Native!
</Text>
</View>
);
}
}

JS runtime
environment Bridge Native Code
How React-Native works

Event flow
Source: https://www.slideshare.net/rahatkhanna/introduction-to-react-native-rendering-charts-graphs

Advanced React-Native
• Navigation
• Animation

Navigation
• react-navigation
• JavaScript-based navigation
• react-native-navigation
• Native implementation navigation

Home screen
class Home extends Component {
static navigationOptions = {
title: 'Home',
};
render() {
const {navigation} = this.props;
return <View>
<TouchableOpacity
onPress={() => navigation.navigate('ThreeBoxes')}
/>
</View>;
}
}

const ModalStack = StackNavigator({
Home: {
screen: Home,
},
ThreeBoxes: {
screen: ThreeBoxes,
},
});

Argues about smooth 60 FPS animation.
But is using gif in presentation?

Animation
class AnimatedBox extends Component {
scale = new Animated.Value(1);
animate = () => {
const timing = (toValue) =>
Animated.timing(this.scale, {
toValue,
duration: 2000,
useNativeDriver: true,
});
const onEnd = () => timing(1).start();
timing(6).start(onEnd);
};
render() {
const transform = [{scaleX: this.scale}, {scaleY: this.scale}];
return (
<TouchableOpacity onPress={() => this.animate(this.scale)}>
<Animated.View style={[styles.box, {transform}]}/>
</TouchableOpacity>
</View>
);
}
}

Animation: summary
• Runs on the native thread
• Can achieve 60 FPS even on old Android devices
• Doesn’t use setState (out of react.js component lifecycle)

React-Native pitfalls
• You still might need a native developer
• React-Native sometimes favors performance over code readability
• Be careful with your state management
• Big state updates might lead to performance degradation
• Android and iOS are very different platforms

Summary
• React-Native: no HTML/CSS, native views defined via JavaScript
• Bridge is key part of js  native communication
• Optimistically: you can write great native mobile apps having only
web experience
• Pessimistically: all abstraction leak and React-Native is no exception

Resources
• Getting started with React-Native
• Why not Expo?
• Linking libraries with native code
• Yoga layout engine
• How to use the FlatList Component
• Fetch API
• React Reconciliation
• A Complete Guide to Flexbox
• Repository for the sample application
• Introduction to React-Native performance
• How Airnb is using React-Native
• React-Native workshop
• Animate React Native UI Elements
• React Native: Besides Downsides

React Native: Introduction

More Related Content

What's hot (20)

Similar to React Native: Introduction (20)

Recently uploaded (8)

React Native: Introduction