Expo with React Native 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+.


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": [
               "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';

    Navigation.events().registerAppLaunchedListener(() => {
       const navigationOptions = {library:
NavigationLibraryType.ReactNativeNavigation, navigation: Navigation};

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


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