Docs-logo

Expo

Get Started
Guides
Slash-shortcut-icon
Hamburger-icon

Using the native Firebase SDK

It's possible to use Firebase through the web SDK, built only in JavaScript, or the native SDK, which is built in native code for iOS and Android. The web SDK only provides access to some Firebase features and the most notable limitation is the lack of support for browser features used in Firebase Analytics or the redirect URI scheme used for phone authentication. If this is important for you, it may make sense to install the native SDK in your app.

Create Firebase project

If you have not done so already, create a Firebase project for your app by clicking on Add project in the Firebase Console.
This will guide you through a series of steps to create your own Firebase project.

Some (but not all) native Firebase features can be used with the Managed Workflow. The most notable native feature is Firebase Analytics, which is otherwise unavailable in react-native using the Firebase JavaScript SDK.

  • 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

  • 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"
    }
  }
}

  • 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"
    }
  }
}

  • 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"
        }
      }
    }
  }
}

In the bare workflow, the firebase configuration needs to be added according to the native Firebase SDK installation guides for iOS and Android. Below you will find a tailored instruction for use with react-native and the Expo Bare Workflow.
You are free to use any native Firebase packages such as react-native-firebase in the bare workflow.

  • 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

  • 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

After following the iOS and Android setup, you can optionally configure your project to work with react-native-firebase version 6 as well.
  • Install the react-native-firebase packages (e.g. yarn add @react-native-firebase/app @react-native-firebase/auth etc..)
  • Install the pods on iOS
Continue further on the react-native-firebase website.