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.

1. Set up an Expo source

If you don’t already have a write key, you’ll need to set up a new data sourceAn integration that feeds data into Customer.io—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.2.6) with the plugin.

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

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 the customerio-expo-plugin to your plugins array and set configuration options. In most cases, you’ll want to stick to our default options. You’ll need the cdpApiKey you generated in the first step on this page as well!

   • Note the region in the samples below. If you’re in our EU region, you’ll need to change this to eu.
   • By default, the SDK expects to use Apple’s Push Notification service (APN) for iOS. If you send messages to iOS devices through Firebase Cloud Messaging (FCM), you’ll need to set ios.pushNotification.provider to fcm, provide a googleServicesFile path, and set the expo-build-properties plugin’s ios.useFrameworks setting to static.
   • You’ll download your google-services file from your Firebase console. If you’re new to Firebase, see how to set up your Firebase account and obtaining your google-services.json file.

    Do you use Expo Application Services (EAS)?

   You’ll need to add more config options to support rich push features (images and links). See our push documentation for more information.

   app.json

   {
      "plugins": [
         [
            "expo-build-properties",
            {
               "ios": {
                  "deploymentTarget": "15.1",
                  "useFrameworks": "static" // set if you use FCM to send push notifications to iOS devices
               }
            }
         ],
         [
            "customerio-expo-plugin",
            {
               "android": {
                  "googleServicesFile": "./files/google-services.json"
               },
               "ios": {
                  "useFrameworks": "static", // must match value in expo-build-properties if set
                  "pushNotification": {
                     "provider": "fcm", // use "apn" for Apple Push Notification service
                     "googleServicesFile": "<Path to GoogleService-Info.plist file>", // required if provider is "fcm"
                     "useRichPush": true,
                     "env": {
                        "cdpApiKey": "<apiKey>",
                        "region": "us"
                     }
                  }
               }
            }
         ]
      ]
   }
   

   app.config.js

   export default {
     ...
     "plugins": [
         [
            "expo-build-properties",
            {
               "ios": {
                  "deploymentTarget": "15.1",
                  "useFrameworks": "static" // set if you use FCM to send push notifications to iOS devices
               }
            }
         ],
         [
            "customerio-expo-plugin",
            {
               "android": {
                  "googleServicesFile": "./files/google-services.json"
               },
               "ios": {
                  "useFrameworks": "static", // must match value in expo-build-properties if set
                  "pushNotification": {
                     "provider": "fcm", // use "apn" for Apple Push Notification service
                     "googleServicesFile": "<Path to GoogleService-Info.plist file>", // required if provider is "fcm"
                     "useRichPush": true,
                     "env": {
                        "cdpApiKey": "<apiKey>",
                        "region": "us"
                     }
                  }
               }
            }
         ]
      ]
   };
   

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.