@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

Android Configuration

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:

android {
    defaultConfig {
        minSdkVersion 21
    }
}

iOS Configuration

Install the pods

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:

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

   brew uninstall cocoapods
   brew uninstall --ignore-dependencies ruby

2. Install cocoapods with gem

   Sudo gem install cocoapods

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

4. Reinstall the pods:

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

Expo

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:

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

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

   {
     "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:

   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.

Usage

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

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

Initialize

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

To launch Overlay placement

Execute Overlay

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"),
);

To launch Embedded placement

Create placeholder

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

in render()

<RoktEmbeddedView
  ref={this.placeholder1}
  placeholderName={"RoktEmbedded1"}
></RoktEmbeddedView>

Execute Embedded

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"),
);

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 https://rokt.com/sdk-license-2-0/