Install SDK for ReactNative iOS

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

Please note, if you use Expo you need to begin by running Prebuild to generate the 'ios' 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 iOS by installing Node, Watchman, the React Native command line interface, Xcode and CocoaPods. Follow the instructions at https://reactnative.dev/docs/environment-setup, selecting your Development OS and the Target OS iOS. Complete all the steps in this section so you are able to run your app on an emulator, or real device before starting.

2. Open your file system and locate your React Native project, open the folder ios, and double click on the .xcworkspace file inside to open the workspace in Xcode.

3. Select the project in the Project Navigator (A). Select your app's main target inside the TARGETS section (B), then click on the General tab (C) to open the general build settings for this target.

   
4. Verify that the version in Minimum Deployments is 15.0 or higher. If the version is lower than 15.0, update the minimum deployment to 15.0 or higher. If you wish to continue supporting users on devices running iOS lower than 15.0, contact us at [e-mail]. NB: 14.x is now end of life, and users of these devices will no longer receive security updates from Apple.

5. 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.

6. Unzip the file you downloaded in the previous step, creating a folder named PulseLabsFlightRecorderSDK.xcframework ready to use in the upcoming steps.

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

8. Select the project in the Project Navigator (A). Click on the Libraries folder (B). Click on the Add Files (+) button in the bottom left of the Project Navigator (C), and choose Add Files to "Your Project"...

   

9. In the file browser which opens, navigate to the location where you have stored the PulseLabsFlightRecorderSDK.xcframework folder and select it. Ensure that both Copy items if needed and Create groups are selected, as well as the target with your app name inside Add to targets: then click Add.

10. In the General tab of the TARGETS section, scroll down to the section entitled Frameworks, Libraries, and Embedded Content. Click on the dropdown next to the PulseLabsFlightRecorderSDK.xcframework item in the Embed build settings section and select Embed and Sign (B). ​

    
11. Select the Build Phases build settings tab, and click on the Link Binary with Libraries item. Make sure that the PulseLabsFlightRecorderSDK.xcframework item is listed. Note: If the PulseLabsFlightRecorderSDK.xcframework item is not found in the list, click the Add items (+) button underneath the list, select the PulseLabsFlightRecorderSDK.xcframework which appears in the list and click Add.

Configure the SDK ​

1. In Xcode's project navigator pane, find the AppDelegate.m file, which can be found within the folder that shares the same name as your project, and open it.

2. Add the #import <PulseLabsFlightRecorderSDK/PulseLabsFlightRecorderSDK-Swift.h> statement to the top of the AppDelegate.m file as shown:

   AppDelegate.m

   #import "AppDelegate.h"
   
   // Insert the import statement
   #import <PulseLabsFlightRecorderSDK/PulseLabsFlightRecorderSDK-Swift.h>
   
   #import <React/RCTBundleURLProvider.h>

3. Locate the application:didFinishLaunchingWithOptions: method in the same AppDelegate.m file and insert the line [FlightRecorderSDK startWithApiKey:@"YOUR_API_KEY" automaticallyShowIntroduction:FALSE]; at the position indicated below, replacing YOUR_API_KEY with the API Key you fetched earlier.

   AppDelegate.m

   - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
   {
     self.moduleName = @"FlightRecorderReactNativeTest";
     // You can add your custom initial props in the dictionary below.
     // They will be passed down to the ViewController used by React Native.
     self.initialProps = @{};
     
     [FlightRecorderSDK startWithApiKey:@"YOUR_API_KEY" automaticallyShowIntroduction:FALSE];
   
     return [super application:application didFinishLaunchingWithOptions:launchOptions];
   }

4. Add the applicationDidBecomeActive: delegate method, and insert the code to safely call the showIntroductionUIWithDisplayOnlyOnce:true error: method as shown below. This will show the Introduction Screen on the first time application launch:

   AppDelegate.m

   - (void)applicationDidBecomeActive:(UIApplication *)application
   {
       // Insert here:
       NSError *error = nil;
       [FlightRecorderSDK showIntroductionUIWithDisplayOnlyOnce:true error:&error];
       if (error) {
           NSLog(@"Error: %s", "FlightRecorderSDK not yet started, cannot show introduction screen.");
       }
   
   }

   Note: The error handling is present in case you accidentally run the showIntroductionUIWithDisplayOnlyOnce:error: before the startWithApiKey:automaticallyShowIntroduction method. If you do this, the introduction screen will not appear but you will have an error in your logs.

5. Run the app on a real device (the SDK will not work in the simulator) by pressing the play icon 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 i to build the app, or open a new terminal inside the React Native project folder and run:

      npm run ios

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.