React NativeでFirebaseのRealtime Databaseを使う -その1-

やりたいこと

React Nativeで実装したアプリでFirebaseのRealtime Databaseを使ってアプリデータの保存と同期をリアルタイムで行いたい。
今回はAndroidアプリについて実装します。
その1ではReact NativeのAndroidアプリにFirebaseを導入するまでです。

導入手順

React Nativeアプリの作成

$ react-native init FirebaseSampleApp

Firebaseプロジェクトの作成

https://console.firebase.google.com/ で新規プロジェクトを作成します。
Databaseを選択し、Realtime Databaseの「データベースを作成」をクリックします。

今回はテストモードで開始します。

AndroidアプリにFirebaseを追加

プロジェクトの設定からAndroidアプリにFirebaseを追加を行います。

Androidパッケージ名は、android/app/build.gradleのapplicationIdを指定します。
アプリのニックネームは任意です。
デバッグ用の署名証明書 SHA-1はRealtime Databaseを使う場合入力する必要があります。（Firebase Cloud Messaging（FCM）の機能だけ使いたい場合は省略できるようです）

Mac/Linuxの場合、以下のコマンドでSHA-1を入手できます。
キーストアのパスワードのデフォルトはandroidです。
https://developers.google.com/android/guides/client-auth

$ keytool -exportcert -list -v \
-alias androiddebugkey -keystore ~/.android/debug.keystore

入力をしたらアプリを登録をクリックし、次に設定ファイル(google-service.json)のダウンロードを行います。
ダウンロードしたgoogle-service.jsonはandroid/app/google-service.json以下に配置します。

最後にFirebase SDKの追加を行います。
今回はRealtime Databaseを使うためそのSDKも一緒に追加しておきます。

android/build.gradle

// ...
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.2'
        classpath 'com.google.gms:google-services:4.0.1' // 追加
        // ...
    }
// ...

android/app/build.gradle

// ...
dependencies {
    implementation project(':react-native-firebase')
    implementation "com.google.firebase:firebase-core:16.0.1" // 追加
    implementation "com.google.firebase:firebase-database:16.0.1" // 追加
    // ...
}

// ..

apply plugin: 'com.google.gms.google-services' // 一番下の行に追加

android/app/src/main/java/com/firebasesampleapp/MainApplication.java

// ...
import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.database.RNFirebaseDatabasePackage; // 追加

public class MainApplication extends Application implements ReactApplication {
    // ...

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNFirebasePackage(),
          new RNFirebaseDatabasePackage() // 追加
      );
    }
  };
  // ...
}

これでアプリにFirebaseが追加されました。
一旦、アプリをbuildして実行してみます。

$ react-native run-android

$ react-native start

このような表示になればFirebaseの追加は成功です。
その2では実際にアプリからRealtime Databaseにデータ保存と取得を行います。