A Native library for blocking screenshot for react-native developer, with background color screenshot customizable.
avnzod.mp4
Get started
Installation
- Install the dependency
$ npm install react-native-screenguard --save
$ yarn add react-native-screenguard
- Linking:
-
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
iOS
-
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
Android
- 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/
Post-installation setting for Android
On Android, from v0.1.4+
, remember to add a little more options as it won't work as expected.
- Open up
[your_project_path]/android/app/src/main/AndroidManifest.xml
and add activitycom.screenguard.ScreenGuardColorActivity
like below
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application ......>
<activity
android:name=".MainActivity" .........>
..........
</activity>
<activity android:name="com.screenguard.ScreenGuardColorActivity"
android:theme="@style/Theme.AppCompat.Translucent"
/>
</application>
</manifest>
- Open up
[your_project_path]/android/app/src/main/res/values/styles.xml
and add styleTheme.AppCompat.Translucent
like below
<resource>
<style name="AppTheme">your current app style theme.............</style>
<style name="Theme.AppCompat.Translucent">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:colorBackgroundCacheHint">@null</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:windowAnimationStyle">@null</item>
<item name="android:windowSoftInputMode">adjustResize</item>
</style>
</resource>
Usage
1. ScreenGuardModule.register
-
(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
2. ScreenGuardModule.registerWithoutScreenguard (v0.0.6+)
- (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
});
3. ScreenGuardModule.registerWithBlurView (v0.1.2+)
-
(iOS only) Activate screenguard with a blurred effect view after captured.
-
Accepted a 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.
import ScreenGuardModule from 'react-native-screenguard';
//register with a blur radius of 35
ScreenGuardModule.registerWithBlurView(
35
(_) => {
.....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.
screenguard_blur.mp4
4. ScreenGuardModule.unregister (v0.0.2+)
- (iOS + Android) Deactivate the screenguard.
ScreenGuardModule.unregister();
Limitation
-
This library support blocking screenshot for iOS 13+ only.
-
registerWithBlurView
supports blur view for iOS only. -
On Android, if you want to use callback, consider using
registerWithoutScreenguard
instead, as you might not receive any event after a screenshot has been triggered if using withregister
.
Contributing
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 !
License
MIT