react native copy remco - tweakimg.net suijten - react native.pdf · react native bridge // js code...

31

Upload: others

Post on 04-Jun-2020

20 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 2: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

NO EXCUSES, SWITCH TO KOTLIN

t

Thijs Suijten Mobile developer @ Q42

@tsuijten

Page 3: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

D.R.Y.

Page 4: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 5: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

What is React Native?

Page 6: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

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

export default class App extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.text}>Hello Tweakers!</Text> </View> ); } }

const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, text: { fontSize: 30, } });

Build native apps with React & JS

Page 7: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

React Native is not perfect...👶 Young technology

🤞 Future proof?

🐌 Less performance

📱 Native feel?

Page 8: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 9: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Setup & What we learned

Page 10: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

React Native Integration with

Existing Apps

>create-react-native-app AwesomeProject

Page 11: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Navigation

React Native React Native

Page 12: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Native navigation

// Native Kotlin code override fun receivedEvent(event: Event) { when (event.id) { "next" -> startActivity(...) } }

React Native Bridge

// JS code <Button onPress={() => this.sendEvent('next')} title='Verder'/>

Page 13: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 14: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

React Native Image

FastImage

Page 15: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Shadows on Android

Page 16: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 17: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 18: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Native module

viewWillAppear viewWillDisappear

onPause onResume

shouldComponentUpdate

Page 19: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React
Page 20: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Upgrading...

Page 21: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

sed -i '' 's/#import <RCTAnimation\\/RCTValueAnimatedNode.h>/#import \"RCTValueAnimatedNode.h\"/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h

sed -i '' 's/#import <fishhook\\/fishhook.h>/#import <React\\/fishhook.h>/' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m

😢

Page 22: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Benefits of React Native

Page 23: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

NativeReact Native

Page 24: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Full stack code sharing

Page 25: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Flexbox layout works great

Page 26: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Hot code reloading

Page 27: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Page 28: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

Android app in 1 week!!

Page 29: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

React Native: Thing to consider

• Multidisciplinary team • Android first • Everybody is onboard

Page 30: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

React Native: Buy one, get one free?!

Page 31: React Native copy remco - tweakimg.net Suijten - React Native.pdf · React Native Bridge // JS code  this.sendEvent('next')} title='Verder'/> React

..

[email protected] / @tsuijtenThanks!