How to Use Firebase with React Native: Setup and Example

To use Firebase with React Native, install the @react-native-firebase/app package and configure your Firebase project credentials. Then, import Firebase modules in your app to access services like authentication or database.

Syntax

First, install the Firebase core package for React Native using npm or yarn. Then, import Firebase in your JavaScript code to initialize and use its services.

• Installation: npm install @react-native-firebase/app
• Import: import firebase from '@react-native-firebase/app';
• Usage: Access Firebase services like auth(), firestore(), etc.

bash / javascript

npm install @react-native-firebase/app

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

// Initialize Firebase app (auto if config files are added)
const app = firebase.app();

// Use Firebase services
const auth = firebase.auth();

Example

This example shows how to set up Firebase Authentication in a React Native app to sign in anonymously.

javascript

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

export default function App() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(setUser);
    return subscriber; // unsubscribe on unmount
  }, []);

  const signInAnonymously = async () => {
    try {
      await auth().signInAnonymously();
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      {user ? (
        <Text>Signed in as: {user.uid}</Text>
      ) : (
        <Button title="Sign In Anonymously" onPress={signInAnonymously} />
      )}
    </View>
  );
}

Output

A screen with a button labeled 'Sign In Anonymously'. After tapping, it shows 'Signed in as: <user-id>'.

Common Pitfalls

Common mistakes when using Firebase with React Native include:

• Not adding the google-services.json (Android) or GoogleService-Info.plist (iOS) files to the project, causing initialization errors.
• Forgetting to run pod install in the ios folder after installing Firebase packages.
• Using incompatible Firebase package versions or missing native setup steps.
• Not handling asynchronous calls properly, leading to unhandled promise rejections.

javascript

/* Wrong: Missing native config files causes app crash */

// Right: Add google-services.json and GoogleService-Info.plist to respective folders

/* Wrong: Forgetting pod install on iOS */
// Run this after npm install
cd ios && pod install

/* Wrong: Using firebase from web SDK in React Native */
import firebase from 'firebase'; // Wrong

/* Right: Use react-native-firebase package */
import firebase from '@react-native-firebase/app';

Quick Reference

Summary tips for Firebase with React Native:

• Always install @react-native-firebase/app as the core package.
• Add platform-specific config files (google-services.json for Android, GoogleService-Info.plist for iOS).
• Run pod install after adding packages on iOS.
• Use Firebase modules like auth(), firestore() from @react-native-firebase.
• Test on real devices or emulators with proper Firebase setup.

Key Takeaways

Install and import @react-native-firebase/app to use Firebase in React Native.

Add platform config files and run pod install for iOS to avoid setup errors.

Use Firebase modules like auth() from react-native-firebase, not the web SDK.

Handle async Firebase calls properly to avoid runtime errors.

Test your app on devices/emulators with correct Firebase project setup.