Expoでreact-native-firebaseを使う

はじめに

Expoを使ったアプリ開発でfirebase-js-sdkを使っていたのですが、Crashlyticsやその他機能を利用できるようにreact-native-firebaseに乗り換えました。今回のようにExpoでネイティブコードに依存するライブラリを使う場合、Expo prebuildやEAS buildを使うことでExpoをejectすることなく、問題なく動作確認しながら進めることができます(執筆時に使っていたExpoのバージョンはv50.0.8）。

必要なライブラリのインストール

必要なreact-native-firebaseライブラリを一通りインストール。

npx expo install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore @react-native-firebase/crashlytics

iOSの設定向けにexpo-build-propertiesをインストールする必要があります。

npx expo install expo-build-properties

設定ファイルまわり

Googleログインの有効化

FirebaseのプロジェクトでGoogleログインを有効化していないと、後述のGoogleService-Info.plistダウンロード時にCLIENT_IDとREVERSE_CLIENT_IDがファイルに含まれない問題があるため、googleログインを使う予定がなくても一時的に有効化するのが良さそうです（後で無効化にできる）。

Google Serviceファイルの取得

Firebase Consoleの該当プロジェクト画面からアプリを追加をクリックし、iOS、androidアプリをそれぞれ作成。作成後にiOSアプリから GoogleService-Info.plist、androidアプリからgoogle-services.jsonをダウンロードし、プロジェクトのroot配下にそれぞれを設置（別のパスに設置する場合はそちらのパスを下記app.jsonにも反映させる）。

app.jsonの更新

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

設定は以上で、各ライブラリを使った実装が進められるようになります。

// Firestore
import firestore from '@react-native-firebase/firestore';

const usersCollection = firestore().collection('Users');

ローカルのシミュレータで確認しながら実装を進める場合は、npx expo prebuild(iosとandroidディレクトリが作られる)した後に、npx expo run:ios（もしくはnpx expo run:android)することで、シミュレータが立ち上がり、コード変更時にホットリロードします。実機で確認しながら進める場合は、expo-dev-clientが便利です。

まとめ

少し設定周りの理解が必要でしたが問題なくfirebase-js-sdk から react-native-firebaseにスムーズに移行ができました。今後も依存するライブラリは定期的に見直しの検討をしようと思います（結果長期的な恩恵を受けるため）。