Using the native Firebase SDK

Create Firebase project

Managed Workflow Setup

Adding the Native Firebase Plugin

• To being using Native Firebase with Expo, you will start using the plugin @react-native-firebase/app. You can reference the React Native Firebase docs for more details as needed.
• Note: By doing this you will convert your project into a semi-managed project and will need to rebuild it if any native code changes. For more information on adding custom native code, see here.

{
  "expo": {
    "plugins": [
      "@react-native-firebase/app"
    ]
  }
}

• Once the plugin is in use you will need to:
  • To prebuild your project, you will run expo prebuild. This will need to be done after every native code change.
  • To run your project on a local simulator you will run expo run [ios:android]
  • To run your project on a external device you will need to build a development client and install it on your external device. This development client will act as a custom version of Expo Go built with your native code. To start the developemnt client you will run expo start --dev-client
  • To build your project you will use eas build

Android

• Open Project overview in the firebase console and click on the Android icon or + button to Add Firebase to your Android app.
• Make sure that the Android package name is the same as the value of android.package in your app.json.
• Register the app & download the config file by clicking "Download google-services.json" and drag the file into your Expo project folder.
• Add the relative path to the Android google-services.json file to app.json.

{
  "expo": {
    "android": {
      "package": "com.mypackage.coolapp",
      "googleServicesFile": "./google-services.json"
    }
  }
}

iOS

• Open Project overview in the Firebase console and click on the iOS icon or + button to Add Firebase to your iOS app.
• Make sure that the iOS bundle ID is the same as the value of ios.bundleIdentifier in your app.json.
• Register the app & download the config file by clicking "Download GoogleService-Info.plist" and drag the file into your Expo project folder.
• Add the relative path to the iOS GoogleService-Info.plist file to app.json.

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.mypackage.coolapp",
      "googleServicesFile": "./GoogleService-Info.plist"
    }
  }
}

Web

• Open Project overview in the Firebase console and click on the Web icon or + button to Add Firebase to your Web app.
• Register the app & copy the config into your app.json under the key web.config.firebase.

{
  "expo": {
    "web": {
      "config": {
        "firebase": {
          "appId": "xxxxxxxxxxxxx:web:xxxxxxxxxxxxxxxx",
          "apiKey": "AIzaXXXXXXXX-xxxxxxxxxxxxxxxxxxx",
          "projectId": "my-awesome-project-id",
          ...
          "measurementId": "G-XXXXXXXXXXXX"
        }
      }
    }
  }
}

Bare Workflow Setup

Android

• Open Project overview in the Firebase console and click on the Android icon or + button to Add Firebase to your Android app.
• Make sure that the Android package name is the same as the value of applicationId in your android/app/build.gradle.
• Register the app & download the config file by clicking "Download google-services.json" to this location /android/app/google-services.json.
• Import the google-services plugin inside of your android/build.gradle file:

  buildscript {
      dependencies {
          classpath 'com.google.gms:google-services:4.3.5'
      }
  }
  

• Apply the plugin by adding this line to the bottom of the android/app/build.gradle file:

  apply plugin: 'com.google.gms.google-services'
  

• Finally rebuild your native Android app: expo run:android

iOS

• Open Project overview in the Firebase console and click on the iOS icon or + button to Add Firebase to your iOS app.
• Make sure that the iOS bundle ID is the same as the value of Bundle Identifier of your iOS project.
• Register the app & download the config file by clicking "Download GoogleService-Info.plist".
• Open your Expo iOS project in Xcode ios/{projectName}.xcworkspace and then drag the services file into your project. If you don't see the .xcworkspace workspace file, run npx pod-install to create it.
  • Be sure to enable 'Copy items if needed'.
• Initialize the default Firebase app by opening the AppDelegate file in your project.
  • If you're using Expo SDK 45 or later, add the following to the top of the ios/{projectName}/AppDelegate.mm file:

    #import <Firebase/Firebase.h>
    

  • For versions prior to Expo SDK 45, add the following to the top of ios/{projectName}/AppDelegate.m file:

    @import Firebase;
    

  Note that following the upgrade to Expo SDK 45, your AppDelegate file will have the .mm extension as opposed to the .m extension.
• At the top of the didFinishLaunchingWithOptions method:

  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
      [FIRApp configure];
  

• Rebuild your iOS project to see the changes: expo run:ios

Usage with react-native-firebase

• Install the react-native-firebase packages (e.g. yarn add @react-native-firebase/app @react-native-firebase/auth etc..)
• Install the pods on iOS