Zenn
🚀

Expo未対応のFirebaseパッケージをConfig Pluginで導入する

2023/10/29に公開
Firebase
React Native
Expo
tech

要約

  • Firebase　AnalyticsやRemoteConfigなどのサポートをExpoのManaged Flow (iOSのみ)に追加する方法を調査し、実装しました
  • 追加するためには、@react-native-firebase/analytics, @react-native-firebase/remote-configのConfig Pluginを作成する必要があります
  • Config Pluginは、expo-module-scriptsを利用して以下の通りに実装します
index.ts
import {ConfigPlugin, withPlugins} from '@expo/config-plugins';

import withRnFirebaseAnalytics from './@react-native-firebase/analytics';
import withRnFirebaseRemoteConfig from './@react-native-firebase/remote-config';

const withMyConfigPlugins: ConfigPlugin = (config) => {
  return withPlugins(config, [
    withRnFirebaseRemoteConfig, 
    withRnFirebaseAnalytics
  ]);
};

export default withMyConfigPlugins;
remote-config.ts

import {ConfigPlugin, withPlugins, createRunOncePlugin} from '@expo/config-plugins';

const withRnFirebaseRemoteConfig: ConfigPlugin = (config) => {
  return withPlugins(config, [
    // TBD for Android
  ]);
};

const pak = require('@react-native-firebase/remote-config/package.json');
export default createRunOncePlugin(withRnFirebaseRemoteConfig, pak.name, pak.version);
  • app.jsonにConfig Pluginの設定を以下のように追加します
app.json
{
  "expo": {
    ...
    "plugins": ["./plugin/build"]
  }
}

以上です。

概要

Expoの制限

Expoは、Managed Workflowを利用する上ではFirebase JS SDKを推奨していますが、対応しているFirebaseのサービスは、

※CrashlyticsやAnalyticsなどのパッケージもJS SDKに含まれていますが、React Nativeが　現時点ではIndexed DBをサポートしていないため、実行しても以下のエラーが出るため正しく動作しなかったです。

FirebaseError: Remote Config: Indexed DB is not supported by current browser (remoteconfig/indexed-db-unavailable)

そのため、上記４サービス以外を利用する場合は、JS SDKではなく@react-native-firebaseを導入する必要があります。

@react-native-firebaseの導入

Expoに＠react-native-firebaseを導入するには、2つの方法があります。

  1. expo ejectしてBare Workflowにしてから導入する（つまり、素のReact Native）
  2. Config Pluginを設定し、Managed Workflowのまま導入する

今回、私は1人で開発＆メンテナンスしているため、ここでは何がなんでもManaged Workflowを貫く方針で進めました（一度、素のReact Nativeの開発をしたことがある方なら分かると思いますが、バージョンアップの対応がかなり辛いです）。

Config Pluginの設定方法

ここでもさらに２つの設定方法があります。ExpoのConfig Pluginサポートされているものとされていないものです。@react-native-firebaseでConfig Pluginのサポートがされているものは、

  • Authentication
  • Crashlytics
  • Dynamic Links
  • Performance Monitoring
    となっております(2023年10月時点)。詳細は　GitHub Repositoryの各パッケージの中のpluginディレクトリの有無で判断してください。

サポートされているものは、React Native Firebaseの公式ドキュメントにある通り、app.jsonのpluginsに追加するだけですぐ利用できます。

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

一方で、サポートされていないものは、自分でConfig Pluginを作成する必要があります。
詳しい作り方については、expo-module-scriptsの公式ドキュメントを参考に環境構築など準備をしてください。英語が苦手な方は、こちらの日本語訳を用意してくれているブログを参考にするとすぐできます。

既存コードを参考にConfig Pluginを実装

すでにExpoのConfig Pluging対応がされている@react-native-firebase/crashlyticsや@react-native-firebase/perfのリポジトリを覗いてみると、いずれも以下の実装だけのようです。特にiOSは、パッケージ名とバージョンをインポートするだけで良さそうです。

import { ConfigPlugin, withPlugins, createRunOncePlugin } from '@expo/config-plugins';

import { withApplyCrashlyticsPlugin, withBuildscriptDependency } from './android';

const withRnFirebaseCrashlytics: ConfigPlugin = config => {
  return withPlugins(config, [withBuildscriptDependency, withApplyCrashlyticsPlugin]);
};

const pak = require('@react-native-firebase/crashlytics/package.json');
export default createRunOncePlugin(withRnFirebaseCrashlytics, pak.name, pak.version);

必要なモジュールに対してConfig Pluginを実装したら、あとはapp.jsonに設定するだけで良いです。

正しくConfig Pluginが設定されているかの確認

npx expo prebuild --clean　 -p iosを実行するとiosディレクトリにXcodeのプロジェクトファイルが生成されるので、それを開いてPodsの中に該当のライブラリがコードごとインポートされていれば正しく設定されています。

なお、Xcode上でビルドすると動作しますが、Expo Goでは動作しませんでした。

Discussion