React Native public developer API documentation

Important

The setup API must be called before the startSession, WithPendoReactNavigation and WithPendoModal APIs.
All other APIs must be called after both the setup and startSession APIs, otherwise they will be ignored.
The setDebugMode API is the exception to that rule and may be called anywhere in the code.

Tip

Checkout out these sample apps integrated with Pendo:

RN sample app
RNN sample app

Pendo React Components

`WithPendoReactNavigation`

WithPendoReactNavigation(NavigationContainer)

Only for apps that use React Navigation library. This function wraps the navigation container to track the navigation state.

Details - Click to expand or collapse

Class: React.FunctionComponent

Param	Type	Description
navigationContainer	NavigationContainer	The app NavigationContainer, required by Pendo to track the app navigation states

Example:

// In the file where the NavigationContainer is created

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

const PendoNavigationContainer = WithPendoReactNavigation(NavigationContainer);    

// replace the NavigationContainer tag with PendoNavigationContainer tag

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

`WithPendoExpoRouter`

WithPendoExpoRouter(RootLayout)

Only for apps that use Expo Router library. This function wraps the root layout container to track the navigation state.

Details - Click to expand or collapse

Class: React.FunctionComponent

Param	Type	Description
RootLayout	ReactNode	The app's root layout containing the expo router components

Example:

In the file where your Root Layout is created import WithPendoExpoRouter, usePathname and useGlobalSearchParams:

import {WithPendoExpoRouter} from 'rn-pendo-sdk'
import {useGlobalSearchParams, usePathname} from 'expo-router';

Add the following code to the method building your Root Layout component. Make sure to pass props to your Root Layout method.

function RootLayout(props: any): ReactNode {
    ...
    let pathname = usePathname();
    const params = useGlobalSearchParams();
    
    useEffect(() => {
        props.onExpoRouterStateChange(pathname, params);
    }, [pathname, params, props]);
    ...
}

Wrap your Root Layout component with WithPendoExpoRouter:

export default WithPendoExpoRouter(RootLayout);

`WithPendoModal`

WithPendoModal(ModalComponent)

Only for apps that use React Navigation library. This function wraps the modal component so the SDK can track the modal.

Details - Click to expand or collapse

Class: React.FunctionComponent

Param	Type	Description
modalComponent	React.Modal	The ModalComponent required by Pendo to track the modal

Example:

// In the file where the Modal is created

import {WithPendoModal} from 'rn-pendo-sdk';    

const PendoModal = WithPendoModal(Modal);    

// replace the Modal tag with PendoModal tag

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

PendoSDK APIs

`setup`

static setup(appKey: string, navigationOptions: NavigationOptions, pendoOptions?: PendoOptions): void

Establishes a connection with Pendo’s server. Call this API in your application’s main file (App.js/.ts/.tsx). The setup method can only be called once during the application lifecycle. Calling this API is required before tracking sessions or invoking session-related APIs.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
appKey	string	The App Key is listed in your Pendo Subscription Settings in App Details
navigationOptions	NavigationOptions	Convey the navigation library used by your app
pendoOptions	PendoOptions	PendoOptions should be `null` unless instructed otherwise by Pendo Support

Example:

// example using React Navigation 
const navigationOptions = {library: NavigationLibraryType.ReactNavigation}; 

PendoSDK.setup('your.app.key', navigationOptions);

`startSession`

static startSession(visitorId?: string, accountId?: string, visitorData?: object, accountData?: object): void

Starts a mobile session with the provided visitor and account information. If a session is already in progress, the current session will terminate and a new session will begin. The termination of the app will also terminate the session.

To generate an anonymous visitor, pass 'nil' as the visitorId. Visitor data and Account data are optional.

No action will be taken if the visitor and account IDs do not change when calling the startSession API during an ongoing session.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
visitorId	string	The session visitor ID. For an anonymous visitor set to `null`
accountId	string	The session account ID
visitorData	object	Additional visitor metadata
accountData	object	Additional account metadata

