Kobkrit Viriyayudhakorn, Ph.D. kobkrit@gmail.com

http://www.kobkrit.com

Making Chat Room App

http://www.kobkrit.com

Important Links Source Codes

https://github.com/kobkrit/learn-react-native

Course Materials http://www.kobkrit.com/category/programming/react-native/

Score Announcementhttp://bit.ly/its484quizscore

Facebook Grouphttps://web.facebook.com/groups/ReactNativeThai/

https://github.com/kobkrit/learn-react-nativehttp://www.kobkrit.com/category/programming/react-native/http://www.kobkrit.com/category/programming/react-native/http://bit.ly/its484quizscore

React Natives Component Lifecycle

constructor(props)

render() -> React Element

That we have known so far

It is not completed. Here is the completed one

Advanced React Native Component Mounting Lifecycle

constructor(props)

componentWillMount()

render() -> React Element

componentDidMount()

React Native ComponentMounting Lifecycle

constructor(object props) The component class is instantiated. The parameters to the constructor are the element's

initial props, as specified by the parent element. You can optionally specify an initial state for the

element by assigning an object to this.state. At this point, no native UI has been rendered yet for

this element.

React Native ComponentMounting Lifecycle

componentWillMount() This method is invoked only once, before rendering

occurs for the first time. At this point, there is still no native UI rendered for this

element.

render() -> React Element The render method must return a React Element to

render (or null, to render nothing).

React Native ComponentMounting Lifecycle

componentDidMount() This method is invoked only once, after rendering

occurs for the first time. At this point, the native UI for this element has finished

rendering, and may be accessed through this.refs for direct manipulation.

If you need to make async API calls or execute delayed code with setTimeout, that should generally be done in this method.

Updating Lifecycle

componentWillReceiveProps(nextProps)

shouldComponentUpdate(nextProps, nextState)

render() -> React Element

componentDidUpdate(prevProp, prevState)

componentWillUpdate(nextProps, nextState)

React Native ComponentUpdating Lifecycle

componentWillReceiveProps(object nextProps) The parent of this component has passed a new set of

props. This component will re-render. You may optionally call this.setState() to update this

component's internal state before the render method is called.

React Native ComponentUpdating Lifecycle

shouldComponentUpdate(object nextProps, object nextState) -> boolean Based on the next set of props and state, a

component may decide to re-render or not to re-render.

The base class's implementation of this method always returns true (the component should re-render).

For optimization, override this method and check if either props or state have been modified, e.g. run an equality test of each key/value in these objects.

Returning false will prevent the render method from being called.

React Native ComponentUpdating Lifecycle

componentWillUpdate(object nextProps, object nextState) This method is invoked, after the decision has been

made to re-render. You may not call this.setState() here, since an update

is already in progress.

render() -> React Element This method is called, assuming

shouldComponentUpdate returned true. The render method must return a React Element to

render (or null, to render nothing).

React Native ComponentUpdating Lifecycle

componentDidUpdate(object prevProps, object prevState) This method is invoked after re-rendering occurs. At

this point, the native UI for this component has been updated to reflect the React Element returned from the render() method.

Mounting (Opening the App)l12_firebase/bmi.js

Changing Height to 5l12_firebase/bmi.js

Changing Weight to 5l12_firebase/bmi.js

Why??? Because

l12_firebase/bmi.js

Firebase is a mobile platform that helps you quickly develop high-quality apps, grow your user base, and earn more money.

The tools and infrastructure you need to build better apps and grow successful businesses

Firebase is made up of complementary features that you can mix-and-match to fit your needs.

It was acquired by Google since 2014.

Key Features Authentication (User Sign-In, User Registration, Login

by Google, Login by Facebook)

Realtime Database (Store and sync app data in realtime)

Cloud Messaging (Send Notification to Users Mobile)

Crash Reporting (Sending crash report to us)

Analytics (Knowing how much people using our app right now)

Firebase span over 2 weeks Lecture 12

Real-Time Database Part I

Lecture 13

Real-Time Database Part II

Authentication

Cloud Messaging / Notification

Getting Start With Firebase1. Create Firebase Project in the Firebase console.

https://console.firebase.google.com/ (We need a Google account for this).

2. Retrieve apiKey, authDomain, databaseURL, and storageBucket from Firebase console.

3. Create a new react-native project.

4. Install Firebase from npm.

5. Add it into a react-native project.

https://console.firebase.google.com/

Create a Project @ Firebase Enter https://console.firebase.google.com/

