10

Quick Start Guide

Setup process overview

Expo provides a managed framework to help you build React Native mobile apps. Our Expo plugin relies on our React Native SDK. When you run the prebuild, we’ll generate the native files you’ll need to integrate Customer.io push notifications in your app. Then you’ll add calls to your app to identify people, track their activity, and listen for notifications.

1. Set up your source and get your API keys from Customer.io.
2. Install the SDK.
3. Configure the plugin: these settings affect the native files that we generate when you run the prebuild.
4. Add initialization code to your React Native app.
5. Run the prebuild.

Prerequisites

We’ve tested this plugin with Expo versions 45 - 52 using an eas build with EAS managed credentials on a limited set of Android and iOS 15.1.

To support the Customer.io SDK, you’ll need to set your iOS deployment target to 15.1 in the expo-build-properties plugin settings.

By default, the plugin expects to use Apple’s Push Notification service (APNs) for iOS and Firebase Cloud Messaging (FCM) for Android. We plan to add FCM support for iOS in a future release.

1. Set up an Expo source

If you don’t already have a write key, you’ll need to set up a new data sourceA source is a website or server that you want to capture data from—it’s a source of data!. The source represents your app and the stream of data that you’ll send to Customer.io.

1. Go to the Data Pipelines tab. On the Connections page under Sources, click Add Source.
2. Select the Mobile: Expo source and then click Next: Connect Expo.

   

   
3. Enter a Name for the source, like “My Expo 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 source.

   

   

Now the Connections page shows that your Expo source is connected to your Journeys workspace. Hover over a source or destination to see its active connections. You can also connect your Expo source to additional destinations if you want to send your mobile data to additional services—like your analytics provider, data warehouse, or CRM.

2. Install the SDK

Before you can use the Expo plugin, you’ll need to install it and our React Native SDK. The Expo plugin takes advantage of our React Native SDK, and requires very little setup. It extends the Expo config to let you customize the prebuild phase of managed workflow builds so you don’t need to eject to a bare workflow.

1. Install the plugin.

   //expo
   expo install customerio-expo-plugin
   
   //npm
   npm install customerio-expo-plugin
   
   //yarn
   yarn add customerio-expo-plugin
   

2. Install version 4 of our React Native SDK (e.g. 4.1.1) with the plugin.

   //expo
   expo install customerio-reactnative@4.1.1
   
   //npm
   npm install customerio-reactnative@4.1.1
   
   //yarn
   yarn add customerio-reactnative@4.1.1
   

3. Configure the plugin

Add configuration options to your app.json or app.config.js files and run the prebuild.

1. If you haven’t already, install the expo-build-properties plugin.

   expo install expo-build-properties
   

2. Set your iOS deployment target to 15.1 in the expo-build-properties plugin settings.

3. Add customerio-expo-plugin plugin set configuration options. In most cases, you’ll want to stick to our default options. You’ll need Track API credentials to initialize the SDK—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 and API KeyEquivalent to the password you’ll use with a Site ID to interface with the Journeys Track API. You can generate new keys under Settings > Workspace Settings > API Credentials, which you can find in Customer.io under Settings > Workspace Settings > API Credentials.

   app.json

   {
      "plugins": [
         [
            "expo-build-properties",
            {
               "ios": {
                  "deploymentTarget": "15.1"
               }
            }
         ],
         [
            "customerio-expo-plugin",
            {
               "android": {
                  "googleServicesFile": "./files/google-services.json"
               },
               "ios": {
                  "pushNotification": {
                  "useRichPush": true,
                  "env": {
                     "cdpApiKey": "<apiKey>",
                     "region": "<region>"
                  }
                  }
               }
            }
         ]
      ]
   }
   

   app.config.js

   export default {
     ...
     "plugins": [
         [
            "expo-build-properties",
            {
               "ios": {
                  "deploymentTarget": "15.1"
               }
            }
         ],
         [
            "customerio-expo-plugin",
            {
               "android": {
                  "googleServicesFile": "./files/google-services.json"
               },
               "ios": {
                  "pushNotification": {
                  "useRichPush": true,
                  "env": {
                     "cdpApiKey": "<apiKey>",
                     "region": "<region>"
                  }
                  }
               }
            }
         ]
      ]
   };
   

4. Initialize the SDK in your React Native app

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 your CDP API Key again, which you also added to your app.json or app.config.js file above.

You’ll also need your site ID to support in-app messaging. If you’re upgrading from a previous version of the SDK, you’ll use your site ID as your migrationSiteId. This key is used to send remaining tasks to Customer.io when your audience updates your app.

This makes the SDK available to use in your app. Note that you’ll still need to identify your app’s users before you can send them messages.

import {
   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,
      inApp: {
         siteId: 'site_id',
      }
   };
   CustomerIO.initialize(config)
   }, [])
}

When you’re done, you may 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

5. Run the prebuild

After you configure the plugin and initialize it in your code, run the prebuild.

# Run prebuild
expo prebuild

# Delete ios and android folders before prebuild
expo prebuild --clean

Now your project is ready to use the SDK.