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?!
..
[email protected] / @tsuijtenThanks!
Top Related