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

NO EXCUSES, SWITCH TO KOTLIN

t

Thijs Suijten Mobile developer @ Q42

@tsuijten

D.R.Y.

What is React Native?

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

React Native is not perfect...👶 Young technology

🤞 Future proof?

🐌 Less performance

📱 Native feel?

Setup & What we learned

React Native Integration with

Existing Apps

>create-react-native-app AwesomeProject

Navigation

React Native React Native

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'/>

React Native Image

FastImage

Shadows on Android

Native module

viewWillAppear viewWillDisappear

onPause onResume

shouldComponentUpdate

Upgrading...

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

😢

Benefits of React Native

NativeReact Native

Full stack code sharing

Flexbox layout works great

Hot code reloading

❤

Android app in 1 week!!

React Native: Thing to consider

• Multidisciplinary team • Android first • Everybody is onboard

React Native: Buy one, get one free?!

..

thijs@q42.nl / @tsuijtenThanks!