Expo with Track Events

Use Expo to easily build and deploy your React Navigation apps for both iOS and Android. If you don't use either of the Navigation Library versions; react-native-navigation 6.0+ or react-navigation 5.0+, you cannot use our Codeless solution and should configure Pendo Track Events to capture and notify Pendo of analytic events.

Note: Pendo supports integration with Expo SDK 41+.

Step 1. Install Pendo SDK

1. In the application folder, run the following command:

Using NPM:

npm install --save rn-pendo-sdk

Using YARN:

yarn add rn-pendo-sdk

2. In the application folder, open app.json and add rn-pendo-sdk plugin to the Plugins section.

{
  "expo": {
    ...
       "plugins": [
        ...
          [
            "rn-pendo-sdk",
            {
                "ios-scheme": "COPY YOUR IOS SCHEME HERE",
                "android-scheme": "COPY YOUR ANDROID SCHEME HERE", 
            }
          ],
       ]
   }
}

Step 2: Pendo SDK Integration

1. In the application main file (App.js/.ts/.tsx), add the following code:

import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';

Configure Track Events

1. Add the following code in the componentDidMount method:

    const navigationOptions = {library: NavigationLibraryType.Other, 
navigation: null};
    const pendoKey = "COPY YOUR APP KEY HERE";

    PendoSDK.setup(pendoKey, navigationOptions);

2. Initialize Pendo where your visitor is being identified, for example, login, register etc. 

    const visitorId = 'VISITOR-UNIQUE-ID';
    const accountId = 'ACCOUNT-UNIQUE-ID';
    const visitorData = {'Age': '25', 'Country': 'USA'};
    const accountData = {'Tier': '1', 'Size': 'Enterprise'};

    PendoSDK.startSession(visitorId, accountId, visitorData, accountData);

 3. In the application files where you want to track an event, add the following code:

   import { PendoSDK } from 'rn-pendo-sdk';

    ...
    PendoSDK.track('name', {firstProperty: 'firstPropertyValue', 
secondProperty: 'secondPropertyValue'}); 

Notes

• visitorId: a user identifier (e.g. John Smith)
• visitorData: the user metadata (e.g. email, phone, country, etc.)
• accountId: an affiliation of the user to a specific company or group (e.g. Acme inc.)
• accountData: the account metadata (e.g. tier, level, ARR, etc.

Passing null or "" to the visitorId or not setting the initParams.visitorId generates an anonymous visitor id. 

Step 3: Verify Installation

1. Build the application using EAS or locally and run the application on your simulator or real device.
2. Review the device log and look for the following message:

   Pendo Mobile SDK was successfully integrated and connected to the server.

3. Test using the Pendo UI.
4. Confirm that you see your app under Subscription Settings as Integrated.

Developer Documentation

• API documentation available here.