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
