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 から入れないとダメだった。
結構、はてなが付く事が多いが、これで開発進められるはず..!