Firestore CRUD operations in React Native

Introduction

Firestore CRUD operations let you create, read, update, and delete data in your app's database. This helps your app save and manage information easily.

Saving user profile information after signup

Showing a list of items fetched from the database

Updating user settings or preferences

Removing outdated or unwanted data from the app

Syntax

React Native

import { getFirestore, collection, addDoc, getDocs, updateDoc, deleteDoc, doc } from 'firebase/firestore';

const db = getFirestore();

// Create
await addDoc(collection(db, 'collectionName'), { field: 'value' });

// Read
const querySnapshot = await getDocs(collection(db, 'collectionName'));
querySnapshot.forEach(doc => console.log(doc.id, doc.data()));

// Update
const docRef = doc(db, 'collectionName', 'docId');
await updateDoc(docRef, { field: 'newValue' });

// Delete
await deleteDoc(docRef);

Use collection() to point to a group of documents.

Use doc() with an ID to point to a specific document.

Examples

Adds a new user named Alice with age 25 to the 'users' collection.

React Native

await addDoc(collection(db, 'users'), { name: 'Alice', age: 25 });

Reads all users and prints their IDs and data.

React Native

const snapshot = await getDocs(collection(db, 'users'));
snapshot.forEach(doc => console.log(doc.id, doc.data()));

Updates the age of the user with ID 'abc123' to 26.

React Native

const userRef = doc(db, 'users', 'abc123');
await updateDoc(userRef, { age: 26 });

Deletes the user with ID 'abc123' from the database.

React Native

const userRef = doc(db, 'users', 'abc123');
await deleteDoc(userRef);

Sample App

This React Native app connects to Firestore and shows a list of users. You can add a new user, update the first user's age, or delete the first user. The list updates automatically after each action.

React Native

import React, { useEffect, useState } from 'react';
import { View, Text, Button, FlatList } from 'react-native';
import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc, getDocs, updateDoc, deleteDoc, doc } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: 'your-api-key',
  authDomain: 'your-auth-domain',
  projectId: 'your-project-id',
  storageBucket: 'your-storage-bucket',
  messagingSenderId: 'your-messaging-sender-id',
  appId: 'your-app-id'
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

export default function FirestoreCRUD() {
  const [users, setUsers] = useState([]);

  const fetchUsers = async () => {
    const querySnapshot = await getDocs(collection(db, 'users'));
    const usersList = [];
    querySnapshot.forEach(doc => {
      usersList.push({ id: doc.id, ...doc.data() });
    });
    setUsers(usersList);
  };

  const addUser = async () => {
    await addDoc(collection(db, 'users'), { name: 'New User', age: 20 });
    fetchUsers();
  };

  const updateFirstUser = async () => {
    if (users.length === 0) return;
    const userRef = doc(db, 'users', users[0].id);
    await updateDoc(userRef, { age: users[0].age + 1 });
    fetchUsers();
  };

  const deleteFirstUser = async () => {
    if (users.length === 0) return;
    const userRef = doc(db, 'users', users[0].id);
    await deleteDoc(userRef);
    fetchUsers();
  };

  useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Button title="Add User" onPress={addUser} />
      <Button title="Update First User Age" onPress={updateFirstUser} />
      <Button title="Delete First User" onPress={deleteFirstUser} />
      <FlatList
        data={users}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <Text>{item.name} - Age: {item.age}</Text>
        )}
      />
    </View>
  );
}

Important Notes

Always handle errors in real apps to avoid crashes.

Firestore operations are asynchronous, so use async/await or promises.

Remember to set up Firebase config and initialize the app before using Firestore.

Summary

Firestore CRUD lets you create, read, update, and delete data in your app.

Use collection() and doc() to point to data locations.

Always fetch fresh data after changes to keep UI updated.

Practice

1. What does the collection() function do in Firestore when used in React Native?

easy

A. It points to a group of documents in the database.

B. It creates a new document with data.

C. It deletes a document from the database.

D. It updates fields inside a document.

Solution

1. Step 1: Understand Firestore data structure

   Firestore organizes data in collections which contain documents.

2. Step 2: Role of collection()

   The collection() function points to a specific collection (group of documents) in Firestore.

3. Final Answer:

   It points to a group of documents in the database. -> Option A

4. Quick Check:

   collection() = points to documents group [OK]

Hint: Remember: collection() targets groups, doc() targets single items [OK]

Common Mistakes:

• Confusing collection() with doc()
• Thinking collection() creates data
• Mixing update and delete operations

