A Native library for blocking screenshot for react-native developer, with background color screenshot customizable.
avnzod.mp4
- For protecting app from screenshot and screen recording captured, install stable version is enough.
$ npm install react-native-screenguard --save
$ yarn add react-native-screenguard
Source code on master
branch.
- If you want more customization over the screen protector filter like
registerWithBlurView
andregisterWithImage
, 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 addScreenGuard.xcodeproj
-
In XCode, in the project navigator, select your project. Add
libScreenguard.a
to your project'sBuild 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 thegetPackages()
method
- Append the following lines to
android/settings.gradle
:
include ':react-native-screenguard' project(':react-native-screenguard').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-screenguard/android')
- Insert the following lines inside the dependencies block in
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
0F9D58.mp4
Android
sg_green.mp4
- (iOS + Android) Activate without screenguard, if you just want to detect and receive event callback only.
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
screenguard_blur.mp4
-
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 likeregister
. -
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
Screen.Recording.2023-08-31.at.00.21.35.mov
Android
screenguard_img.1.mp4
- (iOS + Android) Deactivate the screenguard.
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 withregister
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 withregister
.
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