HomeGuidesReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

Expo ScreenCapture

GitHub

npm

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:

  • If a screen is displaying sensitive information (password, credit card data, and so on)
  • You are displaying paid content that you don't want to be recorded and shared

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

Currently, taking screenshots on iOS cannot be prevented. This is due to underlying OS limitations.

Platform Compatibility

Android DeviceAndroid EmulatoriOS DeviceiOS SimulatorWeb

Installation

Terminal
- npx expo install expo-screen-capture

If you're installing this in a bare React Native app, you should also follow these additional installation instructions.

Usage

Example: hook

Screen Capture hook
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>
  );
}

Example: functions

Screen Capture functions
import { useEffect } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import * as ScreenCapture from 'expo-screen-capture';
import * as MediaLibrary from 'expo-media-library';

export default function ScreenCaptureExample() {
  useEffect(() => {
    if (hasPermissions()) {
      const subscription = ScreenCapture.addScreenshotListener(() => {
        alert('Thanks for screenshotting my beautiful app 😊');
      });
      return () => subscription.remove();
    }
  }, []);

  const hasPermissions = async () => {
    const { status } = await MediaLibrary.requestPermissionsAsync();
    return status === 'granted';
  };

  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',
  },
});

API

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

Hooks

usePreventScreenCapture(key)

NameTypeDescription
key
(optional)		string-

A React hook to prevent screen capturing for as long as the owner component is mounted.

Returns

  • void

Methods

ScreenCapture.allowScreenCaptureAsync(key)

NameTypeDescription
key
(optional)		string

This will prevent multiple instances of the preventScreenCaptureAsync and allowScreenCaptureAsync methods from conflicting with each other. If provided, the value must be the same as the key passed to preventScreenCaptureAsync in order to re-enable screen capturing. Defaults to 'default'.

Default: 'default'

Re-allows the user to screen record or screenshot your app. If you haven't called preventScreenCapture() yet, this method does nothing.

Returns

  • Promise<void>

ScreenCapture.isAvailableAsync()

Returns whether the Screen Capture API is available on the current device.

Returns

  • Promise<boolean>

A promise that resolves to a boolean indicating whether the Screen Capture API is available on the current device. Currently, this resolves to true on Android and iOS only.

ScreenCapture.preventScreenCaptureAsync(key)

NameTypeDescription
key
(optional)		string

Optional. If provided, this will help prevent multiple instances of the 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'.

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.

Returns

  • Promise<void>

Event Subscriptions

ScreenCapture.addScreenshotListener(listener)

NameTypeDescription
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().

Returns

  • Subscription

A Subscription object that you can use to unregister the listener, either by calling remove() or passing it to removeScreenshotListener.

ScreenCapture.removeScreenshotListener(subscription)

NameTypeDescription
subscriptionSubscription

Subscription returned by addScreenshotListener.


Removes the subscription you provide, so that you are no longer listening for screenshots.

If you prefer, you can also call remove() on that Subscription object, for example:

let mySubscription = addScreenshotListener(() => {
  console.log("You took a screenshot!");
});
...
mySubscription.remove();
// OR
removeScreenshotListener(mySubscription);

Returns

  • void

Types

Subscription

NameTypeDescription
remove() => void-