### 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'}
);
};
```
### Returns
- `protectionStatus` (object): An object containing boolean flags for `screenshot`, `record`, and `appSwitcher` protection.
- `status` (CaptureEventType): The latest capture event type detected.
- `prevent` (function): A function to activate capture protection. Accepts an optional `PreventOption` object.
- `allow` (function): A function to deactivate capture protection. Accepts an optional `AllowOption` object.
```
--------------------------------
### useCaptureDetection()
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md
React hook for managing capture protection state.
```APIDOC
## useCaptureDetection()
### Description
React hook for managing capture protection state.
### Returns
- **{ isPrevent: boolean; status: CaptureProtectionModuleStatus; }** - An object containing the capture protection state.
- **isPrevent** (boolean) - Whether any capture is prevented
- **status** (CaptureProtectionModuleStatus) - Current protection status
### Example
```typescript
const { isPrevent, status } = useCaptureDetection();
```
```
--------------------------------
### PreventOption Interface
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md
Specifies configuration options for preventing various capture events, including screenshots, screen recording, and app switcher usage.
```APIDOC
## PreventOption Interface
Configuration options for preventing capture events.
```typescript
interface PreventOption {
screenshot?: boolean; // Prevent screenshots
record?: boolean | IOSProtectionScreenOption; // Prevent screen recording
appSwitcher?: boolean | IOSProtectionScreenOption; // Prevent app switcher capture
}
```
```
--------------------------------
### useCaptureDetection() Hook
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
A lightweight, standalone hook that registers its own native listener to provide the current protection status and event type without requiring a `CaptureProtectionProvider`. It does not offer `prevent`/`allow` controls.
```APIDOC
## useCaptureDetection()
### Description
Lightweight detection hook (no Provider needed). Standalone hook that registers its own native listener. Returns `protectionStatus` and `status` derived from live native events. Does not provide `prevent`/`allow` — use alongside direct `CaptureProtection` calls.
### Usage
```tsx
import React from 'react';
import {
useCaptureDetection,
CaptureProtection,
CaptureEventType,
} from 'react-native-capture-protection';
import { Text, View } from 'react-native';
const DetectionBanner = () => {
const { status, protectionStatus } = useCaptureDetection();
return (
{status === CaptureEventType.RECORDING && (
⚠️ Screen is being recorded
)}
{status === CaptureEventType.CAPTURED && (
📸 Screenshot taken
)}
Protection active: screenshot={String(protectionStatus.screenshot)},
record={String(protectionStatus.record)}
);
};
```
### Returns
- `protectionStatus` (object): An object containing boolean flags for `screenshot`, `record`, and `appSwitcher` protection.
- `status` (CaptureEventType): The latest capture event type detected.
```
--------------------------------
### Android CLI Configuration
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 default capture prevention.
```gradle
defaultConfig {
...
missingDimensionStrategy "react-native-capture-protection", "base"
}
```
--------------------------------
### addEventListener
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Adds an event listener to capture protection events, providing the current status and prevention state.
```APIDOC
## addEventListener
Platform: **`iOS`**, **`Android v1.9.2⬆️`**
### Using
```javascript
CaptureProtection.addEventListener(({ status, isPrevent }) => {
// do event
});
```
```
--------------------------------
### Update Screen Recording Text Option
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md
The method for setting screen recording text has changed. Use the `prevent()` method with the `record.text` option.
```diff
- CaptureProtection.setScreenRecordScreenWithText("test");
+ CaptureProtection.prevent({ record: { text: "test" } });
```
--------------------------------
### CaptureProtection Class Methods
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Provides static methods for directly controlling capture protection, useful for scenarios where hooks are not suitable or for specific platform implementations like Android app switcher protection.
```APIDOC
## CaptureProtection
### Description
Provides static methods for direct control over capture protection, useful for specific scenarios or platform implementations.
### Methods
- `CaptureProtection.prevent(options?: PreventOption)`: Activates capture protection. Accepts an optional `PreventOption` object to specify which types of capture to prevent.
- `CaptureProtection.allow(options?: AllowOption)`: Deactivates capture protection. Accepts an optional `AllowOption` object to specify which types of capture to allow.
### Example (Android App Switcher Protection)
```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();
};
}, []);
```
```
--------------------------------
### Update Imports
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md
Adjust your import statements to include new types and hooks available in v2.x, such as `useCaptureProtection` and `CaptureEventType`.
```diff
- import {
- CaptureProtection,
- CaptureProtectionModuleStatus,
- isCapturedStatus
- } from 'react-native-capture-protection';
+ import {
+ CaptureProtection,
+ useCaptureProtection,
+ CaptureEventType
+ } from 'react-native-capture-protection';
```
--------------------------------
### setScreenRecordScreenWithText
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Sets a text overlay for the 'prevent screen record' feature when the screen is being recorded.
```APIDOC
## setScreenRecordScreenWithText
Platform: **`iOS`**
setting `record protect screen` when draw `preventScreenRecord` and screen is recording
### Using
```javascript
CaptureProtection.setScreenRecordScreenWithText("WRITE_TEXT");
```
```
--------------------------------
### CaptureProtection.protectionStatus
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Queries the current protection state, returning an object indicating whether screenshot, recording, and app switcher protections are active.
```APIDOC
## protectionStatus()
### Description
Returns the current protection state as a `CaptureProtectionModuleStatus` object. On Android, all three fields mirror the same boolean value (all blocked or none).
### Method
`protectionStatus`
### Returns
- `Promise` - A promise that resolves to an object with the following properties:
- **screenshot** (boolean) - Indicates if screenshot protection is active.
- **record** (boolean) - Indicates if screen recording protection is active.
- **appSwitcher** (boolean) - Indicates if app switcher protection is active.
```
--------------------------------
### useCaptureProtection()
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md
React hook for managing capture protection state. Requires a CaptureProtectionProvider to be declared.
```APIDOC
## useCaptureProtection()
### Description
React hook for managing capture protection state.
> In order to use that hook, you need to declare a `CaptureProtectionProvider`
### Returns
- **{ isPrevent: boolean; status: CaptureProtectionModuleStatus; prevent: CaptureProtectionFunction['prevent']; allow: CaptureProtectionFunction['allow']; }** - An object containing the capture protection state and control functions.
- **isPrevent** (boolean) - Whether any capture is prevented
- **status** (CaptureProtectionModuleStatus) - Current protection status
- **prevent** (function) - Function to prevent capture events
- **allow** (function) - Function to allow capture events
### Example
- `App.tsx`
```typescript
return ...;
```
```typescript
const { isPrevent, status, allow, prevent } = useCaptureProtection();
```
```
--------------------------------
### Update Method Names for App Switcher Protection
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md
App switcher protection methods have been refactored. Use the unified `prevent()` and `allow()` methods with the `appSwitcher` option.
```diff
- CaptureProtection.preventBackground();
- CaptureProtection.allowBackground();
+ CaptureProtection.prevent({ appSwitcher: true });
+ CaptureProtection.allow({ appSwitcher: true });
```
--------------------------------
### Integrate CaptureProtectionProvider
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Wraps your application or a specific subtree to make capture protection state and control methods accessible via React context. This provider must be an ancestor of any component using `useCaptureProtection`.
```tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { CaptureProtectionProvider } from 'react-native-capture-protection';
export default function App() {
return (
{/* rest of the app */}
);
}
```
--------------------------------
### Update Method Call for Screen Recording
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md
Refactor screen recording prevention calls to use the new `prevent()` method with the `record: true` option.
```diff
- CaptureProtection.preventScreenRecord();
+ CaptureProtection.prevent({ record: true });
```
--------------------------------
### Function Renames in v1
Source: https://github.com/wn-na/react-native-capture-protection/wiki/how-to-migration-v0-to-v1
This diff shows the renamed functions from v0 to v1. Update your code to use the new function names.
```diff
- addRecordEventListener
+ addEventListener
- hasRecordEventListener
+ hasListener
- setRecordProtectionScreenWithText
+ setScreenRecordScreenWithText
- setRecordProtectionScreenWithImage
+ setScreenRecordScreenWithImage
- isPreventScreenshot
- isRecording
+ isScreenRecording
- startPreventRecording
- stopPreventRecording
+ allowScreenRecord
+ preventScreenRecord
- startPreventScreenshot
- stopPreventScreenshot
+ allowScreenshot
+ preventScreenshot
+ addScreenshotListener
+ removeScreenshotListener
+ addScreenRecordListener
+ removeScreenRecordListener
+ getPreventStatus
```
--------------------------------
### CaptureProtection.prevent
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Prevents screenshots, screen recording, and/or app-switcher previews. Supports custom overlays on iOS for recording and app switcher events.
```APIDOC
## CaptureProtection.prevent(option?)
### Description
Prevents screenshots, screen recording, and/or app-switcher previews. When called with no argument, all three event types are blocked. On iOS, `record` and `appSwitcher` accept either a boolean or an `IOSProtectionScreenOption` to display a custom overlay. On Android only the blanket `prevent()` call (no options) is applied—platform ignores per-type granularity.
### Method
`prevent(option?: { screenshot?: boolean; record?: boolean | IOSProtectionScreenOption; appSwitcher?: boolean | IOSProtectionScreenOption; })`
### Parameters
#### Optional Parameters (`option`)
- **screenshot** (`boolean`) - Prevents screenshots.
- **record** (`boolean` | `IOSProtectionScreenOption`) - Prevents screen recording. On iOS, can be an object to configure a custom overlay.
- `IOSProtectionScreenOption` (iOS only):
- **text** (`string`) - Text to display on the overlay.
- **textColor** (`string`) - Color of the text.
- **backgroundColor** (`string`) - Background color of the overlay.
- **image** (`ImageSourcePropType`) - Custom image to display on the overlay.
- **contentMode** (`ContentMode`) - How the image should be resized to fit its container.
- **appSwitcher** (`boolean` | `IOSProtectionScreenOption`) - Prevents app-switcher previews. On iOS, can be an object to configure a custom overlay.
### Request Example
```typescript
import { CaptureProtection, ContentMode } from 'react-native-capture-protection';
// Prevent everything (iOS + Android)
await CaptureProtection.prevent();
// Prevent specific events (iOS only for granularity)
await CaptureProtection.prevent({
screenshot: true,
record: true,
appSwitcher: true,
});
// iOS: show a custom text overlay while recording
await CaptureProtection.prevent({
record: {
text: 'Screen recording is not allowed',
textColor: '#ffffff',
backgroundColor: '#000000',
},
});
// 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,
},
});
```
```
--------------------------------
### hasListener
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Checks if any capture protection listeners are currently registered and returns their status.
```APIDOC
## hasListener
Platform: **`iOS`**, **`Android v1.9.2⬆️`**
return listener regist status
### Using
```javascript
const captureListener = await CaptureProtection.hasListener();
if (captureListener?.record) {
// record listener is exist
}
if (captureListener?.screenshot) {
// screenshot listener is exist
}
```
```
--------------------------------
### prevent(option?: PreventOption)
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md
Prevents screen capture and recording based on the provided options. Note that for Android, preventing specific events is not available.
```APIDOC
## prevent(option?: PreventOption)
### Description
Prevents screen capture and recording based on the provided options.
> For Android, prevent specific events is not available.
### Parameters
#### Request Body
- **option** (PreventOption) - Optional - Configuration object for preventing specific capture events
- **screenshot** (boolean) - Optional - Prevent screenshots
- **record** (boolean | IOSProtectionScreenOption) - Optional - Prevent screen recording
- **appSwitcher** (boolean | IOSProtectionScreenOption) - Optional - Prevent app switcher capture
### Request Example
```typescript
// Prevent all capture events
await CaptureProtection.prevent();
// Prevent specific events
await CaptureProtection.prevent({
screenshot: true,
record: true,
appSwitcher: true,
});
```
```
--------------------------------
### CaptureProtectionProvider
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
A context API provider that should be used at the top level of your application to enable capture protection features.
```APIDOC
## CaptureProtectionProvider
Platform: **`iOS v1.5.0⬆️`**, **`Android v1.5.0⬆️`**
Context Api Provider
recommend use top-level
### Using
```javascript
export default function App() {
return (
{...}
);
}
```
```
--------------------------------
### Use useCaptureProtection Hook
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Utilize the useCaptureProtection hook within components wrapped by CaptureProtectionProvider to manage protection states and actions. It provides `isPrevent`, `status`, `bindProtection`, and `releaseProtection`.
```javascript
const { isPrevent, status, bindProtection, releaseProtection } = useCaptureProtection();
React.useEffect(() => {
bindProtection();
return () => {
releaseProtection(true);
};
}, []);
...
```
--------------------------------
### Request Android READ_MEDIA_IMAGES Permission
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
On Android, this requests the `READ_MEDIA_IMAGES` permission, which is necessary for capture detection on Android 10–13 with the `callbackTiramisu` build. It returns `true` if permission is granted.
```typescript
import { Platform } from 'react-native';
import { CaptureProtection } from 'react-native-capture-protection';
const setupAndroid = async () => {
if (Platform.OS !== 'android') return;
const granted = await CaptureProtection.requestPermission();
if (granted) {
console.log('Permission granted — capture detection active');
CaptureProtection.prevent();
} else {
console.warn('Permission denied — capture detection unavailable on <14');
}
};
```
--------------------------------
### getPreventStatus
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Retrieves the current prevention status for both screen recording and screenshots.
```APIDOC
## getPreventStatus
Platform: **`iOS`**, **`Android v1.1.0⬆️`**
return prevent event status
### Using
```javascript
const preventStatus = await CaptureProtection.getPreventStatus();
if (preventStatus?.record) {
// screen record is prevent
}
if (preventStatus?.screenshot) {
// screenshot is prevent
}
```
```
--------------------------------
### Use Capture Protection Hook
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Use this hook inside a CaptureProtectionProvider to access protection status and controls. It returns protection flags, the latest event status, and wrappers to update the context.
```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'}
prevent()} />
allow()} />
);
};
```
--------------------------------
### Define iOS Screen Protection Option
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md
Union type for iOS screen protection options, allowing either an image or custom text/color configuration. Use this to specify how the protection screen should appear.
```typescript
type IOSProtectionScreenOption =
| {
image: NodeRequire; // Image to display
}
| IOSProtectionCustomScreenOption;
```
--------------------------------
### Define Prevent 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 prevented. Supports boolean flags for simple prevention or custom iOS screen options for recording and app switcher.
```typescript
interface PreventOption {
screenshot?: boolean; // Prevent screenshots
record?: boolean | IOSProtectionScreenOption; // Prevent screen recording
appSwitcher?: boolean | IOSProtectionScreenOption; // Prevent app switcher capture
}
```
--------------------------------
### CaptureProtectionModuleStatus Interface
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md
Indicates the current protection status for different capture events within the module, specifying whether each is protected or not.
```APIDOC
## CaptureProtectionModuleStatus Interface
Status of protection for different capture events.
```typescript
interface CaptureProtectionModuleStatus {
screenshot: boolean; // Screenshot protection status
record: boolean; // Screen recording protection status
appSwitcher: boolean; // App switcher protection status
}
```
```
--------------------------------
### Fix Formatting Errors
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/CONTRIBUTING.md
Automatically fixes code formatting issues detected by ESLint.
```sh
yarn lint --fix
```
--------------------------------
### preventScreenshot
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Enables screenshot prevention. When a screenshot is attempted, the image will appear as a black screen.
```APIDOC
## preventScreenshot
Platform: **`iOS`**, **`Android v1.1.0⬆️`**
prevent screenshot event, if user take screenshot, screenshot image will show black screen
### Using
```javascript
await CaptureProtection.preventScreenshot();
```
```
--------------------------------
### allowScreenshot
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Disables screenshot prevention. If `true` is passed, the screenshot listener is also removed.
```APIDOC
## allowScreenshot
Platform: **`iOS`**, **`Android v1.1.0⬆️`**
disable prevent screenshot event, if use `true` parameter, remove take screenshot event
### Using
```javascript
// only allow screenshot
await CaptureProtection.allowScreenshot();
// allow screenshot and remove listener
await CaptureProtection.allowScreenshot(true);
```
```
--------------------------------
### isScreenRecording()
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/method.md
Checks if the screen is currently being recorded. Note that this behavior may not work properly on Android.
```APIDOC
## isScreenRecording()
### Description
Checks if the screen is currently being recorded.
> This behavior may not work properly on **Android**
### Returns
- **Promise** - `true` if screen is being recorded, `false` otherwise
### Request Example
```typescript
const isRecording = await CaptureProtection.isScreenRecording();
console.log('Is Recording:', isRecording);
```
```
--------------------------------
### Use Capture Detection Hook
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
A standalone hook for lightweight detection that registers its own native listener. It returns protection status and status derived from live native events, but does not provide prevent/allow controls.
```tsx
import React from 'react';
import {
useCaptureDetection,
CaptureProtection,
CaptureEventType,
} from 'react-native-capture-protection';
import { Text, View } from 'react-native';
const DetectionBanner = () => {
const { status, protectionStatus } = useCaptureDetection();
return (
{status === CaptureEventType.RECORDING && (
⚠️ Screen is being recorded
)}
{status === CaptureEventType.CAPTURED && (
📸 Screenshot taken
)}
Protection active: screenshot={String(protectionStatus.screenshot)},
record={String(protectionStatus.record)}
);
};
```
--------------------------------
### Add Screenshot Listener
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Register a listener to be notified when a screenshot event occurs. This is available on iOS and Android.
```javascript
await CaptureProtection.addScreenshotListener();
```
--------------------------------
### Add and Remove Capture Event Listener
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Registers a listener for capture-related events like recording start/end, screenshots, or app switching. Ensure the returned subscription is used to remove the listener for cleanup.
```typescript
import {
useEffect
} from 'react';
import {
CaptureProtection,
CaptureEventType,
} from 'react-native-capture-protection';
useEffect(() => {
const subscription = CaptureProtection.addListener((eventType) => {
switch (eventType) {
case CaptureEventType.RECORDING:
console.log('Screen recording started');
break;
case CaptureEventType.END_RECORDING:
console.log('Screen recording ended');
break;
case CaptureEventType.CAPTURED:
console.log('Screenshot taken');
break;
case CaptureEventType.APP_SWITCHING:
console.log('App switcher opened');
break;
case CaptureEventType.ALLOW:
console.log('All capture events now allowed');
break;
default:
console.log('Other event:', eventType);
}
});
return () => {
if (subscription) {
CaptureProtection.removeListener(subscription);
}
};
}, []);
```
--------------------------------
### Allow Specific Capture Events
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Re-enable specific capture events while keeping others blocked. Note that on Android, `allow()` without arguments removes all restrictions.
```typescript
// Allow only screenshots and app switcher (keep recording blocked)
await CaptureProtection.allow({
screenshot: true,
record: false,
appSwitcher: true,
});
```
--------------------------------
### Define iOS Custom Screen Option
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/type.md
Defines the structure for custom text and color options for iOS screen protection overlays. Specify text, text color, and background color.
```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
}
```
--------------------------------
### Update Event Listener Logic
Source: https://github.com/wn-na/react-native-capture-protection/blob/main/docs/MIGRATION.md
The event handling logic for listeners has been updated. Use a switch statement with `CaptureEventType` to handle different event types.
```diff
- CaptureProtection.addListener((event) => {
- // Handle event
- });
+ CaptureProtection.addListener((event) => {
+ switch (event) {
+ case CaptureEventType.CAPTURED:
+ // Handle capture
+ break;
+ case CaptureEventType.RECORDING:
+ // Handle recording
+ break;
+ // ... other cases
+ }
+ });
```
--------------------------------
### Prevent 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 prevent all types of screen capture and recording. Ensure the library is properly initialized.
```typescript
await CaptureProtection.prevent();
```
--------------------------------
### preventScreenRecord
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Enables screen recording prevention. When screen recording is active, the screen will display a 'prevent screen record' overlay. If `true` is passed, the change is immediate even if recording is already in progress.
```APIDOC
## preventScreenRecord
Platform: **`iOS`**, **`Android v1.1.0⬆️`**
prevent screen recording event, if user recording screen, screen change `record protect screen`
when prevent recording to already record, use `true` parameter
### Using
```javascript
// prevent screen record
await CaptureProtection.preventScreenRecord();
// prevent screen record, if user already record, change immediate
await CaptureProtection.preventScreenRecord(true);
```
```
--------------------------------
### Check Listener Status
Source: https://github.com/wn-na/react-native-capture-protection/wiki/method
Determine if screenshot or screen recording listeners are currently registered. Returns an object indicating the status of 'record' and 'screenshot' listeners.
```javascript
const captureListener = await CaptureProtection.hasListener();
if (captureListener?.record) {
// record listener is exist
}
if (captureListener?.screenshot) {
// screenshot listener is exist
}
```
--------------------------------
### Allow All Capture Events
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
Use `CaptureProtection.allow()` to re-enable all capture events that were previously blocked. This applies to all event types on Android.
```typescript
import { CaptureProtection } from 'react-native-capture-protection';
// Allow everything
await CaptureProtection.allow();
```
--------------------------------
### CaptureProtectionProvider
Source: https://context7.com/wn-na/react-native-capture-protection/llms.txt
A React context provider that makes protection state and control methods available throughout the React component tree. It must wrap any components that utilize the `useCaptureProtection` hook.
```APIDOC
## CaptureProtectionProvider
### Description
Context provider for React tree integration. Wraps the application (or a subtree) to make protection state and control methods available via context. Must be an ancestor of any component that calls `useCaptureProtection`.
### Usage
```tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { CaptureProtectionProvider } from 'react-native-capture-protection';
export default function App() {
return (
{/* rest of the app */}
);
}
```
```