Skip to content

Latest commit

 

History

History
125 lines (99 loc) · 5.09 KB

expo_rnn-ios.md

File metadata and controls

125 lines (99 loc) · 5.09 KB
Raw

Expo iOS using React Native Navigation

Important

  • Expo SDK 41-51 using React Native Navigation 6+ is supported by our codeless solution.
  • Expo Go is not supported. Pendo SDK has a native plugin that is not part of the Expo Go app. Pendo can only be used in development builds. For more about development builds read adding custom native code with development builds.

Important

Requirements:

  • Deployment target of iOS 11 or higher
  • Swift Compatibility 5.7 or higher
  • Xcode 14 or higher

Step 1. Add Pendo dependency

In the root folder of your expo app, add Pendo using one of your package managers:

#example with npx expo
npx expo install rn-pendo-sdk

#example with npm
npm install --save rn-pendo-sdk

#example with yarn
yarn add rn-pendo-sdk

Step 2. Project setup

Note

The Scheme ID can be found in your Pendo Subscription Settings in App Details.

In the app.config.js or app.json, add the following:

{
  "plugins": [
    [
      "rn-pendo-sdk",
      {
        "ios-scheme": "YOUR_IOS_SCHEME_ID",
        "android-scheme": "YOUR_ANDROID_SCHEME_ID"
      }
    ]
  ]
}

This configuration enables pendo to enter pair mode to tag pages and features.

Step 3. Production bundle - modify Javascript minification

In the metro.config.js file, add the following:

module.exports = {
  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
        }
    }
  }
}

Step 4. Integration

Note

The API Key can be found in your Pendo Subscription Settings in App Details.

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

import { PendoSDK, NavigationLibraryType } from 'rn-pendo-sdk';
import { Navigation } from "react-native-navigation";

function initPendo() {
    const navigationOptions = {library: NavigationLibraryType.ReactNativeNavigation, navigation: Navigation};
    const pendoKey = 'YOUR_API_KEY_HERE';
    //note the following API will only setup initial configuration, to start collect analytics use start session
    PendoSDK.setup(pendoKey, navigationOptions);
}

initPendo();

Initialize Pendo Session where your visitor is being identified (e.g. login, register, etc.).

const visitorId = 'John Smith';
const accountId = 'Acme Inc.';
const visitorData = {'Age': 25, 'Country': 'USA'};
const accountData = {'Tier': 1, 'Size': 'Enterprise'};

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

Tip

To begin a session for an anonymous visitor, pass null or an empty string '' as the visitor id. You can call the startSession API more than once and transition from an anonymous session to an identified session (or even switch between multiple identified sessions).

Step 5. Running the project

To run the project with Pendo integration, you should be able to generate iOS and Android projects. You can generate them by running npx expo prebuild, or npx expo run:[ios|android] (which will run prebuild automatically). You can also use development builds in this context - the easiest way to do this is to run npx expo install expo-dev-client prior to prebuild or run, and it's also possible to add the library at a later time (additional information can be found here: Adding custom native code).

Step 6. Verify installation

  1. In the Pendo UI, go to Settings>Subscription Settings.
  2. Select the Applications tab and then your application.
  3. Select the Install Settings tab and follow the instructions under Verify Your Installation to ensure you have successfully integrated the Pendo SDK.
  4. Confirm that you can see your app as Integrated under subscription settings.

Limitations

  • For the codeless solution to work, all the elements MUST be wrapped in react-native ui components.
    As with other analytics tools, we are dependent on react-navigation screen change callbacks which means that codeless tracking analytics is available for screen components only.

  • To support hybrid mode with React Native Navigation, please open a ticket.

Developer documentation

  • API documentation available here.

Troubleshooting