EcommRN

Integrate using the React Native SDK

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()
        maven {
            url "https://rokt-eng-us-west-2-mobile-sdk-artefacts.s3.amazonaws.com"
        }
    }
}

2. 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;
        }

3. Check that multiDexEnabled is set to true, and that 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";

2. 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");