Lessons from a year of building apps with React Native

React Native
Lessons from a year of building apps with
Ryan Boland

ryanboland.com // tanookilabs.com

ryan@tanookilabs.com

@bolandrm (github, twitter)
I’m Ryan Boland
Web Developer

@ Tanooki Labs

Goals
• Brief introduction to React Native itself

• Short demo on running a React Native app and
the development loop

• Decide whether React Native would be a good
ﬁt for your project

• Sensible blueprint for starting your own React
Native app

My experience thus far
• Viewer + organizer for
ﬁnancial research articles

• Ca-Ching! iOS + Android

Getting up to speed
on React Native
No real prerequisites for getting started, but having
someone on the team who is familiar with Xcode
and/or android studio is a huge help

React Native is a framework that allows you to
build native applications with JavaScript and React
import React, { Component } from 'react';
import { Image, ScrollView, Text } from 'react-native';
class ScrollingImageWithText extends Component {
render() {
return (
<ScrollView>
<Image
source={{uri: 'https://i.chzbgr.com/full/7345954048/h7E2C65F9/'}}
style={{width: 320, height:180}}
/>
<Text>
On iOS, a React Native ScrollView uses a native UIScrollView.
On Android, it uses a native ScrollView.
</Text>
</ScrollView>
);
}
}
https://facebook.github.io/react-native/

Lessons from a year of building apps with React Native

Layout + Styling
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
export default class FlexDirectionBasics extends Component {
render() {
return (
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
);
}
};

Built-in components
• View, Text, Image, TextInput, ScrollView, StyleSheet

• Button, Picker, Slider, Switch

• FlatList, SectionList

• ActivityIndicator, Alert, CameraRoll, Modal, etc…

Android / iOS speciﬁc code
Example: platform speciﬁc button.

• Write Android implementation in Button.android.js

• Write iOS implementation in Button.ios.js
import Button from 'Button';
...

Fast Development
• Quick development loop - refresh the app
immediately in most cases (no waiting for
compile)

• The majority of your app’s code will be reused
between Android and iOS

• Take advantage of large JavaScript package
ecosystem

Your team can get
up to speed quickly
• Much of the work can be done by folks with
little native development experience

• Framework is made of simple, easy to use
components

No lock-in
• You can use React Native as much or as little
as you’d like (maybe you just want to use it for
settings or form pages)

• If you have a major component in your app,
you can write it in native code

• If the team outgrows react native, it can be
phased out over time
Discord article -> https://blog.discordapp.com/why-discord-is-sticking-with-react-native-ccc34be0d427

Downsides
• Many diﬀerent technologies being used
simultaneously

• The build process is more complicated

• Updates can be painful (both React Native and
ios/android updates)

• Android support is lagging a bit

Spinning up your
ﬁrst React Native
app

Airbnb on Redux
“…Redux is notorious for its boilerplate and
has a relatively difﬁcult learning curve. We
provided generators for some common
templates but it was still one of the most
challenging pieces and source of confusion
while working with React Native.”
https://medium.com/airbnb-engineering/react-native-at-airbnb-the-technology-
dafd0b43838

Component “pods”
// components/index.js and components/Button/index.js
// allow for the following:
import Button from ‘components’

import React from 'react'
import Button from 'app/components/Button'
import {shallow} from 'enzyme'
describe('Button component', () => {
it('is unclickable, renders with lower opacity with disabled prop', () => {
const wrapper = shallow(
<Button
disabled
text="Disabled"
/>
)
expect(wrapper).toMatchSnapshot()
})
})
Component Snapshot testing
Button.test.js

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Button component is unclickable, renders with lower opacity with disabled prop 1`] = `
<TouchableOpacity
activeOpacity={0.5}
disabled={true}
style={
Array [
Object {
"width": "100%",
},
undefined,
]
}
>
<Component
style={
Array [
Object {
"backgroundColor": "#49718C",
"borderRadius": 2,
"padding": 12,
},
Object {
"opacity": 0.6,
},
Object {},
]
}
>
<inject-Text-with-settings
style={
Array [
Object {
"color": "#FFFFFF",
"fontFamily": "SourceSansPro-SemiBold",
"textAlign": "center",
},
undefined,
]
}
>
Disabled
</inject-Text-with-settings>
</Component>
</TouchableOpacity>
`; Button.test.js.snap
“Golden master testing”

Sharing your App
Purpose Server Distributed via
Debug Local development Staging n/a
Internal
Internal / stakeholder

testing
Staging
Fabric Beta, hockey
app, etc
Beta/QA
Final approval / early
adopter testing
Production
Fabric Beta, hockey
app, etc
Release Release to public Production App Store

App Versions
App identiﬁer -> com.tanookilabs.street-cuts.internal
react-native-device-info allows us to pull out the app
version from the app identiﬁer:
import DeviceInfo from 'react-native-device-info'
export const isRelease = DeviceInfo.getBundleId().split('.').includes('release')
export const isBeta = DeviceInfo.getBundleId().split('.').includes('beta')
export const isInternal = DeviceInfo.getBundleId().split('.').includes('internal')
export const isDebug = DeviceInfo.getBundleId().split('.').includes('debug')
Use react-native-schemes-manager when creating non-
standard versions (e.g. internal/beta)

Continuous Integration
• Tests and linting are run for all pull requests

• Each push to master runs tests, linting, and builds iOS
and android internal version of the app

• Beta and release versions of the apps can be built on
demand

Long Term
Maintenance
Update regularly!

https://github.com/ncuillery/rn-diﬀ/

React Native is a game changer
for both developers and their
clients!

Further exploration
• Using CodePush to update production applications
without submitting through the app store processes

• Using TypeScript or Flow to avoid runtime errors

Thanks! Questions?
ryanboland.com // tanookilabs.com

ryan@tanookilabs.com

@bolandrm (github, twitter)
Tanooki Labs
Slides ->

Lessons from a year of building apps with React Native

More Related Content

What's hot (20)

Similar to Lessons from a year of building apps with React Native (20)

Recently uploaded (20)

Lessons from a year of building apps with React Native