Skip to content

React Native

This page describes the steps to integrate the Literal SDK into React Native applications.

Requirements

The Literal SDK has the following requirements:

  • Access to native code under /android or /ios
  • Minimum requirements for iOS or Android
  • An access token generated via Settings

Expo framework

Expo is a framework built on top of React Native to help build and deploy React code on both iOS and Android devices. You will need to generate the native iOS and Android projects that are typically hidden in the managed workflow. Please refer to the Expo documentation.

App Integration

Install the npm package

In your root React Native project directory, install the Literal dependency.

npm install @literal.ai/literator-react-native
yarn add @literal.ai/literator-react-native

Update iOS pods

Under the application's root ios folder, run

pod install

Podfile

There is no need to manually add the Literal dependency in your Podfile. React Native will automatically link the dependency.

Add the Android maven repository

In the project-level build.gradle file at the root of android, add the necessary maven repositories:

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        google()
        mavenCentral()
        jcenter()
        maven { url 'https://jitpack.io' }
        maven { url "https://maven-dotmatrix.literal.ai/" }
    }
}

Initialize the SDK

Warning

Do not include the SDK in production builds, as screen content is gathered (albeit after required permissions). You can wrap the import and initialization and check if the __DEV__ global variable is true

Add the initialization code to your app's main entrypoint. Replace <access_token> with an access token generated via Settings.

import Literator from '@literal.ai/literator-react-native';

// Only run the sdk for development builds
if (__DEV__) {
  Literator.start('<access_token>');
}

Rebuild native app

Now that you have finished the main setup, ensure you create a fresh build to include the native code changes.

Typically this is done with the react-native CLI:

npx react-native run-ios
npx react-native run-android

Start recording on iOS

Confirm the Literal SDK is running on app start-up by observing the following log lines:

2022-02-28 16:54:59.252706-0800 MyApp[25181:2475114] [literator] installing SDK
2022-02-28 16:54:59.553676-0800 MyApp[25181:2475138] [literator] ready

To start recording, three finger tap anywhere on the screen as per the usage guide.

Start recording on Android

Confirm the Literal SDK is running on start-up by filtering on the Literator tag in Logcat:

 Literator  D  Literator initialized.
 Literator  D  Attempting to establish new session.
 Literator  D  Session successfully started. You should see a new notification to start a recording.

You should see a persistent notification to initiate a recording session if a valid internet connection is present and the access token is valid as per the usage guide.