React Native

for

Beginners

May 28, 29  2018

Internal Training

Who Am I?

  • Joseph Khan
  • Principal Engineer
  • Developer of Coupie
  • Author
  • From Guwahati...

jkhan@yodlee.com

Who Are You?

How will we proceed?

  • Slides
  • Lectures
  • Examples & Hands On

What will we cover?

  • Intro to React Native & Inspiration
  • Turning the clock back - Basics of JavaScript
  • ES6 concepts
  • Installing the necessary tools
  • React Native basics
  • CSS Flexbox and Styling
  • Deep Dive into React Native - advanced concepts
  • Build a real native mobile app
  • Debugging

What is React Native

UI Framework to build pure native mobile apps using JavaScript and React (Native)

It's an extension of the React Framework

Provides a suite of components and API's to build native iOS and Android mobile apps.

Developers need not know Java or Swift to write beautiful native mobile apps.

Learn Once, Write Everywhere

Remember...

React (for web)

React Native (for mobile)

Hybrid Mobile App Development

Web Developers build mobile apps using technologies that they are aware of - HTML, CSS, JavaScript

Technologies like Cordova/Phonegap, Ionic help them convert a web application to a mobile application

Application

 

HTML

CSS

JavaScript

Cordova/Phonegap

Ionic

Difference from Phonegap/Cordova

Phonegap/Cordova was the go to technology for Javascript/Web developers to build mobile apps prior to React Native. It still is..

eg. Coupie, PFM mobile apps

  • Actually a web application packaged inside a native wrapper
  • HTML, CSS & JavaScript running inside a web browser (webview)
  • Performance is not great
  • Limited access to device API's
  • HTML, CSS & JavaScript running on the web browser has never been able to match Native performance
  • Companies like Facebook, Walmart have moved from Hybrid mobile development to pure native mobile app development.

Challenges

How React Native Differs

Web/Hybrid

Android

iOS

React Native

Gives you all the necessary components that will be compiled to their respective Android or iOS counterpart under the hood

<div>

<View>

<input />

<TextInput>

We do not use web elements like <div>, <span>, <p> etc

EditText

UITextView

UIView

Android.View

Small Demo

To inspire you!

Setting Up React Native Development

Installing the necessary tools

1. NodeJS & NPM - https://nodejs.org/en/

Why? - React Native uses Node Package Manager (npm) to install/uninstall modules and all its dependency management. npm is available when NodeJS is installed.

2. Watchman - keeps a watch on file changes

3. React Native CLI (Command Line Interface)

More Details: https://facebook.github.io/react-native/docs/getting-started.html

npm install -g react-native-cli

4. Integrated Development Environment

  • XCode - Mac
  • Android Studio - Mac & Windows

5. Simulators - for development & debugging

  • iOS Simulators (Mac only)
  • Android Emulators (Mac & Windows)

Command Line Interface (CLI)

  • react-native init ProjectName
  • react-native run-android
  • react-native run-ios
  • npm start, react-native start
  • If you have yarn
    • yarn start
    • yarn add some_module

Let's create our first

React Native

project

react-native init AwesomeProject

Running our First Project

  • Run the App on iOS Simulator
  • Run the App on Android Emulator
  • Real device?? - we will do later

Congratulations!

We have successfully created our first RN application

Before we go crazy with React Native

Let's learn some JavaScript & ES6 basics

JavaScript

  • Variables
  • Scope of Variables
  • Looping
  • Operators
  • Functions
  • Objects

ES6 (ES2015) JavaScript

  • Variables - let & constants
  • Scope of variables
  • Operators
  • Looping
  • Functions & Arrow Functions
  • Default values for function parameters
  • Getters & Setters
  • Classes and inheritance
  • Accessing superclass methods/properties
  • Method overriding
  • ES6 modules - import & export
  • ES6 Template Strings
  • Spread operator (...)
  • Destructuring

React Native basics

Lets continue with our First Project

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

What goes inside a React Native Component

Importing modules (ES6 style)

Our component class

JSX - the view part that gets rendered

Styles declaration

JSX

const element = <h1>Hello, world!</h1>;
  • This funny tag syntax is neither a string nor HTML.
  • It is called JSX
  • It is a syntax extension to JavaScript
  • JSX produces React elements

You define a React element that will be rendered

const name = "Joseph";
const element = <h1>Hello {name}</h1>;

ReactDOM.render(element, document.getElementById('root'));

CodePen Try: https://codepen.io/pen?&editors=0010

You can embed JavaScript expression in JSX. 

You can do almost anything (eg. make a function call) from a JSX expression

React Syntax

2 types of data that control a component

  • Props
  • State

Understanding Props

  • Passing Data between components

  • Parent passes data to child using props

  • Fixed throughout the lifetime of the component

class Greeting extends Component {
  render() {
    let {name} = this.props;
    return (
      <Text>Hello {name}</Text>
    );
  }
}


export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Greeting name="Joseph" />
        <Greeting name="Amit" />
      </View>
    );
  }
}

