Cross-Platform React Native

1. Cross-Platform React Native What does that really mean? Connor McEwen
2. About Me cmcewen @connormcewen Lead Engineer, Emerging Products Using React Native since the beta
3. Flare • Small business community app • 100% React Native • Featured in App Store + Google Play Store
4. RN Cross-Platform …We’re not chasing “write once, run anywhere.” We call this approach “learn once, write anywhere.” iOS
5. How it works http://tadeuzagallo.com/blog/react-native-bridge/ iOS … Same API
6. 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); }
7. The Dream
8. Reality
9. Why? • Design choices - material design • Phone features - hardware back button • Different APIs - permissions • Performance • Layout
10. 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> ) } } }
11. 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 },
12. 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
13. Key differences • Material Design • Touchables • Permissions APIs
14. 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
15. Thanks! @connormcewen