freerasp-react-native 3.12.0 → 3.14.0

package/example/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "FreeraspReactNativeExample",
-  "version": "0.0.1",
+  "name": "FreeraspRNExample",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "android": "react-native run-android",
@@ -12,18 +12,29 @@
   },
   "dependencies": {
     "@react-native-material/core": "^1.3.7",
-    "react": "18.1.0",
-    "react-native": "^0.70.6",
-    "react-native-svg": "^13.8.0"
+    "react": "19.0.0",
+    "react-native": "0.78.0",
+    "react-native-svg": "^15.11.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.4",
-    "@babel/runtime": "^7.24.1",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "metro-react-native-babel-preset": "0.72.3",
-    "react-native-svg-transformer": "^1.0.0"
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.3",
+    "@babel/runtime": "^7.25.0",
+    "@react-native-community/cli": "15.0.1",
+    "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
+    "@react-native/babel-preset": "0.78.0",
+    "@react-native/eslint-config": "0.78.0",
+    "@react-native/metro-config": "0.78.0",
+    "@react-native/typescript-config": "0.78.0",
+    "babel-plugin-module-resolver": "^5.0.2",
+    "@types/react": "^19.0.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react-native-svg-transformer": "^1.5.0"
   },
-  "resolutions": {
-    "react-devtools-core": "^4.28.4"
+  "engines": {
+    "node": ">=18"
   }
 }

package/example/src/App.tsx

@@ -188,6 +188,24 @@ const App = () => {
         )
       );
     },
