This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 52).
A library that allows you to protect screens in your app from being captured or recorded.
expo-screen-capture
allows you to protect screens in your app from being captured or recorded, as well as be notified if a screenshot is taken while your app is foregrounded. The two most common reasons you may want to prevent screen capture are:
This is especially important on Android since the android.media.projection
API allows third-party apps to perform screen capture or screen sharing (even if the app is in the background).
On Android, the screen capture callback works without additional permissions only for Android 14+. You don't need to request or check permissions for blocking screen capture or using the callback on Android 14+.
If you want to use the screen capture callback on Android 13 or lower, you need to add the READ_MEDIA_IMAGES
permission to your AndroidManifest.xml file. You can use the android.permissions
key in your app config. See Android permissions for more information.
TheREAD_MEDIA_IMAGES
permission can be added only for apps needing broad access to photos. See Details on Google Play's Photo and Video Permissions policy.
Currently, taking screenshots on iOS cannot be prevented. This is due to underlying OS limitations.
-
npx expo install expo-screen-capture
If you are installing this in an existing React Native app, start by installing expo
in your project. Then, follow the additional instructions as mentioned by the library's README under "Installation in bare React Native projects" section.
import { usePreventScreenCapture } from 'expo-screen-capture';
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>
);
}
import * as ScreenCapture from 'expo-screen-capture';
import { useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default function ScreenCaptureExample() {
const activate = async () => {
await ScreenCapture.preventScreenCaptureAsync();
};
const deactivate = async () => {
await ScreenCapture.allowScreenCaptureAsync();
};
return (
<View style={styles.container}>
<Button title="Activate" onPress={activate} />
<Button title="Deactivate" onPress={deactivate} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
import * as ScreenCapture from 'expo-screen-capture';
import { useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default function useScreenCaptureCallback() {
// Only use this if you add the READ_MEDIA_IMAGES permission to your AndroidManifest.xml
const hasPermissions = async () => {
const { status } = await ScreenCapture.requestPermissionsAsync();
return status === 'granted';
};
useEffect(() => {
let subscription;
const addListenerAsync = async () => {
if (await hasPermissions()) {
subscription = ScreenCapture.addScreenshotListener(() => {
alert('Thanks for screenshotting my beautiful app 😊');
});
} else {
console.error('Permissions needed to subscribe to screenshot events are missing!');
}
};
addListenerAsync();
return () => {
subscription?.remove();
};
}, []);
}
import * as ScreenCapture from 'expo-screen-capture';
Parameter | Type |
---|---|
options(optional) | PermissionHookOptions<object> |
Check or request permissions necessary for detecting when a screenshot is taken.
This uses both requestPermissionsAsync
and getPermissionsAsync
to interact with the permissions.
[null | PermissionResponse, RequestPermissionMethod<PermissionResponse>, GetPermissionMethod<PermissionResponse>]
Example
const [status, requestPermission] = ScreenCapture.usePermissions();
Parameter | Type | Description |
---|---|---|
key(optional) | string | If provided, this will prevent multiple instances of this hook or the
Default: 'default' |
A React hook to prevent screen capturing for as long as the owner component is mounted.
void
Parameter | Type | Description |
---|---|---|
key(optional) | string | This will prevent multiple instances of the Default: 'default' |
Re-allows the user to screen record or screenshot your app. If you haven't called
preventScreenCapture()
yet, this method does nothing.
Promise<void>
Checks user's permissions for detecting when a screenshot is taken.
Only Android requires additional permissions to detect screenshots. On iOS devices, this method will always resolve to a
granted
permission response.
Promise<PermissionResponse>
A promise that resolves to a PermissionResponse
object.
Returns whether the Screen Capture API is available on the current device.
Promise<boolean>
A promise that resolves to a boolean
indicating whether the Screen Capture API is available on the current
device.
Parameter | Type | Description |
---|---|---|
key(optional) | string | Optional. If provided, this will help prevent multiple instances of the Default: 'default' |
Prevents screenshots and screen recordings until allowScreenCaptureAsync
is called or the app is restarted. If you are
already preventing screen capture, this method does nothing (unless you pass a new and unique key
).
Please note that on iOS, this will only prevent screen recordings, and is only available on iOS 11 and newer. On older iOS versions, this method does nothing.
Promise<void>
Asks the user to grant permissions necessary for detecting when a screenshot is taken.
Only Android requires additional permissions to detect screenshots. On iOS devices, this method will always resolve to a
granted
permission response.
Promise<PermissionResponse>
A promise that resolves to a PermissionResponse
object.
Parameter | Type | Description |
---|---|---|
listener | () => void | The function that will be executed when the user takes a screenshot. This function accepts no arguments. |
Adds a listener that will fire whenever the user takes a screenshot while the app is foregrounded.
On Android, this method requires the READ_EXTERNAL_STORAGE
permission. You can request this
with MediaLibrary.requestPermissionsAsync()
.
EventSubscription
A Subscription
object that you can use to unregister the listener, either by calling
remove()
or passing it to removeScreenshotListener
.
Parameter | Type | Description |
---|---|---|
subscription | EventSubscription | Subscription returned by |
Removes the subscription you provide, so that you are no longer listening for screenshots.
You can also call remove()
on that Subscription
object.
void
Example
let mySubscription = addScreenshotListener(() => {
console.log("You took a screenshot!");
});
...
mySubscription.remove();
// OR
removeScreenshotListener(mySubscription);
An object obtained by permissions get and request functions.
Property | Type | Description |
---|---|---|
canAskAgain | boolean | Indicates if user can be asked again for specific permission. If not, one should be directed to the Settings app in order to enable/disable the permission. |
expires | PermissionExpiration | Determines time when the permission expires. |
granted | boolean | A convenience boolean that indicates if the permission is granted. |
status | PermissionStatus | Determines the status of the permission. |
Literal Type: multiple types
Acceptable values are: PermissionHookBehavior
| Options
A subscription object that allows to conveniently remove an event listener from the emitter.
Property | Type | Description |
---|---|---|
remove | () => void | Removes an event listener for which the subscription has been created. After calling this function, the listener will no longer receive any events from the emitter. |