9

Quick Start Guide

Setup process overview

React Native lets you build native mobile apps with JavaScript. Our React Native SDK helps you integrate Customer.io to identify people, track their activity, and send both push notifications and in-app messages.

1. Add a React Native integration to Customer.io get your API keys.
2. Install the SDK.
3. Initialize the SDK.
4. Identify and Track
5. Push Notifications
6. In-App

1. Add a React Native connection to your Customer.io workspace

You need to add a new React Native connectionRepresents an integration between Customer.io and another service or app under Data & Integrations > Integrations. A connection in Customer.io provides you with API keys and settings for your integration. in Customer.io to get your CDP API key. See Get your CDP API key for details.

2. Install the SDK

1. Make sure you set up your React Native environment first. You must use React Native 0.76.9 or later.

2. Open your terminal and go to your project folder.

3. Install the customerio-reactnative package using NPM or Yarn:

   npm install customerio-reactnative
   # or
   yarn add customerio-reactnative
   

4. Set up your project to support iOS and/or Android deployments:

   iOS

   iOS

   For iOS, install CocoaPods dependencies:

   pod install --repo-update --project-directory=ios
   

   Make sure your minimum iOS deployment target is set to 13.0 in both your Podfile and Xcode project settings.

   Android

   Android

   1. For Android, include the Google Services plugin by adding the following to your project-level android/build.gradle file:

      buildscript {
          repositories {
            google()  // Google's Maven repository
          }
      
          dependencies {
            classpath 'com.google.gms:google-services:<version-here>'  // Google Services plugin
          }
      }
      
      allprojects {
          repositories {
            google()  // Google's Maven repository
          }
      }
      

   2. Add the plugin to your app-level android/app/build.gradle:

      apply plugin: 'com.google.gms.google-services'  // Google Services plugin
      

   3. Download google-services.json from your Firebase project and place it in android/app/google-services.json.

3. Initialize the SDK

1. Add your CDP API key and site ID to your configuration.

   • CDP API Key: You’ll find this key in your React Native connection.
   • Site ID: You’ll find this value in your workspace under > Workspace Settings > API and webhook credentials.

2. Initialize the SDK in your app. Add the following code to your main component or App.js file:

   import React, { useEffect } from 'react';
   import { 
     CioConfig, 
     CioRegion, 
     CioLogLevel, 
     CustomerIO,
     PushClickBehaviorAndroid
   } from 'customerio-reactnative';
   
   useEffect(() => {
     const initializeCustomerIO = async () => {
       const config: CioConfig = {
         cdpApiKey: 'YOUR_CDP_API_KEY', // Required
         region: CioRegion.US,
         logLevel: CioLogLevel.Debug,
         trackApplicationLifecycleEvents: true,
         inApp: {
           siteId: 'YOUR_SITE_ID', // Required for in-app messaging
         }
       };
       await CustomerIO.initialize(config);
     };
     initializeCustomerIO();
   }, []);
   

3. Run your application to ensure everything is set up correctly:

   • iOS: npx react-native run-ios
   • Android: npx react-native run-android

4. Identify and Track

1. Identify a user in your app using the CustomerIO.identify method. You must identify a user before you can send push notifications and personalized in-app messages.

   import { CustomerIO } from "customerio-reactnative";
   
   const identifyUserExample = async () => {
     await CustomerIO.identify({
       userId: 'react-native-test-user@example.com',
       traits: {
         firstName: 'John',
         lastName: 'Doe',
         email: 'react-native-test-user@example.com',
         subscriptionStatus: 'active',
       },
     });
     console.log('User identified successfully');
   };
   

2. Track a custom event using the CustomerIO.track method. Events help you trigger personalized campaigns and track user activity.

   import { CustomerIO } from "customerio-reactnative";
   
   const trackCustomEventExample = async () => {
     await CustomerIO.track('purchased_item', {
       product: 'Premium Subscription',
       price: 99.99,
       currency: 'USD'
     });
     console.log('Custom event tracked successfully');
   };
   

3. Track screen views to trigger in-app messages associated with specific screens.

   import { CustomerIO } from "customerio-reactnative";
   
   const trackScreenViewExample = async () => {
     await CustomerIO.screen('ProductDetails');
     console.log('Screen view tracked successfully');
   };
   

5. Push Notifications

1. Set up your push notification credentials in Customer.io:

   • iOS: Upload your Apple Push Notification certificate (.p8 file).
   • Android: Upload your Firebase Cloud Messaging server key (.json format).

2. Request push notification permissions from the user:

   import { CustomerIO, CioPushPermissionStatus } from "customerio-reactnative";
   
   const requestPushPermissions = async () => {
     const permissionStatus = await CustomerIO.pushMessaging.showPromptForPushNotifications({
       ios: { 
         sound: true, 
         badge: true 
       }
     });
   
     switch (permissionStatus) {
       case CioPushPermissionStatus.Granted:
         console.log('Push notifications enabled');
         break;
       case CioPushPermissionStatus.Denied:
       case CioPushPermissionStatus.NotDetermined:
         console.log('Push notifications denied');
         break;
     }
   };
   

3. For iOS: to ensure that metrics are tracked, configure Background Modes. In Xcode, enable “Remote notifications” under Capabilities > Background Modes.

4. For Android: add notification icon resources:

   • Place a notification icon file named ic_notification.png in your drawable folders.
   • Make sure your app’s AndroidManifest.xml has the proper FCM permissions.

6. In-App

1. To enable in-app messaging, all you need to do is add the site ID. Remember, you’ll find your site ID under Data & Integrations > Integrations > Customer.io API: Track in the Connections tab.

2. Ensure that the SDK is initialized with the site ID in your app. You can call the initialize method from your components or services:

import { CioConfig, CustomerIO } from "customerio-reactnative";
import { useEffect } from "react";

useEffect(() => {
  const initializeCustomerIO = async () => {
    const config: CioConfig = {
      cdpApiKey: 'YOUR_CDP_API_KEY',
      inApp: {
        siteId: 'YOUR_SITE_ID',
      }
    };

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