Expo & Firebase Integration

In this article, I will talk about the Firebase integration with Expo, which has become very famous recently.
First, let’s create our project:

yarn create expo test-firebase

Since the RnFirebase integration will not work in the Expo Go application, we need to build the project as a dev client:

npx expo run:ios

Here you are asked for bundle identifier. You can set it like com.example.myapp. For Android, you can create as run:android command.

The following files are added/replaced after the required native components are installed:

• ios directory: Adding native ios directory
• metro.config.js: Configuration file for metro configurations.
• index.js file: Normally AppEntry.js but metro bundler runs through index.js so a starter file is needed
• app.json: adding bundleIdentifier
• package.json: adding expo-splash-screen. The start, android, ios commands in the scripts section are replaced with the run: prefix

Now let’s add Firebase app and crashlytics:

yarn add @react-native-firebase/app @react-native-firebase/crashlytics

Next, let’s create Android and iOS projects via Firebase console and download google-services.json and GoogleService-Info.plist files.

Note: It will ask for SHA1 key for Android. For this, you can get the sha1 key in the android directory with the following command:

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android |pcregrep -o1 "SHA1: (.+)"

Then add the downloaded files to the home directory as follows:

Now, after coming into the app.json file, let’s add these files to the ios and android parts and create the plugins part as follows:

{
  "expo": {
    "android": {
      "googleServicesFile": "./google-services.json"
    },
    "ios": {
      "googleServicesFile": "./GoogleService-Info.plist"
    },
   "plugins": [
      "@react-native-firebase/app",
      "@react-native-firebase/crashlytics",
      [
        "expo-build-properties",
        {
          "ios": {
            "useFrameworks": "static"
          }
        }
      ]
    ],
  }
}

Now let’s add the expo-build-properties plugin to change the podfile on the /ios side:

npx expo install expo-build-properties

Now let’s run the prebuild command to activate the plugins:

npx expo prebuild --clean

This command will automatically add Firebase to the project after copying the google services files to the corresponding places in android and ios directory.

The changes after the command is run are as in the image below:

Now let’s look at the usage of the crashlytics package.

Crashlytics Integration

Crashlytics comes off in debug mode. To activate it, you can create a file named firebase.json in the project root directory and add the following content:

{
  "react-native": {
    "crashlytics_debug_enabled": true
  }
}

Next, let’s prebuild again:

npx expo prebuild --clean

Şu an crash göndermek için hazırız. App.js dosyasını aşağıdaki gibi değiştirip buton ekleyelim:

import React from "react";
import { Button, SafeAreaView } from "react-native";
import crashlytics from "@react-native-firebase/crashlytics";

export default function App() {
  return (
    <SafeAreaView>
      <Button title="Crash Test" onPress={() => crashlytics.crash()} />
    </SafeAreaView>
  );
}

Now, let’s run the project with the yarn ios command, press the button and close the application and restart app. (We do this because Crashlytics reports are sent when the app is first opened after the crash)

When you check it from the Crashlytics tab, you can see that the error is reflected as follows:

Conclusion

In this article, we mentioned the Expo Firebase integration and Crashlytics example. Automatically adding code on the native side via Expo plugins makes it very simple (We didn’t need to open any XCode). We can say that Firebase integration is no longer a nightmare.

You can get the latest version of the project here: https://github.com/ozcanzaferayan/expo-firebase-integration

If there are parts of this article that you think are missing / incorrect, you can contact me. See you again in my next post…