- Danial Motahari - [email protected]
- Sahil Suri - [email protected]
- Thomson Thomas - [email protected]
This repository contains React Native SDK Rokt.Widget as well as the Sample Application RoktSampleApp .
The React Native SDK enables you to integrate Rokt into your React Native mobile apps to drive more value from—and for—your customers. The SDK is built to be lightweight, secure, and simple to integrate and maintain, resulting in minimal lift for your engineering team. The RoktSampleApp includes bare-minimum UI to demonstrate the usage of React Native SDK for our partners using the Integration guide
Install ReactNative development environment by following the description here.
For this project, a minimum Ruby version 2.7.6 is required. Check by running ruby -v on your terminal.
To add this SDK in your Application, Go to the root of your project in your terminal and add run the below commands:
$ npm install @rokt/react-native-sdk --save
run $ npm install
You would also need to
- Add the Rokt Widget plugin repository URL in the
build.gradlefile of the project.
allprojects {
repositories {
...
maven {
url "https://apps.rokt.com/msdk"
}
}
}
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()
// Rokt SDK artifacts
maven {
url "https://apps.rokt.com/msdk"
}
}
}
- In your ReactApplication class, make sure you add the RoktEmbeddedViewPackage to the getPackages method:
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//Add the RoktEmbeddedViewPackage
packages.add(new RoktEmbeddedViewPackage());
return packages;
}
- It's likely that you will need multiDexEnabled as well
- Make sure you are targeting mindSdk version 18 or higher.
android {
...
defaultConfig {
...
multiDexEnabled true,
minSdkVersion 18
}
}
...
go to ios folder and run command below to install the pod
pod install
Below Configurations are required only if you are using Mac M1 machines:
- Make sure cocoa pods are installed using gem not brew(sudo gem install cocoapods.
If it is already installed using brew, use below commands to uninstall them
brew uninstall cocoapods
brew uninstall --ignore-dependencies ruby
- Install cocoapods with gem
Sudo gem install cocoapods
- Replace the post_install in ios/podfile with below code
post_install do |installer|
react_native_post_install(installer)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
# Disable arm64 builds for the simulator
config.build_settings['EXCLUDED_ARCHS[sdk=iphonesimulator*]'] = 'arm64'
end
end
end
- Reinstall the pods:
cd ios
pod deintegrate
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
This package cannot be used with "Expo Go" app, because it requires custom native code. Integration with Expo is possible in both bare workflow and custom managed workflow via config plugis.
If using Bare Workflow, follow the above Android and iOS setup steps.
Since Expo Go will not work with react-native-sdk, 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 Service (EAS Build) do the Android and iOS builds.
After installing the @rokt/react-native-sdk NPM package, add the config plugin to the plugins array of your app.json or app.config.js.
{
"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.
- Rokt Module provides two methods:
- initialize(string ROKT_TAG_ID, string AppVersion)
- execute(string TemplateVersion, object UserAttributes, object placements, function onLoad)
- The Initialize Method will fetch API results that Execute Method would need. so best not to put both calls next to each other.
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
Rokt.initialize( "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" , "1.0");
attributes = {
"email": "[email protected]",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(323) 867-5309",
"postcode": "90210",
"country": "US"
}
Rokt.execute("RoktExperience", attributes, null, () => console.log("Placement Loaded"));
constructor(props){
super(props);
this.placeholder1 = React.createRef();
}
in render()
<RoktEmbeddedView ref={this.placeholder1} placeholderName={"RoktEmbedded1"} ></RoktEmbeddedView>
placeholders = {
"RoktEmbedded1": findNodeHandle(this.placeholder1.current)
}
attributes = {
"email": "[email protected]",
"firstname": "Jenny",
"lastname": "Smith",
"mobile": "(323) 867-5309",
"postcode": "90210",
"country": "US"
}
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders, () => console.log("Placement Loaded"));
Copyright 2020 Rokt Pte Ltd
Licensed under the Rokt Software Development Kit (SDK) Terms of Use Version 2.0 (the "License"); You may not use this file except in compliance with the License. You may obtain a copy of the License at https://rokt.com/sdk-license-2-0/