Search⌘ K
AI Features
Home
Courses
Getting Started with Mobile App Development with React Native

CRUD using Cloud Firestore

Explore CRUD operations in React Native using Cloud Firestore to manage application data. Learn to create, read, update, and delete records by integrating Firestore functions. This lesson helps you understand implementation steps and provides hands-on coding practice to build real-time database interactions in mobile apps.

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

Javascript (babel-node)
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.

Javascript (babel-node)
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 ...