Skip to main content

Initialize the React Native SDK

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 repositories block of build.gradle:
allprojects {
    repositories {
        ...
        maven {
            url  "https://apps.rokt.com/msdk"
        }
    }
}
  1. In your ReactApplication class, add the RoktEmbeddedViewPackage to getPackages:

// import the class
import com.rokt.reactnativesdk.RoktEmbeddedViewPackage;

@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();

    //Add the RoktEmbeddedViewPackage
    packages.add(new RoktEmbeddedViewPackage());
    return packages;
}
note

SDK versions below major version 4 uses a different package name com.reactlibrary.RoktEmbeddedViewPackage;

  1. Check that multiDexEnabled is set to true, and you are targeting Mind SDK version 18 or higher:
android {
    ...
    defaultConfig {
        ...
        multiDexEnabled true,
        minSdkVersion 21
    }
}
note

If the build fails due to Kotlin version conflict, check the link for possible solutions: https://github.com/facebook/react-native/issues/35979

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.

Configure using Expo​

The Rokt React Native SDK cannot be used with Expo Go as it requires custom native code. The SDK can be integrated with Expo via both the bare workflow and managed workflow.

Expo Bare Workflow​

If using the bare workflow, follow the steps in Configure for Android and Configure for iOS.

Expo Managed Workflow​

The suggested workflow is to use a custom development client. If starting a new app, you can run npx create-react-native-app -t with-dev-client to have this set up automatically. It will also allow you to use the Expo Application Services (EAS Build) for your Android and iOS builds.

To configure the Rokt React Native SDK with the Expo managed workflow, add the @rokt/react-native-sdk plugin to the plugins array of your app.json or app.config.js file:

{
  "expo": {
    "plugins": ["@rokt/react-native-sdk"]
  }
}

If you are not using EAS build then you must use the expo prebuild --clean command as described in the Adding custom native code guide to rebuild your app with the plugin changes.

Initialize the SDK​

The Rokt module provides two methods:

Major Version 3​

  • initialize(roktTagId: string, appVersion: string): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>, callback: () => void): void

Major Version 4​

  • initialize(roktTagId: string, appVersion: string, fontFilesMap?: Record<string, string>): void
  • execute(viewName: string, attributes: Record<string, string>, placeholders: Record<string, number | null>): void

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. It is also recommended to call initialze within componentDidMount or useEffect to prevent multiple unwanted calls.

To initialize the SDK, you need to:

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

Initializing with Fonts​

note

This functionality is supported from version 4.2.0 of the Rokt React Native SDK.

Instead of or in addition to supplying your desired fonts on One Platform, you may choose to utilize the fonts already bundled with your application. This carries the advantage of removing the potential for fonts to be downloaded at initialization time, reducing network utilization and the chances of download errors.

For iOS React Native applications this is done automatically by using the fonts registered in your application. For Android React Native applications, you must provide the font postscript names and filenames if you wish the utilize this functionality. The postscript names should match those being used in your layout, please check with your account manager if you are unsure.

Rokt.initialize("222", "Y.Y.Y", {"Arial-Bold", "fonts/arialbold.otf"});
note

This assumes that your fonts for your Android application are stored in the assets directory of the application. This is usually the default location that fonts are copied to when running commands such as react-native-asset.

Next steps​

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

Was this article helpful?