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
fromexpo-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
usingnpm
oryarn
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 * asScreenCapture
import * as ScreenCapture from 'expo-screen-capture';
- Create to
async
functions using thepreventScreenCaptureAsync()
andallowScreenCaptureAsync()
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.
Top comments (1)
superb