NO EXCUSES,
SWITCH TO KOTLIN
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 (0.55)
$ Future proof?
% Less performance
& Native feel?
Setup & Lessons learned
Navigation
Native 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'/>
'
Performance issues
Don’t render when invisible
viewWillAppear
viewWillDisappear
onPause
onResume
shouldComponentUpdate
REST API
React Native <Image/>
FastImage
Shadows on Android
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 and willing to make
concessions
React Native:
Buy one, get one free?!
..
thijs@q42.nl / @tsuijten
Thanks!

React native buy one get one free?!