React native: building shared components for Android and iOS

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

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

Learn once, write anywhere
Sound familiar?

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

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

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

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',
},
});

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

@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;
}
};
}

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

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

How do we track stats and report
errors?

@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

Caveats
Debugging
Performance Issues
Learning Curve for initial setup/configuration

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

Monorepo
Separate development environment
Debugging works
Demo App Available

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...

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

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

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

React native: building shared components for Android and iOS

More Related Content

Similar to React native: building shared components for Android and iOS (20)

Recently uploaded (20)

React native: building shared components for Android and iOS

Editor's Notes