React Native Firebase Integration

Many apps need a server for accounts, data storage, and file uploads, yet building and hosting one takes time. Firebase, a Google platform, provides these services ready to use. A React Native app talks to Firebase directly through a client library, so a small team can ship features without writing server code.

Services You Will Use Most

Firebase Service     Job
─────────────────────────────────────────────
Authentication       Sign-up, login, password reset
Cloud Firestore      Document database with live updates
Storage              Photos, videos, files
Cloud Messaging      Push notifications
Analytics            Usage reports

Create a Firebase Project

1. Open the Firebase console and create a project
2. Add a web app inside the project
3. Copy the configuration object the console shows

Install the SDK

npm install firebase

The JavaScript SDK works in Expo without native setup. The React Native Firebase package offers deeper native features and needs a development build.

Initialize Firebase

// src/firebase/config.js
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  apiKey: process.env.EXPO_PUBLIC_FIREBASE_KEY,
  authDomain: 'my-app.firebaseapp.com',
  projectId: 'my-app',
  storageBucket: 'my-app.appspot.com',
  appId: 'APP_ID_FROM_CONSOLE',
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

The web API key identifies the project and is not a password. Security rules on the server protect the data.

Authentication

import {
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut,
  onAuthStateChanged,
} from 'firebase/auth';

await createUserWithEmailAndPassword(auth, email, password);
await signInWithEmailAndPassword(auth, email, password);
await signOut(auth);

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (user) => setUser(user));
  return unsubscribe;
}, []);

onAuthStateChanged fires at startup and after each login or logout. Use it to drive the sign-in navigation flow.

Firestore: Collections and Documents

Firestore stores data as documents inside collections. A document resembles a JavaScript object, and a collection resembles a folder of such objects.

notes (collection)
├── note1 (document)
│   ├── title : "Buy milk"
│   └── done  : false
└── note2 (document)
    ├── title : "Call Ravi"
    └── done  : true

Create, Read, Update, Delete

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

// Create
await addDoc(collection(db, 'notes'), { title: 'Buy milk', done: false });

// Read all
const snapshot = await getDocs(collection(db, 'notes'));
const notes = snapshot.docs.map((d) => ({ id: d.id, ...d.data() }));

// Update
await updateDoc(doc(db, 'notes', noteId), { done: true });

// Delete
await deleteDoc(doc(db, 'notes', noteId));

Live Updates

The onSnapshot listener pushes changes to the app the moment they happen. Two phones watching the same collection stay in sync automatically.

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, 'notes'), (snap) => {
    setNotes(snap.docs.map((d) => ({ id: d.id, ...d.data() })));
  });
  return unsubscribe;
}, []);

Phone A adds a note ──► Firestore ──► Phone B list updates instantly

Security Rules

Rules decide who may read or write each path. Start strict and open access only where needed.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /notes/{noteId} {
      allow read, write: if request.auth != null
                         && request.auth.uid == resource.data.ownerId;
    }
  }
}

This rule lets signed-in users touch only their own notes. Never ship an app with rules set to open access for everyone.

Good Practices

• Keep documents small and flat
• Unsubscribe from listeners when screens close
• Store files in Storage and save only the link in Firestore
• Test rules before release
• Monitor usage, since billing depends on reads and writes

Summary

Firebase supplies accounts, a live database, and file storage without a custom server. Initialize the SDK with project settings, authenticate users, store data in Firestore collections, and use onSnapshot for real-time updates. Protect everything with security rules.