Install SDK for ReactNative Android

These instructions show you how to configure your React Native Android app to run Flight Recorder.

Please note, if you use Expo you need to begin by running Prebuild to generate the 'android' directory. It's crucial to note that once you've made modifications, running npx expo prebuild --clean will result in the loss of your changes and you will need to repeat these steps.

Import the SDK

1. If you have not already, set up the development environment for Android by installing Node, Watchman, the React Native command line interface, a JDK, and Android Studio. Follow the instructions at https://reactnative.dev/docs/environment-setup, selecting your Development OS and the Target OS Android. Complete all the steps in this section so you are able to run your app on an emulator, or real device before starting.

2. Follow the instructions in iOS -> Get your API Key to obtain your API Key, and then return here.

3. Download the latest SDK file from https://flightrecorder.pulselabs.ai/download-sdk. This requires creating a FlightRecorder account if you have not done so already. If creating a new account ensure you use your work email so you will be added to the correct organization.

4. Locate the downloaded PulseLabsFlightRecorder-AndroidSDK-vx.x.x.zip file and unzip it. This action will create a folder named flightRecorder.

5. Open Android Studio and click File -> Open...

6. Navigate to the folder containing your React Native project and select the android folder at the root. Click Open.

7. If your project does not already have a 'libs' folder in the app module, create one by following these steps:

   1. Switch to the Project view in Android Studio if it is not already (in the top of the projects window click on Android or the selected option, and select Project from the drop down).

   2. Right-click on the 'app' folder within your project and select New -> Directory.

   3. Enter 'libs' as the directory name and press Enter to create the folder.

8. Move the unzipped flightRecorder folder and its contents into the libs folder. This should result in the following folder structure: {your app name}/android/app/libs/flightRecorder/ai/pulse...

Your SDK is now imported into your Android project. Next, you will point to it by updating Gradle files.

Configure Gradle

1. Open the module level build.gradle file for the app. Make sure you are in the Project view by selecting Project from the menu at the top of the Project window. This may currently be labelled Android. Open the file at android/app/build.gradle

2. Locate the android block in the build.gradle file, and insert the highlighted code below between the signingConfigs and buildTypes blocks.

   app/build.gradle

   android {
       ndkVersion rootProject.ext.ndkVersion
   
       compileSdkVersion rootProject.ext.compileSdkVersion
   
       namespace "com.sdktestreactnative"
       defaultConfig {
           ...
       }
       
       // Insert this block:
       allprojects {
           repositories {
               maven {
                   url "${projectDir}/libs/flightRecorder"
               }
           }
       }
       
       signingConfigs {
          ...
       }

3. Locate the dependencies block in the build.gradle file.

4. Insert the implementation declaration highlighted below at the top of the dependencies block, replacing x.x.x with the version number at the end of the zip file you downloaded earlier:

   dependencies {
       // Insert this line, replacing x.x.x with the correct version number:
       implementation("ai.pulselabs:flightrecorder:x.x.x")
       
       // The version of react-native is set by the React Native Gradle Plugin
       implementation("com.facebook.react:react-android")
       ...

   E.g. if the download is PulseLabsFlightRecorder-AndroidSDK-v1.0.0.zip, then you would put:

   dependencies {
       ... 
       implementation("ai.pulselabs:flightrecorder:1.0.0")

5. Sync Gradle from with Android Studio, and run the app by pressing play, or use metro:

   1. Start metro by running the following command inside your React Native project folder:

      npm start

   2. In the window which appears, press a to build the app, or open a new terminal inside the React Native project folder and run:

      npm run android

6. Check there are no build errors, if there are, check the code above is in the correct location.

The SDK has now been installed into your application.

Configure the SDK

1. In the Project view open the file at app/src/main/java/com/{PROJECT}/MainActivity.java where {PROJECT} is the name of your project.

2. Insert the following two import statements at the top of the file:

   MainActivity.java

   package com.sdktestreactnative;
   
   // Insert this:
   import ai.pulselabs.flightrecorder.FlightRecorderSdk;
   import android.os.Bundle;
   
   import com.facebook.react.ReactActivity;
   ...

3. Insert the following highlighted method inside the MainActivity class declaration as shown, replacing YOUR_API_KEY with your API Key located earlier:

   MainActivity.java

   public class MainActivity extends ReactActivity {
     /**
      * Returns the name of the main component registered from JavaScript. This is used to schedule
      * rendering of the component.
      */
     @Override
     protected String getMainComponentName() {
       return "SDKTestReactNative";
     }
     
     // INSERT HERE:
     @Override
     protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       new FlightRecorderSdk(this, getLifecycle(), this, "YOUR_API_KEY", true, false);
     }
     
     /**
      * Returns the instance of the {@link ReactActivityDelegate}. Here we use a util class {@link
     ...

4. In the metro window press a to build the app, or open a new terminal inside the React Native project folder and run:

   npm run android

The SDK is now installed! The Introduction Screen will appear when the app first runs. You can shake or take a screenshot to capture the video content and send a report.