+    // Android & iOS
+    screenshot: () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Screenshot' ? { ...threat, status: 'nok' } : threat
+        )
+      );
+    },
+    // Android & iOS
+    screenRecording: () => {
+      setAppChecks((currentState) =>
+        currentState.map((threat) =>
+          threat.name === 'Screen Recording'
+            ? { ...threat, status: 'nok' }
+            : threat
+        )
+      );
+    },
   };
 
   const addItemsToMalwareWhitelist = async () => {

package/example/src/DemoApp.tsx

@@ -4,10 +4,20 @@ import { Box, Flex, HStack, Text, VStack } from '@react-native-material/core';
 import CheckmarkCircle from '../assets/checkmark-circle-outline.png';
 import CloseCircle from '../assets/close-circle-outline.png';
 import TalsecLogo from '../assets/talsec-logo.png';
-import { Image } from 'react-native';
+import {
+  ScrollView,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  Platform,
+} from 'react-native';
 import { Colors } from './styles';
 import { MalwareModal } from './MalwareModal';
-import type { SuspiciousAppInfo } from 'freerasp-react-native';
+import {
+  isScreenCaptureBlocked,
+  blockScreenCapture,
+  type SuspiciousAppInfo,
+} from 'freerasp-react-native';
 
 export const DemoApp: React.FC<{
   checks: {
@@ -16,88 +26,180 @@ export const DemoApp: React.FC<{
   }[];
   suspiciousApps: SuspiciousAppInfo[];
 }> = ({ checks, suspiciousApps }) => {
+  const [hasScreenCaptureBlocked, setHasScreenCaptureBlocked] =
+    React.useState(false);
+
+  React.useEffect(() => {
+    (async () => {
+      Platform.OS === 'android' && (await updateScreenCaptureStatus());
+    })();
+  }, []);
+
+  const updateScreenCaptureStatus = async () => {
+    try {
+      const isBlocked = await isScreenCaptureBlocked();
+      setHasScreenCaptureBlocked(isBlocked);
+    } catch (error) {
+      console.error('Error fetching screen capture status:', error);
+    }
+  };
+
+  const toggleScreenCaptureBlock = async () => {
+    try {
+      const response = await blockScreenCapture(!hasScreenCaptureBlocked);
+      console.info('Changing Screen Capture Status:', response);
+      await updateScreenCaptureStatus();
+    } catch (error: any) {
+      console.error('Screen capture Error:', error.message);
+    }
+  };
+
   return (
     <>
-      <Flex
-        fill
-        style={{
-          backgroundColor: Colors.background,
-          justifyContent: 'center',
-        }}
-      >
-        <VStack>
-          <Image source={TalsecLogo} style={{ alignSelf: 'center' }} />;
-          <Text
-            style={{
-              alignSelf: 'center',
-              fontWeight: 'bold',
-              fontSize: 25,
-              color: 'white',
-              paddingTop: 15,
-            }}
-          >
-            freeRASP checks:
-          </Text>
-          {checks.map((check: any, idx: number) => (
-            <Box
-              key={idx}
-              style={{
-                borderColor:
-                  check.status === 'ok'
-                    ? Colors.checkOkDark
-                    : Colors.checkNokDark,
-                backgroundColor:
+      <Flex fill style={styles.flex}>
+        <ScrollView>
+          <VStack>
+            <Image source={TalsecLogo} style={{ alignSelf: 'center' }} />;
+            {Platform.OS === 'android' && (
+              <HStack
+                style={{ justifyContent: 'space-evenly', paddingTop: 10 }}>
+                <TouchableOpacity
+                  onPress={toggleScreenCaptureBlock}
+                  style={[
+                    styles.button,
+                    hasScreenCaptureBlocked
+                      ? styles.unblockedButton
+                      : styles.blockedButton,
+                  ]}>
+                  <Text
+                    style={[
+                      styles.buttonText,
+                      hasScreenCaptureBlocked
+                        ? styles.colorCheckNok
+                        : styles.colorCheckOk,
+                    ]}>
+                    {hasScreenCaptureBlocked
+                      ? 'Enable Screen Capture'
+                      : 'Block Screen Capture'}
+                  </Text>
+                </TouchableOpacity>
+              </HStack>
+            )}
+            <Text style={styles.titleText}>freeRASP checks:</Text>
+            {checks.map((check: any, idx: number) => (
+              <Box
+                key={idx}
+                style={[
+                  styles.box,
                   check.status === 'ok'
-                    ? Colors.checkOkLight
-                    : Colors.checkNokLight,
-                borderWidth: 1,
-                paddingHorizontal: 30,
-                paddingVertical: 4,
-                marginVertical: 8,
-                marginHorizontal: 20,
-                borderRadius: 15,
-              }}
-            >
-              <HStack style={{ justifyContent: 'space-between' }}>
-                <Text
-                  style={{
-                    color: check.status === 'ok' ? 'green' : 'rgb(200, 0, 0)',
-                    fontWeight: 'bold',
-                    alignSelf: 'center',
-                  }}
-                >
-                  {check.name}
-                </Text>
-                {check.name === 'Malware' && (
-                  <MalwareModal
-                    isDisabled={check.status === 'ok'}
-                    suspiciousApps={suspiciousApps}
-                  />
-                )}
-                {check.status === 'ok' ? (
-                  <Image
-                    source={CheckmarkCircle}
-                    style={{
-                      tintColor: Colors.checkOkDark,
-                      width: 30,
-                      height: 30,
-                    }}
-                  />
-                ) : (
-                  <Image
-                    source={CloseCircle}
+                    ? styles.boxCheckOk
+                    : styles.boxCheckNok,
+                ]}>
+                <HStack style={{ justifyContent: 'space-between' }}>
+                  <Text
                     style={{
-                      tintColor: Colors.checkNokDark,
-                      width: 30,
-                      height: 30,
-                    }}
-                  />
-                )}
-              </HStack>
-            </Box>
-          ))}
-        </VStack>
+                      color: check.status === 'ok' ? 'green' : 'rgb(200, 0, 0)',
+                      fontWeight: 'bold',
+                      alignSelf: 'center',
+                    }}>
+                    {check.name}
+                  </Text>
+                  {check.name === 'Malware' && (
+                    <MalwareModal
+                      isDisabled={check.status === 'ok'}
+                      suspiciousApps={suspiciousApps}
+                    />
+                  )}
+                  {check.status === 'ok' ? (
+                    <Image
+                      source={CheckmarkCircle}
+                      style={[
+                        styles.checkIcon,
+                        {
+                          tintColor: Colors.checkOkDark,
+                        },
+                      ]}
+                    />
+                  ) : (
+                    <Image
+                      source={CloseCircle}
+                      style={[
+                        styles.checkIcon,
+                        {
+                          tintColor: Colors.checkNokDark,
+                        },
+                      ]}
+                    />
+                  )}
+                </HStack>
+              </Box>
+            ))}
+          </VStack>
+        </ScrollView>
       </Flex>
     </>
   );
 };
