Skip to content

πŸ›‘οΈ A React Native library to prevent and detect for screen capture, screenshots and app switcher for enhanced security. Fully compatible with both Expo and CLI.

License

Notifications You must be signed in to change notification settings

wn-na/react-native-capture-protection

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

πŸ›‘οΈ react-native-capture-protection

A React Native library to prevent screen capture, screenshots, and app switcher previewsβ€”providing enhanced security for your app.
Fully compatible with React Native CLI and Expo (Dev Client only).


πŸ“Έ Screenshots

Screenshot Protection App Switcher Protection
Screen Recording App Switcher

✨ Features

  • πŸ”’ iOS: Screenshot, Screen Recording & App Switcher protection
  • πŸ”’ Android: Screenshot & Screen Recording protection
  • πŸ“‘ Event listeners for capture events
  • 🧩 Hooks & Provider support
  • πŸ“± Android 14 support

πŸš€ Installation

⚠️ Using React Native < 0.70?
The latest v2.x version may not be compatible with versions below 0.70.
It is recommended to use v1.9.17 for better stability with older React Native projects.

Using npm

npm install react-native-capture-protection

Using yarn

yarn add react-native-capture-protection

Using with Expo

⚠️ Expo Dev Client only This library includes native code, so it does not work with Expo Go. You must use a custom dev client.

npx expo install react-native-capture-protection

βš™οΈ Android Configuration (Required)

Android 13 and Below: Enable Storage Permissions To detect screenshots on Android versions below 14, add the following

πŸ”§ iOS Setup

If you're developing for iOS, don't forget to install CocoaPods dependencies after installing the package.

cd ios && pod install

React Native CLI

add to android/app/build.gradle

defaultConfig {
    ...
    missingDimensionStrategy "react-native-capture-protection", "fullMediaCapture"
}

Expo (Dev Client only)

add to app.json

{
  ...
  "plugins": [
    ...,
    [
      "react-native-capture-protection",
      {
        "captureType": "fullMediaCapture"
      }
    ]
  ]
}

Google Play Store Policy (READ_MEDIA_IMAGES)

If publishing to the Play Store, explain the usage of READ_MEDIA_IMAGES like this:

Used by the application to detect screenshots, by checking for screenshot files in the user’s media storage.

Disable Capture Detection (Optional)

If you want to disable screenshot detection and only block recording/switcher:

React Native CLI

add to android/app/build.gradle

defaultConfig {
    ...
    missingDimensionStrategy "react-native-capture-protection", "restrictedCapture"
}

Expo (Dev Client only)

add to app.json

{
  ...
  "plugins": [
    ...,
    [
      "react-native-capture-protection",
      {
        "captureType": "restrictedCapture"
      }
    ]
  ]
}

πŸ“¦ Usage

import {
  CaptureProtection,
  useCaptureProtection,
  CaptureEventType
} from 'react-native-capture-protection';

const Component = () => {
  const { protectionStatus, status } = useCaptureProtection();

  React.useEffect(() => {
    // Prevent all capture events
    CaptureProtection.prevent();

    // Or prevent specific events
    CaptureProtection.prevent({
      screenshot: true,
      record: true,
      appSwitcher: true
    });
  }, []);

  React.useEffect(() => {
    // Check if any capture is prevented
    console.log('Prevent Status:', protectionStatus);

    // Check current protection status
    console.log('Protection Status:', status);
  }, [protectionStatus, status]);

  // Allow all capture events
  const onAllow = async () => {
    await CaptureProtection.allow();
  };

  // Allow specific events
  const onAllowSpecific = async () => {
    await CaptureProtection.allow({
      screenshot: true,
      record: false,
      appSwitcher: true
    });
  };

  // Check if screen is being recorded
  const checkRecording = async () => {
    const isRecording = await CaptureProtection.isScreenRecording();
    console.log('Is Recording:', isRecording);
  };

  return (
    // Your component JSX
  );
};

πŸ“š Documentation

πŸ§ͺ Methods – All available API methods

πŸ“˜ Types – Type definitions and interfaces

πŸ›  Migration Guide – From v1.x to v2.x

🀝 Contributing

See CONTRIBUTING.md for details on contributing to this project.

πŸ“„ License

MIT


Made with create-react-native-library

About

πŸ›‘οΈ A React Native library to prevent and detect for screen capture, screenshots and app switcher for enhanced security. Fully compatible with both Expo and CLI.

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Sponsor this project

Contributors 7