Skip to content

Latest commit

 

History

History
184 lines (136 loc) · 7.16 KB

rn-android.md

File metadata and controls

184 lines (136 loc) · 7.16 KB
Raw

React Native Android using React Navigation

Note

Expo SDK 41-49 using React Navigation 5+ is supported. See dedicated Expo integration instructions.

Important

We support a codeless solution for React Native 0.6-0.72 using react-navigation 5+.

Step 1. Install the Pendo SDK

  1. In the root folder of your project, add Pendo using one of your package managers:

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

#example with yarn
yarn add rn-pendo-sdk

  2. In the application android/build.gradle file.

  • Add the Pendo Repository to the repositories section under the allprojects section

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

  • Minimum and compile SDK versions
    If applicable, set your app to be compiled with compileSdkVersion 33 or higher and minSdkVersion 21 or higher:

    android {
    minSdkVersion 21
    compileSdkVersion 33
}

  1. In the application AndroidManifest.xml file:
    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"/>

  2. Modify Javascript minification

    When bundling for production, React Native minifies class and function names to reduce the size of the bundle. This means there is no access to the original component names that are used for the codeless solution.

    In the application metro.config.js, 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
        }
    }
  }
}

  3. Using ProGuard

    If you are using ProGuard(D8/DX only) to perform compile-time code optimization, and have {Android SDK Location}/tools/proguard/proguard-android-optimize.txt, add !code/allocation/variable to the -optimizations line in your app/proguard-rules.pro file. The optimizations line should look like this:
    -optimizations *other optimizations*,!code/allocation/variable

Step 2. Pendo SDK integration

Note

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

  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};
    const pendoKey = 'YOUR_API_KEY_HERE';
    //note the following API will only setup initial configuration, to start collect analytics use startSession
    PendoSDK.setup(pendoKey, navigationOptions);
}   
initPendo();

  2. Initialize Pendo where your visitor is being identified (e.g. 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);

  3. In the file where the NavigationContainer is created.

    Import WithPendoReactNavigation:

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

    Wrap NavigationContainer with WithPendoReactNavigation HOC:

     const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer);

    replace NavigationContainer tag with PendoNavigationContainer tag:

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

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

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 3. Mobile device connectivity for tagging and testing

Note

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

This step enables page tagging and guide testing capabilities.

Add the following activity to the application AndroidManifest.xml 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="YOUR_SCHEME_ID_HERE"/>
    </intent-filter>
</activity>

Step 4. Verify installation

  1. Test using Android Studio:
    Run the app while attached to the Android Studio.
    Review the Android Studio logcat and look for the following message:
    Pendo SDK was successfully integrated and connected to the server.
  2. In the Pendo UI, go to Settings>Subscription Settings.
  3. Select the Applications tab and then your application.
  4. Select the Install Settings tab and follow the instructions under Verify Your Installation to ensure you have successfully integrated the Pendo SDK.
  5. Confirm that you can see your app as Integrated under subscription settings.

Developer documentation

  • API documentation available here.
  • Sample app with Pendo SDK integrated available here.

Troubleshooting