How to Use React Native Firebase: Setup and Basic Usage

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

Syntax

Start by installing the core Firebase package and any specific Firebase services you need. Import the Firebase app module and initialize it automatically. Use Firebase services by importing their modules.

• import firebase from '@react-native-firebase/app'; - Core Firebase app
• import auth from '@react-native-firebase/auth'; - Authentication service
• Initialize Firebase automatically with default config from your native setup

javascript

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

// Use Firebase auth to sign in
async function signIn(email, password) {
  try {
    const userCredential = await auth().signInWithEmailAndPassword(email, password);
    console.log('User signed in:', userCredential.user.email);
  } catch (error) {
    console.error('Sign in error:', error);
  }
}

Example

This example shows how to set up Firebase authentication in a React Native app and 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 handleSignIn = async () => {
    try {
      const userCredential = await auth().signInWithEmailAndPassword(email, password);
      setMessage('Signed in as ' + userCredential.user.email);
    } catch (error) {
      setMessage('Error: ' + error.message);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} 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={handleSignIn} />
      {message ? <Text style={{ marginTop: 20 }}>{message}</Text> : null}
    </View>
  );
}

Output

A simple UI with email and password fields and a Sign In button. On success, it shows "Signed in as [e-mail]" or an error message.

Common Pitfalls

Common mistakes when using React Native Firebase include:

• Not installing native dependencies properly (run npx pod-install on iOS)
• Forgetting to configure Firebase project and download GoogleService-Info.plist or google-services.json
• Using Firebase web SDK instead of React Native Firebase packages
• Not handling async calls with await or then

javascript

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

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

Quick Reference

Key steps to use React Native Firebase:

• Install core package: npm install @react-native-firebase/app
• Install needed services, e.g. auth: npm install @react-native-firebase/auth
• Configure native Firebase files in Android and iOS projects
• Import and use Firebase modules in your JS code

Key Takeaways

Install @react-native-firebase/app and required service packages before use.

Configure Firebase project files in native Android and iOS folders.

Use React Native Firebase modules, not the web Firebase SDK.

Handle async Firebase calls with await or promises.

Run pod install on iOS after adding Firebase packages.