All components provided by React Native uses props.

eg. <Image />, <TextInput />

Understanding State

  • state lives inside the component, private to it

  • state represents the data that is going to change

  • whenever state changes, the component re-renders

class Greeting extends Component {
  constructor(super) {
      super(props);
      this.state = {
          name: "Joseph"
      }

      setTimeout(function() {
          //update the state after 1s
          this,setState({name: "Ayaan"});
      }.bind(this), 1000);
  }
  render() {
    return (
      <Text>Hello {this.state.name}</Text>
    );
  }
}

Our First React Component

Let's create a very basic component

And understand these concepts

Greeting component & then make it blinking

class Greeting extends Component {
  render() {
    let {name} = this.props;
    return (
      <Text>Hello {name}!</Text>
    );
  }
}

//Root App
export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Greeting name="Joseph" />
        <Greeting name="Amit" />
      </View>
    );
  }
}

Component Life Cycle

Lifecycle phases that a component goes through

Initialization

Mounting

Update

UnMounting

Component Life Cycle

Lifecycle callbacks/methods

Initialization

Mounting

Update

UnMounting

  • componentWillMount()
  • render()
  • componentDidMount()
  • constructor(props)
  • componentWillUnMount()
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
  • componentWillReceiveProps(nextProps)

Flexbox Styling basics

React Native does not use CSS

It uses an object based CSS kind of declaration to style component

import {StyleSheet} from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center'
    }
});


render() {
    return (
        <View style={styles.container}></View>    
    );
}

Lets see few example of styling...

Flexbox Layout

By default components are placed in a column layout or vertically

flexDirection: 'column'

flexDirection: 'row'

Main Axis

Cross Axis

Cross Axis

Main Axis

justifyContent

justifyContent

alignItems

alignItems

Deep Diving into React Native

Best place to learn..

  • React Native official docs
  • React official docs

http://facebook.github.io/react-native/docs/tutorial.html

https://reactjs.org/docs/

Important Basic Components

  • <View></View>
  • <Text></Text>
  • <Image />
  • <TextInput />
  • <ScrollView></ScrollView>
  • <Button />

Using these basic components provided by RN, you can compose/create much bigger components and finally an Application

Let's see some examples...

Handling user input

<TextInput /> component to take user input.

User can type text into it..

constructor(props) {
    super(props);

    this.state = {
      taskName: '',
      taskArr: []
    };
}

render() {
    return (
        <TextInput 
        style={styles.taskNameInput}
        placeholder="Type your task name"
        value={this.state.taskName}
        onChangeText={(val) => {this.setState({taskName: val})}}/>
    );
}

We store the value in state, because it is changing.

Handling User clicks

  • In React Native world we do not call click
  • We call them taps or press
  • Use onPress(), onLongPress()
<TouchableOpacity onPress={}></TouchableOpacity>

<TouchableHighlight></TouchableHighlight>

<Button onPress={}></Button>

Scrolling content

React Native provides the <ScrollView> component for that

Sometimes your content can cross your viewport. We then need to scroll to see it.


import {ScrollView} from 'react-native';
import ListItem from './ListItem';

<ScrollView style={styles.scrollContainer}>
    {this.state.taskArr.map((item, index) => {
        return (
            <ListItem key={index} taskName={item} />
        );
    })}
</ScrollView>

Scroll works upon the scroll/touch gesture

Styling Components

  • We do not use CSS directly
  • We use JavaScript to style components
  • All of the core component accept a prop called style
  • Style property name and their values usually match how CSS works on the web
  • We use camel casing to define style properties
const styles = StyleSheet.create({
    backgroundColor: '#ff0000',
    fontWeight: 600,
    fontSize: 20,
    flexDirection: 'row'
});

Example: 

We use backgroundColor rather than background-color

Layout & Positioning

  • We use Flexbox concepts
  • We use flexDirection, alignItems, justifyContent & flex

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

Example of flexDirection

https://facebook.github.io/react-native/docs/flexbox.html

Example of flex


<View style={{flex: 1}}>
    <View style={{flex: 1, backgroundColor: 'powderblue'}} />
    <View style={{flex: 2, backgroundColor: 'skyblue'}} />
    <View style={{flex: 3, backgroundColor: 'steelblue'}} />
</View>

https://facebook.github.io/react-native/docs/height-and-width.html​

justifyContent

alignItems

flex-start

flex-end

center

space-around

space-between

space-evenly

flex-start

flex-end

center

stretch

Examples:

https://facebook.github.io/react-native/docs/flexbox.html

(main axis)

(cross/secondary axis)

Lets create a ToDo App

We will use these concepts

  • User Input
  • Press
  • Scrolling content
  • Content Layout-ing
  • State & Props

Exercise

Lets create a Grid Layout

We will use these concepts

  • Flex box
  • Layout
  • Wrapping

Exercise

Some advanced Components

  • FlatList
  • Picker
  • Switch
  • Modal
  • ...

FlatList

For all list based needs. Has lots of built in support

  • Fully cross-platform.
  • Optional horizontal mode.
  • Configurable viewability callbacks.
  • Header support.
