How to Use Firebase with React Native: Simple Setup Guide

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

Syntax

First, install the Firebase core package for React Native. Then, import Firebase modules you need, such as authentication or Firestore. Initialize Firebase with your project settings automatically by linking the native configuration files.

• Installation: Use npm install @react-native-firebase/app to add Firebase core.
• Import: Import Firebase services like auth or firestore from @react-native-firebase.
• Usage: Call Firebase methods to authenticate users or read/write data.

bash and javascript

npm install @react-native-firebase/app

// Import Firebase core and services
import firebase from '@react-native-firebase/app';
import auth from '@react-native-firebase/auth';

// Use Firebase auth to sign in
auth().signInWithEmailAndPassword(email, password);

Example

This example shows how to set up Firebase authentication in a React Native app to sign in a user with email and password.

javascript

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

export default function App() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const signIn = async () => {
    try {
      await auth().signInWithEmailAndPassword(email, password);
      setMessage('Signed in successfully!');
    } catch (error) {
      setMessage('Error: ' + error.message);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        keyboardType="email-address"
        autoCapitalize="none"
        style={{ marginBottom: 10, borderWidth: 1, padding: 8 }}
      />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
        style={{ marginBottom: 10, borderWidth: 1, padding: 8 }}
      />
      <Button title="Sign In" onPress={signIn} />
      {message ? <Text style={{ marginTop: 10 }}>{message}</Text> : null}
    </View>
  );
}

Output

User sees a simple form with email and password fields and a Sign In button. On successful sign-in, the message 'Signed in successfully!' appears; on error, the error message shows.

Common Pitfalls

Common mistakes when using Firebase with React Native include:

• Not installing native dependencies or running pod install on iOS after adding Firebase packages.
• Forgetting to add Firebase configuration files (GoogleService-Info.plist for iOS, google-services.json for Android) to the correct platform folders.
• Using Firebase web SDK instead of @react-native-firebase packages, which can cause compatibility issues.
• Not enabling the required Firebase services (like Authentication) in the Firebase console.

Always follow the official setup guides and check for errors in the native build process.

javascript

/* Wrong way: Using Firebase web SDK in React Native */
import firebase from 'firebase/app';
import 'firebase/auth';

firebase.initializeApp(firebaseConfig);

/* Right way: Using React Native Firebase package */
import auth from '@react-native-firebase/auth';

// No manual initialization needed if config files are set up correctly

auth().signInWithEmailAndPassword(email, password);

Quick Reference

Here is a quick checklist for using Firebase with React Native:

Step	Description
1. Install package	Run npm install @react-native-firebase/app
2. Add config files	Place GoogleService-Info.plist (iOS) and google-services.json (Android) in platform folders
3. Run native installs	Run pod install for iOS and rebuild Android project
4. Import services	Import auth, firestore, etc. from @react-native-firebase
5. Use Firebase methods	Call Firebase functions like signInWithEmailAndPassword
6. Enable services	Enable Authentication, Firestore, etc. in Firebase console

Key Takeaways

Install @react-native-firebase/app and native dependencies before using Firebase in React Native.

Add platform-specific Firebase config files to your iOS and Android projects.

Use @react-native-firebase packages instead of Firebase web SDK for compatibility.

Enable Firebase services in the console to use features like authentication or database.

Test your setup by signing in or reading data to confirm Firebase works in your app.