9

Quick Start Guide

Before you can take advantage of our SDK, you need to set up your development environment, install the SDK, and then initialize it. This page can help you get started!

1. Set up your development environment

Before you get started, you’ll need to do the following things:

1. Set up your React Native environment
2. Add React navigation to your project to support deep links and screen tracking
3. Set up your iOS environment:
   1. Setup XCode (using deployment target to 13.0 or later).
   2. Make sure that you have XCode command line tools installed xcode-select --install.
   3. Get your Apple Push Certificate and enable push notifications for iOS in your Customer.io account.
   4. Have an iOS 13 to test with. You cannot test push notifications in an emulator.
4. Set up your Android environment:
   1. Download and install Android Studio
   2. Add your Google Firebase Cloud Messaging (FCM) key to Customer.io and enable push notifications for Android
   3. Make sure you use an appropriate version of the Android Gradle plugin.
   4. Have an Android device or emulator with Google Play Services enabled and a minimum OS version.

2. Create a React Native source Source

Before you can integrate your app, you need to tell Customer.io that you have an React native app. This is what we call a sourceAn integration that feeds data into Customer.io—a source of data..

Your source provides the API key you’ll use to initialize the SDK.

1. Go to Data & Integrations > Integrations and click Add Integration.
2. Select React Native.
3. Enter a Name for your integration, like “My React Native App”.
4. We’ll present you with a code sample containing a cdpApiKey that you’ll use to initialize the SDK. Copy this key and keep it handy.
5. Click Complete Setup to finish setting up your integration.

   

   

Remember, you can also connect your React Native app to services outside of Customer.io—like your analytics provider, data warehouse, or CRM.

3. Install the React Native SDK

Now it’s time to add the React Native packages to your app and install everything.

1. Open your terminal and go to your project folder—cd <Root/path/to/your/app>.

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

   • npm install customerio-reactnative
   • yarn add customerio-reactnative

3. If you’re using a React Native version earlier than 0.60, link the library manually with npx react-native link customerio-reactnative. Otherwise, go to the next step.

4. In your terminal, run pod install --repo-update --project-directory=ios. This adds the required iOS dependencies to your project. When the process is complete , you’ll see a message like this:

   Pod installation complete! There are X dependencies from the Podfile and Y total pods installed.

5. Make sure that your minimum deployment target is set to 13.0. You’ll have to do this in two places:

   1. Go to the ios subfolder and open your Podfile. Find the platform:ios line, and make sure that the version is set to 13.0 or later if it isn’t already.

   2. Open your project’s iOS directory in XCode, select the project under Targets, and set the Minimum Deployments target to 13.0 or later.

      

      

6. Go to the Android subfolder and include google-services-plugin by adding the following lines to the project-level android/build.gradle file:

   buildscript {
      repositories {
         // Add this line if it isn't already in your build file:
         google()  // Google's Maven repository
      }
   
      dependencies {
         // Add this line:
         classpath 'com.google.gms:google-services:<version-here>'  // Google Services plugin
      }
   }
   
   allprojects {
      repositories {
         // Add this line if it isn't already in your build file:
         google()  // Google's Maven repository
      }
   }
   

7. Add the following line to android/app/build.gradle:

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

8. Download google-services.json from your Firebase project and copy the file to android/app/google-services.json.

Now you’re ready to initialize the SDK and use it in your app.

4. Initialize the SDK

After you install the SDK, you’ll need to initialize it in your app. To do this, you’ll add initialization code in your App.js file—or wherever you want to initialize the customerio-reactnative package.

You’ll need two different keys to initialize the SDK. See Authentication you don’t have them, or don’t know where to find them.

• Your sourceAn integration that feeds data into Customer.io—a source of data. CDP API Key, which you got when you created your react native source in earlier steps.
• Your Site IDEquivalent to the user name you’ll use to interface with the Journeys Track API; also used with our JavaScript snippets. You can find your Site ID under Settings > Workspace Settings > API Credentials to initialize the in-app package. You can find your siteId in Customer.io under Settings > Workspace Settings > API Credentials.

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

const App = () => {

useEffect(() => {
   const config: CioConfig = {
      cdpApiKey: 'CDP API Key', // Mandatory
      migrationSiteId: 'siteId', // Required if migrating from an earlier version
      region: CioRegion.US,
      logLevel: CioLogLevel.Debug,
      trackApplicationLifecycleEvents: true,
      inApp: {
         siteId: 'site_id',
      },
      push: {
         android: {
            pushClickBehavior: PushClickBehaviorAndroid.activityPreventRestart
         }
      }
   };
   CustomerIO.initialize(config)
   }, [])
}

When you’re done, you might want to return to your main folder and run your application to make sure that everything’s set up correctly:

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