export default class FlatListExample extends Component {
	constructor(props) {
		super(props);
		this.data = [{key: 1, name: 'Joseph'}, {key: 2, name: 'Amit'}];
	}
	renderListItem = (info) => {
		//console.log(info);
		return (<Text>{info.item.name}</Text>);
	}
	render() {
		return (
			<View style={{flex: 1, backgroundColor: 'yellow'}}>
				<FlatList
  					data={this.data}
  					renderItem={this.renderListItem}
  					keyExtractor={(item) => item.key + ""}
				/>	
			</View>
		);
	}
}
  • Footer support.
  • Separator support.
  • Pull to Refresh.
  • Scroll loading.
  • ScrollToIndex support.

Good link: https://medium.com/react-native-development/how-to-use-the-flatlist-component-react-native-basics-92c482816fe6

ToDo App

Lets replace our ScrollView with FlatList

FlatList

Some useful API's

  • Dimension
  • Platform
  • Writing platform specific code
  • component.android.js, component.ios.js

Lets create a Horizontal Scroll View

We will make use of

  • Dimensions to get the screen width

Exercise

AsyncStorage

AsyncStorage is a simple, unencrypted, asynchronous, persistent, key-value storage system that is global to the app. It should be used instead of LocalStorage.

AsyncStorage methods returns a Promise which can then be handled.

Useful methods

  • AsyncStorage.setItem().then().catch()
  • AsyncStorage.getItem().then().catch()
import {AsyncStorage} from 'react-native';

//initialize the AsyncStorage Store, SETTING VALUES
var data = {firstName: 'Joseph', lastName: 'Khan'};
AsyncStorage.setItem("@MyStore:key1", JSON.stringify(data)).then(() => {
    console.log('Item has been set in AsyncStorage');
});

//GETTING the values
//read from AsyncStorage
AsyncStorage.getItem("@MyStore:key1").then((value) => {
    console.log(typeof value);
    console.log(JSON.parse(value));
}).catch((err) => {
    //handle any error here
});

//GET ALL KEYS
AsyncStorage.getAllKeys().then((keys) => {
    console.log('All Keys', keys); //keys comes as an array
});
  • AsyncStorage.removeItem().then()
  • AsyncStorage.clear().then()
  • AsyncStorage.getAllKeys().then()

Make API/HTTP Calls

We will make use of Random User Generator API for our data (https://randomuser.me/)

API: https://randomuser.me/api/?results=500

componentDidMount() {
    //make an API call
    let url = "https://randomuser.me/api/?results=100"; //random user api
                
    //GET call
    fetch(url).then((response) => {
        //convert raw response to JSON. This step is mandatory
        return response.json();
    }).then((responseJson) => {
        //work on the JSON data here
        this.setState({
            dataArr: responseJson.results, 
            isLoading: false
        });
    }).catch((error) => {
        //handle any error here
        console.log(error);
    });
}

And then use the fetch() method to make Network calls

Remember, fetch() returns a Promise which can then be handled using then()/catch blocks

Animations

  • Animations are very important to create a great user experience.
  • React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

Lets see a few examples of using Animated API, interpolation etc...

Navigation & Navigators

A React Native App will seldom be a single page/view application. There will be several screens in it.

We will use React Navigation - https://reactnavigation.org/ for our navigation needs

Stack Navigator

Drawer Navigator

Install 3rd party modules/components

  • React Native provides a decent list of useful components.
  • But sometimes it might not be sufficient.
  • You install modules/libraries/components provided by the Open Source community.
npm install --save react-navigation

Lets install 2 modules into our project

1. React Navigation - for all our navigation needs

2. React Native Vector Icons - for our vector icon needs

npm install react-native-vector-icons --save

Linking native dependencies after installation

Example of Navigation

Lets build a simple Navigation example

We will use the react-navigation module. We will try Stack Navigator, Drawer Navigator

Tab Navigator - exercise for you

We are all set to build a full native mobile application

Demo App

Hands on

  • Lets create a simple User Directory Application
  • We will use the free RandomUser API for our Data

https://randomuser.me/

  • Basic Login/Logout flow
  • Navigation
  • Passing Data between screens
  • List
  • Styling
  • Custom Components

Our Demo App will cover all these...

Let's see the wires and UX flows in the next slide ->

What all components can you think of?

Code Repo

Debugging

Familiar tools

  • Chrome debugger
  • Live reloading
  • Hot reloading
  • Breakpoints
  • Logs

Better Debugging Tool

react-native-debugger: https://github.com/jhen0409/react-native-debugger

Standalone Desktop App for debugging.

Q & A

Sky is the LIMIT

Now there’s nobody stopping you from building breathtaking native mobile apps using React Native & JavaScript and putting all your web development skills to kill the App Stores. 

Feedback

Your feedback will help me improve...

https://goo.gl/forms/qVr6iq9UY7PDHSfl2

Thank You!

Good Books

It was nice talking to you

Made with Slides.com