ReactNative + Firestore の環境構築を進めていたけど、結構ハマりポイントがあったので忘れないうちに備忘録。

基本的には下記の公式ドキュメントを元に進めていく。 https://rnfirebase.io/docs/v5.x.x/installation/initial-setup

まずはプロジェクトの作成から

react-native init hogehoge
cd hogehoge

必要なモジュールをインストール

yarn add react-native-firebase

ここからGoogleService-Info.plistを入れたり、ソースの修正が必要なので、Xcode を立ち上げる。

open ios/{PROJECT_NAME}.xcodeproj

Firebase でプロジェクトを作って、 GoogleService-Info.plist をダウンロード。 この辺りは、ドキュメントを参照してダウンロードまで進める。

それと、Firestore を使うので、ブラウザの Firestore 上で最初の使いますボタンのポチ、だけは終わらせとく。

GoogleService-Info.plistがダウンロード出来たら、それを Xcode のプロジェクト内にドラッグして入れる。 その際にリファレンス付けるポップアップが出るので、リファレンス付きで入れるようにする。

直接 Finder などからios直下に入れてもダメで、ちゃんとドラッグしてリファレンス付きで入れる必要がある。 ちゃんと入ってないと run-ios した時にアプリが立ち上がってすぐにエラー画面もなくクラッシュする。 また Xcode の BundleID を GoogleService-info.plist の BundleID と合わせる。 合わせなくても run-ios は走るが、たぶん最終的に Xcode でビルドする時はエラーになる。

次に Xcode 上のAppDelegate.mを開いて、先頭に下記を追加。先頭と言ってもファイルの先頭である必要はない。他の#importの下とかで良い。

#import <Firebase.h>

それと、didFinishLaunchingWithOptions:(NSDictionary *)launchOptionsメソッドの下に以下を追加する

[FIRApp configure];

これで Xcode は閉じて良い。

次に、ターミナル上で、Podfileを生成する

cd ios
pod init

Podfileされるので下記のように編集する。

platform :ios, '9.0' # ここのコメントを外す

pod 'Firebase/Core'

# これはコメントアウトしないとpod install出来ない
# target 'rnf9-tvOSTests' do
#   inherit! :search_paths
#   # Pods for testing
# end

※注意点 通常なら、pod 'Firebase/Firestore'をpod 'Firebase/Core'の下とかに書いて一緒に入れたいけど、なぜか Core と一緒にインストールすると、run-ios 時にエラーが出て動かない。まず Core を入れて link して Firebase の構築が出来た後に Firestore を入れる手順だと無事動いた。

その時のエラー文(は？って感じだ。)↓ RNFirebase core module was not found natively on iOS, ensure you have correctly included the RNFirebase pod in your projects Podfile and have run pod install.

上のPodfileの修正が終わったら

pod install

react-native-firebase を link する

cd ../
react-native link react-native-firebase

link が終わったタイミングで、Podfileに Firestore を書き足す。

pod 'Firebase/Firestore'

もう Firestore をインストール

pod install

これで動くはずなので、App.js に以下を追加。

import firebase from "react-native-firebase";

firebase.firestore().collection("hoge").add({
  value: "入ってーーー",
});

ちゃんと使えるかチェックする。

react-native run-ios

エラーなく初期画面が立ち上がって、更新するたびに Firestore にデータが格納されていけば成功。

まとめ

Firestore を pod install するタイミングとかが結構、謎で Core と一緒のタイミングで入れたいけどダメだった。 GoogleService-info.plist もディレクトリに単に放り込めば良い的なものを見たが、Xcode から入れないとダメだった。 結構、はてなが付く事が多いが、これで開発進められるはず..!