How to Block Taking Screenshots in React Native | Disable Screen Capture

Screenshot Prevention in Mobile App

Hello Guys, here is how to block taking screenshots in React Native. This post is on the request of many readers who were asking me how to disable/prevent screenshot capture, specially for iOS.

There can be many use-cases where we want to prevent screenshot taking in React Native app, like if we have any temporary QR code generation functionality where we don’t want user to take screenshot. One thing which should be mentioned here is, you should not depend completely upon this functionality to secure your data. User can also capture the image from another mobile device, so plan the things accordingly.

Let’s see how you can restrict a user to take screenshot for Android and iOS

Screenshot Prevention for Android App

Android system provides a built-in mechanism for blocking screenshots which is available from Android Honeycomb (3.0). It literally takes one line of code to put in Activity which you’d like to prevent to be screenshotted. It totally disables this functionality (instead of a screenshot, the user will see the nice error message). Additionally, it blocks all the screen recording options (only black screen is visible as the output) which is a really great add-on.

We just need to add following piece of code to prevent screen capturing

getWindow().setFlags(
  WindowManager.LayoutParams.FLAG_SECURE,
  WindowManager.LayoutParams.FLAG_SECURE
);

Here are the steps to restrict screenshot capturing in React Native App (Android)

1. Open your-project -> android -> app -> src -> main -> java -> com -> your-project-name -> MainActivity.java

2. Add following imports

import android.view.WindowManager;
import android.os.Bundle;

3. Add following onCreate function

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  getWindow().setFlags(
    WindowManager.LayoutParams.FLAG_SECURE,
    WindowManager.LayoutParams.FLAG_SECURE
  );
}

Please note that rooted devices can bypass this mechanism. You might need to detect the rooted device and have to disable your app.

Output Screenshot

Screenshot Prevention for iOS App

If we talk about the iOS then let me clear you one thing, we have tried mostly everything available out there but the result is, we can not restrict a user to take screenshot in iOS by adding any piece of code or using any hack.

After looking some more things we found there is a way to get the detail of screenshot taken, but it will be triggered only after user capture the screenshot.

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
      NotificationCenter.default.addObserver(
        forName: UIApplication.userDidTakeScreenshotNotification, 
        object: nil, queue: nil) { _ in
          print("Hey, You have captured a screenshot")
      }
  }
}

With the help of this we only get the detail of screenshot taken but can’t restrict. We thought what if we can delete the captured screenshot after this trigger, but iOS does not allow any file to delete from external app so it wasn’t worked.

After trying so many things we found that there is no way to restrict the screenshot for iOS until and unless you are ready to pay for it :p

If you want 100% protection against screenshots in iOS then you can use ScreenShieldKit, it is a paid SDK which can help you to create the React Native app for iOS which can be screenshot and video-record proof! We are not sharing any further detail about this SDK as you can find the details on their website but it is the best option which you can find out on the internet till now.

This is how you can block taking screenshots in React Native and disable screen capture. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