React Native SDK Integration Guide
This page explains how to implement the React Native SDK for Rokt Ecommerce to deliver more relevant customer experiences at checkout. The SDK allows you to trigger and track these experiences (like displaying offers on confirmation pages) by firing on configured pages and passing user and transaction data back to Rokt for personalization and measurement.
Your dedicated account representative will help configure your account for the platforms that you are targeting with your React Native App. They will provide you with both the key and secret for iOS and Android which are required to initialize the SDK and also supply additional resources needed to render the most relevant experiences for your customers.
These instructions require development resources to complete. If you require additional assistance, please reach out to your Rokt account manager. Shopify stores can set up a Rokt placement in seconds using the Rokt Ecommerce app — no coding needed!
1. React Native setup
Add the React Native SDK as a dependency to your application:
npm install react-native-mparticle --save
Import the package into your React Native app code and get an instance of mParticle:
import MParticle from 'react-native-mparticle';
After installing the React Native plugin, continue integrating the Rokt SDK into your mobile app or website by following the steps below. Be sure to include the key and secret provided by your account manager where required or you will see errors in your logs when launching your app or site.
1.1. Add the Rokt SDK to your iOS app
The NPM install step above will automatically include the React framework and the core iOS framework in your project. The Rokt Kit needs to be added as a pod dependency in the ios/Podfile
. However depending on your app and its other dependencies you must integrate it in 1 of 2 ways:
Using CocoaPods, include the Rokt SDK in your application:
CocoaPods
To integrate the Rokt Kit using CocoaPods, specify it in your Podfile with:
pod 'mParticle-Rokt','~> 8.0'
-
Static Libraries are the React Native default, but because the Rokt iOS SDK contains Swift code you need to add an exception for it in the form of a pre-install command in the Podfile.
pre_install do |installer|
installer.pod_targets.each do |pod|
if pod.name == 'mParticle-Apple-SDK' || pod.name == 'mParticle-Rokt' || pod.name == 'Rokt-Widget'
def pod.build_type;
Pod::BuildType.new(:linkage => :dynamic, :packaging => :framework)
end
end
end
endThen run the following command
bundle exec pod install
-
Frameworks are the default for Swift development and while it isn’t preferred by React Native it is supported. Additionally you can define whether the frameworks are built statically or dynamically.
Update your Podfile to be ready to use dynamically linked frameworks by commenting out the following line(if flipper is there)
# :flipper_configuration => flipper_config,
Then run either of the following commands
USE_FRAMEWORKS=static bundle exec pod install
or
USE_FRAMEWORKS=dynamic bundle exec pod install