React-native-screenguard NPM

A Native library for blocking screenshot for react-native developer, with background screenshot customizable.

https://github.com/gbumps/react-native-screenguard/assets/16846439/26d8ac37-9bc3-4d5b-8ad5-93525fb90a72

Get started

Installation

1. Install

$ npm install react-native-screenguard --save

$ yarn add react-native-screenguard

Note: Remember to pod install on ios and gradle build on Android again to take effect.

If you want to test on iOS simulator, open Simulator, on the top screen, navigate to Device -> Trigger Screenshot. This is applied to iOS 14+.

2. 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
1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-screenguard and add ScreenGuard.xcodeproj
3. In XCode, in the project navigator, select your project. Add libScreenguard.a to your project's Build Phases ➜ Link Binary With Libraries

Android

1. 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

2. 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')
	```

 3. 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, remember to setup a little bit as you will not receive the background color or the blur effect like in the video example.

1. Open up `[your_project_path]/android/app/src/main/AndroidManifest.xml` and add activity `com.screenguard.ScreenGuardColorActivity` like below

```xml
<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"
+            android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
+            android:windowSoftInputMode="stateAlwaysVisible|adjustResize"
+        />
 </application>
</manifest>

Open up [your_project_path]/android/app/src/main/res/values/styles.xml and add style Theme.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. 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',
);

iOS

https://github.com/gbumps/react-native-screenguard/assets/16846439/fd4b3662-6e3b-4428-a927-23ee2068c22a

Android

https://github.com/gbumps/react-native-screenguard/assets/16846439/da99c58c-fb79-4885-b496-ecb242bd4cf8

2. registerWithoutEffect(New ✨)

(Android only) Activate screenguard without an effect (blur, color, image);

import ScreenGuardModule from 'react-native-screenguard';

ScreenGuardModule.registerWithoutEffect();

3. registerScreenshotEventListener

(iOS + Android) Activate a screenshot detector and receive an event callback with screenshot info after a screenshot has been triggered successfully.
(v0.3.8+) Received a boolean param getScreenShotPath:
- If true, callback will return a data object containing info of the previous image screenshot.
- If false, callback will return null.
- Default is false.

import ScreenGuardModule from 'react-native-screenguard';

ScreenGuardModule.registerScreenshotEventListener(
  true,
	(data) => {
    if (data != null) {
      console.log('path: ', data.path);
      console.log('name: ', data.name);
      console.log('type: ', data.type);
    }
    ....other code
});

4. registerScreenRecordingEventListener

(iOS only) Activate a screen recording detector and receive an event callback after a record has done.

import ScreenGuardModule from 'react-native-screenguard';

ScreenGuardModule.registerScreenRecordingEventListener(
	(_) => {
	.....do anything you want after the screen record
});

5. registerWithBlurView

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 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);

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

https://github.com/gbumps/react-native-screenguard/assets/16846439/17429686-1bc4-4d5b-aa6c-82616ec8d1c5

6. registerWithImage

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
- top: top position of the image (iOS only)
- left: left position of the image. (iOS only)
- bottom: bottom position of the image. (iOS only)
- right: right position of the image. (iOS only)
- 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.
- alignment: Position of image predefined in library, value from 0 -> 8.
  ** value definition:
  - topLeft: 0,
  - topCenter: 1,
  - topRight: 2,
  - centerLeft: 3,
  - center: 4,
  - centerRight: 5,
  - bottomLeft: 6,
  - bottomCenter: 7,
  - bottomRight: 8,
  ** throw exception when not in between 0..8 and NaN
  ** defaultValue = 4 when all positions(top, left, bottom, right) is null and alignment = null,
  ** Cannot combine with position(top, left, bottom, right) params cause this will always be checked 1st, and all positions will be skipped if not null.
  ** Set this param to null if you want to custom your own position with one of position param top, left, bottom, right above.
- timeAfterResume (Android only): A small amount of time (in milliseconds) for the 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);

import ScreenGuardModule from 'react-native-screenguard';

const dataRequire = {
  height: 150,
  width: 200,
  source: require('./images/test.png'),
  backgroundColor: color,
},
ScreenGuardModule.registerWithImage(dataRequire);

import ScreenGuardModule from 'react-native-screenguard';

const dataRequire = {
  height: 150,
  width: 200,
  top: 50,
  lef: 50,
  source: require('./images/test.png'),
  backgroundColor: color,
},
ScreenGuardModule.registerWithImage(dataRequire);

Note: This feature is still in experimental on Android, so please use with caution as some unexpected behaviour might occurs.

iOS

https://github.com/gbumps/react-native-screenguard/assets/16846439/087dd9d5-b64f-4daf-a804-acc9a3cb4cc2

Android

https://github.com/gbumps/react-native-screenguard/assets/16846439/dd2d8191-555f-4f84-abf5-6cbcf67dc84b

5. unregister

(iOS + Android) Deactivate the screenguard.

ScreenGuardModule.unregister();

Limitation

From v0.3.6 and above, callbacks will not be activated on all functions. You may have to activate it yourself by using registerScreenshotEventListener or registerScreenRecordingEventListener instead.
This library support blocking screenshot for iOS 13+, Android 8+ only.
Remember to call a function only ONCE and don't combine with other register functions for limitting errors and unexpected problems might happened during testing.
Please remember that input will be temporary disabled until call unregister on Android except registerWithoutEffect.

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 !