Developer's guide to installing React Native for iOS

Mobile apps created with the React Native framework can enjoy our codeless solution if your app meets the React Native & navigation library criteria.

This includes all of our incredible mobile features that are available on any native mobile application: codeless analytics, which works retroactively to the time the SDK was installed, and all mobile guide types, including tooltips and walkthroughs.

Note: If your mobile app does not meet the technical requirements for codeless React Native support, you can use our Track Events-based solution.

Pre-Requisites

• React Native applications built over React Native version 0.6 or higher
• React Native applications using the "React Navigation" library version 5 or higher
  • or
• React Native applications using the "React Native Navigation" library version 6 or higher

Check with your developers which React Native configuration your apps use.

Install instructions 

1. Select Settings > Subscription Settings > Add Another App and select the React Native app type to create the iOS app.
   
   

Note that in Pendo, two applications are created under the 'Subscription Settings' page (one for iOS and one for Android).

1. Select the iOS app to integrate it by completing the questionnaire:
   1. Select which version of React Native you are using, and click Next.
   2. Select which navigation library you are using, and click Next.
   3. Select which version of the navigation library you are using, and click Next.
   4. Select Continue to installation.

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 iOS folder, run the following command:

pod install 

3. Add a bridging header as described in this Apple document.

4. Add the following import statement to the bridging header:

@import Pendo;

5. Modify Javascript Obfuscation

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

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 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 = <yourPendoKey>

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

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 will generate an anonymous visitor id.

Step 3. Mobile device connectivity for tagging and testing

These steps enable page tagging and guide testing capabilities.

1. Add Pendo URL Scheme to the info.plist file.

1. 1. Under App Target > Info > URL Types, create a new URL by clicking the + button.
   2. Set Identifier to pendo-pairing or any name of your choosing.
   3. Set URL Scheme to <yourScheme>

2. Add or modify the function application:openURL:options:

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
      if ([[url scheme] containsString:@"pendo"]) {
         [[PendoManager sharedManager] initWithUrl:url];
         return YES;
      }
      //  your code here ...
      return YES;
  }

Step 4: Verify installation

• Test using Xcode:
  • Run the app while attached to Xcode.
  • Review the device log and look for the following message:

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

• Click to go through a verification process for the SDK integration
• Test using the Pendo UI:
  • Confirm your app shows as Integrated under Subscription Settings.

Once the apps are integrated with the Pendo SDKs, you can start tagging pages and creating guides for each application. 

How do I track my visitors and accounts? 

setup: Use this API to create a connection with the server. Visitor session indicates which navigation library they are using.

PendoSDK.setup(appkey, navigationlibrary);

startSession: use this API to start recording a visitor session.

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

startSession: use this API to start recording a visitor session for an anonymous visitor to gather data.

PendoSDK.startSession(null, null, null, null)

PendoSDK.setVisitorData({"KEY1":"VALUE1","KEY2":"VALUE2",...})

PendoSDK.setAccountData({"KEY1":"VALUE1","KEY2":"VALUE2",...})

React Native version 0.6+

What changed in React Native Version 0.6+?

Pendo has identified a change to the hierarchy layout in React Native version 0.6 + that affects how the Pendo SDK identifies pages in Android apps. Note: This only applies to Android Apps using or planning to use React Native version 0.6+ and higher.

How does this affect tagged pages?

Some pages may need to be updated to collect analytics and show guides. These pages can be easily identified and fixed by going to the Page Alerts tab in Pendo. Page Alerts proactively surfaces pages that previously had activity, but are now showing no views, so you can quickly check and update the page if needed. 

1. Review the Page Alerts and ‘Update Page’ to capture the new page structure. Once this is done, analytics and guides associated with the page will display as expected.
2. Also recommended, subscribe to Page Alerts and be notified via Email when/if a page needs to be updated.