Home > Software > React Native Firebase

React Native Firebase

Date post: 09-Jan-2017
Author: kobkrit-viriyayudhakorn
View: 5,589 times
Download: 7 times
Share this document with a friend
Embed Size (px)
of 63 /63
Kobkrit Viriyayudhakorn, Ph.D. [email protected] http://www.kobkrit.com Making Chat Room App
  • Kobkrit Viriyayudhakorn, Ph.D. [email protected]


    Making Chat Room App


  • Important Links Source Codes


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

    Score Announcementhttp://bit.ly/its484quizscore

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


  • React Natives Component Lifecycle


    render() -> React Element

    That we have known so far

    It is not completed. Here is the completed one

  • Advanced React Native Component Mounting Lifecycle



    render() -> React Element


  • 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


    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


    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


  • 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


    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.


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

    Login with your Google account

    Press Create New Project button


  • 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




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



  • Chat Room App Simple one chat room.

    Showing number of online users.

    Showing conversations publicly.

    Send the chat message.

    Setting the username


  • 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


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

    $|> react-native link


  • 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