Customer.io React Native SDK

The official Customer.io SDK for React Native enables you to integrate mobile messaging features—like in-app messaging and push notifications—into your app. These features can be triggered by events sent through the SDK and configured using your Customer.io campaigns.

📖 Full documentation: customer.io/docs/sdk/react-native
🧪 Example apps: see the /example directory

Installation

npm install customerio-reactnative

SDK Initialization

Here’s a simplified example showing how to initialize the SDK to enable most mobile features:

import {
  CustomerIO,
  CioConfig,
  CioLogLevel,
  CioRegion,
} from 'customerio-reactnative';

useEffect(() => {
  const config: CioConfig = {
    cdpApiKey: 'your-cdp-api-key', // Required
    migrationSiteId: 'your-site-id', // Optional, for migrating from older SDKs
    region: CioRegion.US, // Or CioRegion.EU
    logLevel: CioLogLevel.debug,
    trackApplicationLifecycleEvents: true,
    inApp: {
      siteId: 'your-site-id', // Required for in-app messaging
    },
    push: {
      android: {
        pushClickBehavior: 'ActivityPreventRestart', // Optional
      },
    },
  };

  CustomerIO.initialize(config);
}, []);

🔑 For help finding your credentials, check out the Quick Start Guide.

📲 Push Notifications

This SDK supports rich push notifications using Firebase (for Android) and either Firebase or APNs (for iOS). Follow our push setup guide to configure your project for push.

🔴 Live Activities

Enable the activity types you use under the liveNotifications key of your SDK config. On iOS, also add NSSupportsLiveActivities to your app's Info.plist, the liveactivities pod subspec, and a Widget Extension that renders the SDK's built-in templates. Without the Info.plist key, iOS refuses to start any activity:

<key>NSSupportsLiveActivities</key>
<true/>

One manual step is required on iOS. Forward every opened URL to the SDK from your AppDelegate, or taps on a Live Activity are not attributed. NativeLiveActivities comes from the wrapper pod, so import it — and note this only compiles once the liveactivities subspec is installed:

import customerio_reactnative
import React

extension AppDelegate {
  func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Reports an `opened` metric and returns the deep link to route to. A non-Customer.io URL comes
    // back unchanged; `nil` means the activity carried no deep link, so there is nothing to open.
    guard let routableUrl = NativeLiveActivities.handleWidgetUrl(url) else { return true }
    return RCTLinkingManager.application(app, open: routableUrl, options: options)
  }
}

A React Native AppDelegate conforms to UIApplicationDelegate directly rather than subclassing, so this method is not an override, and the URL is passed on to RCTLinkingManager instead of super. See the sample app's AppDelegate.swift for this in context.

Android needs no equivalent step. Expo apps need none either — the config plugin injects this for you.

Identify Users, Track Events, and More

Customer.io helps you personalize your mobile experience:

• 👤 Identify users to associate events and devices with profiles
• 📊 Track events to trigger messaging based on user behavior
• 💬 In-App Messages are server-driven and blend seamlessly with your app

Contributing

We welcome contributions! To get started:

1. Review our example app to help with local development.
2. Follow our Code of Conduct.

License

MIT