Disable the Screenshot feature in both IOS and Android using React Native Expo

Hello Coders..!!

If you are building a mobile app then it may possible that your app contains some kind of information or something that you don’t want users to take a screenshot of it. So, you disable the screenshot-taking features at the beginning of the mobile application building. Some mobile apps you may encounter with, which disable their screenshot feature. In this article, we are going to learn how to disable screenshot features in mobile applications using react native expo. It works fine on ios as well as android devices.

Photo by Christina @ wocintechchat.com on Unsplash

If you want to see it on Youtube then the link is here

Set-up and installation

1. Make sure you have the expo installed in your system.
2. Make a directory and navigate to it.
3. Start project using the command: expo init NoScreenshot
4. Select the first blank template and let the download completes
5. Navigate to the new directory “NoScreenshot”
6. Install a dependency using the command: npm install expo-screen-capture

After doing all these, you will see something like this.

And we are done here. All set-up and installation and installation are completed now. Now, Open this project in your favorite text editor. I prefer VS code.
Now Open App.js and add usePreventScreenCapture(); in the main App function. Write the javascript code as follows.

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { usePreventScreenCapture } from 'expo-screen-capture';
export default function App() {
return (
<View style={styles.container}>
<Text>Come On Champ..!!</Text>
<StatusBar style="auto" />
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',

It is so simple and the best part is that it works on both IOS and Android. We inserted the usePreventScreenCapture() inside the App function because as we know that it binds the whole mobile application code or we can say that when we run the application then this App function executes first.

Now run the server using the command: npm start
Scan the QR code from the expo app and after the compilation try to take a screenshot or record screen.

You will get an alert when you try to take the screenshot. Now try to record your screen and then play that recorded video. You will get a blank screen.
It’s a simple feature implementation in react native expo. You implemented it in your mobile application, congrats.

Thank You.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Scopes In Javascript

Introduction to React hooks

Get previous value of state variable in Functional Component

How to Normalize a Street Address in Node.JS

Google Login with Django & React — Part 2

What is Webpack?

Introducing: Custom Development Clients

JSON(JavaScript Object Notation)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rohit Kumar Thakur

Rohit Kumar Thakur


More from Medium

Firebase Push Notification In React Native


How to use Redux Hooks in a React Native App (Login, Logout Example)

Implementing a dynamic “Terms & Conditions” page with animation and progress tracking in React…