Edit

Integrating and initializing the SDK

Rokt partners can use the Rokt SDK for React Native applications to display overlay or embedded placements while Rokt brands can use it to record conversions for their campaigns. All use cases of the SDK follow the same initial steps to integrate and initialize the SDK in your application. At a high level, these steps are:

  1. Integrating the SDK into your React Native application
  2. Configuring for Android applications
  3. Configuring for iOS applications
  4. Initializing the SDK

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

Integrating the SDK into your React Native application

To integrate the SDK into your React Native application, you need to:

  1. Install the Rokt SDK by running the command:

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

  2. Install all packages and dependencies by running the command:

    $ npm install

Configuring for Android

To configure the Rokt React Native SDK for Android applications, you 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, add the RoktEmbeddedViewPackage to getPackages:
       @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 set to true, and you are targeting Mind SDK version 18 or higher:
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 18
    }
}

Configuring for iOS

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

cd ios && pod install

Initializing 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 fetches 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 need to:

  1. Import the Rokt SDK into the JavaScript 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");

Next steps

Your next steps depend on the use case of your integration. Check out these resources for more information:

← VersionLaunching an overlay placement →