Guides
Guides

Mask PII & Sensitive Content

Good privacy practices are non-negotiable — especially under GDPR, CCPA, and app store policies. UXCam lets you decide what never gets recorded at three levels: text fields, views, or entire screens.

Dashboard-First Rules (Zero Code)

The most efficient approach is configuring privacy rules directly in your UXCam dashboard:

  1. Navigate to Settings → Video Recording Privacy
  2. Choose Record, Occlude, or Blur globally or per screen
  3. (Optional) Adjust blur radius and Record gestures toggle
  4. Save → record a test session to verify
🛠️

Priority ladder

Screen-specific Dashboard rule → Global Dashboard rule → SDK overlay/blur → SDK text-field occlusion.

One-Liner Occlusion APIs

Overlay an entire screen

import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const overlay = {
  type: UXCamOcclusionType.Overlay,
  color: 0x000000,
  hideGestures: true,
  screens: ['Login Form', 'Payment Details'],
};

Blur with custom radius

const blur = {
  type: UXCamOcclusionType.Blur,
  blurRadius: 15,
  hideGestures: false,
  screens: ['User Profile Settings', 'Account Overview'],
};

Hide all text inputs

import RNUxcam from 'react-native-ux-cam';

RNUxcam.occludeAllTextFields();

// Stop occluding when leaving the screen
RNUxcam.stopOccludingAllTextFields();

Hide a single sensitive view

import RNUxcam from 'react-native-ux-cam';

// Using ref callback
<TextInput
  placeholder="Password"
  secureTextEntry
  ref={(view) => RNUxcam.occludeSensitiveView(view)}
/>

Apply at Config Time (Recommended)

Set all privacy rules during initialization to keep them in one place and avoid race conditions:

import RNUxcam from 'react-native-ux-cam';
import { UXCamOcclusionType } from 'react-native-ux-cam/UXCamOcclusion';

const configuration = {
  userAppKey: 'YOUR_API_KEY',
  enableAutomaticScreenNameTagging: false,
  enableImprovedScreenCapture: true,
  occlusions: [
    {
      type: UXCamOcclusionType.Overlay,
      color: 0x000000,
      hideGestures: true,
      screens: ['Login Form', 'Payment Details', 'Password Change'],
    },
    {
      type: UXCamOcclusionType.Blur,
      blurRadius: 15,
      hideGestures: false,
      screens: ['User Profile Settings', 'Account Overview'],
    },
    {
      type: UXCamOcclusionType.OccludeAllTextFields,
      screens: ['Search Results', 'Customer Support Chat'],
    },
  ],
};

RNUxcam.optIntoVideoRecordings();
RNUxcam.startWithConfiguration(configuration);

Protection Strategy Guide

Sensitivity LevelProtection MethodImplementationMaintenance
Entire sensitive screensScreen overlay/blurscreens: ['Login', 'Payment']Low — uses screen names
Form sectionsScreen-based blurscreens: ['ProfileEdit']Low — covers entire form areas
Individual fieldsView-level occlusionoccludeSensitiveView(ref)High — per-component setup
All text inputsText field occlusionoccludeAllTextFields()Medium — affects all text inputs
💡

Best Practice: Start with screen-based protection using your tagged screen names, then add granular view-level occlusion only where needed.

Verification Checklist

  1. Record a debug session through all sensitive flows
  2. Play it back in the dashboard and confirm:
    • Passwords and card numbers are overlaid or blurred
    • Text fields on protected screens are hidden
    • WebView sensitive content is not visible
  3. Use the Record gestures toggle if taps should not be shown on sensitive screens
  4. Test on both iOS and Android — occlusion behaviour should be identical

Troubleshooting

IssueCauseFix
Overlay shows but gestures still visiblehideGestures defaulted to falseSet hideGestures: true
Text inputs still visibleCustom component wrapping TextInputUse occludeSensitiveView(ref) manually
Occlusion not applyingScreen names don't match dashboard rulesVerify screen names match exactly
WebView leaks card numbersWebView content not protectedSee WebView Occlusion guide
Protection only on one platformPlatform-specific rendering differencesTest on both iOS and Android simulators

Next Steps

View-Level Occlusion

Hide specific components — forms, inputs, and dynamically created views.

WebView Occlusion

Protect sensitive content inside WebViews using HTML classes, CSS injection, or full occlusion.

Send Events

Capture business-critical user actions while maintaining privacy compliance.

Updated 13 days ago