React Native Firebase

1. Kobkrit Viriyayudhakorn, Ph.D.
kobkrit@gmail.com
http://www.kobkrit.com
Making Chat Room App

2. Important Links
• Source Codes
https://github.com/kobkrit/learn-react-native
• Course Materials
http://www.kobkrit.com/category/programming/react-
native/
• Score Announcement
http://bit.ly/its484quizscore
• Facebook Group
https://web.facebook.com/groups/ReactNativeThai/

3. React Native’s Component
Lifecycle
constructor(props)
render() -> React Element
That we have known so far…
It is not completed. Here is the completed one…

4. Advanced React Native Component
Mounting Lifecycle
constructor(props)
componentWillMount()
render() -> React Element
componentDidMount()

5. React Native Component
Mounting 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.

6. React Native Component
Mounting 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).

7. React Native Component
Mounting 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.

8.
Updating Lifecycle
componentWillReceiveProps(nextProps)
shouldComponentUpdate(nextProps,
nextState)
render() -> React Element
componentDidUpdate(prevProp, prevState)
componentWillUpdate(nextProps,
nextState)

9. React Native Component
Updating 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.

10. React Native Component
Updating 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.

11. React Native Component
Updating 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).

12. React Native Component
Updating 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.

13. Mounting (Opening the App)
l12_firebase/bmi.js

14. Changing Height to 5
l12_firebase/bmi.js

15. Changing Weight to 5
l12_firebase/bmi.js

16. Why???
Because…
l12_firebase/bmi.js

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

19. 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 User’s Mobile)
• Crash Reporting (Sending crash report to us)
• Analytics (Knowing how much people using our app
right now)

20. Firebase span over 2 weeks
• Lecture 12
• Real-Time Database Part I
• Lecture 13
• Real-Time Database Part II
• Authentication
• Cloud Messaging / Notification

21. Getting Start With Firebase
1. 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.

22. Create a Project @ Firebase
• Enter https://console.firebase.google.com/
• Login with your Google account
• Press “Create New Project” button

23. 1. Adding Project Name (Any name is fine)
2. Select Country to Thailand
3. Press Create Project button

24. • Click at “Add Firebase to your web app”
(The pink one)

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

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

27. 1.js

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

29. Key Differences with Realm
• Realm allows you implement your own database
server. Firebase can’t. 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). Firebase’s Realtime DB isn’t.
• Realms DB needs to specify database schema,
while Firebase isn’t. Firebase will save what ever it
got.

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

31. Basic Writing Operation
• Get a database reference
• Writing something
Save the {text: ‘Hello Text!’} as key ‘notes/1’
into Firebase database

32. 1.js

33. 1.js

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

35. Realtime Database
Permission Rules
1
2
https://console.firebase.google.com/

36. Sample Realtime DB Rules
• Default (Require Authentication)
• Public / Development (Open to everyone)

37. Sample Realtime DB Rules
• Private User Database (Which means only owners
can access their information in database)

38. Sample Realtime DB Rules
• Private (No one can access the database, except
admin can access via Firebase console)

39. Change Realtime DB
permission to Public
• Change the rule to Public permission
• Press “Publish” button

40. Reload the App again
• At Simulator, Cmd + R or
R,R for reload
• Now there is no warning
sign.
• Realtime database save
successfully.

41. Viewing Saved database
• We can view the saved information in Firebase’s
Realtime database at Firebase console.
• https://console.firebase.google.com/project/{your-
project-name}/database/data

43. Chat Room App
• Simple one chat room.
• Showing number of online users.
• Showing conversations publicly.
• Send the chat message.
• Setting the username
2.js

44. Making Chat Room App UI
2.js

45. 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 Native’s library called
“AppState”

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

47. 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”

48. Listening for State changes
2.js

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

50. 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 don’t found the codes to run in the
memory.
• We need an external library for running operation in
background.

51. react-native-background-
timer
• Installation
• $|> npm install react-native-background-timer -- save
• $|> react-native link
• Usage

52. Handling # of Online User
2.js

53. 2.js

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

55. Opening the App

56. Leaving the App

57. Enter the App Again..

58. Modifying DB value in
Firebase console

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

60. Realtime DB Transaction
3.js

61. Realtime DB Transaction
3.js

62. 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!

63. Q/A