Cross-Platform React Native What does that really mean? Connor McEwen 

About Me cmcewen @connormcewen Lead Engineer, Emerging Products Using React Native since the beta 

Flare • Small business community app • 100% React Native • Featured in App Store + Google Play Store 

RN Cross-Platform …We’re not chasing “write once, run anywhere.” We call this approach “learn once, write anywhere.” iOS 

How it works http://tadeuzagallo.com/blog/react-native-bridge/ iOS … Same API 

How it works class Hello extends React.Component { render() { return( Hello world! ) } } - (UIView *)view { return [RCTView new]; } @Override public ReactViewGroup createViewInstance(Them return new ReactViewGroup(context); } 

The Dream 

Reality 

Why? • Design choices - material design • Phone features - hardware back button • Different APIs - permissions • Performance • Layout 

How • .ios.js + .android.js • inline Platform.OS class Hello extends Component { render() { return( I’m iOS! ) } } class Hello extends Component { render() { return( I’m Android! ) } } class Hello extends Component { render() { if (Platform.OS === ‘ios’) { return( I’m iOS! ) } else { return( I’m Android! ) } } } 

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 }, 

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 

Key differences • Material Design • Touchables • Permissions APIs 

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 

Thanks! @connormcewen