Prevent screenshot on react-native-modal android

ONLINECAST

2 min read

·

04-10-2024

8

0

Share

How to Prevent Screenshots on react-native-modal for Android

The Problem: Want to protect sensitive information displayed in your React Native app's modals from being captured via screenshots on Android? The default behavior of react-native-modal allows users to take screenshots, potentially exposing sensitive data.

Rephrasing: Imagine a login screen within a modal. You don't want users taking screenshots of their credentials. This article helps you prevent that!

Scenario and Code:

Let's assume you have a react-native-modal displaying sensitive information, like a user's credit card details. Here's a basic setup:

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Modal from 'react-native-modal';

const MyModal = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const toggleModal = () => {
    setIsModalVisible(!isModalVisible);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal 
        isVisible={isModalVisible}
        onBackdropPress={toggleModal}
        animationIn="slideInUp"
        animationOut="slideOutDown"
      >
        <View style={styles.modalContent}>
          <Text>This is some sensitive data!</Text>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: 'white',
    padding: 20,
    borderRadius: 5,
  },
});

export default MyModal;

The Solution:

There's no built-in feature in react-native-modal to directly prevent screenshots on Android. However, we can leverage the react-native-secure-view library. This library provides a wrapper component that disables screenshot functionality.

Step 1: Installation

npm install react-native-secure-view

Step 2: Implementation

Wrap your sensitive content within the SecureView component:

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Modal from 'react-native-modal';
import SecureView from 'react-native-secure-view'; // Import the library

const MyModal = () => {
  // ... (rest of the code) 

  return (
    // ... (rest of the code)

    <Modal 
      isVisible={isModalVisible}
      onBackdropPress={toggleModal}
      animationIn="slideInUp"
      animationOut="slideOutDown"
    >
      <SecureView> 
        <View style={styles.modalContent}>
          <Text>This is some sensitive data!</Text>
        </View>
      </SecureView>
    </Modal>
  );
};

// ... (rest of the code)

Explanation:

The SecureView component utilizes the FLAG_SECURE flag, which effectively disables the screenshot mechanism on Android. However, it's crucial to note that this solution is not foolproof. Some more advanced methods might still be able to bypass it.

Important Considerations:

• Limited Success: While react-native-secure-view helps prevent typical screenshot actions, it might not entirely stop all screenshot methods (especially on rooted devices).
• Alternative Security Measures: Implement other security measures such as:
  • Secure Storage: Utilize secure storage solutions like react-native-keychain for sensitive data.
  • HTTPS: Ensure your app communicates securely over HTTPS.
  • Data Masking: Display only a portion of sensitive data, like the last four digits of a credit card.
• User Experience: Be mindful of the user experience. Restricting screenshots can be perceived as intrusive, so clearly inform users about the restriction.

Conclusion:

While preventing screenshots in a 100% foolproof way is challenging, react-native-secure-view offers a valuable tool for protecting sensitive information within react-native-modal on Android. Remember to combine it with other security measures to enhance your app's security posture.

References:

• react-native-secure-view

Bonus Tip: For a more seamless user experience, consider using a custom modal component that incorporates the SecureView internally, avoiding the need to explicitly wrap content within the modal. This creates a cleaner code structure.