Developer's Guide to Installing React Native for Android

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

Overview

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 work retroactively to the time the SDK was installed) and all mobile guide types including tooltips and walkthroughs.

Pre-Requisites

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

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.
   
   
2. Note that in Pendo, two applications are created under the 'Subscription Setting' page (one for Android and one for iOS).
   
3. Select the Android 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 application build.gradle file:

• Add Pendo Repository to the repositories section

repositories {
    maven {
        url "https://software.mobile.pendo.io/artifactory/androidx-release"
    }
mavenCentral()
}

• Minimum and compile Sdk Version
  If applicable, set your app to be compiled with compileSdkVersion 31 or higher and minSdkVersion 21 or higher:

android {
    minSdkVersion 21
    compileSdkVersion 31
}

• Java 8 Compatibility
  If applicable, configure your app compilation to targetCompatibility JavaVersion.VERSION_1_8:

android {
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

3. In the application Android.manifest file.
If applicable, add the following <uses-permission> to the manifest in the <manifest> tag:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

4. Modify Javascript Minification

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
        }
    }
  }
}

5. Using Proguard
If you are using proguard-android-optimize.txt, add the following in the optimizations code line:

!code/allocation/variable

Your optimizations line should look like this:

-optimizations *other optimizations*,!code/allocation/variable

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 = 'eyJhbGciOiJSUzI1NiIsImtpZCI6IiIsInR5cCI6IkpXVCJ9.eyJkYXRhY2VudGVyIjoidXMiLCJrZXkiOiI0ZTQzN2Y4OTFiOTM4YTY0MWVmYzA0YTlhZmE0Yzc5MTI0OWY5MjY0OTExODQzMTQzNDFhMGUxNGYwMTQ1ODViMjFkMzk1NzJkMGJhZTNlZDQyZjQ2NmFiMmViY2YxMWExNDQyMjAxMDc0NWY2NmZiZTYxYjhlMDJkOTE3MDM5Nzk5NmY3MjA0ZmNhMzBkZDc5ZTVmZjM0OWVlNjAxZDY0ODMyYjU4ZDU3MDBjNDUwOGQwNDk0NmNkMTIwZTIwM2MxMjcxNmRkZTcwMTQ3YTQ4NGM4YThmMDNjNjVlZjIzMC5iMzlmN2U0NGIxOWYwOWNhYjI0N2EzZTkxMDJmZmYxOC44NzEwNDAyYWIzM2FkMGEyOGY3ZDk1YTViZmVhOTkyY2JmZjFkOTYyZGNhOTkxMzU1MDdkYmZjYzUxMmE3ZmQ0In0.fliEaAy1joOyxOidzjv58HBfbTmta_9Q7JwW2WeFyVOeW7BhrvQPwzJ7VQya7n92JOf9eqnOk0wLyZq_jIkW5oiPAX_zw-4geBQcDol1iUIvIIh4tV3z--MXn62ST8CIlaApysqx1x6luPvYzXSMLvo_By2fqBPVAcL4blvVs54';

    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.

Add the following <activity> to the manifest in the <application> tag:

<activity android:name="sdk.pendo.io.activities.PendoGateActivity" android:launchMode="singleInstance" android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW"/>
        <category android:name="android.intent.category.DEFAULT"/>
        <category android:name="android.intent.category.BROWSABLE"/>
        <data android:scheme="pendo-f8b1ec53"/>
    </intent-filter>
</activity>

Step 4: Verify installation

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

Pendo 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 of your applications. 

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.

To start a session, the API updates the current visitor ID and data associated with it (Account ID, Visitor Data and Account data). Commonly used when user is already logged in.

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 the way the Pendo SDK identifies pages in Android apps. Note: 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 in order to now 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.