This document discusses integrating data with Firebase in a React Native application. It outlines the steps to create a Firebase project, configure the Firebase SDK in a React Native project, add data to the Firebase realtime database from the mobile app, and retrieve and display that data in the mobile app interface in real-time. Specifically, it details how to 1) create a Firebase project, 2) configure the project in a React Native app, 3) add data to the Firebase database from the mobile app interface, and 4) retrieve and display that dynamically updating data in the mobile app interface.

1. Lecture 3 React
Native with Database
Prepared by: Eng Yee Wei

2. Introduction to Firebase
• Firebase is a comprehensive mobile and web application development
platform provided by Google. It offers a suite of cloud-based services
and tools that help developers build, deploy, and manage applications
more efficiently.

3. Steps on Integrating
Data Adding to
Firebase
• 1. First, you need to create a Firebase
project
• 2. https://console.firebase.google.com
• 3. Add a new Firebase Project
• 4. Create config.js in React Native Project.
• 5. Codes integration with React Native
and view data changes in Firebase

4. Section 1: Adding
Data to Firebase

5. Name your firebase project

6. Configure Google Analytics (Create one if
you do not own any)

7. Make sure the project created is ready

9. Add Firebase to your web app and name it,
then register app

10. Then it will show this page

11. Build –> Realtime Database

17. Set default GCP resource location

18. Standy the codes needed for config.js

19. Create a new project
 FirebaseApp
• npx create-expo-app FirebaseApp
• Go to project folder directory, npm i firebase@9.22.0
(The stable release for firebase version in Javascript)
• Create a new file named as ‘config.js’

20. In config.js

21. Create ‘src’ folder and code the structure out
• Inside the src folder, create
‘index.js’

22. Set node in dataAddOn function

23. Render UI in
return()

24. Styling

25. App.js

26. UI in mobile
phone

27. Type something and see result from Realtime
Database

28. Section 2: Retrieve
Data from Firebase

29. Create a blank template and name app

30. Install firebase@9.22.0

31. Build index.js in ‘src’ folder,
then build config.js (Copy
the same from previous)

32. In index.js

34. In stylesheet

35. Add data in previous app/ directly add from
firebase

36. Notice the successive of data retrieval

37. Thank you 