The document discusses the benefits and drawbacks of using React Native for mobile app development. It highlights the ease of creating native apps with JavaScript, sharing code, and the quick development process, while also addressing performance issues and the need for a multidisciplinary team. The author, Thijs Suijten, shares insights from personal experience and encourages others to adopt Kotlin for mobile development.

2. NO EXCUSES,
SWITCH TO KOTLIN
Thijs Suijten
Mobile developer @ Q42
@tsuijten
! "

3. D.R.Y.

5. What is React Native?

6. 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

7. React Native is not perfect...
# Young technology (0.55)
$ Future proof?
% Less performance
& Native feel?

9. Setup & Lessons learned

10. Navigation

11. Native Navigation
React Native React Native

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

14. '
Performance issues

15. Don’t render when invisible
viewWillAppear
viewWillDisappear
onPause
onResume
shouldComponentUpdate

16. REST API

17. React Native <Image/>
FastImage

18. Shadows on Android

19. Upgrading...

20. 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
(

21. Benefits of React Native

22. NativeReact Native

23. Full stack code sharing

24. Flexbox layout works great

25. Hot code reloading

26. ❤

27. Android app in 1 week!!

28. React Native: Thing to consider
• Multidisciplinary team
• Android first
• Everybody is onboard and willing to make
concessions

29. React Native:
Buy one, get one free?!

30. ..
thijs@q42.nl / @tsuijten
Thanks!