React Native(Expo) に React Native Firebase を導入する

2020-06-262023-08-15

はじめに

モバイルアプリケーションの開発を行う際の定番アーキテクチャの一つである React Native(Expo) × Firebase。

React NativeアプリからFirebaseを利用する方法はいくつかありますが、 今回開発するアプリケーションの要件として、Firestoreのオフラインデータアクセスを実現する必要があったため、React Native向けFirebase SDKのラッパーである「React Native Firebase」を採用しました。

この記事では、 React Native(Expo) アプリからFirebaseを利用する際の注意点と、React Native Firebaseの導入手順をご紹介したいと思います。

Expo × Firebase の注意点

注意点１

注意点２

環境について

この記事では、以下のモジュールバージョンの利用を前提としております。

※ また、Expo(Bare workflow) / Firebase プロジェクトが作成されていることを前提に以降の手順を記載します。

導入手順（Android向け）

React Native Firebase 導入手順を以下に記載します。（ Android環境向けの設定手順となります。 ）

① React Nativeプロジェクトでモジュールのインストールを行います。

# using npm
 $ npm install --save @react-native-firebase/app

# using Yarn
 $ yarn add @react-native-firebase/app

② ブラウザからFirebaseコンソールにアクセスし、対象のFirebaseプロジェクト ＞ プロジェクト名下部の 「+アプリを追加」 を押下します。

③ Androidアイコンを押下します。

④ プロジェクトフォルダの以下のファイルを開き、manifestタグ内「package」に設定されている値を控えておきます。

⑤ Firebase画面に戻り、「Androidパッケージ名」に④で控えた値を入力します。

※ アプリのニックネーム等は任意で入力してください。

⑥ 「google-services.json」をダウンロードし、プロジェクトの以下のフォルダ内に配置します。

⑦ 表示された内容に従って、２つのbuild.gradleファイルに設定を追記します。

▶ (1) ./android/build.gradle

buildscript {
   ext {
     ・・・
   }
   repositories {
     google()
     ・・・
   }
   dependencies {
     ・・・
     // React Native Firebase Setting（下記を追記）※ 記載例
     classpath 'com.google.gms:google-services:4.3.3'
   }
 }

▶ (2) ./android/app/build.gradle

// React Native Firebase Setting（ファイルの最後に下記を追記）※ 記載例
apply plugin: 'com.google.gms.google-services'

⑦ Expoプロジェクト内でコマンドを実行し、アプリのビルドを行います。

$ npx react-native run-android

発生した問題と対処法

筆者がRecat Native Firebase導入の際に発生した問題と、その対処法を記載しておきます。

① モジュールインストール後の初回ビルドでエラー

インストール後、初回のビルドで以下の様なメッセージが表示され、ビルドエラーが発生しました。

■ 対処方法

$ cd android
$ ./gradlew clean

② ビルド時に、OutOfMemoryエラー

ビルドした際に、OutOfMemoryが発生しました。

■ 対処方法

Recat Native Firebaseモジュールを追加してビルドを行うと、Androidビルドシステムのメモリを大きく消費するようです。
以下のファイルを編集し、Gradleメモリに適切な値を設定後、再度ビルドを行うことで無事Build SUCCESSとなりました。

※ 上記はデフォルトでコメントアウトされている設定を有効にした例になります。

まとめ

FirebaseとExpoは、React Nativeアプリの開発において非常に大きな助けとなります。
両者が持つ機能を大いに活用していくことが、さらなる開発効率向上の鍵となるでしょう。

もっとFirebaseの機能を引き出してReact Nativeアプリを作りたい、という場合は、React Native Firebase の導入を検討してみてはいかがでしょうか。