Web Analytics
Skip to main content

Get started

A native React Native library for preventing your app from screenshots and screen recordings, with powerful event detection capabilities.

✨ Key Features​

🛡️ Screenshot and Screen Recording prevention​

Prevent your app's sensitive content from being captured or recorded, with 3 separated overlay types:

  • Solid color overlay — Display a solid color (e.g., black, white, or your custom hex color).
  • Blur effect — Apply a blur overlay that obscures the content.
  • Custom image — Show your own image, logo, or watermark during capture.

📸 Screenshot Detection​

Real-time detection of screenshot events, triggered immediately when a screenshot is captured

  • React instantly — Execute custom logic when a screenshot is taken.
  • Access screenshot metadata — Retrieve the file path of the captured screenshot on the device for your own purposes.
  • Control event screenshot — Limit the number of screenshot events.
  • Track status — check ScreenGuard is currently active when the screenshot event occurs.

🎥 Screen Recording Detection​

Monitor screen recording activity in real-time.

  • Detect recording state — Know when screen recording begins and ends on the device.
  • Respond to recording attempts — Execute custom actions when recording is detected.
  • Cross-platform support — Works on iOS 13+ and Android 15+ (API 35+).

📝 Activity Logging​

Comprehensive logging for editing or debugging purposes.

How It Works​

React Native ScreenGuard bridges native code (iOS Objective-C, Android Java) and JavaScript, using FLAG_SECURE on Android and UITextField with customizable on iOS.

Quick Start
  1. Install the library
  2. Initialize settings with initSettings()
  3. Activate ScreenGuard with register(), registerWithBlurView(), or registerWithImage()
  4. (Optional) Listen to events with useSGScreenShot or useSGScreenRecord hooks

Pre-requisites​

If you're already familiar with JavaScript, React and React Native, then you'll be able to get moving with React Native Screenguard quickly! If not, we highly recommend you to gain some basic knowledge first, then come back here when you're done.

Here are some resources to help you out:

  1. React Native Express (Sections 1 to 4)
  2. Main Concepts of React
  3. React Hooks
  4. Native module intro

Minimum requirements​

  • Node.js version 15.0 or above:
    • When installing Node.js, you are recommended to check all checkboxes related to dependencies.
  • react-native >= 0.68
  • Android SDK >= 29
  • Cocoapods >= 1.1.4
  • iOS minimum deployment target >= 13
  • typescript >= 4.0.0