Building withReact Native

Simon AyzmanMobile Apps Developer @ Bloomberg

Run-Down

1. Introductions

2. What is RN?

3. Pros/Cons

4. Basic Principles

5. DEMO!

5. Advanced Usage

6. Bloomberg Toolset

7. Awesome Links!

8. Credits

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

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

Componentsclass 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 Stateclass 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 Propsclass 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 Lifecycleclass 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!

● node (since we’re using Javascript)

● yarn (an alternative to npm)

● create-react-native-app (as global npm module)

● Expo app on your smartphone

Installation Requirements

● Try building it yourself:

● But for a guided experience:

Startup Requirements

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

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

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!

Quick Run

● 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 (I)

● 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 (II)

● 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 (III)

● 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

Demo Progression (IV)

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

(Thank you!)

FIN