Bug: React native session replay includes `View` and `WebView` when `ph-no-capture` is set

[milomord]

Bug Description

Bug description

We recently enabled the react-native session replay feature, which seems really great as is! However, we would like to set ph-no-capture on a WebView, or its surrounding View. For us it seems like accessibilityLabel="ph-no-capture" works for the Text component, but not View or WebView. Is it possible right now to redact an entire View component?

How to reproduce

1. Enabled react-native session replays as described here
2. Add accessibilityLabel="ph-no-capture" to View component somewhere in react native app
3. Observe that View is visible in uploaded recording on posthog dashboard

Additional context

This is observed for us on iOS, I have not yet tested if it works for Android as that's not important for our use case right this moment.

Debug info

- [x] PostHog Cloud, Debug information: [please copy/paste from https://us.posthog.com/settings/project-details#variables or https://eu.posthog.com/settings/project-details#variables]
- [ ] PostHog Hobby self-hosted with `docker compose`, version/commit: [please provide]
- [ ] PostHog self-hosted with Kubernetes (deprecated, see [`Sunsetting Kubernetes support`](https://posthog.com/blog/sunsetting-helm-support-posthog)), version/commit: [please provide]

Session: https://us.posthog.com/project/sTMFPsFhdP1Ssg/replay/01922ee6-bf4a-72e8-b81c-a2a1de64b87e?t=2662
Admin: http://go/adminOrgUS/0190daf5-d362-0000-ec89-1a9bbda9c611 (project ID 80816)
Sentry: http://go/sentryUS/80816

[ioannisj]

Hey @milomord,

Could you share a snippet of your react-native view if possible, or a MRE, so we can troubleshoot this?

Btw, just transfered the ticket to this repo

[marandaneto]

@milomord any more context here?

[milomord]

Sure, I can provide a simplified example. I am able to reproduce with this snippet for instance in our Expo application:

import { View, Text } from 'react-native'

function Homepage() {
  return (
    <View style={{ flex: 1 }}>
      <Text style={{ fontSize: 32 }}>Example text</Text>

      <View style={{ flex: 1, gap: 16 }} accessibilityLabel="ph-no-capture">
        <Text>Some</Text>
        <Text>Sensitive</Text>
        <Text>Content</Text>
      </View>
    </View>
  )
}

export default HomePage

I just confirmed that when I render this component, all views are present in the screen recording. In case it is helpful, our current version of posthog-react-native is 3.3.6 and our current posthog-react-native-session-replay version is 0.1.5

[marandaneto]

@milomord I managed to reproduce this on iOS. The issue is that View gets converted to RCTView, but Text also gets converted to RCTView depending on the styles instead of RCTTextView which is strange. Usually, accessibilityLabel gets promoted to the RCTRootContentView view parent as well, so the whole screen is redacted, which makes it much harder.

@milomord for WebView, are you using https://www.npmjs.com/package/react-native-webview? can you share a code snippet?

[marandaneto]

@milomord I think https://github.com/PostHog/posthog-ios/pull/230 should solve that

[marandaneto]

once the v3.14.1 is published, you can upgrade your Pods and test it, thanks.