Skip to content

Latest commit

 

History

History
157 lines (125 loc) · 6.03 KB

expo_rn-android.md

File metadata and controls

157 lines (125 loc) · 6.03 KB
Raw

Expo Android using React Navigation

Important

  • Expo SDK 41-51 using React Navigation 5+ 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:

  • Android Gradle Plugin 7.2 or higher
  • Kotlin version 1.9.0 or higher
  • JAVA version 11 or higher
  • minSdkVersion 21 or higher
  • compileSDKVersion 33 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";

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

initPendo();

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>

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

If some of your own custom react native components are not taggable because we can't detect it in the regular detection flow, you can try to add it manually to the scanning flow. To do this, add a prop nativeID to your component. For instance:

<TouchableOpacity onPress={open} nativeID={"myProp"}>      
</TouchableOpacity>

and change your integration to the following:

const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer,{nativeIDs:["myProp"]});

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

Developer documentation

  • API documentation available here.

Troubleshooting