react-native-privacy-protect

A cross-platform React Native library to protect sensitive app content when the app goes to the background or appears in the app switcher. Provides a blur (iOS) or secure overlay (Android) to hide UI content automatically.

Features

• Automatic Background Detection: Automatically shows privacy protection when app goes to background
• Cross-Platform: Works on both iOS and Android
• Customizable Overlays: Support for custom images, blur effects, and overlay colors
• Smooth Animations: Configurable fade in/out animations
• Security Options: Android FLAG_SECURE support to block screenshots and app switcher
• TypeScript Support: Full TypeScript definitions included

Installation

npm install @enginnblt/react-native-privacy-protect

React Native CLI Setup

iOS Setup

cd ios && pod install

Android Setup

No additional setup required for Android.

Examples

React Native CLI Example

See the example/ directory for a React Native CLI example.

Usage

Basic Usage with Auto-Enable

import PrivacyProtect from '@enginnblt/react-native-privacy-protect';

// Configure once in your App.tsx
useEffect(() => {
  PrivacyProtect.configurePrivacyProtect({
    autoEnable: true, // Automatically show privacy overlay when app goes to background
    blurRadius: 20, // Android 12+ blur effect
    blurStyle: 'dark', // iOS blur style
    overlayColor: '#00000066', // Semi-transparent overlay
    animated: true,
    animationDuration: 300,
  });
}, []);

Manual Control

import PrivacyProtect from '@enginnblt/react-native-privacy-protect';

// Configure without auto-enable
PrivacyProtect.configurePrivacyProtect({
  autoEnable: false,
  blurRadius: 15,
  overlayColor: '#00000080',
});

// Manually show/hide (if autoEnable is false)
// Note: These methods are available in the native module but not exposed in the JS API yet

Custom Background Image

PrivacyProtect.configurePrivacyProtect({
  backgroundImage: require('./assets/privacy-overlay.png'), // Local image
  overlayColor: '#00000040', // Light overlay on top of image
  animated: true,
});

Remote Image

PrivacyProtect.configurePrivacyProtect({
  backgroundImage: { uri: 'https://example.com/privacy-image.jpg' }, // Remote image
  overlayColor: '#00000060',
  animated: true,
});

Dynamic Image Switching

// Switch between different privacy modes
const switchToBlurMode = () => {
  PrivacyProtect.configurePrivacyProtect({
    blurStyle: 'dark',
    overlayColor: '#00000080',
    animated: true,
  });
};

const switchToImageMode = () => {
  PrivacyProtect.configurePrivacyProtect({
    backgroundImage: require('./assets/custom-bg.png'),
    overlayColor: '#00000040',
    animated: true,
  });
};

API Reference

configurePrivacyProtect(options)

Configure the privacy protection behavior.

Options

| Option | Type | Platform | Default | Description | |--------|------|----------|---------|-------------| | autoEnable | boolean | Android | false | Automatically show privacy overlay when app goes to background | | blurRadius | number | Android 12+ | 0 | Blur radius for the privacy overlay | | blurStyle | 'dark' \| 'light' \| 'extraLight' | iOS | - | iOS blur style | | overlayColor | string | Both | '#80000000' | Overlay color (hex format) | | animated | boolean | Both | true | Enable fade animations | | animationDuration | number | Both | 300 | Animation duration in milliseconds | | secureFlag | boolean | Android | false | Use FLAG_SECURE to block screenshots | | backgroundImage | ImageSourcePropType | Both | - | Custom image for privacy overlay (local or remote) |

Contributing

• Development workflow
• Sending a pull request
• Code of conduct

License

MIT

Made with create-react-native-library