Expo with React Navigation

Use Expo to easily build and deploy your React Navigation apps for both iOS and Android.

Note: Pendo supports integration with Expo SDK 41-48.

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", 
            }
          ],
       ]
   }
}

3. Modify Javascript Obfuscation
When bundling for production, React Native minifies class and function names to reduce the size of the bundle. This means that we do not have access to the original component names which are used for the codeless solution.

In the application metro.config.js file, add the following statements in the transformer:

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
config.transformer.minifierConfig = {
   keep_classnames: true, // Preserve class names
   keep_fnames: true, // Preserve function names
   mangle: {
      keep_classnames: true, // Preserve class names
      keep_fnames: true, // Preserve function names
   }
}
module.exports = config;

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';

function initPendo (){
    const navigationOptions = {library: NavigationLibraryType.ReactNavigation, navigation: null};
    const pendoKey = "COPY YOUR APP KEY HERE";
    PendoSDK.setup(pendoKey, navigationOptions);
}
initPendo();

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);

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

 3. In the file where the NavigationContainer is created, add the following import statements at the top of the file:

import {WithPendoReactNavigation} from 'rn-pendo-sdk'  

Wrap NavigationContainer with WithPendoReactNavigation higher-order component

const PendoNavigationContainer = WithPendoReactNavigation (NavigationContainer);   

replace NavigationContainer tag with PendoNavigationContainer tag

<PendoNavigationContainer>
    {/* Rest of your app code */}
</PendoNavigationContainer>

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 is available here.
• Sample React Native app with Pendo SDK integrated available here.