12

Packages and Configuration Options

How it works

With our Expo plugin, you’ll add configuration options in two places:

1. In your app.json or app.config.js files, you’ll add configuration options that affect the native files we generate when you run the prebuild.
2. In your React Native app, you’ll add configuration options that affect the SDK at runtime.

Configuring the Expo Plugin

To use the Expo plugin, you’ll need to add a customerio-expo-plugin entry to your app.json or app.config.js files. Before you set up your app:

• Note the ios.pushNotification.env.region. If you’re in our EU region, you’ll need to set this value to eu.
• To support Cusotmer.io’s latest features, you’ll also want to set your iOS deployment target to 15.1 or higher.

If you send notifications to iOS users through Firebase Cloud Messaging, you’ll need to:

• Set expo-build-properties.ios.useFrameworks to static.
• Set customerio-expo-plugin.ios.pushNotification.provider to fcm.
• Set customerio-expo-plugin.ios.pushNotification.googleServicesFile to the location of your GoogleService-Info.plist file. If you use @react-native-firebase with the Customer.io SDK, you should not set this value Learn more

{
   "plugins": [
      [
         "expo-build-properties",
         {
            "ios": {
               "deploymentTarget": "15.1", // set your iOS deployment target to support Customer.io
               "useFrameworks": "static" // set if you use FCM to send push notifications to iOS devices
            }
         }
      ],
      [
         "customerio-expo-plugin",
         {
            "android": {
               "googleServicesFile": "./files/google-services.json"
            },
            "ios": {
               "pushNotification": {
                  "provider": "fcm", // use "apn" for Apple Push Notification service
                  "googleServicesFile": "<Path to GoogleService-Info.plist file>", // required if provider is "fcm" and you don't use the @react-native-firebase SDK
                  "useRichPush": true,
                  "env": {
                     "cdpApiKey": "<apiKey>",
                     "region": "us"
                  }
               }
            }
         }
      ]
   ]
}

SDK packages

The SDK consists of a few packages. You must use the CioConfig and CustomerIO packages to configure and initialize the SDK in your React Native app.

React configuration options

You can determine global behaviors for the SDK in using CioConfig package. You must provide configuration options before you initialize the SDK; you cannot declare configuration changes after you initialize the SDK.

Import CioConfig and then set configuration options to configure things like your logging level and whether or not you want to automatically track device attributes, etc. Note that the logLevel option requires the CioLogLevel package and the region option requires the CioRegion package.

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)
   }, [])
}