React Native SDK

Overview

The rCDP React Native SDK enables you to capture user behavior and clickstream events from cross-platform mobile applications using a single JavaScript codebase.

It acts as a wrapper over the native iOS and Android SDKs, allowing you to integrate rCDP without writing platform-specific logic for each environment.

This approach is ideal for teams building cross-platform applications while maintaining consistency in tracking, customer profiles, and real-time engagement.

Note: The React Native SDK internally leverages native iOS and Android SDKs. Both platforms must be configured for full functionality.

How It Works

The React Native SDK acts as a bridge between your JavaScript layer and native mobile SDKs.

1. The React Native wrapper exposes SDK methods to JavaScript

2. JavaScript calls are routed to native modules

3. Native SDKs process events and customer data

4. Events are sent to rCDP for real-time processing

Tip: Use React Native SDK when you want a unified integration layer across iOS and Android without duplicating logic.

SDK Integration

Step 1: Install SDK

Install the React Native wrapper package:

npm install react-native-algonomy
			

This installs the wrapper library, enabling JavaScript-level access to SDK functionality.

Step 2: Import and Use SDK

import Algonomy from 'react-native-algonomy'

// Set customer profile
Algonomy.setCustomerProfile({
email: 'user@example.com',
mobileNo: '9876543210',
customerCode: 'CUST123'
});

// Send clickstream event
Algonomy.sendClickStream(
'eventProduct',
{ productId: 'P001' },
(statusCode, data, message) => {
console.log('Event response:', statusCode, data, message);
}
);
			

This example demonstrates how to set a customer profile and send a clickstream event directly from the JavaScript layer.

SDK Methods

The React Native SDK exposes key capabilities from native SDKs through a unified interface.

• Customer Profiles – Create and update user identity information

• Clickstream Events – Track user interactions and behavioral events

Note: All SDK methods follow the same event taxonomy as Web, iOS, and Android integrations.

Customer Profiles

Use customer profiles to associate user identity with behavioral data.

Algonomy.setCustomerProfile({
email: "user@example.com",
mobileNo: "9876543210",
customerCode: "CUST123"
});
			

Clickstream Events

Capture user interactions such as product views, clicks, and conversions.

Algonomy.sendClickStream(
"eventProduct",
{ productId: "P001" },
(statusCode, data, message) => {
console.log(statusCode, data, message);
}
);
			

Native Integration

To enable full functionality, the React Native SDK requires native module integration for both Android and iOS platforms. This ensures that JavaScript calls are correctly routed to the underlying TargetOne Mobile SDK.

Note: The React Native SDK does not replace native SDK setup. Both iOS and Android SDKs must be configured as described in their respective sections.

Android Integration

The Android implementation requires creating a native module that bridges React Native with the TargetOne SDK.

File: AlgonomyModule.java

import android.app.Activity;
import android.content.Context;
import android.util.Log;

import androidx.annotation.NonNull;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReadableMap;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.module.annotations.ReactModule;
import com.manthan.targetone.Interface.APIResponseInterface;
import com.manthan.targetone.Model.Customer;
import com.manthan.targetone.TargetOneMobileSDK;

import org.json.JSONObject;

