Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React native buy one get one free?!

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.

  • Login to see the comments

  • Be the first to like this

React native buy one get one free?!

  1. 1. NO EXCUSES, SWITCH TO KOTLIN Thijs Suijten Mobile developer @ Q42 @tsuijten ! "
  2. 2. D.R.Y.
  3. 3. What is React Native?
  4. 4. 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
  5. 5. React Native is not perfect... # Young technology (0.55) $ Future proof? % Less performance & Native feel?
  6. 6. Setup & Lessons learned
  7. 7. Navigation
  8. 8. Native Navigation React Native React Native
  9. 9. 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'/>
  10. 10. ' Performance issues
  11. 11. Don’t render when invisible viewWillAppear viewWillDisappear onPause onResume shouldComponentUpdate
  12. 12. REST API
  13. 13. React Native <Image/> FastImage
  14. 14. Shadows on Android
  15. 15. Upgrading...
  16. 16. 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 (
  17. 17. Benefits of React Native
  18. 18. NativeReact Native
  19. 19. Full stack code sharing
  20. 20. Flexbox layout works great
  21. 21. Hot code reloading
  22. 22.
  23. 23. Android app in 1 week!!
  24. 24. React Native: Thing to consider • Multidisciplinary team • Android first • Everybody is onboard and willing to make concessions
  25. 25. React Native: Buy one, get one free?!
  26. 26. .. thijs@q42.nl / @tsuijten Thanks!

×