@datadog/mobile-react-native-session-replay 2.7.1 → 2.8.0

package/lib/typescript/components/SessionReplayView/index.d.ts

@@ -0,0 +1,28 @@
+import { HideView } from './HideView';
+import { MaskAllView } from './MaskAllView';
+import { MaskNoneView } from './MaskNoneView';
+import { PrivacyView } from './PrivacyView';
+/**
+ * A collection of preconfigured React components for controlling privacy in Datadog Session Replay.
+ *
+ * These components can be used to control how different parts of the UI appear in session recordings:
+ *
+ * - `SessionReplayView.MaskAll`: Masks all text, inputs, and images. Hides touch interactions by default.
+ *   Use for highly sensitive sections.
+ *
+ * - `SessionReplayView.MaskNone`: Displays most content as-is, except for sensitive inputs which are still masked.
+ *   Use when visibility is safe and desired.
+ *
+ * - `SessionReplayView.Hide`: Completely hides the view and its children from session replays.
+ *   Use for content that should not appear at all in recordings.
+ *
+ * - `SessionReplayView.Privacy`: A low-level configurable component for fine-tuned privacy control.
+ *   Use this if none of the presets meet your needs.
+ */
+export declare const SessionReplayView: {
+    Privacy: typeof PrivacyView;
+    MaskAll: typeof MaskAllView;
+    MaskNone: typeof MaskNoneView;
+    Hide: typeof HideView;
+};
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/SessionReplayView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/SessionReplayView/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,iBAAiB;;;;;CAK7B,CAAC"}

package/lib/typescript/index.d.ts

@@ -1,5 +1,7 @@
 import type { SessionReplayConfiguration } from './SessionReplay';
 import { SessionReplay, SessionReplayPrivacy, ImagePrivacyLevel, TouchPrivacyLevel, TextAndInputPrivacyLevel } from './SessionReplay';
+import { SessionReplayView } from './components/SessionReplayView';
 export { SessionReplay, SessionReplayPrivacy, ImagePrivacyLevel, TouchPrivacyLevel, TextAndInputPrivacyLevel };
+export { SessionReplayView };
 export type { SessionReplayConfiguration };
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EAC3B,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EACH,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EAC3B,CAAC;AAEF,YAAY,EAAE,0BAA0B,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EACH,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EAC3B,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EACH,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,iBAAiB,EACjB,wBAAwB,EAC3B,CAAC;AAEF,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,YAAY,EAAE,0BAA0B,EAAE,CAAC"}

package/lib/typescript/specs/DdPrivacyView.d.ts

@@ -0,0 +1,3 @@
+declare const NativeComponent: any;
+export default NativeComponent;
+//# sourceMappingURL=DdPrivacyView.d.ts.map

package/lib/typescript/specs/DdPrivacyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DdPrivacyView.d.ts","sourceRoot":"","sources":["../../../src/specs/DdPrivacyView.ts"],"names":[],"mappings":"AAYA,QAAA,MAAM,eAAe,KAEwB,CAAC;AAE9C,eAAe,eAAe,CAAC"}

package/lib/typescript/specs/DdPrivacyViewNativeComponent.d.ts

@@ -0,0 +1,10 @@
+import type { HostComponent, ViewProps } from 'react-native';
+interface DdPrivacyViewProps extends ViewProps {
+    textAndInputPrivacy: string;
+    imagePrivacy: string;
+    touchPrivacy: string;
+    hide: boolean;
+}
+declare const _default: HostComponent<DdPrivacyViewProps>;
+export default _default;
+//# sourceMappingURL=DdPrivacyViewNativeComponent.d.ts.map

package/lib/typescript/specs/DdPrivacyViewNativeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DdPrivacyViewNativeComponent.d.ts","sourceRoot":"","sources":["../../../src/specs/DdPrivacyViewNativeComponent.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE7D,UAAU,kBAAmB,SAAQ,SAAS;IAC1C,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;CACjB;;AAED,wBAEwC"}

package/lib/typescript/specs/DdPrivacyViewPaper.d.ts

@@ -0,0 +1,4 @@
+import type { DdPrivacyViewProps } from '../types/DdPrivacyView';
+declare const DdPrivacyView: import("react-native").HostComponent<DdPrivacyViewProps>;
+export default DdPrivacyView;
+//# sourceMappingURL=DdPrivacyViewPaper.d.ts.map

package/lib/typescript/specs/DdPrivacyViewPaper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DdPrivacyViewPaper.d.ts","sourceRoot":"","sources":["../../../src/specs/DdPrivacyViewPaper.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAEjE,QAAA,MAAM,aAAa,0DAElB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/types/DdPrivacyView.d.ts

@@ -0,0 +1,8 @@
+import type { ViewProps } from 'react-native';
+export interface DdPrivacyViewProps extends ViewProps {
+    textAndInputPrivacy: string;
+    imagePrivacy: string;
+    touchPrivacy: string;
+    hide: boolean;
+}
+//# sourceMappingURL=DdPrivacyView.d.ts.map

