【React Native】React Native + Firebase環境を構築する（iOS）

React Native + Firebase環境を構築する際のメモ。

Firebase

firebase.google.com

FirebaseはGoogleが提供するモバイルプラットフォームであり、クラウドDBや認証、アナリティクス、クラッシュレポートなど多くのサービスをサポートしています。今回はReact NativeによるモバイルアプリにこのFirebaseを導入したいと思います。

Usage

1. プロジェクト作成

1.1 $ react-native initでReact Nativeプロジェクトを作成します。

$ react-native init my-app

1.2 firebaseのインストール

作成したプロジェクト内でreact-native-firebaseをインストールします。

$ cd my-app
$ npm install --save react-native-firebase

2. FirebaseのiOS/Android設定ファイルを取得する

2.1 Firebaseにプロジェクトを作成

GoogleのFirebase公式ページへ遷移し、「使ってみる」を押す（Googleにログインしていない場合はログインする）

firebase.google.com

2.2 プロジェクト追加をクリック

2.3 プロジェクト名とIDを入力し、「次へ」を押す

2.4 プロジェクトのダッシュボードに移動、「iOSアプリにFirebaseを追加」を押す

2.5 アプリを登録

「iOS バンドル ID」は作成したプロジェクトと同名にします。

アプリ設定ファイル（iOS）（GoogleService-Info.plist）をダウンロードします。

取得した設定ファイルをios/[project]/配下に置きます。
その後、ios/[project]/配下でpod initを使用し、Podfileを作成します。

$ pod init

Podfileを以下のように書き換えます。

target '[Project name]' do
  pod 'Firebase/Core'
end

書き換えたら

$ pod install

2.6 AppDelegate.mを書き換え

[プロジェクト名].xcworkspaceをXCodeで立ち上げ、以下の記述を追加

Swiftの場合

import Firebase // 追加

 ...

  func application(_ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?)
    -> Bool {
    FirebaseApp.configure() // 追加

Objective-Cの場合

@import Firebase; // 追加

...

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [FIRApp configure]; // 追加

}

デプロイ

$ react-native run-ios

参考

Using Firebase - Expo Documentation