### Start Example App Packager Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Starts the Metro server for the example application. Changes in JavaScript code will be reflected without a rebuild. ```sh yarn example start ``` -------------------------------- ### Run Example App on iOS Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Builds and runs the example application on an iOS simulator or device. ```sh yarn example ios ``` -------------------------------- ### iOS Setup: Install CocoaPods Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md After installing the package, run this command in the 'ios' directory to install CocoaPods dependencies for iOS. ```sh cd ios && pod install ``` -------------------------------- ### Install Project Dependencies Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Run this command in the root directory to install all required dependencies for each package. ```sh yarn ``` -------------------------------- ### Run Example App on Android Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Builds and runs the example application on an Android device or emulator. ```sh yarn example android ``` -------------------------------- ### Install react-native-capture-protection Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Install the library using npm, yarn, or Expo CLI. For iOS, ensure native pods are installed. ```bash # npm npm install react-native-capture-protection # yarn yarn add react-native-capture-protection # Expo Dev Client npx expo install react-native-capture-protection # iOS – install native pod cd ios && pod install ``` -------------------------------- ### Install with Expo CLI Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Install the library using Expo CLI. This is only compatible with Expo Dev Client, not Expo Go, due to native code. ```sh npx expo install react-native-capture-protection ``` -------------------------------- ### Install with yarn Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Use this command to install the library using yarn. Ensure your React Native version is compatible. ```sh yarn add react-native-capture-protection ``` -------------------------------- ### Install with npm Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Use this command to install the library using npm. Ensure your React Native version is compatible. ```sh npm install react-native-capture-protection ``` -------------------------------- ### Install Latest Package Version Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md Update to the latest version of `react-native-capture-protection` using npm or yarn. ```bash npm install react-native-capture-protection@latest # or yarn add react-native-capture-protection@latest ``` -------------------------------- ### Capture Protection Provider Setup Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md To use the `useCaptureProtection` hook, you must wrap your application or relevant component tree with `CaptureProtectionProvider`. This sets up the necessary context. ```typescript return ...; ``` -------------------------------- ### Jest Mock Setup for Capture Protection Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Configure Jest to mock the react-native-capture-protection library for testing. This setup ensures that tests can run without actual native module interaction, using predefined mock behaviors. ```javascript // jest.config.js module.exports = { setupFilesAfterEnv: ['/jest.setup.js'], }; ``` ```javascript // jest.setup.js jest.mock('react-native-capture-protection', () => require('react-native-capture-protection/jest/capture-protection-mock') ); ``` ```javascript // In a test file — override and assert import { CaptureProtection } from 'react-native-capture-protection/jest/capture-protection-mock'; test('prevent is called on mount', async () => { await CaptureProtection.prevent(); expect(CaptureProtection.prevent).toHaveBeenCalled(); }); ``` ```javascript test('protectionStatus returns mock value', async () => { const status = await CaptureProtection.protectionStatus(); expect(status).toBe(true); // mock default }); ``` -------------------------------- ### App Switcher-Only Protection (Android) Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt This example demonstrates how to use AppState events to protect content only when the app is backgrounded, simulating the iOS appSwitcher option on Android. ```typescript import { useEffect } from 'react'; import { AppState } from 'react-native'; import { CaptureProtection } from 'react-native-capture-protection'; useEffect(() => { const focusSub = AppState.addEventListener('focus', () => { CaptureProtection.allow(); }); const blurSub = AppState.addEventListener('blur', () => { CaptureProtection.prevent(); }); return () => { focusSub.remove(); blurSub.remove(); }; }, []); ``` -------------------------------- ### Allow Specific Capture Events Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md Configure which capture events are allowed by providing an options object. For example, to allow screenshots and app switcher captures but disallow recording. ```typescript await CaptureProtection.allow({ screenshot: true, record: false, appSwitcher: true, }); ``` -------------------------------- ### Jest Configuration for Capture Protection Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Configure Jest to mock the react-native-capture-protection library for testing purposes. This involves updating your jest.config.js and creating a setup file. ```javascript module.exports = { setupFilesAfterEnv: ['/jest.setup.js'], }; ``` ```javascript jest.mock('react-native-capture-protection', () => require('react-native-capture-protection/jest/capture-protection-mock') ); ``` -------------------------------- ### protectionStatus() Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md Gets the current protection status for all capture events. ```APIDOC ## protectionStatus() ### Description Gets the current protection status for all capture events. ### Returns - **Promise** - Object containing protection status for each event type ### Request Example ```typescript const status = await CaptureProtection.protectionStatus(); console.log('Protection Status:', status); ``` ``` -------------------------------- ### CaptureEventType Enum Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md Represents different types of capture events that can occur, such as screen recording starting or ending, screenshots being taken, or app switching. ```APIDOC ## CaptureEventType Enum Enum representing different types of capture events. ```typescript enum CaptureEventType { NONE = 0, // No capture event RECORDING = 1, // Screen recording started END_RECORDING = 2, // Screen recording ended CAPTURED = 3, // Screen captured APP_SWITCHING = 4, // App switcher used UNKNOWN = 5, // Unknown event ALLOW = 8, // All capture events allowed PREVENT_SCREEN_CAPTURE = 16, // Screen capture prevented PREVENT_SCREEN_RECORDING = 32, // Screen recording prevented PREVENT_SCREEN_APP_SWITCHING = 64, // App switcher capture prevented } ``` ``` -------------------------------- ### Get Prevent Status Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Retrieve the current status of screenshot and screen recording prevention. Returns an object indicating if 'record' or 'screenshot' prevention is active. ```javascript const preventStatus = await CaptureProtection.getPreventStatus(); if (preventStatus?.record) { // screen record is prevent } if (preventStatus?.screenshot) { // screenshot is prevent } ``` -------------------------------- ### Get Protection Status Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md Retrieves the current protection status for all capture events. This returns an object detailing the status of screenshots, recording, and app switcher protection. ```typescript const status = await CaptureProtection.protectionStatus(); console.log('Protection Status:', status); ``` -------------------------------- ### Project Scripts Overview Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Common tasks available as scripts in package.json. ```sh yarn bootstrap yarn typescript yarn lint yarn test yarn example start yarn example android yarn example ios ``` -------------------------------- ### allow(option?: AllowOption) Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md Allows screen capture and recording based on the provided options. Note that for Android, allowing specific events is not available. ```APIDOC ## allow(option?: AllowOption) ### Description Allows screen capture and recording based on the provided options. > For Android, allow specific events is not available. ### Parameters #### Request Body - **option** (AllowOption) - Optional - Configuration object for allowing specific capture events - **screenshot** (boolean) - Optional - Allow screenshots - **record** (boolean) - Optional - Allow screen recording - **appSwitcher** (boolean) - Optional - Allow app switcher capture ### Request Example ```typescript // Allow all capture events await CaptureProtection.allow(); // Allow specific events await CaptureProtection.allow({ screenshot: true, record: false, appSwitcher: true, }); ``` ``` -------------------------------- ### Publish New Versions Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Uses release-it to handle version bumping, tagging, and publishing to npm. ```sh yarn release ``` -------------------------------- ### AllowOption Interface Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md Defines configuration options for explicitly allowing specific capture events, such as screenshots, screen recording, and app switcher usage. ```APIDOC ## AllowOption Interface Configuration options for allowing capture events. ```typescript interface AllowOption { screenshot?: boolean; // Allow screenshots record?: boolean; // Allow screen recording appSwitcher?: boolean; // Allow app switcher capture } ``` ``` -------------------------------- ### Initialize CaptureProtectionProvider Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Wrap your application with CaptureProtectionProvider at the top level to enable capture protection features. ```javascript export default function App() { return ( {...} ); } ``` -------------------------------- ### Android Configuration (React Native CLI) Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Configure Android build settings in `android/app/build.gradle`. Choose between base capture detection (Android 14+) or callbackTiramisu for older Android versions with image media permissions. ```gradle android { defaultConfig { // Standard (Android 14+ capture detection built-in) missingDimensionStrategy "react-native-capture-protection", "base" // OR: enable capture detection on Android 10-13 via READ_MEDIA_IMAGES // missingDimensionStrategy "react-native-capture-protection", "callbackTiramisu" } } ``` -------------------------------- ### Allow Screen Record Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Enable screen recording functionality. Passing `true` as an argument will also remove the screen recording listener. ```javascript // only allow screen recording await CaptureProtection.allowScreenRecord(); // allow screen recording and remove listener await CaptureProtection.allowScreenRecord(true); ``` -------------------------------- ### iOS: Custom Image Overlay for App Switcher Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Configure a custom image overlay to be displayed in the app switcher preview on iOS. ```typescript // iOS: show a custom image overlay in the app switcher await CaptureProtection.prevent({ appSwitcher: { image: require('./assets/privacy-screen.png'), backgroundColor: '#ffffff', contentMode: ContentMode.scaleAspectFit, }, }); ``` -------------------------------- ### Run Unit Tests Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Executes the unit tests for the project using Jest. ```sh yarn test ``` -------------------------------- ### iOS: Custom Text Overlay for Recording Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Configure a custom text overlay to be displayed when screen recording is prevented on iOS. ```typescript // iOS: show a custom text overlay while recording await CaptureProtection.prevent({ record: { text: 'Screen recording is not allowed', textColor: '#ffffff', backgroundColor: '#000000', }, }); ``` -------------------------------- ### Android Configuration (Expo Dev Client) Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Configure capture protection for Expo Dev Client in `app.json` using the plugins array. ```json { "plugins": [ [ "react-native-capture-protection", { "captureType": "base" } ] ] } ``` -------------------------------- ### Allow All Capture Events Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md Call this method without any options to allow all types of screen capture and recording. This effectively disables any previously set protections. ```typescript await CaptureProtection.allow(); ``` -------------------------------- ### Google Play Store Policy Explanation Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md If publishing to the Play Store and using READ_MEDIA_IMAGES for capture detection on older Android versions, provide this explanation. ```text Used by the application to detect screenshots, by checking for screenshot files in the user’s media storage. ``` -------------------------------- ### Define Allow Capture Options Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md Interface for configuring which capture events should be allowed. Use boolean flags to explicitly permit screenshots, recordings, or app switcher usage. ```typescript interface AllowOption { screenshot?: boolean; // Allow screenshots record?: boolean; // Allow screen recording appSwitcher?: boolean; // Allow app switcher capture } ``` -------------------------------- ### Verify Code with TypeScript and ESLint Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md Runs TypeScript for type checking and ESLint for code linting to ensure code quality. ```sh yarn typescript yarn lint ``` -------------------------------- ### Allow Screenshot Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Enable screenshot functionality. Passing `true` as an argument will also remove the screenshot listener. ```javascript // only allow screenshot await CaptureProtection.allowScreenshot(); // allow screenshot and remove listener await CaptureProtection.allowScreenshot(true); ``` -------------------------------- ### Return Value Changes in v1 Source: https://github.com/wn-na/react-native-capture-protection/wiki/how-to-migration-v0-to-v1 Functions like `startPreventRecording`, `stopPreventRecording`, `startPreventScreenshot`, `stopPreventScreenshot`, `setRecordProtectionScreenWithText`, and `setRecordProtectionScreenWithImage` no longer return a boolean in v1. If your logic relies on these return values, update it to use `.catch(err => {})` or a `try-catch` block. ```text in v1, `startPreventRecording`, `stopPreventRecording`, `startPreventScreenshot`, `stopPreventRecording`, `setRecordProtectionScreenWithText`, `setRecordProtectionScreenWithImage` function didn't return `boolean` if used return value for check status, remove or use `.catch(err => {})` or `try-catch` ``` -------------------------------- ### Set Screen Record Image Overlay (iOS) Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Configure an image overlay to be displayed on the screen when screen recording is active and protected. This method is specific to iOS. ```javascript CaptureProtection.setScreenRecordScreenWithImage(require("image.png")); ``` -------------------------------- ### Listen for Capture Events Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Add an event listener to receive notifications about capture events like screenshots or screen recordings. ```javascript CaptureProtection.addEventListener(({ status, isPrevent }) => { // do event }); ``` -------------------------------- ### IOSProtectionScreenOption Interface Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md Represents the options for iOS screen protection, which can either be a custom UI configuration or a simple image. ```APIDOC ## IOSProtectionScreenOption Interface Options for iOS screen protection with custom UI. ```typescript type IOSProtectionScreenOption = | { image: NodeRequire; // Image to display } | IOSProtectionCustomScreenOption; ``` ``` -------------------------------- ### Update Method Names for Screen Recording Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md Screen recording methods have been refactored. Use the unified `prevent()` and `allow()` methods with the `record` option. ```diff - CaptureProtection.preventScreenRecord(); - CaptureProtection.allowScreenRecord(); + CaptureProtection.prevent({ record: true }); + CaptureProtection.allow({ record: true }); ``` -------------------------------- ### addScreenshotListener Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Registers a listener for screenshot events. ```APIDOC ## addScreenshotListener Platform: **`iOS`**, **`Android v1.9.2⬆️`** regist screenshot listener ### Using ```javascript await CaptureProtection.addScreenshotListener(); ``` ``` -------------------------------- ### addScreenRecordListener Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Registers a listener for screen recording events. ```APIDOC ## addScreenRecordListener Platform: **`iOS`** regist screen record listener ### Using ```javascript await CaptureProtection.addScreenRecordListener(); ``` ``` -------------------------------- ### setScreenRecordScreenWithImage Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Sets an image overlay for the 'prevent screen record' feature when the screen is being recorded. ```APIDOC ## setScreenRecordScreenWithImage Platform: **`iOS`** setting `record protect screen` when draw `preventScreenRecord` and screen is recording ### Using ```javascript CaptureProtection.setScreenRecordScreenWithImage(require("image.png")); ``` ``` -------------------------------- ### Update Screen Recording Image Option Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md The method for setting screen recording image has changed. Use the `prevent()` method with the `record.image` option. ```diff - CaptureProtection.setScreenRecordScreenWithImage(require("")); + CaptureProtection.prevent({ record: { image: require("") } }); ``` -------------------------------- ### Expo Dev Client Configuration Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Add this configuration to `app.json` for Expo (Dev Client only) projects to enable default capture prevention. ```json { ... "plugins": [ ..., [ "react-native-capture-protection", { "captureType": "base" } ] ] } ``` -------------------------------- ### Set Screen Record Text Overlay (iOS) Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Configure a text overlay to be displayed on the screen when screen recording is active and protected. This method is specific to iOS. ```javascript CaptureProtection.setScreenRecordScreenWithText("WRITE_TEXT"); ``` -------------------------------- ### Add Screen Record Listener (iOS) Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Register a listener to be notified when a screen recording event occurs. This is available on iOS. ```javascript await CaptureProtection.addScreenRecordListener(); ``` -------------------------------- ### IOSProtectionCustomScreenOption Interface Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md Defines the structure for custom UI elements used in iOS screen protection, allowing customization of text, text color, and background color. ```APIDOC ## IOSProtectionCustomScreenOption Interface Options for iOS screen protection with custom UI. ```typescript type IOSProtectionCustomScreenOption { text: string; // Text to display textColor?: `#${string}`; // Text color in hex format, default is Black backgroundColor?: `#${string}`; // Background color in hex format, default is White } ``` ``` -------------------------------- ### Android CLI Configuration for Capture Detection (Optional) Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Add this configuration to `android/app/build.gradle` for React Native CLI projects to enable capture detection on Android versions below 14. ```gradle defaultConfig { ... missingDimensionStrategy "react-native-capture-protection", "callbackTiramisu" } ``` -------------------------------- ### allowScreenRecord Source: https://github.com/wn-na/react-native-capture-protection/wiki/method Disables screen recording prevention. If `true` is passed, the screen recording listener is also removed. ```APIDOC ## allowScreenRecord Platform: **`iOS`**, **`Android v1.1.0⬆️`** disable prevent screen recording event, if use `true` parameter, remove take screen recording event ### Using ```javascript // only allow screen recording await CaptureProtection.allowScreenRecord(); // allow screen recording and remove listener await CaptureProtection.allowScreenRecord(true); ``` ``` -------------------------------- ### CaptureProtection.allow Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt Re-enables capture events that were previously blocked. Allows all event types when called with no arguments. ```APIDOC ## CaptureProtection.allow(option?) ### Description Re-enables capture events that were previously blocked. When called with no argument all event types are allowed. On Android the single `allow()` call removes all restrictions. ### Method `allow(option?: { screenshot?: boolean; record?: boolean; appSwitcher?: boolean; })` ### Parameters #### Optional Parameters (`option`) - **screenshot** (`boolean`) - Allows screenshots. - **record** (`boolean`) - Allows screen recording. - **appSwitcher** (`boolean`) - Allows app-switcher previews. ### Request Example ```typescript import { CaptureProtection } from 'react-native-capture-protection'; // Allow everything await CaptureProtection.allow(); // Allow only screenshots and app switcher (keep recording blocked) await CaptureProtection.allow({ screenshot: true, record: false, appSwitcher: true, }); ``` ``` -------------------------------- ### Expo Dev Client Configuration for Capture Detection (Optional) Source: https://github.com/wn-na/react-native-capture-protection/blob/main/README.md Add this configuration to `app.json` for Expo (Dev Client only) projects to enable capture detection on Android versions below 14. ```json { ... "plugins": [ ..., [ "react-native-capture-protection", { "captureType": "callbackTiramisu" } ] ] } ``` -------------------------------- ### useCaptureProtection() Hook Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt This hook provides the current protection status, the latest event type, and functions to programmatically prevent or allow screen capture and recording. It requires being used within a `CaptureProtectionProvider`. ```APIDOC ## useCaptureProtection() ### Description Hook for protection state and controls (requires Provider). Must be used inside a `CaptureProtectionProvider`. Returns the current `protectionStatus` flags, the latest `CaptureEventType` status value, and `prevent`/`allow` wrappers that automatically update the context. ### Usage ```tsx import React, { useEffect } from 'react'; import { useCaptureProtection, CaptureEventType, } from 'react-native-capture-protection'; import { View, Text, Button } from 'react-native'; const SecureScreen = () => { const { protectionStatus, status, prevent, allow } = useCaptureProtection(); useEffect(() => { // Activate full protection on mount prevent(); return () => { // Release on unmount allow(); }; }, []); return ( Screenshot blocked: {String(protectionStatus.screenshot)} Recording blocked: {String(protectionStatus.record)} Current event:{' '} {status === CaptureEventType.RECORDING ? 'Recording active!' : 'Safe'}