[Session Replay] Masking React Native Text and Images with manual native SDKs init

[krystofwoldrich]

Description

If you are initializing the native SDK manually before the React Native JS SDK, the React Native text and images won't be automatically masked.

Important

If you are only using the JS Sentry.init text and images are masked as expected.

Workaround

To mask React Native text and images specific RN Classes need to be added to the list of classes to be masked. This is required because RN uses custom native rendering which is not detected by the native platform primitives.

Apple

let classNames = [
    // react-native-svg components are only masked when the SDK is initialized from JS.
    // "RNSVGSvgView",
    "RCTImageView",
    "RCTTextView",
    "RCTParagraphComponentView"
]
for className in classNames {
    if let viewClass = NSClassFromString(className) {
        options.sessionReplay.maskedViewClasses.append(viewClass)
    }
}

Android

On Android only SVGs are not masked by default when using manual init.

// react-native-svg components are only masked when the SDK is initialized from JS.
// options.sessionReplay.addMaskViewClass("com.horcrux.svg.SvgView") // react-native-svg

[krystofwoldrich]

Fixed by getsentry/sentry-cocoa#5302