🚧 NOTE: React Native session replay is considered
beta
and is free while in beta. We are keen to gather as much feedback as possible so if you try this out please let us know. You can send feedback via the in-app support panel or one of our other support options.
Installation
Install and configure PostHog as you normally would. Ensure you've enabled session recordings in your project settings and then add enableSessionReplay: true
to your PostHog configuration alongside any of your other configuration options.
Requires PostHog React Native SDK version >= 3.2.0, and it's recommended to always use the latest version.
Install the session replay plugin.
yarn add posthog-react-native-session-replay# or npmnpm i -s posthog-react-native-session-replay
export const posthog = new PostHog('apiKey',{// Enable session recording. Requires enabling in your project settings as well.// Default is false.enableSessionReplay: true,sessionReplayConfig: {// Whether text inputs are masked. Default is true.// Password inputs are always masked regardlessmaskAllTextInputs: true,// Whether images are masked. Default is true.maskAllImages: true,// Capture logs automatically. Default is true.// Android only (Native Logcat only)captureLog: true,// Whether network requests are captured in recordings. Default is true// Only metric-like data like speed, size, and response code are captured.// No data is captured from the request or response body.// iOS onlycaptureNetworkTelemetry: true,// Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 500msandroidDebouncerDelayMs: 500,// Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 1000msiOSdebouncerDelayMs: 1000,},},);
Or using the PostHogProvider
:
<PostHogProviderapiKey="apiKey"options={{enableSessionReplay: true,...}}>
Masking and redacting
Your replays may contain sensitive information. For example, if you're building a banking app you may not want to capture how much money a user has in their account.
To replace any type of React.Component
with a redacted version in the replay, set the accessibilityLabel to ph-no-capture
:
<Text accessibilityLabel="ph-no-capture">Hello PostHog 👋</Text>
Expo
Mobile Session Replay for Expo works normally, but prefer the expo
tools for installing and running your project.
Install the session replay plugin.
npx expo install posthog-react-native-session-replay
Expo Go isn't supported since it uses Native plugins, please use development build.
# Run Android development buildnpx expo run:android --no-build-cache --device# Run iOS development buildnpx expo run:ios --no-build-cache --device
Limitations
- On Android, requires API >= 26.
- On iOS, minimum deployment target is iOS13
- WebView is not supported. A placeholder will be shown.
- Keyboard is not supported. A placeholder will be shown.
- Wireframe mode isn't supported, only screenshot mode.
- Expo Go isn't supported since it uses Native plugins, please use development build.
Troubleshooting
- Run a clean build if you experience issues such as
The package 'posthog-react-native-session-replay' doesn't seem to be linked
. - Update your iOS Pods.