Multiple push providers

By default, our Expo plugin expects to be the only push package in your project. It'll automatically handle push notification metrics and fetch a device tokens for you. But if you use our SDK with other push packages like react-native-firebase, you may want to make a couple of configuration changes.

Use React Native Firebase with the Customer.io SDK

If you use React Native Firebase 26.1 or later with the fcm provider, set ios.pushNotification.useFirebaseFromApp to true and use dynamic frameworks on iOS, as in the example below. This needs customerio-expo-plugin 4.1.0 or later, with the customerio-reactnative version that plugin release requires (7.1.0 for plugin 4.1.0). React Native Firebase adds Firebase through Swift Package Manager, and this option stops the plugin from adding a second copy. Learn more.

If you use react-native-firebase with the Customer.io SDK, you’ll need to make sure that your app.json or app.config.js file doesn’t include the ios.pushNotification.googleServicesFile option.

This ensures that you properly capture metrics for push notifications sent through Customer.io and any notifications you receive using react-native-firebase.

{
   "expo": {
        "ios": {
            // include plist file here
            "googleServicesFile": "./GoogleService-Info.plist"
        },
        "android": {
            "googleServicesFile": "./google-services.json"
        },
        "plugins": [
            "@react-native-firebase/app",
            "@react-native-firebase/messaging",
            [
                "expo-build-properties",
                { "ios": { "useFrameworks": "dynamic" } }
            ],
            [
                "customerio-expo-plugin",
                {
                    "android": {
                        "googleServicesFile": "./google-services.json"
                    },
                    "ios": {
                        "useFrameworks": "dynamic",
                        "pushNotification": {
                            "provider": "fcm",
                            "useFirebaseFromApp": true
                            // don't include your plist file here
                        }
                    }
                }
            ]
        ]
    }
}

Forward token refreshes on Android

By default, React Native Firebase’s messaging service has a higher priority on Android than Customer.io’s, so Firebase sends new tokens to React Native Firebase. The Customer.io SDK fetches the current token each time your app starts. When Firebase refreshes the token while your app is running, Customer.io gets the new token the next time your app starts.

To register the new token right away, forward React Native Firebase’s registration events to CustomerIO.registerDeviceToken. The examples below forward tokens only on Android, because on iOS the Customer.io SDK receives new tokens itself when it fetches tokens for you.

The event you forward depends on whether your app registers FCM tokens or Firebase Installation IDs. React Native Firebase reports a new FCM token through onTokenRefresh. In FID mode, it calls onRegistered instead, so if you switch modes, update your listener too.

import { useEffect } from 'react';
import { Platform } from 'react-native';
import { getMessaging, onTokenRefresh } from '@react-native-firebase/messaging';
import { CustomerIO } from 'customerio-reactnative';

// In a component that stays mounted, like your root App component:
useEffect(() => {
  if (Platform.OS !== 'android') {
    return;
  }

  const unsubscribe = onTokenRefresh(getMessaging(), token => {
    CustomerIO.registerDeviceToken(token);
  });

  return unsubscribe;
}, []);

import { useEffect } from 'react';
import { Platform } from 'react-native';
import { getMessaging, onRegistered } from '@react-native-firebase/messaging';
import { CustomerIO } from 'customerio-reactnative';

// In a component that stays mounted, like your root App component:
useEffect(() => {
  if (Platform.OS !== 'android') {
    return;
  }

  const unsubscribe = onRegistered(getMessaging(), installationId => {
    CustomerIO.registerDeviceToken(installationId);
  });

  return unsubscribe;
}, []);

Capture push tokens from another push provider

If you use another push package like expo-notifications, and you want to utilize that package to get device tokens, you’ll need to update your app.json or app.config.js file to disable automatic device token fetching and make sure you register push tokens with Customer.io using the CustomerIO.registerDeviceToken(<token>) method.

If you use Firebase Installation IDs, register the FID instead, because Firebase doesn’t return an FCM token in FID mode. You can get the FID with getId() from React Native Firebase’s Installations module.

1. In your app.json or app.config.js file, set the ios.pushNotification.autoFetchDeviceToken option to false.

   JSON

   Copy

   {
      "plugins": [
         [
            "customerio-expo-plugin",
            {
               "ios": {
                  "pushNotification": {
                     "autoFetchDeviceToken": false
                  }
               }
            }
         ]
      ]
   }
   

2. Capture push tokens from the other provider and register them with our SDK using the CustomerIO.registerDeviceToken(<token>) method.