Getting Started with Mobile App Development with React Native/

...

/

CRUD using Cloud Firestore

CRUD using Cloud Firestore

Learn how to execute CRUD operations using Cloud Firestore and React Native.

We'll cover the following...

CRUD (create, read, update, and delete) are the four basic persistent storageA type of storage that retains data after the power has been shut off, e.g., hard disk drive. operations. CRUD operations allow us to search, view, and modify data inside a database. Programmers and developers have to deal with CRUD operations at some stage of their career, i.e., CRUD is used while signing up or logging in users inside an application. Therefore, it is essential to learn the basics of CRUD operations. This lesson will show how we can search, view, modify, and delete data inside a Firebase database (Cloud Firestore) using React Native. Before beginning, make sure you have the Cloud Firestore database up and running.

Create

As the name applies, the “create” operation in CRUD is used to create a new entry inside the database. To implement the “create” operation, we first have to import these functions from the @firebase/firestore library:

  • collection

  • addDoc

Press + to interact
import { collection, addDoc } from "@firebase/firestore";

Additionally, we also have to create a Firebase configuration file to connect our database with the React Native application. Note that this step is required for all the CRUD operations we discuss later in this lesson.

Press + to interact
import { initializeApp } from 'firebase/app';
import { initializeFirestore } from 'firebase/firestore';
const firebaseConfig = {
    apiKey: "", // Your apiKey goes here
    authDomain: "", // Your authDomain goes here
    projectId: "", // Your projectId goes here
    storageBucket: "", // Your storageBucket goes here
    messagingSenderId: "", // Your messagingSenderId goes here
    appId: "" // Your appId goes here
};
const app = initializeApp(firebaseConfig);
const db = initializeFirestore(app, {
    experimentalForceLongPolling: true,
});
export { db };

Once the steps above have been completed, we can implement the “create” operation inside our application.

import { initializeApp } from 'firebase/app';
import { initializeFirestore } from 'firebase/firestore';

const firebaseConfig = {
    apiKey: "", // Your apiKey goes here
    authDomain: "", // Your authDomain goes here
    projectId: "", // Your projectId goes here
    storageBucket: "", // Your storageBucket goes here
    messagingSenderId: "", // Your messagingSenderId goes here
    appId: "" // Your appId goes here
};

const app = initializeApp(firebaseConfig);
const db = initializeFirestore(app, {
    experimentalForceLongPolling: true,
});

export { db };
Implementing the "create" operation

In the code snippet above, we have implemented the “create” operation’s logic inside the create ...