Smartlook React Native SDK

Fully supported and tested on React Native v0.65+. Supporting both the old architecture and Turbo Modules & Fabric renderer.

Fully supported on iOS 13+.

Fully supported on Android Lollipop (API 21) and later. You can install Smartlook on Android Jelly Bean (API 18), however, you will not be able to record user sessions.

Expo support

:white_check_mark: You can use Smartlook React Native SDK with the Expo Development Builds or Expo Prebuild. No config plugin is required.

:x: The Smartlook React Native SDK can’t be used in the “Expo Go” app because it requires custom native code.

Installing the Smartlook SDK

The Smartlook React Native SDK fully supports both the new and the old architecture.

Install the Smartlook SDK package using npm or yarn.

npm install react-native-smartlook-analytics --save

yarn add react-native-smartlook-analytics

Install the iOS native code components.

cd ios && pod install

🚧 iOS version support

The native iOS Smartlook 2.0+ SDK requires iOS 13 as the minimal version. Please set platform :ios, '13' in your Podfile to conform this requirement.

📘 In case you see a warning

[!] [Xcodeproj] Generated duplicate UUIDs:

during the pod install phase concerning SmartlookAnalytics-Swift.h headers, we recommend setting
install! 'cocoapods', :deterministic_uuids => false
in your Podfile. This warning occurs due to the structure of the headers in our native frameworks and the way Cocoapods handle them.

Installing Smartlook SDK with the old React Native architecture

The library gets auto-linked and no additional steps are required.

Installing Smartlook SDK with the new React Native architecture on v0.70+

Make sure your application is correctly set up to work with the new architecture.

Install the Smartlook SDK package using npm or yarn and install the iOS native code components with the new architecture enabled:

cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

The library gets auto-linked and no additional steps are required.

Installing Smartlook SDK with the new React Native architecture on v0.68.x or v0.69.x

Make sure your application is correctly set up to work with the new architecture.

Install the Smartlook SDK package using npm or yarn and install the iOS native code components with the new architecture enabled:

cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

Android autolinking doesn’t work out of the box with the new architecture on RN v0.68.x and v0.69.x. You need to perform the following steps to manually link our TurboModules and Fabric components:

1. Open the your-application/android/app/build.gradle file and update the file as follows:

       "PROJECT_BUILD_DIR=$buildDir",
       "REACT_ANDROID_DIR=$rootDir/../node_modules/react-native/ReactAndroid",
   -   "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build"
   +   "REACT_ANDROID_BUILD_DIR=$rootDir/../node_modules/react-native/ReactAndroid/build",
   +   "NODE_MODULES_DIR=$rootDir/../node_modules/"
       cFlags "-Wall", "-Werror", "-fexceptions", "-frtti", "-DWITH_INSPECTOR=1"
       cppFlags "-std=c++17"

2. Open the your-application/android/app/src/main/jni/Android.mk file and update the file as follows:

       # If you wish to add a custom TurboModule or Fabric component in your app you
       # will have to include the following autogenerated makefile.
       # include $(GENERATED_SRC_DIR)/codegen/jni/Android.mk
   -   # include $(CLEAR_VARS)
   +
   +   # Includes the MK file for `react-native-smartlook-analytics`
   +
   +   include $(NODE_MODULES_DIR)/react-native-smartlook-analytics/android/build/generated/source/codegen/jni/Android.mk
   +   include $(CLEAR_VARS)

3. In the same file (Android.mk), go to the LOCAL_SHARED_LIBRARIES setting and add the following line:

       libreact_codegen_rncore \
   +   libreact_codegen_SmartlookAnalytics \
       libreact_debug \

4. Open the your-application/android/app/src/main/jni/MainApplicationModuleProvider.cpp file and update the file as follows to enable the Smartlook TurboModule:

   1. Add the import for the turbo module base:

          #include <answersolver.h>
      +   #include <SmartlookAnalytics.h>

   2. Add the following check in the MainApplicationModuleProvider constructor:

          // auto module = samplelibrary_ModuleProvider(moduleName, params);
          // if (module != nullptr) {
          //    return module;
          // }
      
      +    auto module = SmartlookAnalytics_ModuleProvider(moduleName, params);
      +    if (module != nullptr) {
      +        return module;
      +    }
      
          return rncore_ModuleProvider(moduleName, params);
      }

5. Open the your-application/android/app/src/main/jni/MainComponentsRegistry.cpp file and update the file as follows to support our Fabric-based Sensitivity view:

   1. Add the import for the component definition descriptor:

          #include <react/renderer/components/answersolver/ComponentDescriptors.h>
      +   #include <react/renderer/components/SmartlookAnalytics/ComponentDescriptors.h>
          #include <react/renderer/components/rncore/ComponentDescriptors.h>

   2. Enable the Fabric view in the sharedProviderRegistry constructor:

          auto providerRegistry = CoreComponentsRegistry::sharedProviderRegistry();
      
          // Custom Fabric Components go here. You can register custom
          // components coming from your App or from 3rd party libraries here.
          //
          // providerRegistry->add(concreteComponentDescriptorProvider<
          //        AocViewerComponentDescriptor>());
      +   providerRegistry->add(concreteComponentDescriptorProvider<SmartlookSensitiveViewComponentDescriptor>());
      
          return providerRegistry;
      }

Setting up Smartlook SDK

Enter your unique projectKey and call the start() method to start recording your user sessions. If you do not know your project key, you can find it in the mobile project settings on the Smartlook Dashboard

import Smartlook from 'react-native-smartlook-analytics'

Smartlook.instance.preferences.setProjectKey(
  'your-unique-project-key'
);
Smartlook.instance.start();

To start recording when the user opens the app, call the Smartlook SDK's methods in your App.js/tsx file or in its useEffect / constructor methods.

import React from 'react';
import { Button, SafeAreaView } from "react-native";
import Smartlook, { Properties } from 'react-native-smartlook-analytics';

Smartlook.instance.preferences.setProjectKey(
  'your-unique-project-key'
);
Smartlook.instance.start();

const SampleApp = () => {
  return (
    <SafeAreaView>
      <Text>This app is now being recorded!</Text>
    	<Button
        title="Magic button"
        onPress={() => {
    			const props = new Properties();
          props.putString('prop1', 'Prop from Magic Button');
          props.putString('prop2', 'Another prop from Magic Button');

          Smartlook.instance.analytics.trackEvent(
            'magic-button-press-event',
            props
          );
				}
      />
    </SafeAreaView>
  );
}

export default SampleApp;

📘 Adaptive frame rate

Due to reported issues with video responsiveness on iOS, we recommend turning off the Adaptive Frame Rate feature, e.g. Smartlook.instance.preferences.setAdaptiveFrameRateEnabled(false);.