+
+const styles = StyleSheet.create({
+  flex: {
+    paddingTop: 50,
+    backgroundColor: Colors.background,
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontSize: 16,
+    fontWeight: '500',
+    alignSelf: 'center',
+    textAlign: 'center',
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 180,
+    height: 50,
+    backgroundColor: Colors.checkOkLight,
+    borderRadius: 10,
+    padding: 2,
+    marginTop: 20,
+  },
+  blockedButton: {
+    backgroundColor: Colors.checkOkLight,
+  },
+  unblockedButton: {
+    backgroundColor: Colors.checkNokLight,
+  },
+  colorCheckNok: {
+    color: Colors.checkNokDark,
+  },
+  colorCheckOk: {
+    color: Colors.checkOkDark,
+  },
+  boxCheckNok: {
+    borderColor: Colors.checkNokDark,
+    backgroundColor: Colors.checkNokLight,
+  },
+  boxCheckOk: {
+    borderColor: Colors.checkOkDark,
+    backgroundColor: Colors.checkOkLight,
+  },
+  box: {
+    borderWidth: 1,
+    paddingHorizontal: 30,
+    paddingVertical: 4,
+    marginVertical: 8,
+    marginHorizontal: 20,
+    borderRadius: 15,
+  },
+  checkIcon: {
+    width: 30,
+    height: 30,
+  },
+  titleText: {
+    alignSelf: 'center',
+    fontWeight: 'bold',
+    fontSize: 25,
+    color: 'white',
+    paddingTop: 15,
+  },
+});

package/example/src/MalwareModal.tsx

@@ -42,8 +42,7 @@ export const MalwareModal: React.FC<{
         onRequestClose={() => {
           Alert.alert('Modal has been closed.');
           setModalVisible(false);
-        }}
-      >
+        }}>
         <View style={styles.centeredView}>
           <View style={styles.modalView}>
             <SafeAreaView style={styles.container}>
@@ -56,8 +55,7 @@ export const MalwareModal: React.FC<{
             </SafeAreaView>
             <Pressable
               style={[styles.button, styles.buttonClose]}
-              onPress={() => setModalVisible(false)}
-            >
+              onPress={() => setModalVisible(false)}>
               <Text style={styles.textStyle}>Close</Text>
             </Pressable>
           </View>
@@ -79,13 +77,6 @@ const styles = StyleSheet.create({
     borderRadius: 20,
     padding: 15,
     alignItems: 'center',
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 2,
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
     elevation: 5,
     flex: 1,
     width: '98%',
@@ -95,7 +86,6 @@ const styles = StyleSheet.create({
     paddingHorizontal: 30,
     paddingVertical: 10,
     marginTop: 15,
-    elevation: 2,
   },
   buttonClose: {
     backgroundColor: '#2196F3',

package/example/src/checks.ts

@@ -9,6 +9,8 @@ export const commonChecks = [
   { name: 'System VPN', status: 'ok' },
   { name: 'Device Binding', status: 'ok' },
   { name: 'Unofficial Store', status: 'ok' },
+  { name: 'Screenshot', status: 'ok' },
+  { name: 'Screen Recording', status: 'ok' },
 ];
 
 export const iosChecks = [{ name: 'Device ID', status: 'ok' }];