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
Source code on master branch.
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.
Source code on beta branch.
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/
(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
(iOS + Android) Activate without screenguard, if you just want to detect and receive event callback only.
Note: This function is deprecated and will be removed from ver 4.0.0+, consider using registerScreenshotEventListener or registerScreenRecordingEventListener instead.
import ScreenGuardModule from 'react-native-screenguard';
ScreenGuardModule.registerWithoutScreenguard(
(_) => {
.....do anything you want after the screenshot
});
import ScreenGuardModule from 'react-native-screenguard';
ScreenGuardModule.registerScreenshotEventListener(
(_) => {
.....do anything you want after the screenshot
});
import ScreenGuardModule from 'react-native-screenguard';
ScreenGuardModule.registerScreenRecordingEventListener(
(_) => {
.....do anything you want after the screen record
});
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
source (required): uri from network image or from local project require, accept all kinds of image (jpg|jpeg|png|gif|bmp|webp|svg), throws warning if uri is not an image uri;
defaultSource: default source if network image uri failed to load, from local project require, accept all kinds of image (jpg|jpeg|png|gif|bmp|webp|svg);
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,
source: {
uri: 'https://www.icegif.com/wp-content/uploads/2022/09/icegif-386.gif',
},
defaultSource: require('./images/test.png'),
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();
From v0.3.6 and above, callbacks will not be activated on all register functions. You may have to activate it yourself by using registerScreenshotEventListener or registerScreenRecordingEventListener instead.
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. (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 registerScreenShotEventListener 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.
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
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.