Skip to main content

Initialize the Rokt SDK for React Native

Rokt partners can use the Rokt SDK for React Native applications to display overlay or embedded placements while Rokt advertisers 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.

Integrate 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

Configure 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"
        }
    }
}

Or if you are using Gradle 7.0.0 and above, where the repository settings that were previously in the top-level build.gradle file are now in the settings.gradle file, add the following in settings.gradle file.

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
        // Rokt SDK artifacts
        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
    }
}

Configure 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
note

Mac M1 architecture is not directly compatible with Cocoapods. If you encounter issues when installing pods, you can solve it by running:

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

These commands install the ffi package, to load dynamically-linked libraries and let you run the pod install properly, and runs pod install with the proper architecture.

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 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 Account 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: