Apps prevent users from recording screens or taking screenshots of screens with sensitive informations. When screen capture is disabled on an app, users usually gets a notification informing them the feature have been disabled while users who tries to record the screen(s) see only dark screens when viewing the recording.

React Native Screen Capture: Prevent Screen Recording and Screenshot

How to Prevent Screen Capture (Screenshot and Screen Record) in React Native

To prevent screen capture on a React Native app, the following package is installed and implemented as below.

• Install expo-screen-capture using expo.

npx expo install expo-screen-capture

You can read more on the documentation here

• Import usePreventScreenCapture from expo-screen-capture on any of your screens.

import { usePreventScreenCapture } from 'expo-screen-capture';

• Call the usePreventScreenCapture(); function on the screen.

See full code below:

import { usePreventScreenCapture } from 'expo-screen-capture';
import React from 'react';
import { Text, View } from 'react-native';

export default function ScreenCaptureExample() {
  usePreventScreenCapture();

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>As long as this component is mounted, this screen is unrecordable!</Text>
    </View>
  );
}

The above steps prevents screen capture (screenshot and screen record) for the entire app. But sometimes, we just want to prevent screenshot or screen record on certain screens and not all the screens.

React Native: How to Prevent Screen Capture (Screenshot and Record) for Selected Screens (Single or more Screens)

To prevent screenshot on selected screens and not the entire app, we will be activating the prevent screen capture function when focus is on the selected screen and disable the feature when the screen is out of focus. We will simply be using the useIsFocused function of @react-navigation/native to check when the selected screen is in focus or out of focus and the preventScreenCaptureAsync and allowScreenCaptureAsync functions from expo-screen-capture we installed in the above steps to activate and deactivate the functionality respectively.

Here are the steps to prevent screen capture on selected screens.

• First install the react-navigation using npm or yarn as below:

npm install @react-navigation/native

Here is the full documentation on how to install the react-navigation

• Import the useIsFocused function from @react-navigation/native

import { useIsFocused } from '@react-navigation/native';

• Call the useIsFocused() you just imported and assign it to a variable on the selected screen.

const isFocused = useIsFocused();

• Now, install expo-screen-capture using expo if you've not done that already.

• Import all the functions from expo-screen-capture using the wild card * as ScreenCapture
  

import * as ScreenCapture from 'expo-screen-capture';

• Create to async functions using the preventScreenCaptureAsync() and allowScreenCaptureAsync() respectively.

const activate = async () => {
    await ScreenCapture.preventScreenCaptureAsync();
  };

  const deactivate = async () => {
    await ScreenCapture.allowScreenCaptureAsync();
  };

• Call the activate function just created when screen is in focus and call the deactivate function when the screen is out of focus as shown in the full code below.

import * as React from 'react';
import { Button, StyleSheet, View } from 'react-native';
import * as ScreenCapture from 'expo-screen-capture';
import { useIsFocused } from '@react-navigation/native';

export default function LoginScreen() {
 // This hook returns `true` if the screen is focused, `false` otherwise
  const isFocused = useIsFocused();

  const activate = async () => {
    await ScreenCapture.preventScreenCaptureAsync();
  };

  const deactivate = async () => {
    await ScreenCapture.allowScreenCaptureAsync();
  };

if(isFocused){
       activate();
   }else{
       deactivate();
   }


  return (
    <View style={styles.container}>
      ...
    </View>
  );
}

The above prevents screen capture just on Login screen and allows screen capture on all other screens except specified.

Thank you for reading. I will like to here from you in the comments section.