React Native enables building applications with JavaScript and React targeting different platforms by using native UI building blocks. It was written by Facebook, released in 2015 as open-source software, and is community driven. Major companies like Facebook, Instagram, Tesla, Uber and Wix use React Native. React Native uses the same fundamental UI building blocks as traditional mobile development (e.g. FrameLayout, TextView, ImageView on Android), but instead of writing native code, you write JavaScript and React code. This architecture allows sharing code across platforms while retaining native speeds through the React Native bridge.

1. Lev Vidrak
Mobile Developer at Wix.com
Introduction to React Native
levv@wix.com twitter@levvidrak linkedin/levvidrak github.com/buttershub

2. Java/Kotlin
Android SDK,
Gradle…
JavaScript
HTML, CSS,
React…
Obj-C/Swift
iOS SDK
UIKit, CocoaPods...

3. Hi.
I am Lev
Mobile Developer at

4. React Native enables building applications with
JavaScript and React targeting different platforms by
using native UI building blocks.

5. § Written by Facebook
§ Released in 2015
§ Open-source
§ Community driven
§ Supported platforms:
React Native

6. Who’s using React Native?
Facebook FB Analytics FB Ads Manager Instagram Skype Office
Pintrest
Tencent QQ
Tesla SoundCloud Walmart Bloomberg Baidu
Uber Eats Gyroscope Adidas Glitch Discord Airbnb Wix

7. FrameLayout
TextView
ImageView

8. import React, {Component} from 'react';
import {Image, Text, TouchableOpacity, View, StyleSheet} from 'react-native';
export default class App extends Component {
constructor() {
super();
this.state = {isLiked: false};
}
_onPressButton = () => this.setState({isLiked: !this.state.isLiked});
render() {
const icon = this.state.isLiked
? <Image source={require('../img/like.png')}/>
: <Image source={require('../img/dislike.png')}/>
return (
<View style={styles.container}>
<Text style={styles.text}> The Amazing App </Text>
<TouchableOpacity onPress={this._onPressButton}>
{icon}
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'powderblue'
},
text: {
fontSize: 20,
fontWeight: 'bold',
},
});

9. § UI = ƒ(State)
§ JSX – a tag based syntax to describe what the UI should look like
§ React Native provides us a set of Native UI Components & Native Modules that can be
used from JavaScript
React Native Architecture

10. Project Structure

11. Platform Specific JS Code
§ index.android.js
§ index.ios.js
require (index.js)

12. Metro (JS Bundler)
JS Java
Compiler
Obj-C
NativeJavaScript VM
RN Bridge

13. React Native Architecture
JavaScript VM
JavaScriptCore
Native
JS code
Single Thread
ObjC / Java code
Main UI Thread
Other BG threads
RN Bridge

14. React Native Architecture
JavaScript Native
Native Touch Event
Logic - Change Icon
Update The ImageView
RN Bridge
_onButtonPress...

15. Reconciliation & The Virtual DOM
Virtual DOM Native HierarchyUpdated Virtual DOM
Diff

16. Metro & JS Bundler
§ Live & Hot Reloading (Instant Run)
§ CodePush

17. CodePush
Technology by Microsoft that allows us to deploy the JS bundle OTA without
passing through app stores.
§ Enables continues deployment in mobile

18. Advantages
§ Cross Platform
• Speed up development process => Saves time/money
• Code and resource sharing with Web
§ JSX == Unified declarative layout language
§ Hot & Live Reloading
§ CodePush == Continues Deployment
§ Easier to learn React Native than Native

19. Downsides
§ New Framework
• now v0.57
• Often upgrades
§ Performance
• Startup time
§ Incomplete
• 64-bit
• Does not covers the whole iOS & Android SDK
Challenges

20. Open Source React Native Libraries By Wix

21. Thanks.
levv@wix.com twitter@levvidrak linkedin/levvidrak github.com/buttershub