React Native allows developers to write mobile apps using React and share common code between Android and iOS. The document discusses building basic components in React Native, passing props between components, styling components, tracking events natively, debugging challenges, and managing shared code in a monorepo. It concludes that React Native has a low barrier to entry given the popularity of React, provides a native-like experience, and improves developer velocity by enabling write once, run anywhere code sharing across platforms.

1. React Native: Building
Shared Components for
Android and iOS
Calum Gathergood
https://www.linkedin.com/in/calumgathergood/@cgathergood

2. React Native
Learn once, write anywhere: Build mobile apps
with React
https://facebook.github.io/react-native/

3. Learn once, write anywhere
Sound familiar?

4. Write once debug everywhere

7. StackOverflow Official Developer
Survey 2017
https://insights.stackoverflow.com/survey/2017
72% of respondents labelled themselves as
Web Developers (23% mobile developers)
Javascript is the most popular language for
the 5th year in a row
React is the most loved technology of 2017

8. Calum’s Unofficial Domain Developer
Survey 2017
5 Android Developers
8 iOS Developers
30 React Developers

9. Motivations
Don’t trust the sales pitch
Understand the technology
Validate how useful RN can be with our ‘brownfield’
apps

10. Agent Profiles

12. Basic Component import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
export default class MyComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Hello Android Meetup!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
},
paragraph: {
fontSize: 18,
textAlign: 'center',
color: '#34495e',
},
});

13. Props
// Main Component
<WelcomeComponent name='Calum' />
// Welcome Component (inside render method)
<Text>Welcome {this.props.name}</Text>

14. <AgentProfile agentId={1234} />

15. @Override
protected String getMainComponentName() {
return "AgentProfile";
}
@Override
protected ReactActivityDelegate createReactActivityDelegate() {
return new ReactActivityDelegate(this, getMainComponentName())
{
@Nullable @Override
protected Bundle getLaunchOptions() {
Bundle initialProps = new Bundle();
initialProps.putString("agentId",
getIntent().getStringExtra(EXTRA_AGENT_PROFILE_ID));
return initialProps;
}
};
}

16. private let props: [String: String]
private lazy var rootView: RCTRootView = {
let releaselocation = RCTBundleURLProvider.sharedSettings().jsBundleURL()
return RCTRootView(bundleURL: releaselocation, moduleName: "AgentProfile",
initialProperties: self.props, launchOptions: nil)
}()
init(agencyId: Int) {
var buildProps: [String: String] = [:]
buildProps["agentId"] = String(describing: agencyId)
self.props = buildProps
super.init(nibName: nil, bundle: nil)
}

18. enquiryInput: {
fontSize: 18,
marginTop: 20,
color: '#000',
fontFamily: typography.FONT.REGULAR,
...Platform.select({
ios: {
borderRadius: 2,
borderWidth: 1,
borderColor: '#A9AFBA',
},
android: {
marginTop: 18,
},
}),
},
Styling Components

19. How do we track stats and report
errors?

20. @ReactMethod
public void trackEvent(String category, final
String action) {
trackingManager.event(category, action);
}
trackEvent(categoryName, eventName) {
TrackingModule.trackEvent(categoryName,
eventName);
}
@objc(trackEvent:eventName:)
public func trackEvent(category: String, eventName: String) {
TrackingController.trackEvent(category, eventName: eventName)
}
Native Bridging
Implementing tracking events
natively:
- Create a native tracking module
- Define methods (match name
with JS)
- Use parameters with existing
tracking managers

21. Caveats
Debugging
Performance Issues
Learning Curve for initial setup/configuration

22. Managing multiple components in
a monorepo
"dependencies": {
"react-native-monorepo": "1.2.3",
...
}

23. Monorepo
Separate development environment
Debugging works
Demo App Available

24. Our Conclusion
Low barrier for entry (we have heaps of React devs)
Better than a webview - “I can’t believe it’s not Native”
You don’t have to commit to using React Native
Developer Velocity - Write once run everywhere...

25. Future of RN - React as a platform
React Primitives - Web + Mobile + VR
Codepush
Further development of native components

26. React Native: Bringing modern web techniques to mobile (Facebook)
Powering UberEats with React Native and Uber Engineering
Leland Richardson - React Native in the "Brown Field" - React Conf 2017
How Airbnb Is Using React Native
React Native at Instagram
create-react-native-app
Try it out now - https://expo.io/
Useful Resources

27. Thanks!
https://www.linkedin.com/in/calumgathergood/@cgathergood