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

  1. Download cohort-config.json from the Cohort Dashboard.
  2. Drag the file into your Xcode project (ensure "Copy items if needed" is checked).
  3. Run pod install in your ios/ directory.

Android Setup

  1. Download cohort-config.json from the Cohort Dashboard.
  2. 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
    
  );
};