Example:

const visitorData = {'age': '21', 'country': 'USA'};
const accountData = {'Tier': '1', 'Size': 'Enterprise'};

PendoSDK.startSession('John Doe', 'ACME', visitorData, accountData);

`setVisitorData`

static setVisitorData(visitorData: object): void

Updates the visitor metadata of the ongoing session.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
visitorData	object	The visitor metadata to be updated

Example:

const visitorData = {'age': '25', 'country': 'UK', 'birthday': '01-01-1990'};
PendoSDK.setVisitorData(visitorData);

`setAccountData`

static setAccountData(accountData: object): void

Updates the account metadata of the ongoing session.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
accountData	object	The account metadata to be updated

Example:

const accountData = {'Tier': '2', 'size': 'Mid-Market', 'signing-date': '01-01-2020'};
PendoSDK.setAccountData(accountData);

`endSession`

static endSession(): void

Ends the active session and stops collecting analytics or showing guides to the user. A new session can be started by calling the startSession API.

This API is commonly used when the user logs out of your application.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Example:

PendoSDK.endSession();

`track`

static track(name: string, params?: object): void

Sends a track event with the specified properties.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
event	string	The track event name
properties	object	Additional metadata to be sent as part of the track event

Example:

// optional additional properties
const additionalProperties = {'Theme': 'Dark Mode'};

PendoSDK.track('App Opened', additionalProperties);

`screenContentChanged`

static screenContentChanged(): void

This method manually triggers a rescan of the current screen layout hierarchy by the SDK. This API should be called on rare occasions where the delayed appearance of some elements on the screen is not recognized by the SDK.

If multiple page captures were used to tag all features in the page (where some features exist only in some state of the page), verify that all of the page captures of the screen are configured with identical page rules and page identifiers for correct analytics and guide behavior.

Details - Click to expand or collapse

Class: Pendo
Kind: static method
Returns: void

Example:

PendoSDK.screenContentChanged();

`sendClickAnalytic`

static sendClickAnalytic(nativeID: string): void

The API manually sends an RAClick analytic for the view during the ongoing session. Use the API only when Pendo does not automatically recognize a clickable feature by passing in the nativeID of the view. Call the API in your code as part of the action implementation (ex. onTouchListener, onClickListener, etc).

This API’s logic is only relevant for handling issues encountered in your Android app (similar edge cases are not known to us in iOS). Calling this API will not resolve issues in your iOS app.

Details - Click to expand or collapse

Class: Pendo
Kind: static method
Returns: void

Param	Type	Description
nativeID	string	The nativeID of the view to be used by the manual triggered RAClick analytic event

Example:

PendoSDK.sendClickAnalytic(myButton.nativeID);

`pauseGuides`

static pauseGuides(dismissGuides: boolean): void

Pauses any guides from appearing during an active session. If the dismissGuides value is set to true, then any visible guide will be dismissed. Calling this API affects the current session. Starting a new session reverts this logic, enabling guides to be presented.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
dismissGuides	boolean	Determines whether the displayed guide, if one is visible, is dismissed when pausing the display of the further guides

Example:

PendoSDK.pauseGuides(false);

`resumeGuides`

static resumeGuides(): void

Resumes displaying guides during the ongoing session. This API reverses the logic of the pauseGuides API.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Example:

PendoSDK.resumeGuides();

`dismissVisibleGuides`

static dismissVisibleGuides(): void

Dismisses any visible guide.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Example:

PendoSDK.dismissVisibleGuides();

`getDeviceId`

static async getDeviceId(): Promise<string | null>

Returns the device's unique Pendo-generated ID.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: Promise < string | null >

Example:

const deviceId = PendoSDK.getDeviceId();

deviceId.then((val) => {
    // success code
}).catch((err) => {
    // error code
});

`getVisitorId`

static async getVisitorId(): Promise<string | null>

Returns the ID of the visitor in the active session.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: Promise < string | null >

