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/exampledirectory
npm install customerio-reactnativeHere’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.
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.
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.
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
We welcome contributions! To get started:
- Review our example app to help with local development.
- Follow our Code of Conduct.