react-native-firebase V6 Crashlytics

2020-06-10 hit count image

react-native-firebase(V6)を使ってFirebaseのCrashlyticsを使う方法について説明します。

概要

React NativeプロジェクトでFirebaseCrashlyticsを使うためreact-native-firebaseを使う方法にてついて説明します。

このブログポストはシリーズで作成されております。他の内容を確認したい方は下記のブログリストを参考してください。

react-native-firebaseの以前のバージョン(V5)を使う方法については下記のブログリストを参考してください。

react-natiev-firebaseのインストールや準備

下記のブログを参考してreact-native-firebaseをインストールして、Firebaseプロジェクトを生成します。

ライブラリインストール

下記のコマンドを使ってreact-native-firebaseCrashlyticsをインストールします。

npm install --save @react-native-firebase/crashlytics

下記のコマンドを使ってiOSプロジェクトへreact-native-firebaseのCrashlyticsを連結します。

cd ios
pod install

Firebaseプロジェクト設定

次はGoogleのファイアベース(Google Firebase)でプロジェクトへCrashlyticsを設定する必要があります。FirebaseのConsoleへ移動して、左のメニューでCrashlyticsを選択します。

crashlytics add sdk

上にあるAdd SDKボタンを押してSDKを追加します。そして、Crashlyticsのタイトル横にあるプロジェクトを選択してiOS/アンドロイドで変更して、Add SDKを押してiOS、アンドロイド、両方へSDKを追加します。

iOS設定

react-native-firebaseのCrashlyticsを使うためiOSを設定する方法について説明します。

Build Phase 追加

iOSでCrashlyticsを使うためBuild Phaseを設定する必要があります。ios/[project name].xcworkspaceを選択してXcodeを実行します。

crashlytics build phase

Xcodeが実行されたら左のプロジェクトを選択して右上のBuild Phasesタブを選択します。Build Phaseを追加するため、左上の+ボタンを選択して、New Run Script Phaseメニューを押します。

crashlytics add script

New Run Script Phaseメニューで追加されたRun Scriptを開いて下記の内容をそのままコピペします。

"${PODS_ROOT}/Fabric/run"

iOSプロジェクト実行

上のように全ての設定が終わったら、下記のコマンドを使ってiOSプロジェクトを実行します。

npm run ios

アンドロイド設定

react-native-firebaseのCrashlyticsを使うためアンドロイドを設定する方法について説明します。

Fabric設定

アンドロイドでCrashlyticsを使うためにはFabricを設定する必要があります。android/build.gradleファイルを開いて下記のように修正します。

...
buildscript {
  ...
  repositories {
    ...
    maven {
      url 'https://maven.fabric.io/public'
    }
  }
  dependencies {
    ...
    classpath 'io.fabric.tools:gradle:1.28.1'
  }
  ...
}
...

そしてandroid/app/build.gradleファイルを開いて下記のように修正します。

apply plugin: "com.android.application"
apply plugin: 'io.fabric'
...
applicationVariants.all { variant ->
    ...
}
crashlytics {
    enableNdk true
}

アンドロイドプロジェクト実行

上のように設定をしたら下記のコマンドを使ってアンドロイドプロジェクトを実行します。

npm run android

完了

これでFirebaseのCrashlyticsを使うため、react-native-firebaseライブラリを使う方法を説明しました。

crashlytics integration

react-native-firebaseでCrashlyticsをうまく設定して、React Nativeプロジェクトを実行すると、上のような画面が確認できます。

Posts