How to Use Firestore in React Native: Setup and Example

To use Firestore in React Native, install @react-native-firebase/app and @react-native-firebase/firestore packages, initialize Firebase, then import Firestore to read/write data. Use firestore().collection('yourCollection').get() to fetch data and firestore().collection('yourCollection').add() to add data.

Syntax

Here is the basic syntax to use Firestore in React Native:

• import firestore from '@react-native-firebase/firestore': Import Firestore module.
• firestore().collection('collectionName'): Access a collection.
• .get(): Fetch documents from the collection.
• .add({field: value}): Add a new document.
• .doc('docId').set({field: value}): Set data for a specific document.

javascript

import firestore from '@react-native-firebase/firestore';

// Fetch all documents
firestore()
  .collection('users')
  .get()
  .then(querySnapshot => {
    querySnapshot.forEach(documentSnapshot => {
      console.log(documentSnapshot.id, documentSnapshot.data());
    });
  });

// Add a new document
firestore()
  .collection('users')
  .add({ name: 'John', age: 30 });

Example

This example shows a simple React Native component that fetches and displays user names from Firestore.

javascript

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList } from 'react-native';
import firestore from '@react-native-firebase/firestore';

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

  useEffect(() => {
    const fetchUsers = async () => {
      const usersCollection = await firestore().collection('users').get();
      const usersData = usersCollection.docs.map(doc => ({ id: doc.id, ...doc.data() }));
      setUsers(usersData);
    };
    fetchUsers();
  }, []);

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <Text style={{ fontSize: 20, marginBottom: 10 }}>Users:</Text>
      <FlatList
        data={users}
        keyExtractor={item => item.id}
        renderItem={({ item }) => <Text>{item.name}</Text>}
      />
    </View>
  );
}

Output

A scrollable list showing user names fetched from Firestore, e.g., "Users:" followed by names like "John", "Alice", etc.

Common Pitfalls

Common mistakes when using Firestore in React Native include:

• Not installing or linking @react-native-firebase/app and @react-native-firebase/firestore correctly.
• Forgetting to configure Firebase project settings and Google services files.
• Using Firestore methods without awaiting promises, causing unexpected behavior.
• Not handling permissions or network errors.

javascript

/* Wrong: Missing await causes empty data */
firestore().collection('users').get().then(querySnapshot => {
  // This may run before data is ready
  console.log(querySnapshot.docs.length);
});

/* Right: Use async/await to wait for data */
async function fetchUsers() {
  const querySnapshot = await firestore().collection('users').get();
  console.log(querySnapshot.docs.length);
}

Quick Reference

Action	Code Example
Import Firestore	import firestore from '@react-native-firebase/firestore';
Get collection data	firestore().collection('users').get()
Add document	firestore().collection('users').add({ name: 'Anna' })
Set document by ID	firestore().collection('users').doc('id123').set({ age: 25 })
Listen realtime updates	firestore().collection('users').onSnapshot(callback)

Key Takeaways

Install and configure @react-native-firebase/app and @react-native-firebase/firestore before use.

Use async/await or promises to handle Firestore data fetching correctly.

Access collections with firestore().collection('name') and use .get(), .add(), or .set() for operations.

Handle errors and permissions to avoid runtime issues.

Use onSnapshot for realtime data updates in your app.