React Native: Prevent Screen Capture on Selected Screens
Tags: reactnative
Published: 2023-01-07 17:05:22

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](https://docs.expo.dev/versions/latest/sdk/screen-capture/)

- 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](https://reactnavigation.org/docs/getting-started/)

- 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.