React Native Session Replay installation

Contents

  1. Install the packages

    Required

    Install the PostHog React Native library, its dependencies, and the session replay plugin:

    npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization @posthog/react-native-plugin
    Plugin renamed in 4.47.0+

    @posthog/react-native-plugin (>= 2.0.1) is the renamed posthog-react-native-session-replay plugin — it was renamed in posthog-react-native 4.47.0+ and now also powers native error tracking. If you're on a posthog-react-native version earlier than 4.47.0, install posthog-react-native-session-replay instead.

    SDK version

    Session replay requires PostHog React Native SDK version 3.2.0 or higher. We recommend always using the latest version.

  2. Enable session recordings in project settings

    Required

    Go to your PostHog Project Settings and enable Record user sessions. Session recordings will not work without this setting enabled.

  3. Configure PostHog with session replay

    Required

    Add enableSessionReplay: true to your PostHog configuration. Here are all the available options:

    App.tsx
    import { PostHogProvider } from 'posthog-react-native'
    export function MyApp() {
    return (
    <PostHogProvider
    apiKey="<ph_project_token>"
    options={{
    host: "https://us.i.posthog.com",
    // 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 regardless
    maskAllTextInputs: true,
    // Whether images are masked. Default is true.
    maskAllImages: true,
    // Capture logs automatically. Default is true.
    // Android only (Native Logcat only)
    //
    // Support for remote configuration
    // in the [session replay settings](https://app.posthog.com/settings/project-replay#replay-log-capture)
    // requires SDK version 4.35.0 or higher.
    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 only
    //
    // Support for remote configuration
    // in the [session replay settings](https://app.posthog.com/settings/project-replay#replay-network)
    // requires SDK version 4.35.0 or higher.
    captureNetworkTelemetry: true,
    // Sample rate for session recordings. A value between 0.0 and 1.0.
    // 1.0 means 100% of sessions will be recorded. 0.5 means 50%, and so on.
    // Local config has precedence over remote config when both are set.
    // Default is undefined (all sessions are recorded).
    sampleRate: undefined,
    // Throttling delay used to reduce the number of snapshots captured
    // and reduce performance impact. Default is 1000ms
    throttleDelayMs: 1000,
    },
    }}
    >
    <RestOfApp />
    </PostHogProvider>
    )
    }

    For more configuration options, see the React Native session replay docs.

    Requirements

    Requires Android API 26+ and iOS 13+. Expo Go is not supported - use a development build. Session replay is only supported on Android and iOS platforms.

  4. Watch session recordings

    Recommended

    Visit your site or app and interact with it for at least 10 seconds to generate a recording. Navigate between pages, click buttons, and fill out forms to capture meaningful interactions.

    Watch your first recording →

  5. Next steps

    Recommended

    Now that you're recording sessions, continue with the resources below to learn what else Session Replay enables within the PostHog platform.

    ResourceDescription
    Watching recordingsHow to find and watch session recordings
    Privacy controlsHow to mask sensitive data in recordings
    Network recordingHow to capture network requests in recordings
    Console log recordingHow to capture console logs in recordings
    More tutorialsOther real-world examples and use cases

Configure Android screenshot capture

Lowering screenshot resolution and using the smaller RGB_565 pixel format reduce capture time and memory use on Android. This helps keep your app responsive while recording.

For the best balance of performance and image quality, we recommend a scale of 0.5, the RGB_565 color mode, and compression quality 30.

Use these experimental sessionReplayConfig options to control Android screenshot resolution, compression, and bitmap memory use independently. They require @posthog/react-native-plugin and don't affect iOS recordings. Session Replay must still be enabled with enableSessionReplay: true and in your project settings.

  • screenshotScale (Android default: 1.0) – Multiplies the physical width and height of screenshots. Values are clamped to 0.1–1.0. A scale of 0.5 captures half the width and height, or one quarter of the pixels.

  • screenshotCompressionQuality (Android default: 30) – WebP compression quality, as an integer clamped to 0–100. Higher values generally retain more detail and produce larger payloads. This doesn't change screenshot resolution.

  • screenshotColorMode (Android default: ARGB_8888) – Android bitmap pixel format. ARGB_8888 uses four bytes per pixel and preserves transparency and color precision before compression. RGB_565 uses two bytes per pixel, with reduced color precision and no transparency.

For example, capture Android screenshots at half the width and height while retaining the default color mode:

TSX
import { PostHogProvider } from "posthog-react-native"
export function MyApp() {
return (
<PostHogProvider
apiKey="<ph_project_token>"
options={{
host: "https://us.i.posthog.com",
enableSessionReplay: true,
sessionReplayConfig: {
screenshotScale: 0.5,
screenshotCompressionQuality: 30,
},
}}
>
<RestOfApp />
</PostHogProvider>
)
}

Keep these trade-offs in mind:

  • Resolution – Lower scales reduce image detail. The Android SDK rounds each scaled dimension up to at least one pixel. Replay viewport dimensions and mask positions remain aligned with the original screen.
  • Color and transparency – With RGB_565, transparent window regions appear black. If a device rejects this format, the Android SDK uses ARGB_8888 for later captures.
  • Compression – WebP compression is lossy, including at quality 100, except on Android 10 (API 29), where quality 100 uses lossless compression.

To capture fewer snapshots instead, increase sessionReplayConfig.throttleDelayMs. Screenshot resolution, compression quality, and color mode don't change the capture interval. Check text readability and privacy masking in your app before deploying these settings.

iOS dependency resolution

The native plugin supports three additive iOS dependency paths:

  • CocoaPods for the plugin and posthog-ios. This remains the default path.
  • CocoaPods for the plugin, with posthog-ios resolved through Swift Package Manager.
  • React Native's experimental full Swift Package Manager integration, with no CocoaPods. PostHog verifies an iOS-only React Native 0.87.1 app with React Native Community CLI 20.2.0. This path requires @posthog/react-native-plugin 2.4.0 or later, Xcode 16 or later, and an iOS 15.1 or later app deployment target.

See iOS dependency paths for the React Native native plugin for the requirements and setup steps. This verification does not cover Expo or other React Native versions. Use CocoaPods or the hybrid path unless you validate full Swift Package Manager for your configuration.

Troubleshooting

  • If session replay looks janky or drops frames on high-refresh-rate (120Hz ProMotion) iPhones, turn on the experimental sessionReplayConfig.screenshotModeBackgroundCapture option (iOS only, requires posthog-react-native 4.45.0 or higher) to move screenshot capture off the main thread. This can trigger Xcode's Main Thread Checker warnings, so disable it in your scheme's Run diagnostics if that happens.

Still have questions?

Was this page useful?