Visual Studio Mobile Center

Getting Started

Let’s get started with setting up the Mobile Center React Native SDK in your app to use Analytics and Crashes services.

Contents:

  1. Prerequisites
  2. Add Mobile Center SDK modules
  3. Start the SDK
  4. Manually link the iOS SDK
  5. List of available libraries

1. Prerequisites

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

  • An React Native project
  • A device running Android Version 4.0.3 or API level 15 or higher, or iOS version 8.0 or higher.
  • A project running React Native version 0.34 or higher.

2. Add Mobile Center SDK modules

The Mobile Center SDK is designed with a modular approach – a developer only needs to integrate the modules of the services that they’re interested in.

Below are the steps on how to integrate the each seperate SDK library with your application from npm.

2.1. Add the Crashes SDK

  1. In a terminal window opened at the root of a React Native project, enter the following lines to add the Crashes SDK to the app:

     npm install mobile-center-crashes --save
    
  2. Link the plugin to the React Native app using the react-native link command.

     react-native link mobile-center-crashes
    

    A dialogue will ask for the Android app secret, which will enable Mobile Center to map this app to the right user account. The secret may already be pre-populated, showing up beside the question. If the pre-filled secret is correct, press enter to continue.

     What is the Android app secret? (00000000-0000-0000-0000-000000000000)
    

    The SDK will then ask whether or not to send crash reports automatically. Learn more about user processing on crash reports.

     For the Android app, should crashes be sent automatically, or processed in javascr
     ipt before being sent? (Use arrow keys)
     ❯ Automatically
     Processed in JavaScript by user
    

    There will be the same set of questions for iOS.

     What is the iOS app secret? (11111111-1111-1111-1111-111111111111)
    
     For the iOS app, should crashes be sent automatically, or processed in javascr
     ipt before being sent? (Use arrow keys)
     ❯ Automatically
     Processed in JavaScript by user
    

    Note: Linking the iOS SDK requires CocoaPods. If you do not have CocoaPods installed, follow these steps to link the SDK manually.

2.1. Add the Analytics SDK

  1. In a terminal window opened at the root of a React Native project, enter the following lines to add the Crashes SDK to the app:

     npm install mobile-center-analytics --save
    
  2. Link the plugin to the React Native app using the react-native link command.

     react-native link mobile-center-analytics
    

    A dialogue will ask for the Android app secret, which will enable Mobile Center to map this app to the right user account. The secret may already be pre-populated, showing up beside the question. If the pre-filled secret is correct, press enter to continue.

     What is the Android app secret? (00000000-0000-0000-0000-000000000000)
    

    The SDK will then ask whether or not to send user events automatically. Learn more about manually sending user events.

     For the Android app, should user tracking be enabled automatically ? (Use arrow keys)
     ❯ Enable Automatically
     Enable in JavaScript
    

    There will be the same set of questions for iOS.

     What is the iOS app secret? (11111111-1111-1111-1111-111111111111)
    
     For the iOS app, should user tracking be enabled automatically ? (Use arrow keys)
     ❯ Enable Automatically
     Enable in JavaScript
    

    Note: Linking the iOS SDK requires CocoaPods. If you do not have CocoaPods installed, follow these steps to link the SDK manually.

3. Use the SDK

Great, you are all set to visualize Analytics and Crashes data on the portal that the SDK collects automatically. Look at Analytics and Crashes section for APIs guides and walkthroughs to learn what Mobile Center can do.

  1. Download the Mobile Center iOS SDK and the ReactNative Mobile Center iOS SDK frameworks provided as two zip files. Unzip the files and you will see different frameworks for each Mobile Center services and the ReactNative Mobile Center framework. 
  2. Add the SDK frameworks to the project in Xcode: 
    1. Make sure the Project Navigator is visible (⌘+1). Click and drag the frameworks to your project to add them to the top level within your project.
    2. A dialog will appear. Select “Create groups” and set the checkmark for “Add to targets” for your target. Then click Finish.

Note: MobileCenter.framework is required to start the SDK. So make sure it’s added to your project, otherwise the other modules won’t work and your app won’t compile.

5. List of available libraries

npm package name Service
mobile-center-analytics Analytics
mobile-center-crashes Crashes