@ReactModule(name = AlgonomyModule.NAME)
public class AlgonomyModule extends ReactContextBaseJavaModule {

public static final String NAME = "AlgonomyModule";

private final Context context;
private final Activity activity;
private static final TargetOneMobileSDK instance = TargetOneMobileSDK.getInstance();
private Callback callback1;

public AlgonomyModule(ReactApplicationContext context) {
super(context);
this.context = context;
this.activity = getCurrentActivity();
}

@ReactMethod
public void sendClickStream(String eventType, ReadableMap eventData, Callback callback) {
try {
Log.v("T1", "send: Click Event Type:" + eventType);
Log.v("data", eventData.toString());

callback1 = callback;
final Activity activity = getCurrentActivity();

activity.runOnUiThread(() -> {
instance.sendClickStream(activity, eventType, new JSONObject(eventData.toHashMap()), apiResponseInterface);
});

} catch (Exception e) {
Log.e("Catch Exception", e.getMessage());
callback.invoke("error");
throw e;
}
}

@ReactMethod
public void sendRealtimeAPI(String eventType, String ruleName, ReadableMap eventData, Callback callback) {
Log.i("T1", "send: sendRealtimeAPI Event Type: " + eventType);
callback1 = callback;

final Activity activity = getCurrentActivity();

activity.runOnUiThread(() -> {
instance.sendRealtimeAPI(activity, eventType, ruleName, new JSONObject(eventData.toHashMap()), apiResponseInterface);
});
}

@ReactMethod
public void setCustomerProfile(ReadableMap customer) {

Customer customerObj = new Customer();
customerObj.setEmail(customer.getString("email"));
customerObj.setMobileNo(customer.getString("mobileNo"));
customerObj.setCustomerCode(customer.getString("customerCode"));

final Activity activity = getCurrentActivity();

activity.runOnUiThread(() -> {
instance.setCustomerProfile(activity, customerObj);
});
}

@Override
@NonNull
public String getName() {
return NAME;
}

private final APIResponseInterface apiResponseInterface = (statusCode, jsonObject, s) -> {
callback1.invoke(statusCode, jsonObject, s);
};
}
			

Register Module in Android

Register the module in MainApplication.java:

import com.reactnativealgonomy.AlgonomyPackage;
			

@Override
protected List<ReactPackage> getPackages() {
List<ReactPackage> packages = new PackageList(this).getPackages();
packages.add(new AlgonomyPackage());
return packages;
}
			

iOS Integration (Objective-C)

Implement the native module for Objective-C:

#import "RTCAlgonomyModule.h"
#import <React/RCTLog.h>

@implementation AlgonomyModule

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(setCustomerProfile:(NSDictionary *)customer)
{
NSString *custCode = [customer objectForKey:@"customerCode"];
NSString *emailId = [customer objectForKey:@"email"];
NSString *mobileNumber = [customer objectForKey:@"mobile"];

T1CustomerProfile *profile = [T1CustomerProfile new];
profile.custCode = custCode;
profile.emailId = emailId;
profile.mobileNumber = mobileNumber;

[[TargetOne sharedInstance] setCustomerProfile:profile];
}

RCT_EXPORT_METHOD(sendClickStream:(NSString *)eventType eventData:(NSDictionary *)eventData callback:RCTResponseSenderBlock)
{
[[TargetOne sharedInstance] sendClickStream:eventType withProps:eventData];
}

@end
			

iOS Integration (Swift)

If your application uses Swift, create a Swift-based module:

@objc(AlgonomyModule)
class AlgonomyModule: NSObject {

@objc(setCustomerProfile:)
func setCustomerProfile(_ customer: NSDictionary) {

let profile = T1CustomerProfile()
profile.custCode = customer["customerCode"] as? String ?? ""
profile.emailId = customer["email"] as? String ?? ""
profile.mobileNumber = customer["mobile"] as? String ?? ""

TargetOne.sharedInstance()?.setCustomerProfile(profile)
}

@objc(sendClickStream:eventData:callback:)
func sendClickStream(_ eventType: String, eventData: NSDictionary, callback: RCTResponseSenderBlock?) {

TargetOne.sharedInstance()?.sendClickStream(eventType, withProps: eventData as! [AnyHashable : Any])
callback?([NSNull(), "Event sent"])
}
}
			

Event Flow

1. User performs an action in the app

2. React Native layer constructs event payload

3. Payload is passed to native SDK

4. Native SDK sends data to rCDP

5. rCDP processes and activates the data

Best Practices

• Ensure both iOS and Android SDKs are fully configured

• Use consistent event naming aligned with your taxonomy

• Validate payloads before sending events

• Test integration on real devices across platforms

• Handle user consent and privacy requirements

Tip: Always test both platforms independently, even when using a shared React Native codebase.

Troubleshooting

• Verify native SDK setup for both platforms

• Ensure module registration is completed correctly

• Check logs for API response callbacks

• Validate event payload structure

Note: Most issues arise due to incomplete native setup rather than React Native code.