package/lib/typescript/types/DdPrivacyView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DdPrivacyView.d.ts","sourceRoot":"","sources":["../../../src/types/DdPrivacyView.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACjD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datadog/mobile-react-native-session-replay",
-    "version": "2.7.1",
+    "version": "2.8.0",
     "description": "A client-side React Native module to enable session replay with Datadog",
     "keywords": [
         "datadog",
@@ -84,11 +84,11 @@
     },
     "codegenConfig": {
         "name": "DdSDKReactNativeSessionReplay",
-        "type": "modules",
+        "type": "all",
         "jsSrcsDir": "./src/specs",
         "android": {
             "javaPackageName": "com.datadog.reactnative.sessionreplay"
         }
     },
-    "gitHead": "c6df8964f84e95e77ee3d5b32272624ab1aabd48"
+    "gitHead": "55a6d45ea4a84149093f52f1d14329d17031709e"
 }

package/src/components/SessionReplayView/HideView.tsx

@@ -0,0 +1,25 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type { ViewProps } from 'react-native';
+import React from 'react';
+
+import { PrivacyView } from './PrivacyView';
+
+/**
+ * A wrapper component that hides all of its content from session replays.
+ *
+ * When used, none of the children within this view will appear in the replay recording.
+ * This is useful for UI areas that contain sensitive or confidential information that should
+ * be completely excluded from visibility, not just masked.
+ */
+export function HideView({ children, ...props }: ViewProps) {
+    return (
+        <PrivacyView {...props} hide={true}>
+            {children}
+        </PrivacyView>
+    );
+}

package/src/components/SessionReplayView/MaskAllView.tsx

@@ -0,0 +1,53 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type { ViewProps } from 'react-native';
+import React from 'react';
+
+import {
+    ImagePrivacyLevel,
+    TextAndInputPrivacyLevel,
+    TouchPrivacyLevel
+} from '../../SessionReplay';
+
+import { PrivacyView } from './PrivacyView';
+
+type Props = ViewProps & {
+    /**
+     * When true, allows touch interactions to be recorded.
+     * When false (default), touch interactions are hidden.
+     */
+    showTouch?: boolean;
+};
+
+/**
+ * A wrapper component that enforces full masking on all content within it.
+ *
+ * This includes:
+ * - Masking all text and input values (e.g., replacing them with asterisks)
+ * - Masking all images
+ * - Hiding or optionally showing touch interactions, depending on `showTouch`
+ *
+ * This component is useful for marking sensitive UI sections that should not be visible
+ * in session replays.
+ */
+export function MaskAllView({ children, showTouch, ...props }: Props) {
+    const touchPrivacy = showTouch
+        ? TouchPrivacyLevel.SHOW
+        : TouchPrivacyLevel.HIDE;
+
+    return (
+        <PrivacyView
+            {...props}
+            textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_ALL}
+            imagePrivacy={ImagePrivacyLevel.MASK_ALL}
+            touchPrivacy={touchPrivacy}
+            hide={false}
+        >
+            {children}
+        </PrivacyView>
+    );
+}

package/src/components/SessionReplayView/MaskNoneView.tsx

@@ -0,0 +1,40 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type { ViewProps } from 'react-native';
+import React from 'react';
+
+import {
+    ImagePrivacyLevel,
+    TextAndInputPrivacyLevel,
+    TouchPrivacyLevel
+} from '../../SessionReplay';
+
+import { PrivacyView } from './PrivacyView';
+
+/**
+ * A wrapper component that applies minimal masking, allowing most content to appear as-is in session replays.
+ *
+ * Specifically:
+ * - Text and inputs are shown, except for sensitive fields (e.g., password fields), which are still masked.
+ * - Images are fully visible.
+ * - Touch interactions are recorded and visible.
+ *
+ * Use this component for UI areas where full visibility is acceptable and privacy concerns are minimal.
+ */
+export function MaskNoneView({ children, ...props }: ViewProps) {
+    return (
+        <PrivacyView
+            {...props}
+            textAndInputPrivacy={TextAndInputPrivacyLevel.MASK_SENSITIVE_INPUTS}
+            imagePrivacy={ImagePrivacyLevel.MASK_NONE}
+            touchPrivacy={TouchPrivacyLevel.SHOW}
+            hide={false}
+        >
+            {children}
+        </PrivacyView>
+    );
+}

package/src/components/SessionReplayView/PrivacyView.tsx

