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

Don’t Allow any user to take screenshots of your mobile application.

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

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

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() {
  usePreventScreenCapture();
  return (
    <View style={styles.container}>
      <Text>Come On Champ..!!</Text>
      <StatusBar style="auto" />
    </View>
  );
}
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.