Edit

Integrating and Initializing the SDK

The Rokt SDK for React Native Applications can be used by Rokt Partners to display overlay or embedded placements or by Rokt Brands to record conversions for their campaigns. All use cases of the SDK will follow the same initial steps to integrate and initialize the SDK in-app. At a high level, these steps are:

  1. Initialize the SDK into your React Native App
  2. Setting up the Android Configuration
  3. Setting up the iOS Configuration
  4. Initializing the Rokt SDK

Following these steps, the execute method of the SDK can then be used in various ways to suit the required use case.

Step 1: Integrate the SDK into your React Native App

To integrate the SDK into your React Native app, you can will need to:

  1. Run the following command to install the Rokt SDK:

    $ npm install @rokt/react-native-sdk --save

  2. Run the following command to install the packages and dependencies:

    $ npm install

Step 2: Setting up the Android Configuration

To configure the Rokt React Native SDK for Android applications, you will need to:

  1. Add the Rokt SDK into your Maven Repository:
allprojects {
    repositories {
        ...
        maven {
            url  "https://rokt-eng-us-west-2-mobile-sdk-artefacts.s3.amazonaws.com"
        }
    }
}
  1. In your ReactApplication class, make sure you add the RoktEmbeddedViewPackage to the getPackages method:
       @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();

          //Add the RoktEmbeddedViewPackage
          packages.add(new RoktEmbeddedViewPackage());
          return packages;
        }
  1. Check that multiDexEnabled is True and you are targeting Mind SDK version 18 or higher:
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 18
    }
}

Step 3: iOS Configuration

To configure the Rokt React Native SDK for iOS applications, go to the iOS folder and run the command:

cd ios && pod install

Step 4: Initialize the SDK

The Rokt Module provides two methods:

  • Initialize(string ROKT_TAG_ID, string AppVersion)
  • Execute(string TemplateVersion, object UserAttributes, object placements, function onLoad)

The initialize method will fetch API results that are required by the execute method. Therefore it’s best to not put both calls immediately next to each other. It is recommended to call the Initialize method within the first few views of the app. To initialize the SDK, you will need to:

  1. Import the Rokt SDK into the JS file:
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
  1. Initialize the Rokt SDK:
// The following will reveal a demo integration. To view your integration:
// 1) Replace the integration test tag ID (222) with your unique Rokt Tag ID 
// 2) Replace Y.Y.Y with the application version 

Rokt.initialize( "222" , "Y.Y.Y");

The subsequent steps will depend on the use case of the integration. More details can be found here:

← VersionLaunching an Overlay Placement →