https://github.com/huextrat/react-native-screenshot-aware
React Native module for real-time screenshot detection on Android and iOS
https://github.com/huextrat/react-native-screenshot-aware
android ios react-native screenshot
Last synced: 5 months ago
JSON representation
React Native module for real-time screenshot detection on Android and iOS
- Host: GitHub
- URL: https://github.com/huextrat/react-native-screenshot-aware
- Owner: huextrat
- License: mit
- Created: 2024-09-18T14:55:44.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-15T07:34:15.000Z (about 1 year ago)
- Last Synced: 2025-05-16T08:02:10.804Z (about 1 year ago)
- Topics: android, ios, react-native, screenshot
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-screenshot-aware
- Size: 5.85 MB
- Stars: 175
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-side-quests - huextrat/react-native-screenshot-aware - time screenshot detection for React Native — respond when the user screenshots your app (Mobile / React Native & Expo)
README
# React Native Screenshot Aware
Real-time screenshot detection for React Native apps
## Features
- 🚀 Real-time screenshot detection
- 🔄 Cross-platform support (iOS & Android)
- 🎣 Easy-to-use React hooks
- ⚡ Optimized for performance
- 📱 Supports Android 14+ (API level 34+) and iOS 14+
- 🏗️ Supports the new architecture for React Native
## Compatibility
- React Native <0.76, use version 1.2.2 or below 1.2.0 of this package (1.2.1 is buggy)
- React Native >=0.76, use version 1.3.0 or later
- React Native >=0.79, use version 1.3.10 or later
## Installation
```sh
yarn add react-native-screenshot-aware
```
or
```sh
npm install react-native-screenshot-aware
```
## Important Notes
### Android
- Supports Android 14+ (API level 34 and above)
- Utilizes the latest Android API for efficient screenshot detection
- Leverages the new `DETECT_SCREEN_CAPTURE` permission introduced in Android 14
- Provides a more privacy-friendly and performant approach to screenshot detection
## Expo
For Expo projects, you can use the Expo plugin in `app.json`
```json
"plugins": [
"react-native-screenshot-aware"
],
```
or add the permission manually to your `app.json`:
```json
"android": {
"permissions": ["android.permission.DETECT_SCREEN_CAPTURE"]
}
```
## Bare RN
### Permissions
To use the screenshot detection feature on Android, you need to add the following permission to your `AndroidManifest.xml` file:
```xml
```
> **Note**: Callbacks will never be triggered on devices running Android versions below 14. This is due to the reliance on the new `DETECT_SCREEN_CAPTURE` permission and APIs introduced in Android 14, which are not available in earlier versions.
> **Note**: The decision to support only Android 14+ is based on the introduction of new, dedicated screenshot detection APIs. These APIs offer improved performance and respect user privacy better than previous methods. For more details, see the [Android 14 screenshot detection documentation](https://developer.android.com/about/versions/14/features/screenshot-detection).
## API Reference
### `useScreenshotAware(callback)`
This hook allows you to detect when a screenshot is taken on the device. It takes a callback function as an argument, which will be executed whenever a screenshot event is detected.
#### Parameters
- `callback` (function): A function to be called when a screenshot is detected. This function does not take any arguments.
#### Example
```javascript
import { useScreenshotAware } from 'react-native-screenshot-aware';
useScreenshotAware(() => {
console.log('A screenshot was taken!');
});
```
### `addListener(callback)`
This function allows you to add a listener for the screenshot event. It takes a callback function as an argument, which will be executed whenever a screenshot event is detected.
#### Parameters
- `callback` (function): A function to be called when a screenshot is detected. This function does not take any arguments.
#### Example
```javascript
import ScreenshotAware from 'react-native-screenshot-aware';
useEffect(() => {
const listener = ScreenshotAware.addListener(() => {
console.log('A screenshot was taken!');
});
return () => {
listener.remove();
}
}, [])
```
### `removeAllListeners()`
This function allows you to remove all listeners for the screenshot event.
#### Example
```javascript
import ScreenshotAware from 'react-native-screenshot-aware';
function removeScreenshotListeners() {
ScreenshotAware.removeAllListeners();
}
```
## Jest Mocks
```javascript
jest.mock('react-native-screenshot-aware', () => ({
useScreenshotAware: jest.fn(),
addListener: jest.fn().mockReturnValue({
remove: jest.fn(),
}),
removeAllListeners: jest.fn(),
}));
```
## Contributing
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for more details.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Support
If you like this project, please consider supporting it by giving it a ⭐️ on GitHub!
## Acknowledgements
- [create-react-native-library](https://github.com/callstack/react-native-builder-bob) for the initial project setup