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:
- Integrating the SDK into your React Native application
- Configuring for Android applications
- Configuring for iOS applications
- 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:
Install the Rokt SDK by running the command:
$ npm install @rokt/react-native-sdk --save
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:
- 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"
}
}
}
- In your
ReactApplication
class, add theRoktEmbeddedViewPackage
togetPackages
:
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add the RoktEmbeddedViewPackage
packages.add(new RoktEmbeddedViewPackage());
return packages;
}
- 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
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:
- Import the Rokt SDK into the JavaScript file:
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
- 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: