Scribd
Upload
13 views

Lesson 5 - React Native Firebase_v2

Uploaded by

huutv
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

Lesson 5 - React Native Firebase_v2

Uploaded by

huutv
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

REACT NATIVE FIREBASE

(REACT – NATIVE)
Ths. Trần Văn Hữu
Email: [email protected]
Mobile: 0913131732

Khoa Kỹ thuật – Công nghệ


Đại học Thủ Dầu Một
1
1
FIREBASE

Firebase is a real-time database


storage service operating on the cloud
platform provided by Google to help
programmers quickly develop
applications by simplifying operations
with database.
Document Firebase

3
REACT NATIVE FIREBASE

React Native Firebase is the


officially recommended collection
of packages that brings React
Native support for all Firebase
services on both Android and iOS
apps.

Supports React Native apps


built using React Native CLI or
using Expo.
Docment React Native Firebase

4
Prerequisites

 React Native - Setting up the development


environment

 Create a new Firebase project

 Note:
React Native Firebase cannot be used in the "Expo
Go" app, because it requires custom native code.

5
Generate native projects in Expo

npx expo prebuild


npx expo run:android
npx expo run:iOS

6
Create a new Firebase project

Click android or iOS

7
Android Setup

To allow the Android app to securely connect to


your Firebase project, a configuration file must
be downloaded and added to your project.

8
Create a new Firebase project

9
Create a new Firebase project

10
Generate native projects in Expo

Download the google-


services.json file and
place it inside of your
project at the following
location:
/android/app/google-
services.json.

11
Create a new Firebase project

Note: The debug signing certificate is optional to use Firebase with


your app, but is required for Dynamic Links, Invites and Phone
Authentication. To generate a certificate run
cd android && ./gradlew signingReport

Note: React Native - Setting up the development environment


12
Configure Firebase with Android credentials

First, add the google-services plugin as a dependency inside of your


/android/build.gradle file:

Lastly, execute the plugin by adding the following to your


/android/app/build.gradle file:

13
Installation

Install via NPM

# Install & setup the app module


npm i @react-native-firebase/app
# If you're developing your app using iOS, run this
command
cd ios/ && pod install

14
Types of Firebase

Authentication
RealTime Database
Firestore Database
Storage

15
Authentication

Installation

# Install & setup the app module


npm i @react-native-firebase/auth
# If you're developing your app using iOS, run this
command
cd ios/ && pod install

16
Authenticate with Email and Password

17
Authenticate with Email and Password

18
Create User With Email And Password

19
Login With Email And Password

20
Forgot Password with Email

21
Sign in with Google

Installation
npm install @react-native-google-signin/google-signin

For IOS:
cd ios/ && pod install

22
Authenticate with Google

23
Authenticate with Google

24
Authenticate with Google

25
Sign in with Google

26
Cloud Firestore

Installation
npm install @react-native-firebase/firestore

For IOS:
cd ios/ && pod install

27
Cloud Firestore

Collections

Documents

28
Cloud Firestore

Collections

The collection method returns a


CollectionReference class.

29
Cloud Firestore

The collection method returns a


CollectionReference class.

30
Cloud Firestore

The doc method returns a DocumentReference.

31
Cloud Firestore

One-time read

Realtime changes
Realtime changes via the onSnapshot method

32
Cloud Firestore

QuerySnapshot is a QueryDocumentSnapshot.
which allows you to access specific information
about a document

33
Cloud Firestore

A DocumentSnapshot is returned from a query to


a specific document

34
Cloud Firestore

Filtering
To filter documents within a collection using
where method

35
Cloud Firestore

Filter.and()

36
Cloud Firestore

Filter.and()

37
Cloud Firestore

Filter.or()

38
Cloud Firestore

Limiting

39
Cloud Firestore

Ordering

40
Cloud Firestore

Adding documents

41
Cloud Firestore

Adding documents

42
Cloud Firestore

Updating documents

43
Cloud Firestore

Removing data

44

You might also like