Nobody likes writing the same code twice; it’s tedious, error prone, and just not that fun. Sadly this still happens a lot when developing an app for iOS and Android. In this session you’ll learn how you can leverage the power of React Native to share code on both platforms. We have done three large projects in React Native, with over 1 million downloads. All three projects use React Native differently, from integration into an existing app to a pure React Native setup. I’ll share the things we considered when choosing React Native, what architectures we used, and what impact React Native has on your team. After this talk, you will know if React Native is a good fit for your (future) project, how much fun it is to code in React Native (coming from Kotlin or Java) and what architecture you might want to use. You do not need to have React (Native) experience to follow this talk.

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!