Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Platform React Native

Connor McEwen
September 14, 2016

Cross-Platform React Native

Connor McEwen

September 14, 2016
Tweet

More Decks by Connor McEwen

Other Decks in Technology

Transcript

  1. Flare • Small business community app • 100% React Native

    • Featured in App Store + Google Play Store
  2. RN Cross-Platform …We’re not chasing “write once, run anywhere.” We

    call this approach “learn once, write anywhere.” iOS
  3. How it works class Hello extends React.Component { render() {

    return( <View> <Text>Hello world!</Text> </View> ) } } - (UIView *)view { return [RCTView new]; } @Override public ReactViewGroup createViewInstance(Them return new ReactViewGroup(context); }
  4. Why? • Design choices - material design • Phone features

    - hardware back button • Different APIs - permissions • Performance • Layout
  5. How • .ios.js + .android.js • inline Platform.OS class Hello

    extends Component { render() { return( <View> <Text>I’m iOS!</Text> </View> ) } } class Hello extends Component { render() { return( <View> <Text>I’m Android!</Text> </View> ) } } class Hello extends Component { render() { if (Platform.OS === ‘ios’) { return( <View> <Text>I’m iOS!</Text> </View> ) } else { return( <View> <Text>I’m Android!</Text> </View> ) } } }
  6. Our stats • 166 total files in js directory •

    4 .android.js + 4.ios.js = 4.8% • 37 .js use the Platform API = 22% imageContainer: { paddingTop: Platform.OS === 'ios' ? 5 : 10 },
  7. Timeline Started working on Flare on iOS Aug. 2015 RN

    Android released Sep. 2015 Initial Flare Android version Mar. 2016 iOS release + feature May 2016 Oh shit Android bugs + perf June 2016 Android release June 2016 Google feedback to get featured July 2016 Android feature Aug 2016
  8. Lesson Learned • Test both platforms early • Don’t use

    negative absolute positions • You might need to make native modules for parity • Things have gotten much better