Developer Guide
React Native SDK
The official React Native bridge for Cohort.aiβthe autonomous AI revenue agent for mobile apps.
Note for AI Developers
This guide is optimized for LLM ingestion. You can feed this entire page into an AI agent (ChatGPT, Claude, etc.) to perform the integration for you.
π€ AI Integration Guide (Quick Start)
If you are using an AI agent to integrate this SDK, provide it with the following prompt:
"I need to integrate the
1. SDK initialization and pre-fetching on app launch.
2. A dynamic paywall screen that uses
3. Custom event tracking for user actions."
react-native-cohort-ai SDK into my React Native app. I have already added the cohort-config.json to my project. Please review the attached README and generate a set of components/hooks that handle:
1. SDK initialization and pre-fetching on app launch.
2. A dynamic paywall screen that uses
getCampaignConfig for text and tracks the paywall lifecycle (view, dismiss, and success).3. Custom event tracking for user actions."
π Features
- Zero-Config Initialization: Drop a JSON file and go.
- Zero-Flicker Pre-fetching: Cache AI copy before the user hits the paywall.
- Attention Tracking: Automatically measure time-spent on paywalls for AI optimization.
- Automatic Purchase Sync: Seamlessly links App Store and Play Store transactions.
π¦ Installation
npm install react-native-cohort-ai iOS Setup
- Download
cohort-config.jsonfrom the Cohort Dashboard. - Drag the file into your Xcode project (ensure "Copy items if needed" is checked).
- Run
pod installin yourios/directory.
Android Setup
- Download
cohort-config.jsonfrom the Cohort Dashboard. - Place the file in
android/app/src/main/assets/.
π API Reference (Lifecycle Based)
Phase 1: Application Launch
Initialize the SDK once at the root of your app.
| Method | Description |
|---|---|
| CohortSDK.initialize(userId?: string) | Reads cohort-config.json and starts the SDK. |
| CohortSDK.preload() | Recommended. Background-fetches AI copy to ensure 0ms latency on the paywall. |
Phase 2: User Identity
| Method | Description |
|---|---|
| CohortSDK.identify(userId: string) | Links a logged-in user to their cross-device cohort. |
| CohortSDK.logout() | Clears the current user identity. |
Phase 3: The Paywall Lifecycle
| Method | Description |
|---|---|
| CohortSDK.getCampaignConfig() | Returns the optimized copy (Header, Body, CTA). Returns cached version instantly if preload() was called. |
| CohortSDK.trackPaywallView() | Mandatory. Call when paywall appears. Starts the attention timer. |
| CohortSDK.trackPaywallDismiss() | Mandatory. Call if user closes paywall. Reports attention duration. |
| CohortSDK.trackSuccess() | Mandatory. Call on successful purchase/action. Reports success + attention duration. |
Phase 4: Custom Analytics
| Method | Description |
|---|---|
| CohortSDK.trackEvent(name: string) | Track any custom user action (e.g., 'shared_content'). |
π¨ Implementation Example
import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import CohortSDK from 'react-native-cohort-ai';
export const RevenueCard = () => {
const [copy, setCopy] = useState({
header: "Unlock Premium", // Default Fallback
body: "Get unlimited access.",
cta: "Continue"
});
useEffect(() => {
// 1. Load optimized copy (Instantly if preloaded)
CohortSDK.getCampaignConfig().then(config => {
setCopy({ header: config.header, body: config.body, cta: config.ctaText });
});
// 2. Start the AI Attention Timer
CohortSDK.trackPaywallView();
}, []);
const onBuy = async () => {
// 3. Track success & attention duration
await CohortSDK.trackSuccess();
// ... proceed with purchase
};
const onDismiss = async () => {
// 4. Track dismissal & attention duration
await CohortSDK.trackPaywallDismiss();
navigation.goBack();
};
return (
{copy.header}
{copy.body}
{copy.cta}
Close
);
};