How to get device token on an Expo React Native app

[cdedreuille]

• analytics-react-native version: 2.1.11
• React Native version: 0.68
• iOS or Android or both? iOS

I have an Expo app suing the latest SDK45 with React Native 0.68.
I'm creating the client like this:

const client = createClient({
  writeKey: /* my key */,
  debug: false,
  trackAppLifecycleEvents: true,
  trackDeepLinks: true,
});

By using trackAppLifecycleEvents: true it automatically track lifecycle events like Application Opened.
To connect with customer.io I need to get context.device.token but I couldn't find how to set it up.

I saw this discussion but it seems that the middleware is for Android version.

Any idea how I could get the device token on a managed Expo app?

[cdedreuille]

The discussion on this PR is very close to the problem we have but I couldn't found an easy solution except trying to use middlewares. #170

[alanjcharles]

@cdedreuille taking a look. You should be able to create a before plugin that sets context.device.token in sovran so that it is included in every event payload. Something like the following:

1. retrieve device token from expo-notifications
2. send it to sovran in the same way we send the idfa value here.
3. add your plugin to the segmentClient.

this is essentially acting as middleware- just with the new timeline + plugin architecture. Please just let me know your thoughts and we can go from there.

[cdedreuille]

Thanks a lot @alanjcharles. This sounds like a great plan. Not sure what sovran mean though.

[alanjcharles]

@cdedreuille sovran is the state management system we developed to replace redux in this library. Since we don't ever render components, redux was a bit over engineered for our needs. We make it possible to access the sovran context store via the segment client (outlined in idfa example above) so you always have access to those values. We also made it possible to dispatch data from native code to the sovran-store so you can easily access things like idfa

[cdedreuille]

@alanjcharles we managed to create this plugin with your indications but we still have some issues:

• The context.device object sometimes is empty with only the token but sometimes it keeps the other data.
• I couldn't find a way to fix the typescript error on token

import {
  Plugin,
  PluginType,
  SegmentEvent,
} from '@segment/analytics-react-native';
import type { SegmentClient } from '@segment/analytics-react-native/lib/typescript/src/analytics';
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';

export default class CustomerIOPlugin extends Plugin {
  type = PluginType.before;

  configure(analytics: SegmentClient) {
    this.analytics = analytics;
    if (Device.isDevice) {
      Notifications.getDevicePushTokenAsync().then(({ data: token }) => {
        this.analytics?.context.set({
          device: {
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-ignore
            token,
            type: Device.osName ? Device.osName : undefined,
            manufacturer: Device.manufacturer ? Device.manufacturer : undefined,
            model: Device.modelId ? Device.modelId : undefined,
            name: Device.modelName ? Device.modelName : undefined,
          },
        });
      });
    }
  }

  execute(event: SegmentEvent) {
    return event;
  }
}

And set it up with our client

import CustomerIOPlugin from './CustomerIOPlugin';

const client = createClient({
  writeKey: /* key */
  debug: false,
  trackAppLifecycleEvents: true,
});

client.add({ plugin: new CustomerIOPlugin() });

@alanjcharles Is this the correct way to go?

[alanjcharles]

@cdedreuille yeah that is definitely the way to go. We're currently working on a method that will let you subscribe to the context being loaded. We're hoping to get that out by next week sometime. However, if you want a workaround for the time being, you should be able to do something like:

// Check first if the data I need is already here
if (context.device !== undefined) {
   // Do whatever I need to do
} else {
   // If the context data is not loaded yet, lets register a callback for when it is loaded
  analytics.context.onChange((context) => {
      // Check if the change contains the data I need
      if (context.device !== undefined) {
         // Now do whatever I need to do
      }
    });

I hope this helps! We'll reach out when we publish that change. In the meantime, just let me know if you run into anything else.

[oscb]

@cdedreuille The PR #532 adds a onContextLoaded(callback) method to the client that triggers the registered callback when the context is fully loaded or executes the callback immediately if the context is already in place.

This should greatly simplify the code to handle this scenario! I'm updating the types in a different PR which should solve the issue about TS warning about token.