Get Started with React Native

The App Center SDK uses a modular architecture so you can use any or all of the services.

Let's get started with setting up App Center React Native SDK in your app to use App Center Analytics and App Center Crashes.

1. Prerequisites

Before you begin, make sure that the following prerequisites are met:

• You're using a React Native project that runs React Native 0.34 or later.
• You're targeting devices that are running on Android Version 5.0/API level 21 or later, or iOS version 9.0 or later.
• You're not using any other library that provides Crash Reporting functionality on iOS.
• For iOS, the default way to use the SDK requires CocoaPods. (If you haven't installed CocoaPods, follow the CocoaPods Getting Started to do so). Nonetheless, it's possible to link the SDK manually.

2. Create your app in the App Center Portal to obtain the App Secret

If you've already created your app in the App Center portal, you can skip this step.

1. Head over to appcenter.ms.
2. Sign up or log in and hit the blue button on the top right corner of the portal that says Add new and select Add new app from the dropdown menu.
3. Enter a name and an optional description for your app.
4. Select the appropriate OS (Android or iOS) and select React Native as the platform.
5. Hit the button at the bottom right that says Add new app.

Once you've created an app, you can obtain its App Secret on the Settings page on the App Center Portal. At the top right hand corner of the Settings page, click on the triple vertical dots and select Copy app secret to get your App Secret.

3. Add the App Center SDK modules

The default integration of the SDK uses CocoaPods for iOS. If you're not using CocoaPods in your app, you need to integrate the React Native SDK manually for your iOS app.

Open a Terminal and navigate to the root of your React Native project, then enter the following line to add App Center Analytics and Crashes to the app:

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

In case you prefer yarn over npm, use the following command to install App Center:

yarn add appcenter appcenter-analytics appcenter-crashes --exact

The App Center SDK uses a modular approach, where you just add the modules for App Center services that you want to use. appcenter-analytics and appcenter-crashes make sense to add to almost every app, as they provide value with no additional setup required. appcenter provides general purpose App Center APIs, useful for multiple services.

3.1 Integrate the SDK automatically for React Native 0.60

Using App Center SDK with React Native can be done in two ways: Configuring the AppCenter-Config.plist for iOS and appcenter-config.json for Android or by calling the native start functions that accept the appSecret as an argument.

3.1.1 Integrate React Native iOS

Run pod install --repo-update from iOS directory to install CocoaPods dependencies.

3.1.1.1 Setting AppSecret Option 1: Configuring AppCenter-Config.plist

1. Create a new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the Xcode project (right-click the app in Xcode and click Add files to <AppName>...).

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
   <plist version="1.0">
       <dict>
       <key>AppSecret</key>
       <string>{APP_SECRET_VALUE}</string>
       </dict>
   </plist>
   

2. Modify the app's AppDelegate.m or AppDelegate.mm file to include code for starting SDK.

   • Add the following imports:

   #import <AppCenterReactNative.h>
   #import <AppCenterReactNativeAnalytics.h>
   #import <AppCenterReactNativeCrashes.h>
   

   • Add these lines to the application:didFinishLaunchingWithOptions: method:

   [AppCenterReactNative register];
   [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
   [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
   

3.1.1.2 Setting AppSecret Option 2: Configuring in code

Modify the app's AppDelegate.m or AppDelegate.mm file to include code for starting SDK.

• Add the following imports:

#import <AppCenterReactNativeShared/AppCenterReactNativeShared.h>
#import <AppCenterReactNative.h>
#import <AppCenterReactNativeAnalytics.h>
#import <AppCenterReactNativeCrashes.h>

• Add these lines to the application:didFinishLaunchingWithOptions: method:

[AppCenterReactNativeShared setStartAutomatically:YES];
[AppCenterReactNativeShared setAppSecret:@"{Your App Secret}"];
[AppCenterReactNative register];
[AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
[AppCenterReactNativeCrashes registerWithAutomaticProcessing];

3.1.2 Integrate React Native Android

Modify the app's res/values/strings.xml to include the following lines:

<string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
<string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>

3.1.2.1 Setting AppSecret Option 1: Configuring appcenter-config.json

Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace {APP_SECRET_VALUE} with your app secret value.

{
    "app_secret": "{APP_SECRET_VALUE}"
}

Note: If the folder named assets doesn't exist, it should be created under "project_root/android/app/src/main/assets".

3.1.2.2 Setting AppSecret Option 2: Configuring in code

Add the following line inside your app's main activity class' onCreate-callback to use App Center Analytics and App Center Crashes:

AppCenter.start(getApplication(), "{Your App Secret}", Analytics.class, Crashes.class);

AppCenter.start(application, "{Your App Secret}", Analytics::class.java, Crashes::class.java)

3.2 Integrate the SDK automatically for React Native lower than 0.60

1. Link the plugins to the React Native app by using the react-native link command.

   react-native link appcenter
   react-native link appcenter-analytics
   react-native link appcenter-crashes
   

   For iOS, it will try to download the App Center SDK for iOS and macOS from CocoaPods, if you see an error like:

   Added code to initialize iOS App Center SDK in ios/reactnativesample/AppDelegate.m
   Analyzing dependencies [!] Unable to find a specification for AppCenterReactNativeShared (~> {version}) 
   

   Run the following command:

   pod repo update
   

   And then retry running react-native link.

   Note

   App Center SDK doesn't set up mocks automatically for App Center modules during the linking process. If you're using Jest test framework in your application and experience errors caused by the App Center SDK while running tests with Jest, add the following to the jest section of package.json file (include only modules in use):

   "setupFiles": [
      "<rootDir>/node_modules/appcenter/test/AppCenterMock.js",
      "<rootDir>/node_modules/appcenter-analytics/test/AppCenterAnalyticsMock.js",
      "<rootDir>/node_modules/appcenter-crashes/test/AppCenterCrashesMock.js",
   ]
   

   Note

   Whether processing of crashes is automatic or triggered by Javascript methods, crashes are always processed after the restart of the application. Crashes can't be processed at the time the application crashes.

2. Edit the project's android/app/src/main/assets/appcenter-config.json and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret.

3. Edit the project's ios/{YourAppName}/AppCenter-Config.plist file, and replace the YOUR_APP_SECRET placeholder value with your App Center project's application secret. If AppCenter-Config.plist already exists but not part of your Xcode project, you must add it to the Xcode project manually (right-click the app in XCode and click Add files to <App Name>...).

3.3 [iOS only] Integrate the SDK manually for React Native without react-native link or CocoaPods

Do this integration, if you don't want to use CocoaPods. We strongly recommend integrating the SDK via CocoaPods as described above. Nonetheless, it's also possible to integrate the iOS native SDK manually.

1. Download the App Center SDK for React Native frameworks provided as a zip file and unzip it.

2. You'll see a folder named AppCenterReactNativeShared which contains a single framework for the required React Native iOS bridge.

3. Download the corresponding App Center SDK for iOS frameworks provided as a zip file and unzip it.

4. You'll see a folder called AppCenter-SDK-Apple/iOS that contains different frameworks for each App Center service. The framework called AppCenter is required in the project as it contains code that's shared between the different modules.

5. [Optional] Create a subdirectory for 3rd-party libraries.

   • As a best practice, 3rd-party libraries usually reside inside a subdirectory (it's often called Vendor), so if you don't have your project organized with a subdirectory for libraries, create a Vendor subdirectory now (under the ios directory of your project).
   • Create a group called Vendor inside your Xcode project to mimic your file structure on disk.

6. Open Finder and copy the previously unzipped AppCenter-SDK-Apple/iOS and AppCenterReactNativeShared folders into your project's folder at the location where you want it to reside.

7. Add the SDK frameworks to the project in Xcode:

   • Make sure the Project Navigator is visible (⌘+1).
   • Drag and drop the AppCenter.framework, AppCenterAnalytics.framework, AppCenterCrashes.framework and AppCenterReactNativeShared.framework files from the Finder (in the location from the previous step) into Xcode's Project Navigator. The AppCenter.framework and AppCenterReactNativeShared.framework files are required to start the SDK, make sure they're added to your project, otherwise the other modules won't work and your app won't compile.
   • A dialog will appear, make sure your app target is checked, then click Finish.

8. Link AppCenter React Native plugins projects to your app's project:

   • Make sure the Project Navigator is visible (⌘+1).

   • For each AppCenter React Native plugin navigate to the folder containing source code. Paths respectively will be

     • /node_modules/appcenter/ios
     • /node_modules/appcenter-analytics/ios
     • /node_modules/appcenter-crashes/ios

   • Drag and drop .xcodeproj files from the Finder into Xcode's Project Navigator. Typically under Libraries group.

9. Link libraries for AppCenter React Native plugins. Open your project settings and under General tab in the Linked Frameworks and Libraries section add new items referencing target libraries added on the previous step:

   • libAppCenterReactNative.a
   • libAppCenterReactNativeAnalytics.a
   • libAppCenterReactNativeCrashes.a

10. Modify Header Search Paths to find headers from the AppCenter React Native plugins projects. Open your project settings and under Build Settings tab in the Header Search Paths section add new locations for header files:

• $(SRCROOT)/../node_modules/appcenter/ios/AppCenterReactNative
• $(SRCROOT)/../node_modules/appcenter-analytics/ios/AppCenterReactNativeAnalytics
• $(SRCROOT)/../node_modules/appcenter-crashes/ios/AppCenterReactNativeCrashes

11. Modify the app's AppDelegate.m or AppDelegate.mm file to include code for starting SDK:

    • Add the following imports:

    #import <AppCenterReactNative/AppCenterReactNative.h>
    #import <AppCenterReactNativeAnalytics/AppCenterReactNativeAnalytics.h>
    #import <AppCenterReactNativeCrashes/AppCenterReactNativeCrashes.h>
    

    • Add these lines to the application:didFinishLaunchingWithOptions: method

    [AppCenterReactNative register];
    [AppCenterReactNativeAnalytics registerWithInitiallyEnabled:true];
    [AppCenterReactNativeCrashes registerWithAutomaticProcessing];
    

12. Create new file with the name AppCenter-Config.plist with the following content and replace {APP_SECRET_VALUE} with your app secret value. Don't forget to add this file to the XCode project (right-click the app in XCode and click Add files to <App Name>...).

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "https://www.apple.com/DTDs/PropertyList-1.0.dtd">
    <plist version="1.0">
        <dict>
        <key>AppSecret</key>
        <string>{APP_SECRET_VALUE}</string>
        </dict>
    </plist>
    

13. Disable autolinking for React Native 0.60 and above:

    • Inside the node_modules folder in each App Center package open react-native.config.js and set dependency.platforms.ios to null:

    module.exports = {
      dependency: {
        platforms: {
          ios: null,
          ...
        }
      }
    };
    

14. Modify Header Search Paths to find React Native headers from the App Center React Native plugins projects:

    • Make sure the Project Navigator is visible (⌘+1).
    • For each AppCenter React Native plugins project that you've added to the Libraries group in step 8:
      • Select the project and under Build Settings tab in the Header Search Paths section add new locations for header files with a recursive option: ${SRCROOT}/../../../ios/Pods/Headers

3.4 [Android only] Integrate the SDK manually for React Native lower than 0.60 without react-native link

Integration steps without the react-native link command.

1. Open android/settings.gradle file and insert the following lines. Include the dependencies that you want in your project. Each SDK module needs to be added as a separate dependency in this section. If you want to use App Center Analytics and Crashes, add the following lines:

     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')
   

2. Open the project's app level build.gradle file (android/app/build.gradle) and add the following lines into dependencies section:

   dependencies {
       implementation project(':appcenter-crashes')
       implementation project(':appcenter-analytics')
       implementation project(':appcenter')
       ...
   }
   

3. Modify the app's MainApplication.java file to include code for starting SDK:

   • Add these lines to the import section

   import com.microsoft.appcenter.reactnative.crashes.AppCenterReactNativeCrashesPackage;
   import com.microsoft.appcenter.reactnative.analytics.AppCenterReactNativeAnalyticsPackage;
   import com.microsoft.appcenter.reactnative.appcenter.AppCenterReactNativePackage;
   

   • Add AppCenter packages to the List<ReactPackage> getPackages() method

   @Override
   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)
     );
   }
   

4. Open strings.xml file (android/app/src/main/res/values) and add the following lines inside <resources></resources> tags:

   <string name="appCenterAnalytics_whenToEnableAnalytics" moduleConfig="true" translatable="false">ALWAYS_SEND</string>
   <string name="appCenterCrashes_whenToSendCrashes" moduleConfig="true" translatable="false">DO_NOT_ASK_JAVASCRIPT</string>
   

5. Create a new file with the name appcenter-config.json in android/app/src/main/assets/ with the following content and replace APP_SECRET_VALUE with your app secret value.

   {
       "app_secret": "APP_SECRET_VALUE"
   }
   

3.5 If you use auto-backup to avoid getting incorrect information about device, follow the next steps:

a. Create appcenter_backup_rule.xml file in the android/app/src/main/res/xml folder.

b. Open the project's AndroidManifest.xml file. Add the android:fullBackupContent attribute to the <application> element. It should point to the appcenter_backup_rule.xml resource file.

android:fullBackupContent="@xml/appcenter_backup_rule"

c. Add the following backup rules to the appcenter_backup_rule.xml file:

<full-backup-content xmlns:tools="http://schemas.android.com/tools">
    <exclude domain="sharedpref" path="AppCenter.xml"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence"/>
    <exclude domain="database" path="com.microsoft.appcenter.persistence-journal"/>
    <exclude domain="file" path="error" tools:ignore="FullBackupContent"/>
    <exclude domain="file" path="appcenter" tools:ignore="FullBackupContent"/>
</full-backup-content>

4. Start the SDK

Now you can build and launch your application either from command line or Xcode/Android Studio.

4.1 Build and run your application from command line

You may build and launch your iOS application by the following command:

react-native run-ios

You may build and launch your Android application by the following command:

react-native run-android

4.2 Build and run your application from Xcode or Android Studio

For iOS, open your project's ios/{appname}.xcworkspace or ios/{appname}.xcodeproj file in Xcode and build from there.

For Android, import your android project in Android Studio and build from there.

You're all set to visualize Analytics and Crashes data on the portal that the SDK collects automatically. There's no additional setup required. Look at Analytics and Crashes section for APIs guides and walkthroughs to learn what App Center can do.