Integrating Appcenter Analytics and Crashlytics in your React Native app (Android)

ยท

0 min read

Full code can be found here

Hey there, Looking at getting information on your react native app using appcenter, you're in the right place. This is a quick step by step guide on how I integrated appcenter analytics and crashlytics in my react native android app.

If you don't have an account on appcenter , try creating one first.

  • Add new app on appcenter as shown in image below Screenshot 2019-12-19 at 10.48.21.png

  • Add SDK to your project (if stuck, please look up Overview tab on project on appcenter for better understanding)

  • Run npm install appcenter appcenter-analytics appcenter-crashes --save-exact

  • Add a appcenter-config.json file in android/src/main/assets/ and paste app secret from your appcenter overview tab as
      {
          "app_secret": "APP_SECRET"
      }
  • Update strings.xml file in android/src/main/res/values/strings.xml to include
<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
  • Update dependencies in android/app/src/build.gradle file to include
    implementation project(':appcenter-crashes')
    implementation project(':appcenter-analytics')
    implementation project(':appcenter')
  • Update android/settings.gradle file to include
include ':appcenter-crashes'
project(':appcenter-crashes').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-crashes/android')
include ':appcenter-analytics'
project(':appcenter-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter-analytics/android')
include ':appcenter'
project(':appcenter').projectDir = new File(rootProject.projectDir, '../node_modules/appcenter/android')
  • import appcenter dependencies in MainApplicaation.java file to include
import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;

and

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new AppCenterReactNativeCrashesPackage(MainApplication.this, getResources().getString(R.string.appCenterCrashes_whenToSendCrashes)),
            new AppCenterReactNativeAnalyticsPackage(MainApplication.this, getResources().getString(R.string.appCenterAnalytics_whenToEnableAnalytics)),
            new AppCenterReactNativePackage(MainApplication.this),
            ... ... ...
      );
    }

And your app is ready ๐Ÿ˜Š

Run react-native run-android and you'll see your analytics tab on appcenter populated with your data

Screenshot 2019-12-19 at 10.38.45.png