Building with

React Native

Simon Ayzman
Mobile Apps Developer @ Bloomberg
Run-Down
1. Introductions 5. Advanced Usage
2. What is RN? 6. Bloomberg Toolset
3. Pros/Cons 7. Awesome Links!
4. Basic Principles 8. Credits
5. DEMO! 9. Fin!
Introductions

● Mobile App Developer @ Bloomberg

● hackNY Fellow 2015 & Mentor 2016/2017
● CS Adjunct Lecturer at Hunter College (CUNY)
● Long-time dancer in ballet, ballroom, & modern
● Beginner martial artist & improviser
What is React Native?

“An open source, cross-platform framework for

building native mobile apps with JavaScript and
React using declarative components.”

-- Facebook’s React Native Documentation

React Native Framework
Pros

● Multi-platform with native wrappings

● Vibrant open source, developer community
● Faster development time, day-to-day & over time
● Declarative flows aid code comprehension
● Great debugging tools for logic and rendering
Cons

● Technically, still in beta

● Native code needs native knowledge
● Javascript (and its ~wonderful~ ecosystem)
● Minor platform divergences
Basic Principles
● Components
○ Props vs. State
■ State represents internal component data
■ Props represent data passed from parent
○ Lifecycle
● Styling
○ Stylesheets are CSS-like; Flexbox support
Styling
import { StyleSheet } from ‘react-native’;

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
},
headerView: {
marginTop: 15,
borderWidth: 10,
borderColor: ‘red’,
},
headerText: {
color: ‘#111111’,
fontSize: 65,
fontWeight: 'bold',
},
});
Components
class AwesomeComponent extends Component {
render() {
return (
<View style={styles.container}>
<Image
source={{ uri: ‘www.coolimages.com/123456’ }}
style={styles.header}
/>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit your index.js file.
</Text>
</View>
);
}
}
Component State
class AwesomeComponent extends Component {
constructor() {
super();
this.state = { isLoading: false };
}

fetchData() {
this.setState({ isLoading: true });
fetch(URL)
.then(res => this.setState({ isLoading: false }));
}

render() {
const { isLoading } = this.state;
const loadingDependentText = isLoading ? ‘Hi’ : ‘Bye’;
return <Text>{loadingDependentText}</Text>
}
}
Component Props
class AwesomeComponent extends Component {
static propTypes = {
data: PropTypes.arrayOf(PropTypes.number).isRequired,
shouldShowData: PropTypes.bool,
};

static defaultProps = {
shouldShowData: true,
};

render() {
const { data, shouldShowData } = this.props;
if (!shouldShowData) { return null; }
const elements = transformDataIntoElements(data);
return <View>{elements}</View>
}
}
Component Lifecycle
class AwesomeComponent extends Component {
componentDidMount() { // Lifecycle
this.fetchStuffFromTheInterwebs()
}

componentWillReceiveProps(nextProps) { // Lifecycle
this.doOtherStuffWithProps(this.props, nextProps);
}

fetchStuffFromTheInterwebs() {
fetch(‘www.geegle.com?q=c001+stUffZ’)
.then((response) => doStuff(response))
.catch((error) => console.error(“ERROR”))
}

render() { … }
}
DEMO!
Installation Requirements

● node (since we’re using Javascript)

● yarn (an alternative to npm)
● create-react-native-app (as global npm module)
● Expo app on your smartphone
Startup Requirements
● Try building it yourself:

$ create-react-native-app MIT-IPHY
$ cd MIT-IPHY
$ yarn start

● But for a guided experience:

$ git clone https://github.com/simonayzman/MIT-IPHY.git
$ cd MIT-IPHY
$ yarn install
$ git checkout stage0
$ yarn start
Quick Run

Open Expo app, scan the QR code output from

the npm start script, and watch the app come to
life...
...a bit anti-climactic, I know. Try changing
the text in App.js yourself! Reload! Voila!
Demo Progression (I)
● start/stage0 to stage1
○ Added an extra line of text to the screen!
● stage1 to stage2
○ Created a simple HomeFeed stub component
● stage2 to stage3
○ Added a list of stub “cells” representing gifs
Demo Progression (II)
● stage3 to stage4
○ Added helpers and created directory structure
○ Added header, footer, and multiple columns
● stage4 to stage5
○ Add giphy API client to app
○ Added fetch related state to HomeFeed
Demo Progression (III)
● stage5 to stage6
○ Refactored gif list into separate component
● stage6 to stage7
○ Added data & limit props to GifList
● stage7 to stage8
○ Added MIT gifs toggle to HomeFeed
Demo Progression (IV)
● stage8 to stage9
○ Added new app images
○ Updated gif list layout and individual gif styling
○ Added automatic layout animations
● stage9 to stage10/finish
○ Added sharing functionality on gif tap
Advanced Usage

● Redux, an application state management system

● Navigation, a must for most modern apps
● Styling frameworks, for simpler view styling
● Native modules, for when the JS is not enough
● React Native API galore!
Bloomberg Toolset (I)

● Data management
○ redux-thunk, side effects for simple cases
○ redux-saga, side effects with robustness
● Navigation
○ react-navigation
Bloomberg Toolset (II)

● Styling
○ styled-components, so easy with props!
● Testing
○ storybook, easy to test component variations!
○ jest, ok with testing business logic
Awesome Links
● Official React Native Documentation
● Chain React 2017 Conference Videos
● awesome-react-native GitHub Repo
● Rewriting a Large Hybrid App with React Native
● Ignite React Native App Boilerplate Generator
● MIT-IPHY Expo & Codebase
Credits

● React Native by Artyom Trityak

● A Tour of React Native by Tadeu Zagallo
● Intro to React Native by Jay Garcia
● React Native by Varun Vachhar
● React Native Introduction by Kobkrit Viriyayudhakorn
FIN

(Thank you!)