diff --git a/docs/onboarding/error-tracking/react-native.tsx b/docs/onboarding/error-tracking/react-native.tsx index 6951b1ee20ba..cbce3714adcc 100644 --- a/docs/onboarding/error-tracking/react-native.tsx +++ b/docs/onboarding/error-tracking/react-native.tsx @@ -64,7 +64,7 @@ export const getReactNativeSteps = (ctx: OnboardingComponentsContext): StepDefin {dedent` \`nativeCrashes\` captures native iOS and Android crashes that the JavaScript layer can't see. Beyond the config above, it needs: - 1. The optional native plugin installed — \`npx expo install @posthog/react-native-plugin@2\` (Expo) or \`npm i @posthog/react-native-plugin@2\` (bare React Native). If it's missing, native capture is a no-op and your JS-level autocapture is unaffected. + 1. The optional native plugin installed — \`npx expo install @posthog/react-native-plugin@3\` (Expo) or \`npm i @posthog/react-native-plugin@3\` (bare React Native). Plugin 3.0 requires React Native 0.75+, iOS 15+, and Xcode 26+. If it's missing, native capture is a no-op and your JS-level autocapture is unaffected. 2. Your project's **Enable exception autocapture** setting enabled in [error tracking settings](https://app.posthog.com/settings/project-error-tracking#exception-autocapture) — the same server-side setting that gates JavaScript autocapture. 3. Native debug symbols uploaded at build time, so crash stack traces are readable. See [native crash symbolication](https://posthog.com/docs/error-tracking/upload-source-maps/react-native#native-crash-symbolication). `} diff --git a/docs/onboarding/session-replay/kmp.tsx b/docs/onboarding/session-replay/kmp.tsx index dd508079e24e..b1f5c5cbc1ee 100644 --- a/docs/onboarding/session-replay/kmp.tsx +++ b/docs/onboarding/session-replay/kmp.tsx @@ -34,12 +34,12 @@ export const getKMPSteps = (ctx: OnboardingComponentsContext): StepDefinition[] `0.+` resolves to the latest `0.x` release. The SDK is a pre-release, so the API can change between minor versions – pin an exact version from [Maven Central](https://central.sonatype.com/artifact/com.posthog/posthog-kmp) if you would rather - upgrade deliberately. The setup below requires `0.8.0` or higher. + upgrade deliberately. The setup below requires `0.11.0` or higher. Session replay is captured on Android, iOS and the web. It is ignored on the JVM (desktop) - target. + and macOS targets. @@ -97,16 +97,14 @@ export const getKMPSteps = (ctx: OnboardingComponentsContext): StepDefinition[] // Capture console and system logs (iOS and web). Default is false. captureLogs = false, - // Whether replays are created using high quality screenshots instead of - // wireframes (experimental, Android and iOS). Default is false. - // Screenshots may contain sensitive information, so use with caution. - screenshot = false, - // Capture Android logcat output (Android only). Default is true. captureLogcat = true, - // Touch event debounce delay in milliseconds (Android only). Default is 1000. - debouncerDelayMs = 1000L, + // Minimum delay in milliseconds between replay snapshots (Android and iOS). Default is 1000. + throttleDelayMs = 1000L, + + // Experimental: verify screenshot mask alignment before keeping a capture (Android only). Default is false. + verifyScreenshotMaskAlignment = false, ), ) `, diff --git a/docs/onboarding/session-replay/react-native.tsx b/docs/onboarding/session-replay/react-native.tsx index e9ac28578164..adece72745af 100644 --- a/docs/onboarding/session-replay/react-native.tsx +++ b/docs/onboarding/session-replay/react-native.tsx @@ -21,14 +21,14 @@ export const getReactNativeSteps = (ctx: OnboardingComponentsContext): StepDefin language: 'bash', file: 'Expo', code: dedent` - npx expo install posthog-react-native@4 expo-file-system expo-application expo-device expo-localization @posthog/react-native-plugin@2 + npx expo install posthog-react-native@4 expo-file-system expo-application expo-device expo-localization @posthog/react-native-plugin@3 `, }, { language: 'bash', file: 'yarn', code: dedent` - yarn add posthog-react-native@4 @react-native-async-storage/async-storage react-native-device-info react-native-localize @posthog/react-native-plugin@2 + yarn add posthog-react-native@4 @react-native-async-storage/async-storage react-native-device-info react-native-localize @posthog/react-native-plugin@3 # for iOS cd ios && pod install @@ -38,7 +38,7 @@ export const getReactNativeSteps = (ctx: OnboardingComponentsContext): StepDefin language: 'bash', file: 'npm', code: dedent` - npm i -s posthog-react-native@4 @react-native-async-storage/async-storage react-native-device-info react-native-localize @posthog/react-native-plugin@2 + npm i -s posthog-react-native@4 @react-native-async-storage/async-storage react-native-device-info react-native-localize @posthog/react-native-plugin@3 # for iOS cd ios && pod install @@ -49,7 +49,7 @@ export const getReactNativeSteps = (ctx: OnboardingComponentsContext): StepDefin {dedent` - \`@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](https://posthog.com/docs/error-tracking/installation/react-native). If you're on a \`posthog-react-native\` version earlier than 4.47.0, install \`posthog-react-native-session-replay\` instead. + \`@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](https://posthog.com/docs/error-tracking/installation/react-native). If you're on a \`posthog-react-native\` version earlier than 4.47.0, install \`posthog-react-native-session-replay\` instead. Don't install it alongside \`@posthog/react-native-plugin\` 3.0: its pod still installs \`posthog-ios\` 3.x, and the Xcode build fails with \`Redefinition of module 'PostHog'\`. `} @@ -170,8 +170,10 @@ export const getReactNativeSteps = (ctx: OnboardingComponentsContext): StepDefin - 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. + Requires React Native 0.75+, Android API 26+, iOS 15+, and Xcode 26+. On React Native 0.75 + and 0.76, including Expo SDK 52, Android builds also need Kotlin 2.0 or later. Expo Go is + not supported - use a development build. Session replay is only supported on Android and iOS + platforms. diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx index 45ffdf34a991..73891c9f62a1 100644 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx +++ b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/index.tsx @@ -14,7 +14,6 @@ export * from './nodejs' export * from './nuxt' export * from './php' export * from './python' -export * from './react-native' export * from './remix' export * from './ruby' export * from './svelte' diff --git a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx b/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx deleted file mode 100644 index f71cd0e24a8d..000000000000 --- a/frontend/src/scenes/onboarding/sdks/sdk-install-instructions/react-native.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import { useValues } from 'kea' - -import { Link } from '@posthog/lemon-ui' - -import { CodeSnippet, Language } from 'lib/components/CodeSnippet' -import { apiHostOrigin } from 'lib/utils/apiHost' -import SetupWizardBanner from 'scenes/onboarding/shared/SetupWizardBanner' -import { teamLogic } from 'scenes/teamLogic' - -export interface RNSetupProps { - hideWizard?: boolean - includeReplay?: boolean - includeSurveys?: boolean -} - -function RNInstallSnippet({ includeReplay, includeSurveys }: RNSetupProps): JSX.Element { - return ( - - {`# Expo apps -npx expo install posthog-react-native expo-file-system expo-application expo-device expo-localization${ - includeReplay ? ` posthog-react-native-session-replay` : '' - }${includeSurveys ? ` react-native-safe-area-context react-native-svg` : ''} - -# Standard React Native apps -yarn add posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize${ - includeReplay ? ` posthog-react-native-session-replay` : '' - }${includeSurveys ? ` react-native-safe-area-context react-native-svg` : ''} -# or -npm i -s posthog-react-native @react-native-async-storage/async-storage react-native-device-info react-native-localize${ - includeReplay ? ` posthog-react-native-session-replay` : '' - }${includeSurveys ? ` react-native-safe-area-context react-native-svg` : ''} - -# for iOS -cd ios -pod install`} - - ) -} - -function RNSetupSnippet({ includeReplay }: RNSetupProps): JSX.Element { - const { currentTeam } = useValues(teamLogic) - const url = apiHostOrigin() - - return ( - <> -

- PostHog is most easily used via the PostHogProvider component but if you need to - instantiate it directly,{' '} - - check out the docs - {' '} - which explain how to do this correctly. -

- - {`// App.(js|ts) -import { PostHogProvider } from 'posthog-react-native' -... - -export function MyApp() { - return ( - - - - ) -}`} - - - ) -} - -function RNSetupSurveysProvider(): JSX.Element { - return ( - <> -

- Add PostHogSurveyProvider to your app anywhere inside PostHogProvider. This component fetches surveys. - It also acts as the root for where popover surveys are rendered. -

- - {` - {children} -`} - -

- If you're not using the PostHogProvider, add PostHogSurveyProvider to your app anywhere inside your app - root component. -

- - {` - {children} -`} - -

You can also pass your client instance to the PostHogSurveyProvider.

- {`{children}`} - - ) -} - -export function SDKInstallRNInstructions(props: RNSetupProps): JSX.Element { - return ( - <> - -

Install

- -

Configure

- - {props.includeSurveys && ( - <> -

Setup SurveysProvider

- - - )} - - ) -}