Purpose

Integrate Firebase services (Auth, Firestore, FCM) with React Native using

@react-native-firebase

for authentication, real-time data, and push notifications.

When to use this skill

• setting up

  @react-native-firebase

  in a React Native project
• implementing email/Google/Apple auth flows with Firebase Auth
• reading and writing Firestore data with real-time listeners
• configuring push notifications with Firebase Cloud Messaging

Do not use this skill when

• building a web-only app with Firebase — use Firebase JS SDK patterns
• using a non-Firebase backend (Supabase, Amplify) — different APIs
• the task is React Native UI without Firebase — prefer

  react-typescript

Procedure

1. Install packages —

   npx expo install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore

   .
2. Configure native — add

   google-services.json

   (Android) and

   GoogleService-Info.plist

   (iOS) to native project dirs.
3. Set up Auth — use

   auth().signInWithEmailAndPassword()

   ,

   auth().createUserWithEmailAndPassword()

   . Listen with

   auth().onAuthStateChanged()

   .
4. Set up Firestore — read with

   firestore().collection('users').doc(uid).get()

   . Write with

   .set()

   or

   .update()

   .
5. Add real-time listeners —

   firestore().collection('messages').orderBy('createdAt').onSnapshot(snap => ...)

   . Clean up in

   useEffect

   return.
6. Configure FCM — request permission with

   messaging().requestPermission()

   . Get token:

   messaging().getToken()

   . Handle with

   messaging().onMessage()

   .
7. Security rules — write Firestore rules that check

   request.auth.uid

   . Test with Firebase Emulator.
8. Test offline — Firestore has offline persistence by default. Verify reads work without network.

Auth flow

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

function useAuth() {
  const [user, setUser] = useState(auth().currentUser);

  useEffect(() => {
    return auth().onAuthStateChanged(setUser);
  }, []);

  return user;
}

async function signIn(email: string, password: string) {
  try {
    await auth().signInWithEmailAndPassword(email, password);
  } catch (err: any) {
    if (err.code === 'auth/user-not-found') throw new Error('No account found');
    if (err.code === 'auth/wrong-password') throw new Error('Incorrect password');
    throw err;
  }
}

Firestore patterns

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

// Real-time listener with cleanup
function useMessages(chatId: string) {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const unsubscribe = firestore()
      .collection('chats').doc(chatId).collection('messages')
      .orderBy('createdAt', 'desc')
      .limit(50)
      .onSnapshot(snap => {
        setMessages(snap.docs.map(d => ({ id: d.id, ...d.data() })));
      });
    return unsubscribe;
  }, [chatId]);

  return messages;
}

Decision rules

• Always unsubscribe from Firestore listeners in

  useEffect

  cleanup — prevents memory leaks.
• Use

  auth().onAuthStateChanged()

  as the single source of auth truth — not manual state.
• Structure Firestore as shallow collections — avoid deep nesting (max 1 subcollection level).
• Store FCM tokens in Firestore under the user document — enables server-side push targeting.
• Test with Firebase Emulator Suite locally — do not test against production.

References

• https://rnfirebase.io/
• https://firebase.google.com/docs/firestore/security/overview

Related skills

• react-typescript

  — React component patterns

• state-management

  — client state alongside Firestore

• forms-validation

  — auth form validation