Example:

const visitorId = PendoSDK.getVisitorId();

visitorId.then((val) => {
    // success code
}).catch((err) => {
    // error code
});

`getAccountId`

static async getAccountId(): Promise<string | null>

Returns the ID of the account in the active session.

Details

Class: PendoSDK
Kind: static method
Returns: Promise < string | null >

Example:

const accountId = PendoSDK.getAccountId();

accountId.then((val) => {
    // success code
}).catch((err) => {
    // error code
});

`setDebugMode`

static setDebugMode(isDebugEnabled: boolean): void

Enable/disable debug logs from Pendo SDK. To debug the Pendo SDK we recommend calling this API before calling the setup API.

Debug logs are turned off by default. Releasing your production app with the debug logs enabled is not recommended and may have performance repercussions on your app.

Details - Click to expand or collapse

Class: PendoSDK
Kind: static method
Returns: void

Param	Type	Description
isDebugEnabled	boolean	Set to `true` to enable debug logs, `false` to disable

Example:

PendoSDK.setDebugMode(true);

// example using React Navigation 
const navigationOptions = {library: NavigationLibraryType.ReactNavigation}; 

PendoSDK.setup('your.app.key', navigationOptions);

Navigation

`NavigationOptions`

NavigationOptions(library: NavigationLibraryType, navigation?: any)

A NavigationOptions instance is required to call the setup API and establish a connection to Pendo’s server.

Details - Click to expand or collapse

Param	Type	Description
library	NavigationLibraryType	The navigation library used by the app
navigation	any?	The navigation property is required if and only if the React Native Navigation library is used for navigation.

Example using React Navigation:

const navigationOptions = {library: NavigationLibraryType.ReactNavigation}; 
PendoSDK.setup('your.app.key', navigationOptions);

Example using React Native Navigation:

import { Navigation } from "react-native-navigation";

const navigationOptions = { library: NavigationLibraryType.ReactNativeNavigation, navigation: Navigation };
PendoSDK.setup('your.app.key', navigationOptions);

`NavigationLibraryType`

enum NavigationLibraryType

The navigation library used in you app. The available enum options include:

ReactNativeNavigation

ReactNavigation

Other

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rn-apis.md

rn-apis.md

React Native public developer API documentation

Pendo React Components

PendoSDK APIs

Navigation

Pendo React Components

`WithPendoReactNavigation`

`WithPendoExpoRouter`

`WithPendoModal`

PendoSDK APIs

`setup`

`startSession`

`setVisitorData`

`setAccountData`

`endSession`

`track`

`screenContentChanged`

`sendClickAnalytic`

`pauseGuides`

`resumeGuides`

`dismissVisibleGuides`

`getDeviceId`

`getVisitorId`

`getAccountId`

`setDebugMode`

Navigation

`NavigationOptions`

`NavigationLibraryType`

Files

rn-apis.md

Latest commit

History

rn-apis.md

File metadata and controls

React Native public developer API documentation

Pendo React Components

PendoSDK APIs

Navigation

Pendo React Components

WithPendoReactNavigation

WithPendoExpoRouter

WithPendoModal

PendoSDK APIs

setup

startSession

setVisitorData

setAccountData

endSession

track

screenContentChanged

sendClickAnalytic

pauseGuides

resumeGuides

dismissVisibleGuides

getDeviceId

getVisitorId

getAccountId

setDebugMode

Navigation

NavigationOptions

NavigationLibraryType

`WithPendoReactNavigation`

`WithPendoExpoRouter`

`WithPendoModal`

`setup`

`startSession`

`setVisitorData`

`setAccountData`

`endSession`

`track`

`screenContentChanged`

`sendClickAnalytic`

`pauseGuides`

`resumeGuides`

`dismissVisibleGuides`

`getDeviceId`

`getVisitorId`

`getAccountId`

`setDebugMode`

`NavigationOptions`

`NavigationLibraryType`