Pendo Mobile & React Native

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 Native Navigation" library version 6.x
• React Native applications using the "React Navigation" library version 5.x 

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

Install instructions 

1. Create iOS and Android apps by choosing 'React Native' app type.
2. Note that in Pendo, two applications will be created under the 'Subscription Setting' page (one for iOS and one for Android).
   
3. Click on each 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. Click Continue to installation.
   5. Follow the installation instructions provided.

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? 

startSession:  use this API to update the current visitor ID and data associated with it (Account ID, Visitor Data and Account data). Mainly used on "Login" activity

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

startSession: use this API to end the current visitor's session, and start a new session without associating it to a visitor ID. Mainly used on "Logout" activity

PendoSDK.startSession(null values)

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