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:android.media.projection
API allows third-party apps to perform screen capture or screen sharing (even if the app is backgrounded).Currently, taking screenshots on iOS cannot be prevented. This is due to underlying OS limitations.
Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install expo-screen-capture
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
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> ); }
import * as ScreenCapture from 'expo-screen-capture'; import * as Permissions from 'expo-permissions'; import React from 'react'; import { Button, View, Platform } from 'react-native'; export default class ScreenCaptureExample extends React.Component { async componentDidMount() { // This permission is only required on Android const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL); if (status === 'granted') { ScreenCapture.addScreenshotListener(() => { alert('Thanks for screenshotting my beautiful app 😊'); }); } } render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'space-around' }}> <Button title="Activate" onPress={this._activate} /> <Button title="Deactivate" onPress={this._deactivate} /> </View> ); } _activate = async () => { await ScreenCapture.preventScreenCaptureAsync(); }; _deactivate = async () => { await ScreenCapture.allowScreenCaptureAsync(); }; }
import * as ScreenCapture from 'expo-screen-capture';
preventScreenCaptureAsync
and allowScreenCaptureAsync
methods from conflicting with each other. This argument is useful if you have multiple active components using the allowScreenCaptureAsync
hook. Defaults to default
.allowScreenCaptureAsync
is called. If you are already preventing screen capture, this method does nothing (unless you pass a new and unique key
).preventScreenCaptureAsync
and allowScreenCaptureAsync
methods (and usePreventScreenCapture
hook) from conflicting with each other. When using multiple keys, you'll have to re-allow each one in order to re-enable screen capturing. Defaults to default
.preventScreenCaptureAsync()
yet, this method does nothingkey
passed to preventScreenCaptureAsync
in order to re-enable screen capturing.READ_EXTERNAL_STORAGE
permission- you can request this with Permissions.askAsync(Permissions.MEDIA_LIBRARY)
.Subscription
object that you can use to unregister the listener, either by calling .remove()
or passing it to removeScreenshotListener
.Subscription
returned by addScreenshotListener
. If you prefer, you can also call .remove
on that Subscription
object, e.g.let mySubscription = addScreenshotListener(() => { console.log("You took a screenshot!"); }) ... mySubscription.remove(); // OR removeScreenshotListener(mySubscription);