Login with your Google account

Press Create New Project button

https://console.firebase.google.com/

1. Adding Project Name (Any name is fine)

2. Select Country to Thailand

3. Press Create Project button

Click at Add Firebase to your web app (The pink one)

Press Copy button to copy the apiKey, authDomain, databaseURL, storageBucket, and messagingSenderId and paste into the code.

Create New Project and Install Firebase

We will install Firebase version 3.6.0

Open Terminal and change to a working directory

$|> react-native init l12_firebase

$|> cd l12_firebase

$|> npm install firebase --save

$|> atom index.ios.js

1.js

Realtime Database

Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.

Key Differences with Realm

Realm allows you implement your own database server. Firebase cant. You need to use Google Cloud server (which is not free if it is a high traffic).

Realms DB is the reactive programming concept (Lazy loading). Firebases Realtime DB isnt.

Realms DB needs to specify database schema, while Firebase isnt. Firebase will save what ever it got.

Realtime Database Structure

All Firebase Realtime Database data is stored as JSON objects, e.g.,

Basic Writing Operation Get a database reference

Writing something

Save the {text: Hello Text!} as key notes/1 into Firebase database

1.js

1.js

What happen?

As the default, user who can write the realtime database must be authenticated.

Since our user is not yet authenticated, so the permission error is occurred.

For development, We can change this behavior by re-configure the Database permission.

Realtime Database Permission Rules

1

2

https://console.firebase.google.com/

Sample Realtime DB Rules Default (Require Authentication)

Public / Development (Open to everyone)

Sample Realtime DB Rules Private User Database (Which means only owners

can access their information in database)

Sample Realtime DB Rules Private (No one can access the database, except

admin can access via Firebase console)

Change Realtime DB permission to Public

Change the rule to Public permission

Press Publish button

Reload the App again

At Simulator, Cmd + R or R,R for reload

Now there is no warning sign.

Realtime database save successfully.

Viewing Saved database We can view the saved information in Firebases

Realtime database at Firebase console.

https://console.firebase.google.com/project/{your-project-name}/database/data

https://console.firebase.google.com/project/

Chat Room App Simple one chat room.

Showing number of online users.

Showing conversations publicly.

Send the chat message.

Setting the username

2.js

Making Chat Room App UI2.js

User online / offline Conditions

Online, when the app is active on the screen.

Offline, when the app is inactive or in background on the screen.

We need helps from a React Natives library called AppState

AppState Can tell us whether the app is in foreground (active) on

the screen, or in background (inactive).

active - The app is running in the foreground

background - The app is running in the background. The user is either in another app or on the home screen

inactive - This is a state that occurs when transitioning between foreground & background, and during periods of inactivity such as entering the Multitasking view or in the event of an incoming call

Obtaining State Accessing AppState.currentState (it was kept up-

to-date by React Native)

E.g., If app in the foreground (active) state.

AppState.currentState == active

If app in the background state.

AppState.currentState == background

Listening for State changes2.js

Key Logics for Online User Counting

Enter the app

Read the current onlineUser from Firebase

Add by 1

Push it back to the Firebase.

Leave the app.

Read the current onlineUser from Firebase

Remove by 1

Push it back to the Firebase.

Want do some operation in background?

When user leave the app, the app become into the background state.

All JavaScript code is halted and unloaded from the memory.

All timers (setTimeout) are unable to execute, because their dont found the codes to run in the memory.

We need an external library for running operation in background.

react-native-background-timer

Installation

$|> npm install react-native-background-timer -- save

$|> react-native link

Usage

Handling # of Online User2.js

2.js

On vs Once firebaseRef.on(value, callback)

Listening for data change forever.

When the data has changed, the call back is called.

firebaseRef.once(value, callback)

Listening for data change only one time. Once it is changed, it called only one time and become inactive.

Opening the App

Leaving the App

Enter the App Again..

Modifying DB value in Firebase console

Realtime DB Transaction Problem occurs!

When two users open the app at the same time, when will be happen?

Both users read the amount of user as the same value, both users update the database by increasing by 1. Instead of adding by 2.

Number of online user and real online user is mismatched.

Realtime DB Transaction3.js

Realtime DB Transaction3.js

Realtime DB Transaction All transaction requests will be queued at the Firebase

server and will be processed one-by-one.

Transaction guarantees that no other operations can write into database during the reading and writing operations in a transaction block.

This behavior, we called it atomic write operations.

Problems of mismatch number of online users when two or more users enter the app at the same time, solved!

Q/A