How to Store Data in a React Native App Using Firebase?

If you’re building a mobile app, you probably need a way to store user data, sync it across devices, and maybe even keep it available when the internet drops out. Enter Firebase, Google’s “backend-as-a-service” powerhouse.

When it comes to databases, Firebase offers two main paths: the classic Realtime Database and the modern Cloud Firestore. Many developers choose Firestore for their new applications due to its extensive data handling capabilities and scale.

Once you create a new project and add Firestore, this guide demonstrates how to connect your app to Firestore.

Steps to Store Data in a React Native App Using Firebase:

Step 1: Set Up Your Firebase Project

Before writing a single line of code, you need a place for your data to live.

• Create a Project: Head to the Firebase Console and click Add Project.
• Initialize the Database: In the “Build” menu, select Firestore Database (recommended) or Realtime Database.
• Enable Test Mode: For development, start in “Test Mode” so you can read and write data without complex security rules initially (just remember to secure it before you launch!).

Step 2: Install these packages

Using npm

npm install @react-native-firebase/app
npm install @react-native-firebase/firestore

Using yarn

yarn add @react-native-firebase/app
yarn add @react-native-firebase/firestore

For iOS:

cd ios && pod install

Step 3: Add Native Configuration

• Android: For Android, you will need to download the google-services.json file from your Firebase Console Settings and put this file in your android/app/ directory.
• iOS: For iOS projects, download the GoogleService-Info.plist and add it to your project via Xcode.

Step 4: Reading and Writing Data

After configuration, the way to interact with your database is really straightforward.

Storing Data (Create)

Firestore uses “collections” (like folders) and “documents” (like files). To save a new item, like a to-do, use the .add() method:

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

async function addTodo(taskName) {
  await firestore()
    .collection('todos')
    .add({
      title: taskName,
      complete: false,
      createdAt: firestore.FieldValue.serverTimestamp(),
    });
}

Fetching Data (Read)

To get your data once, use .get(). For real-time updates, where the UI changes the moment the database does, use .onSnapshot().

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

function TodoList() {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    const subscriber = firestore()
      .collection('todos')
      .onSnapshot(querySnapshot => {
        const list = [];
        querySnapshot.forEach(documentSnapshot => {
          list.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });
        setTodos(list);
      });
       return () => subscriber();
  }, []);
}

Why Choose Firebase?

• Real-time Synchronization of Data: All clients who are connected to your database will receive changes that you make immediately.
• No Server Needed: No need to write any server code or maintain an active server.

Conclusion

Using Firebase and React Native, you have access to an easy, rapid, and inexpensive method to store data. With the Cloud Firestore feature of the Firebase service, you will have all the components necessary for a well-designed control mechanism of the various pieces of data you create as you develop your application, whether small or an enterprise system.

FAQ

1. Which Firebase database should I use in React Native?

Cloud Firestore is recommended for most applications because it scales nicely and is flexible. Realtime Database is better for simple use cases.

2. Do I need a backend server with Firebase?

No. You will not need to operate your own server as Firebase serves as the backend.

3. Can I store offline data with Firebase?

Yes! Firestore provides offline data storage and will automatically sync to the server once the device has reacquired its connection.