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. Add an Expo integration to Customer.io and get your API keys.
2. Install the SDK.
3. Identify and Track
4. Push Notifications
5. In-App

1. Add an Expo integration to your Customer.io workspace

If you haven’t already gotten a CDP API key, you’ll need to add a new Expo integration to your Customer.io workspace. This “integration” represents your app in Customer.io and provides you the CDP API key that you’ll use to initialize your app. See Get your CDP API key for details.

2. Install the SDK

1. Install the Customer.io Expo plugin and React Native SDK, then run the expo prebuild command to generate native files.

   npx expo install customerio-expo-plugin customerio-reactnative
   

   You must also add push notification options to your app.json file to build the native files, even if you don’t use Customer.io push notifications in your app. See Push Notifications for more information, and then run the prebuild command.

   npx expo prebuild
   

2. Add your CDP API key and site ID to your .env file.

   • CDP API Key: You’ll find this key in the Expo integration that you created in step 1 on this page.
   • Site ID: You’ll find this value in your integrations under Customer.io API: Track.

   EXPO_PUBLIC_CDP_API_KEY=<CDP API KEY>
   EXPO_PUBLIC_SITE_ID=<SITE ID>
   

3. Ensure the SDK is initialized in your app. You can call the initialize method from your components or services. We recommend initializing the SDK in the useEffect hook of your main component or layout file.

   import { CioConfig, CustomerIO } from "customerio-reactnative";
   
   useEffect(() => {
      const initializeCustomerIO = () => {
         const config: CioConfig = {
            cdpApiKey: process.env.EXPO_PUBLIC_CDP_API_KEY,
            // Optionally, you can enable in-app messaging by adding the site ID
            inApp: {
               siteId: process.env.EXPO_PUBLIC_SITE_ID,
            }
         };
         CustomerIO.initialize(config);
      };
      initializeCustomerIO();
   }, []);
   

4. Run your application using npx expo run:ios or npx expo run:android instead of using the dev server via npx expo start. You need to use these commands so that the plugin can build native files that let your app receive push notifications and in-app messages.

3. 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 = () => {
      CustomerIO.identify({
         userId: 'expo-test-user@example.com',
         traits: {
            firstName: 'John',
            lastName: 'Doe',
            email: 'expo-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 = () => {
      CustomerIO.track('purchased_item', {
         product: 'Premium Subscription',
         price: 99.99,
         currency: 'USD'
      });
      console.log('Custom event tracked successfully');
   };
   

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

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

4. Push Notifications

1. Configure push notifications for iOS and Android. Update your app.json file with the following configuration:

   {
      "expo": {
         ...Other options
         "plugins": [
            [
               "customerio-expo-plugin",
               {
                  "android": {
                     "googleServicesFile": "./files/google-services.json"
                  },
                  "ios": {
                     "pushNotification": {
                        "useRichPush": true,
                        "env": {
                           "cdpApiKey": "<CDP API KEY>",
                           "region": "us" // us or eu
                        }
                     }
                  }
               }
            ]
         ]
      }
   }
   

2. Upload your push service credentials in Customer.io under [ > Workspace Settings > Push] (https://fly.customer.io/workspaces/last/settings/actions/push/ios).

   • iOS: upload your Apple Push Notification certificate (.p8 file).
   • Android: upload your server key json file (.json format).

5. 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 = () => {
         const config: CioConfig = {
            cdpApiKey: process.env.EXPO_PUBLIC_CDP_API_KEY,
            inApp: {
               siteId: process.env.EXPO_PUBLIC_SITE_ID,
            }
         };
   
         CustomerIO.initialize(config);
      };
      initializeCustomerIO();
   }, []);