@@ -0,0 +1,67 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type { ViewProps } from 'react-native';
+import React from 'react';
+
+import type {
+    ImagePrivacyLevel,
+    TextAndInputPrivacyLevel,
+    TouchPrivacyLevel
+} from '../../SessionReplay';
+import View from '../../specs/DdPrivacyView';
+
+type Props = ViewProps & {
+    /**
+     * Controls how text and input fields are masked in session replays.
+     */
+    textAndInputPrivacy?: TextAndInputPrivacyLevel;
+    /**
+     * Controls how images are masked in session replays.
+     */
+    imagePrivacy?: ImagePrivacyLevel;
+    /**
+     * Controls whether touch interactions are shown or hidden in session replays.
+     */
+    touchPrivacy?: TouchPrivacyLevel;
+    /**
+     * When true, completely hides this view and its children from session replays.
+     */
+    hide?: boolean;
+};
+
+/**
+ * A low-level component for configuring session replay privacy behavior with more granular control over the properties.
+ *
+ * Use this when none of the high-level components (`MaskAllView`, `MaskNoneView`, `HideView`)
+ * provide the level of customization you need.
+ *
+ * You can individually configure:
+ * - How text and inputs are masked
+ * - Whether images are shown or masked
+ * - Whether touch interactions are visible
+ * - Whether the entire view should be hidden from replays
+ */
+export function PrivacyView({
+    children,
+    textAndInputPrivacy,
+    imagePrivacy,
+    touchPrivacy,
+    hide = false,
+    ...props
+}: Props) {
+    return (
+        <View
+            {...props}
+            textAndInputPrivacy={textAndInputPrivacy as string}
+            imagePrivacy={imagePrivacy as string}
+            touchPrivacy={touchPrivacy as string}
+            hide={hide || false}
+        >
+            {children}
+        </View>
+    );
+}

package/src/components/SessionReplayView/index.ts

@@ -0,0 +1,34 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import { HideView } from './HideView';
+import { MaskAllView } from './MaskAllView';
+import { MaskNoneView } from './MaskNoneView';
+import { PrivacyView } from './PrivacyView';
+
+/**
+ * A collection of preconfigured React components for controlling privacy in Datadog Session Replay.
+ *
+ * These components can be used to control how different parts of the UI appear in session recordings:
+ *
+ * - `SessionReplayView.MaskAll`: Masks all text, inputs, and images. Hides touch interactions by default.
+ *   Use for highly sensitive sections.
+ *
+ * - `SessionReplayView.MaskNone`: Displays most content as-is, except for sensitive inputs which are still masked.
+ *   Use when visibility is safe and desired.
+ *
+ * - `SessionReplayView.Hide`: Completely hides the view and its children from session replays.
+ *   Use for content that should not appear at all in recordings.
+ *
+ * - `SessionReplayView.Privacy`: A low-level configurable component for fine-tuned privacy control.
+ *   Use this if none of the presets meet your needs.
+ */
+export const SessionReplayView = {
+    Privacy: PrivacyView,
+    MaskAll: MaskAllView,
+    MaskNone: MaskNoneView,
+    Hide: HideView
+};

package/src/index.ts

@@ -12,6 +12,7 @@ import {
     TouchPrivacyLevel,
     TextAndInputPrivacyLevel
 } from './SessionReplay';
+import { SessionReplayView } from './components/SessionReplayView';
 
 export {
     SessionReplay,
@@ -21,4 +22,6 @@ export {
     TextAndInputPrivacyLevel
 };
 
+export { SessionReplayView };
+
 export type { SessionReplayConfiguration };

package/src/specs/DdPrivacyView.ts

@@ -0,0 +1,17 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { UIManager } from 'react-native';
+
+const isNewArch =
+    UIManager.getViewManagerConfig?.('DdPrivacyView') === undefined;
+
+const NativeComponent = isNewArch
+    ? require('./DdPrivacyViewNativeComponent').default
+    : require('./DdPrivacyViewPaper').default;
+
+export default NativeComponent;

package/src/specs/DdPrivacyViewNativeComponent.ts

@@ -0,0 +1,19 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps } from 'react-native';
+
+interface DdPrivacyViewProps extends ViewProps {
+    textAndInputPrivacy: string;
+    imagePrivacy: string;
+    touchPrivacy: string;
+    hide: boolean;
+}
+
+export default codegenNativeComponent<DdPrivacyViewProps>('DdPrivacyView', {
+    paperComponentName: 'DdPrivacyView'
+}) as HostComponent<DdPrivacyViewProps>;

package/src/specs/DdPrivacyViewPaper.ts

@@ -0,0 +1,15 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import { requireNativeComponent } from 'react-native';
+
+import type { DdPrivacyViewProps } from '../types/DdPrivacyView';
+
+const DdPrivacyView = requireNativeComponent<DdPrivacyViewProps>(
+    'DdPrivacyView'
+);
+
+export default DdPrivacyView;

package/src/types/DdPrivacyView.ts

@@ -0,0 +1,14 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2016-Present Datadog, Inc.
+ */
+
+import type { ViewProps } from 'react-native';
+
+export interface DdPrivacyViewProps extends ViewProps {
+    textAndInputPrivacy: string;
+    imagePrivacy: string;
+    touchPrivacy: string;
+    hide: boolean;
+}