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).
Screenshot Protection | App Switcher Protection |
---|---|
![]() |
- ๐ iOS: Screenshot, Screen Recording & App Switcher protection
- ๐ Android: Screenshot & Screen Recording protection
- ๐ก Event listeners for capture events
- ๐งฉ Hooks & Provider support
- ๐ฑ Android 14 support
โ ๏ธ Using React Native < 0.70?
The latest v2.x version may not be compatible with versions below 0.70.
It is recommended to usev1.9.17
for better stability with older React Native projects.
npm install react-native-capture-protection
yarn add react-native-capture-protection
โ ๏ธ 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 13 and Below: Enable Storage Permissions To detect screenshots on Android versions below 14, add the following
If you're developing for iOS, don't forget to install CocoaPods dependencies after installing the package.
cd ios && pod install
add to android/app/build.gradle
defaultConfig {
...
missingDimensionStrategy "react-native-capture-protection", "fullMediaCapture"
}
add to app.json
{
...
"plugins": [
...,
[
"react-native-capture-protection",
{
"captureType": "fullMediaCapture"
}
]
]
}
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.
If you want to disable screenshot detection and only block recording/switcher:
add to android/app/build.gradle
defaultConfig {
...
missingDimensionStrategy "react-native-capture-protection", "restrictedCapture"
}
add to app.json
{
...
"plugins": [
...,
[
"react-native-capture-protection",
{
"captureType": "restrictedCapture"
}
]
]
}
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
);
};
๐งช Methods โ All available API methods
๐ Types โ Type definitions and interfaces
๐ Migration Guide โ From v1.x to v2.x
See CONTRIBUTING.md for details on contributing to this project.
MIT
Made with create-react-native-library