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