@rokt/react-native-sdk

Overview

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

Development Environment

Install ReactNative development environment by following the React Native environment setup guide.

For this project, a minimum Ruby version 2.7.6 is required. Check by running ruby -v on your terminal.

Integration Guide for Apps

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

$3

The Rokt SDK is available from Maven Central and will be resolved automatically via React Native autolinking. No manual repository or package configuration is required.

Ensure your app meets the minimum requirements:

``groovy
android {
defaultConfig {
minSdkVersion 21
}
}
`

$3

#### Install the pods

go to ios folder and run command below to install the pod

`shell
pod install
`

Below Configurations are required only if you are using Mac M1 machines:

1. 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

`shell
brew uninstall cocoapods
brew uninstall --ignore-dependencies ruby
`

2. Install cocoapods with gem

`shell
Sudo gem install cocoapods
`

3. Replace the post_install in ios/podfile with below code

`ruby
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
`

4. Reinstall the pods:

`shell
cd ios
pod deintegrate
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
`

$3

This package cannot be used with the "Expo Go" app because it requires custom native code.
Integration with Expo is supported in both bare workflow and managed workflow.

#### Bare Workflow

No additional configuration is required. React Native autolinking will automatically set up the SDK.

#### Managed Workflow

Since Expo Go does not support custom native code, you need to use a custom development client.

1. Install the required packages:

`shell
npm install @rokt/react-native-sdk expo-dev-client
`

2. (Optional) Add the config plugin to your app.json or app.config.js:

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

> Note: The config plugin is optional as React Native autolinking handles the native setup automatically.

3. Generate the native projects and build:

`shell
npx expo prebuild --clean
npx expo run:ios # or npx expo run:android
`

For production builds, you can use EAS Build which will handle the native compilation automatically.

$3

#### Initialising the SDK

- Rokt Module provides two methods:

1. initialize(string ROKT_TAG_ID, string AppVersion)
2. 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

`javascript
import { Rokt, RoktEmbeddedView } from "@rokt/react-native-sdk";
`

##### Initialize

`javascript
Rokt.initialize("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "1.0");
`

#### To launch Overlay placement

##### Execute Overlay

`javascript
attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktExperience", attributes, null, () =>
console.log("Placement Loaded"),
);
`

#### To launch Embedded placement

##### Create placeholder

`javascript
constructor(props){
super(props);
this.placeholder1 = React.createRef();
}

`

in render()

`tsx
ref={this.placeholder1}
placeholderName={"RoktEmbedded1"}
>
`

##### Execute Embedded

`javascript
placeholders = {
RoktEmbedded1: findNodeHandle(this.placeholder1.current),
};

attributes = {
email: "j.smith@example.com",
firstname: "Jenny",
lastname: "Smith",
mobile: "(323) 867-5309",
postcode: "90210",
country: "US",
};
Rokt.execute("RoktEmbeddedExperience", attributes, placeholders, () =>
console.log("Placement Loaded"),
);
``

License

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