{"_id":"@aasatech/react-native-screenguard","name":"@aasatech/react-native-screenguard","dist-tags":{"latest":"0.3.7"},"versions":{"0.3.7":{"name":"@aasatech/react-native-screenguard","version":"0.3.7","private":false,"description":"A Native screenshot blocking library for React-Native developer, with background customizable after captured. Screenshot detector are also supported.","main":"index","source":"index","types":"index.d.ts","directories":{"example":"example"},"devDependencies":{"@react-native-community/eslint-config":"^3.0.2","@types/jest":"^28.1.2","@types/react":"~17.0.21","@types/react-native":"0.70.0","eslint":"^8.4.1","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","jest":"^28.1.1","pod-install":"^0.1.0","prettier":"^2.0.5","react":"18.2.0","react-native":"0.71.8","typescript":"^4.5.2"},"resolutions":{"@types/react":"17.0.21"},"peerDependencies":{"react":"*","react-native":"*"},"engines":{"node":">= 16.0.0"},"packageManager":"^yarn@1.22.15","eslintConfig":{"root":true,"extends":["@react-native-community","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/","android/","ios/","example"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","pre":"npm pack --dry-run","pub":"npm publish"},"repository":{"type":"git","url":"git+https://github.com/aasatech/react-native-screenguard.git"},"keywords":["react","native","capture","protection","screen-capture","prevent","screenshot","capture-protection","ios","android"],"author":{"name":"Thong Bui"},"license":"MIT","bugs":{"url":"https://github.com/aasatech/react-native-screenguard/issues"},"homepage":"https://github.com/aasatech/react-native-screenguard/blob/master/README.md","gitHead":"cc7d05cbad0d7d29236892895494f51857428b32","_id":"@aasatech/react-native-screenguard@0.3.7","_nodeVersion":"16.19.1","_npmVersion":"8.19.3","dist":{"integrity":"sha512-EH+WfXX6DsQ+4Fo3Mzz6ihv2IHVqZWvXHQCDfjXsPwAgnGGbtiqTbV4ZnW0K657VdzyOLZcrev1xxqRgVYwJRw==","shasum":"c556c180e98e535de1f214edd8f54a00c59dc457","tarball":"https://registry.npmjs.org/@aasatech/react-native-screenguard/-/react-native-screenguard-0.3.7.tgz","fileCount":41,"unpackedSize":164819,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlvdDFyH/WJTUmUfop4zAmX7LkNbYr/S6RfQhlRoOcwAiEArrHYRY7ep2MUYmJN33BzwJhRW9bYDEzkjsrT58xoMpo="}]},"_npmUser":{"name":"aasatech","email":"choengteurchhoy@gmail.com"},"maintainers":[{"name":"aasatech","email":"choengteurchhoy@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-screenguard_0.3.7_1712389109085_0.5543535922739435"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-06T07:38:28.995Z","0.3.7":"2024-04-06T07:38:29.272Z","modified":"2024-04-06T07:38:29.573Z"},"maintainers":[{"name":"aasatech","email":"choengteurchhoy@gmail.com"}],"description":"A Native screenshot blocking library for React-Native developer, with background customizable after captured. Screenshot detector are also supported.","homepage":"https://github.com/aasatech/react-native-screenguard/blob/master/README.md","keywords":["react","native","capture","protection","screen-capture","prevent","screenshot","capture-protection","ios","android"],"repository":{"type":"git","url":"git+https://github.com/aasatech/react-native-screenguard.git"},"author":{"name":"Thong Bui"},"bugs":{"url":"https://github.com/aasatech/react-native-screenguard/issues"},"license":"MIT","readme":"

\n \n \n \n

\n\n![ts](https://flat.badgen.net/badge/Built%20With/TypeScript/blue)\n\nA Native library for blocking screenshot for react-native developer, with background color screenshot customizable.\n\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/26d8ac37-9bc3-4d5b-8ad5-93525fb90a72\n\n\n# Get started\n\n\n * [Installation](#installation)\n * [1.Install](#1-install)\n * [stable](#stable)\n * [beta](#beta)\n * [2.Linking](#2-linking)\n * [Usage](#usage)\n * [register](#1-register)\n * [registerWithoutScreenguard](#2-registerwithoutscreenguard)(Deprecated)\n * [registerScreenshotEventListener](#3-registerscreenshoteventlistener)(New ✨)\n * [registerScreenRecordingEventListener](#4-registerscreenrecordingeventlistener)(New ✨)\n * [registerWithBlurView](#5-registerwithblurview)(beta)\n * [registerWithImage](#6-registerwithimage)(beta)\n * [unregister](#7-unregister)\n * [Limitation](#limitation)\n * [Contributing](#contributing)\n * [License](#license)\n\n\n## Installation\n\n ## 1. Install\n\nThis library is separated into 2 version: `stable` and `beta` versions for different purpose.\n\n #### Stable\n\n- For protecting app from screenshot and screen recording captured, install stable version is enough.\n\n```sh\n$ npm install @aasatech/react-native-screenguard --save\n```\n\n```sh\n$ yarn add @aasatech/react-native-screenguard\n```\nSource code on `master` branch.\n\n #### Beta\n\n- If you want more customization over the screen protector filter like `registerWithBlurView` and `registerWithImage`, install this version.\n\n```sh\n$ npm install @aasatech/react-native-screenguard@beta --save\n\n```\n\n```sh\n$ yarn add @aasatech/react-native-screenguard@beta\n```\n\n`Note`: Remember to `pod install` on ios and `gradle build` on Android again to take effect.\n\nSource code on `beta` branch.\n\nIf you want to test on iOS simulator, open Simulator, on the top screen, navigate to `Device` -> `Trigger Screenshot`. This is applied to iOS 14+.\n\n\n## 2. Linking\n\n- React-native 0.60 and higher: just `cd ios && pod install`, no additional requirements.\n\n- React-native 0.59 and lower: Please do manual installation as follow\n\n #### iOS\n\n 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`\n\n 2. Go to `node_modules` ➜ `@aasatech/react-native-screenguard` and add `ScreenGuard.xcodeproj`\n\n 3. In XCode, in the project navigator, select your project. Add `libScreenguard.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`\n\n\n #### Android\n\n 1. Open up `android/app/src/main/java/[...]/MainActivity.java`\n\n - Add `import com.screenguard.ScreenGuardPackage;` to the imports at the top of the file\n\n - Add `new ScreenGuardPackage()` to the list returned by the `getPackages()` method\n\n 2. Append the following lines to `android/settings.gradle`:\n\n \t```\n \tinclude ':react-native-screenguard'\n \tproject(':react-native-screenguard').projectDir = new File(rootProject.projectDir,'../node_modules/@aasatech/react-native-screenguard/android')\n \t```\n\n 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:\n\n \t```\n compile project(':react-native-screenguard')\n \t```\n\nFor Expo user: First, you need to eject Expo or `npx expo prebuild` in order to use this library, check Expo docs below:\n\n\thttps://docs.expo.dev/workflow/prebuild/\n\n## Usage\n\n#### 1. register\n\n- (iOS + Android) : Activate the screenguard with your custom background color layout.\n\n- Android will receive the background color when app in background or inactive state.\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nScreenGuardModule.register(\n\t//insert any hex color you want here, default black if null or empty\n\t'#0F9D58',\n);\n```\n\niOS\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/fd4b3662-6e3b-4428-a927-23ee2068c22a\n\nAndroid\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/da99c58c-fb79-4885-b496-ecb242bd4cf8\n\n\n#### 2. registerWithoutScreenguard\n\n- (iOS + Android) Activate without screenguard, if you just want to detect and receive event callback only.\n\n- `Note:` This function is deprecated and will be removed from ver `0.4.0+`, consider using [registerScreenshotEventListener](#3-registerscreenshoteventlistenernew) or [registerScreenRecordingEventListener](#4-registerscreenrecordingeventlistenernew) instead.\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nScreenGuardModule.registerWithoutScreenguard(\n\t(_) => {\n\t.....do anything you want after the screenshot\n});\n```\n\n#### 3. registerScreenshotEventListener\n\n- (iOS + Android) Activate a screenshot detector and receive an event callback after a screenshot has been triggered successfully.\n\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nScreenGuardModule.registerScreenshotEventListener(\n\t(_) => {\n\t.....do anything you want after the screenshot\n});\n```\n\n#### 4. registerScreenRecordingEventListener\n\n- (iOS only) Activate a screen recording detector and receive an event callback after a record has done.\n\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nScreenGuardModule.registerScreenRecordingEventListener(\n\t(_) => {\n\t.....do anything you want after the screen record\n});\n```\n\n#### 5. registerWithBlurView\n\n- Beta version only. See how to install [here](#beta)\n\n- Activate screenguard with a blurred effect view after captured.\n\n- Blurview on Android using [Blurry](https://github.com/wasabeef/Blurry).\n\n- Accepted a JS object with following parameters:\n\n * `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.\n\n * `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\n\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nconst data = {\n radius: 35,\n timeAfterResume: 2000,\n};\n\n//register with a blur radius of 35\nScreenGuardModule.registerWithBlurView(data);\n```\n\n `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.\n\niOS\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/17429686-1bc4-4d5b-aa6c-82616ec8d1c5\n\n#### 6. registerWithImage\n\n- Beta version only. See how to install [here](#beta)\n\n- Activate screenguard with a custom image view and background color.\n\n- ImageView using [SDWebImage](https://github.com/SDWebImage/SDWebImage) on iOS and [Glide](https://github.com/bumptech/glide) on Android for faster loading and caching.\n\n- Accepted a JS object with following parameters:\n\n * `width`: width of the image\n\n * `height`: height of the image\n\n * `source` (required): uri from network image or from local project `require`, accept all kinds of images (jpg|jpeg|png|gif|bmp|webp|svg), throws warning if uri is not an image uri;\n\n * `defaultSource`: default source if network image uri failed to load, from local project `require`, accept all kinds of images;\n\n * `backgroundColor`: background color behind the image, just like `register`.\n\n * `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\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nconst data = {\n height: 150,\n width: 200,\n source: {\n uri: 'https://www.icegif.com/wp-content/uploads/2022/09/icegif-386.gif',\n },\n defaultSource: require('./images/test.png'),\n backgroundColor: color,\n alignment: 5 // Alignment.centerRight\n},\n//register with an image\nScreenGuardModule.registerWithImage(data);\n```\n\n\n```js\nimport ScreenGuardModule from '@aasatech/react-native-screenguard';\n\nconst dataRequire = {\n height: 150,\n width: 200,\n source: require('./images/test.png'),\n backgroundColor: color,\n},\nScreenGuardModule.registerWithImage(dataRequire);\n```\n\n`Warning`: This feature is still in experimental on Android, so please use with caution as some unexpected behaviour might occurs.\n\niOS\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/087dd9d5-b64f-4daf-a804-acc9a3cb4cc2\n\nAndroid\n\nhttps://github.com/aasatech/react-native-screenguard/assets/16846439/dd2d8191-555f-4f84-abf5-6cbcf67dc84b\n\n#### 5. unregister\n\n- (iOS + Android) Deactivate the screenguard.\n\n```js\nScreenGuardModule.unregister();\n```\n\n\n## Limitation\n\n- 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](#3-registerscreenshoteventlistenernew) or [registerScreenRecordingEventListener](#4-registerscreenrecordingeventlistenernew) instead.\n\n- This library support blocking screenshot for iOS 13+, Android 5+ only.\n\n- 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.\n\n- 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,.....)\n\n- 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`.\n\n\n## Contributing\nAll 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 !\n\n## License\nMIT\n\n\n\n","readmeFilename":"README.md"}