react-native-screenguard
Advanced tools
A Native screenshot blocking library for React-Native developer, with background customizable after captured. Screenshot detector are also supported.
A Native library for blocking screenshot for react-native developer, with background color screenshot customizable.
$ npm install react-native-screenguard --save
$ yarn add react-native-screenguard
registerWithBlurView and registerWithImage, install this version.$ npm install react-native-screenguard@beta --save
$ yarn add react-native-screenguard@beta
Note: Remember to pod install on ios and gradle build on Android again to take effect.
React-native 0.60 and higher: just cd ios && pod install, no additional requirements.
React-native 0.59 and lower: Please do manual installation as follow
In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-screenguard and add ScreenGuard.xcodeproj
In XCode, in the project navigator, select your project. Add libScreenguard.a to your project's Build Phases ➜ Link Binary With Libraries
Open up android/app/src/main/java/[...]/MainActivity.java
Add import com.screenguard.ScreenGuardPackage; to the imports at the top of the file
Add new ScreenGuardPackage() to the list returned by the getPackages() method
android/settings.gradle:include ':react-native-screenguard'
project(':react-native-screenguard').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-screenguard/android')
android/app/build.gradle: compile project(':react-native-screenguard')
For Expo user: First, you need to eject Expo or npx expo prebuild in order to use this library, check Expo docs below:
https://docs.expo.dev/workflow/prebuild/
Note: All features below contain a callback method after a screenshot or screen recording has been taken.
(iOS + Android) : Activate the screenguard with your custom background color layout.
Android will receive the background color when app in background or inactive state.
import ScreenGuardModule from 'react-native-screenguard';
ScreenGuardModule.register(
//insert any hex color you want here, default black if null or empty
'#0F9D58',
(_) => {
.....do anything you want after the screenshot
});
iOS
Android
import ScreenGuardModule from 'react-native-screenguard';
ScreenGuardModule.registerWithoutScreenguard(
(_) => {
.....do anything you want after the screenshot
});
Beta version only. See how to install here
Activate screenguard with a blurred effect view after captured.
Blurview on Android using Blurry.
Accepted a JS object with following parameters:
radius (required): blur radius value number in between [15, 50] (Explain below) , throws warning if smaller than 15 or bigger than 50, exception if smaller than 1 or not a number.
timeAfterResume (Android only): A small amount of time (in milliseconds) for the blur view to disappear before jumping back to the main application view, default 1000ms
import ScreenGuardModule from 'react-native-screenguard';
const data = {
radius: 35,
timeAfterResume: 2000,
};
//register with a blur radius of 35
ScreenGuardModule.registerWithBlurView(data, (_) => {
.....do anything you want after the screenshot
});
Explain: Set blur radius smaller than 15 won't help much, as content still look very clear and easy to read. Same with bigger than 50 but content will be shrinked and vanished inside the view, blurring is meaningless. So, between 15 and 50 is enough.
iOS
Beta version only. See how to install here
Activate screenguard with a custom image view and background color.
ImageView using SDWebImage on iOS and Glide on Android for faster loading and caching.
Accepted a JS object with following parameters:
width: width of the image
height: height of the image
uri (required): uri of the image, accept all kinds of image (jpg|jpeg|png|gif|bmp|webp|svg), throws warning if uri is not an image uri;
backgroundColor: background color behind the image, just like register.
timeAfterResume (Android only): A small amount of time (in milliseconds) for the blur view to disappear before jumping back to the main view, default 1000ms
import ScreenGuardModule from 'react-native-screenguard';
const data = {
height: 150,
width: 200,
uri: 'https://www.icegif.com/wp-content/uploads/2022/09/icegif-386.gif',
backgroundColor: color,
alignment: 5 // Alignment.centerRight
},
//register with an image
ScreenGuardModule.registerWithImage(
data,
(_) => {
.....do anything you want after the screenshot
});
Warning: This feature is still in experimental on Android, so please use with caution as some unexpected behaviour might occurs.
iOS
Android
ScreenGuardModule.unregister();
This library support blocking screenshot for iOS 13+, Android 5+ only.
The protection filter is already activated until you call unregister. So remember to call a function only ONCE for limitting errors and unexpected problems might happened during testing.
Lib does not support combine feature together yet. (For example you want to use registerWithBlurView combine with register to have a blur view with color behind,.....)
On Android, if you want to use callback, consider using registerWithoutScreenguard instead, as you may not receive any event after a screenshot has been triggered if using with register.
All contributions are welcome! Please open an issue if you get stuck and bugs, or a PR if you have any feature idea, improvements and bug fixing. I'm very appreciate !
MIT
FAQs
A Native screenshot blocking library for React-Native developer, with background customizable after captured. Screenshot detector are also supported.
The npm package react-native-screenguard receives a total of 2,671 weekly downloads. As such, react-native-screenguard popularity was classified as popular.
We found that react-native-screenguard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."