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:
- Deployment target of
iOS 11
or higher - Swift Compatibility
5.7
or higher - Xcode
14
or higher
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
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.
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
}
}
}
}
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"]});
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).
- In the Pendo UI, go to Settings>Subscription Settings.
- Select the Applications tab and then your application.
- Select the Install Settings tab and follow the instructions under Verify Your Installation to ensure you have successfully integrated the Pendo SDK.
- Confirm that you can see your app as Integrated under subscription settings.
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.
- API documentation available here.
- For technical issues, please review open issues or submit a new issue.
- Release notes can be found here.
- For additional documentation, visit our Help Center Mobile Section.