2. Which of the following is the correct syntax to add a new document with data to a Firestore collection named 'users'?

easy

A. await addDoc(collection(db, 'users'), {name: 'Anna', age: 25});

B. await db.collection('users').add({name: 'Anna', age: 25});

C. await setDoc(doc(db, 'users'), {name: 'Anna', age: 25});

D. await updateDoc(collection(db, 'users'), {name: 'Anna', age: 25});

Solution

1. Step 1: Identify correct Firestore add syntax in React Native

   The addDoc function adds a new document to a collection.

2. Step 2: Check the syntax correctness

   await addDoc(collection(db, 'users'), {name: 'Anna', age: 25}); uses addDoc(collection(db, 'users'), data) which is the correct modern syntax.

3. Final Answer:

   await addDoc(collection(db, 'users'), {name: 'Anna', age: 25}); -> Option A

4. Quick Check:

   Add new doc = addDoc(collection(db, 'name'), data) [OK]

Hint: Use addDoc with collection() to add new documents [OK]

Common Mistakes:

• Using setDoc without doc() reference
• Calling updateDoc on a collection instead of a document
• Using deprecated syntax from older SDK versions

3. Given this code snippet, what will be logged to the console?

const docRef = doc(db, 'tasks', 'task1');
await updateDoc(docRef, {completed: true});
const docSnap = await getDoc(docRef);
console.log(docSnap.data());

medium

A. { completed: false }

B. { completed: true }

C. An error because updateDoc cannot be awaited

D. undefined

Solution

1. Step 1: Understand updateDoc effect

   The updateDoc call sets the field completed to true in the document 'task1'.

2. Step 2: Reading updated document data

   The getDoc fetches the updated document, so docSnap.data() returns the updated fields.

3. Final Answer:

   { completed: true } -> Option B

4. Quick Check:

   updateDoc changes data, getDoc reads updated data [OK]

Hint: updateDoc changes data; getDoc reads fresh data [OK]

Common Mistakes:

• Assuming updateDoc returns data
• Forgetting to await async calls
• Expecting old data without re-fetching

4. Identify the error in this Firestore delete operation code:

const docRef = doc(db, 'notes', 'note1');
await deleteDoc(collection(db, 'notes', 'note1'));

medium

A. The collection path is missing a document ID.

B. doc() cannot be used to get a document reference.

C. deleteDoc must be called without await.

D. deleteDoc should receive a document reference, not a collection.

Solution

1. Step 1: Check deleteDoc argument type

   The deleteDoc function requires a document reference, not a collection reference.

2. Step 2: Analyze the code's argument

   The code passes collection(db, 'notes', 'note1') which is invalid because collection() does not accept a document ID.

3. Final Answer:

   deleteDoc should receive a document reference, not a collection. -> Option D

4. Quick Check:

   deleteDoc(docRef) not deleteDoc(collection(...)) [OK]

Hint: deleteDoc needs doc(), not collection() [OK]

Common Mistakes:

• Passing collection() instead of doc() to deleteDoc
• Misunderstanding collection() parameters
• Omitting await on async calls

5. You want to update a user's profile in Firestore only if the 'age' field exists and is less than 30. Which code snippet correctly performs this conditional update?

hard

A. const docRef = doc(db, 'users', 'user1');
await updateDoc(docRef, {status: 'young'});
const docSnap = await getDoc(docRef);
if (docSnap.data().age >= 30) {
await deleteDoc(docRef);
}

B. await updateDoc(doc(db, 'users', 'user1'), {status: 'young', age: 30});

C. const docRef = doc(db, 'users', 'user1');
const docSnap = await getDoc(docRef);
if (docSnap.exists() && docSnap.data().age < 30) {
await updateDoc(docRef, {status: 'young'});
}

D. const docRef = doc(db, 'users', 'user1');
await setDoc(docRef, {status: 'young'}, {merge: true});

Solution

1. Step 1: Check for field existence and condition

   Use getDoc to read the document and verify if 'age' exists and is less than 30.

2. Step 2: Conditionally update document

   If condition is true, call updateDoc to update the 'status' field without overwriting other data.

3. Final Answer:

   Code snippet that reads, checks, then updates conditionally. -> Option C

4. Quick Check:

   Read first, then update if condition true [OK]

Hint: Always read document before conditional update [OK]

Common Mistakes:

• Updating without checking field existence
• Using setDoc without merge causing overwrite
• Deleting document incorrectly after update