chore(IT Wallet): [SIW-1945] Disable screenshots and recordings on ITW screens

android/settings.gradle

@@ -14,8 +14,6 @@ include ':react-native-share'
 project(':react-native-share').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share/android')
 include ':react-native-lewin-qrcode'
 project(':react-native-lewin-qrcode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lewin-qrcode/android')
-include ':react-native-flag-secure-android'
-project(':react-native-flag-secure-android').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-flag-secure-android/android')
 include ':react-native-fs'
 project(':react-native-fs').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fs/android')
 include ':react-native-android-open-settings'

ios/Podfile.lock

@@ -2003,6 +2003,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNScreenshotPrevent (1.2.1):
+    - React
   - RNSentry (6.4.0):
     - DoubleConversion
     - glog
@@ -2180,6 +2182,7 @@ DEPENDENCIES:
   - RNReactNativeHapticFeedback (from `../node_modules/react-native-haptic-feedback`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
+  - RNScreenshotPrevent (from `../node_modules/react-native-screenshot-prevent`)
   - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNShare (from `../node_modules/react-native-share`)
   - RNStoreReview (from `../node_modules/react-native-store-review`)
@@ -2429,6 +2432,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
+  RNScreenshotPrevent:
+    :path: "../node_modules/react-native-screenshot-prevent"
   RNSentry:
     :path: "../node_modules/@sentry/react-native"
   RNShare:
@@ -2556,6 +2561,7 @@ SPEC CHECKSUMS:
   RNReactNativeHapticFeedback: 00ba111b82aa266bb3ee1aa576831c2ea9a9dfad
   RNReanimated: 26a5a401a5de1c0cf1a3226873825b00ffa85377
   RNScreens: 35bb8e81aeccf111baa0ea01a54231390dbbcfd9
+  RNScreenshotPrevent: 5f8473abaa2db2476561ef8f3704b66491ce7b01
   RNSentry: c5075bc124ebc8afa84e037c7fe257053a0b2cda
   RNShare: 694e19d7f74ac4c04de3a8af0649e9ccc03bd8b1
   RNStoreReview: 613c43e9132998ed41a65946e20c223c91b36464

package.json

@@ -118,7 +118,6 @@
     "react-native-easing-gradient": "^1.1.1",
     "react-native-exception-handler": "^2.10.8",
     "react-native-fingerprint-scanner": "git+https://github.com/hieuvp/react-native-fingerprint-scanner.git#9cecc0db326471c571553ea85f7c016fee2f803d",
-    "react-native-flag-secure-android": "^1.0.3",
     "react-native-fs": "^2.18.0",
     "react-native-gesture-handler": "^2.18.1",
     "react-native-haptic-feedback": "^2.3.3",
@@ -142,6 +141,7 @@
     "react-native-safe-area-context": "^4.10.5",
     "react-native-screen-brightness": "^2.0.0-alpha",
     "react-native-screens": "^3.35.0",
+    "react-native-screenshot-prevent": "^1.2.1",
     "react-native-share": "^10.2.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-store-review": "^0.4.3",

patches/patches.md

@@ -132,6 +132,8 @@ Created on **24/03/2022**
 
 Created on **29/08/2022**
 
+Removed on **10/01/2025** and replaced with `react-native-screenshot-prevent`
+
 #### Reason:
 
 - This patch is going to fix a gradle issue that breaks the compile on android platform, due to gradle imcompatibility

ts/RootContainer.tsx

@@ -5,14 +5,12 @@ import {
   AppState,
   AppStateStatus,
   NativeEventSubscription,
-  Platform,
   StatusBar
 } from "react-native";
 import SplashScreen from "react-native-splash-screen";
 import { connect } from "react-redux";
 import configurePushNotifications from "./features/pushNotifications/utils/configurePushNotification";
 import DebugInfoOverlay from "./components/DebugInfoOverlay";
-import FlagSecureComponent from "./components/FlagSecure";
 import PagoPATestIndicatorOverlay from "./components/PagoPATestIndicatorOverlay";
 import { LightModalRoot } from "./components/ui/LightModal";
 import { setLocale } from "./i18n";
@@ -101,7 +99,6 @@ class RootContainer extends React.PureComponent<Props> {
           barStyle={"dark-content"}
           backgroundColor={customVariables.androidStatusBarColor}
         />
-        {Platform.OS === "android" && <FlagSecureComponent />}
 
         <IONavigationContainer
           routingInstrumentation={this.props.routingInstumentation}

ts/features/itwallet/identification/screens/cie/ItwCiePinScreen.tsx

@@ -27,6 +27,7 @@ import I18n from "../../../../../i18n";
 import { useIOSelector } from "../../../../../store/hooks";
 import { setAccessibilityFocus } from "../../../../../utils/accessibility";
 import { useIOBottomSheetAutoresizableModal } from "../../../../../utils/hooks/bottomSheet";
+import { usePreventScreenCapture } from "../../../../../utils/hooks/usePreventScreenCapture";
 import { withTrailingPoliceCarLightEmojii } from "../../../../../utils/strings";
 import { openWebUrl } from "../../../../../utils/url";
 import {
@@ -61,6 +62,8 @@ const ForgottenPin = () => (
 );
 
 export const ItwCiePinScreen = () => {
+  usePreventScreenCapture();
+
   const useCieUat = useIOSelector(isCieLoginUatEnabledSelector);
   const machineRef = ItwEidIssuanceMachineContext.useActorRef();
 

ts/features/itwallet/issuance/screens/ItwIssuanceCredentialPreviewScreen.tsx

@@ -33,6 +33,7 @@ import {
   selectCredentialOption,
   selectCredentialTypeOption
 } from "../../machine/credential/selectors";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 import { ItwCredentialIssuanceMachineContext } from "../../machine/provider";
 import { ItwCredentialPreviewClaimsList } from "../components/ItwCredentialPreviewClaimsList";
 import { ITW_ROUTES } from "../../navigation/routes";
@@ -45,6 +46,7 @@ export const ItwIssuanceCredentialPreviewScreen = () => {
     selectCredentialOption
   );
 
+  usePreventScreenCapture();
   useItwDisableGestureNavigation();
   useAvoidHardwareBackButton();
 

ts/features/itwallet/issuance/screens/ItwIssuanceCredentialTrustIssuerScreen.tsx

@@ -53,6 +53,7 @@ import {
   trackWalletDataShareAccepted
 } from "../../analytics";
 import LoadingScreenContent from "../../../../components/screens/LoadingScreenContent";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 import { itwIpzsPrivacyUrl } from "../../../../config";
 import { ITW_ROUTES } from "../../navigation/routes";
 
@@ -68,6 +69,7 @@ const ItwIssuanceCredentialTrustIssuerScreen = () => {
     selectCredentialTypeOption
   );
 
+  usePreventScreenCapture();
   useItwDisableGestureNavigation();
   useAvoidHardwareBackButton();
 

ts/features/itwallet/presentation/screens/ItwPresentationCredentialAttachmentScreen.tsx

@@ -19,6 +19,7 @@ import {
 import { ParsedCredential } from "../../common/utils/itwTypesUtils";
 import { ItwParamsList } from "../../navigation/ItwParamsList";
 import { trackWalletCredentialFAC_SIMILE } from "../../analytics";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 // We currently only support PDF files, extend this if needed
 type SupportedAttachmentType = "application/pdf";
@@ -49,6 +50,7 @@ export const ItwPresentationCredentialAttachmentScreen = ({
       safeBottomAreaHeight: 0
     });
 
+  usePreventScreenCapture();
   useFocusEffect(trackWalletCredentialFAC_SIMILE);
 
   useHeaderSecondLevel({

ts/features/itwallet/presentation/screens/ItwPresentationCredentialCardModal.tsx

@@ -21,6 +21,7 @@ import {
 } from "../../common/utils/itwTypesUtils";
 import { ItwParamsList } from "../../navigation/ItwParamsList";
 import { ItwPresentationCredentialCardFlipButton } from "../components/ItwPresentationCredentialCardFlipButton";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 export type ItwPresentationCredentialCardModalNavigationParams = {
   credential: StoredCredential;
@@ -41,6 +42,7 @@ const ItwPresentationCredentialCardModal = ({ route, navigation }: Props) => {
   const [isFlipped, setFlipped] = React.useState(false);
   const theme = useIOTheme();
 
+  usePreventScreenCapture();
   useMaxBrightness({ useSmoothTransition: true });
 
   React.useLayoutEffect(() => {

ts/features/itwallet/presentation/screens/ItwPresentationCredentialDetailScreen.tsx

@@ -36,6 +36,7 @@ import {
 import { ItwCredentialTrustmark } from "../../trustmark/components/ItwCredentialTrustmark";
 import ItwCredentialNotFound from "../../common/components/ItwCredentialNotFound";
 import { ItwPresentationCredentialUnknownStatus } from "../components/ItwPresentationCredentialUnknownStatus";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 export type ItwPresentationCredentialDetailNavigationParams = {
   credentialType: string;
@@ -81,6 +82,7 @@ const ItwPresentationCredentialDetail = ({
   );
 
   useDebugInfo(credential);
+  usePreventScreenCapture();
 
   useFocusEffect(() => {
     trackCredentialDetail({

ts/features/itwallet/presentation/screens/ItwPresentationCredentialFiscalCodeModal.tsx

@@ -19,6 +19,7 @@ import {
   selectFiscalCodeFromEid,
   selectNameSurnameFromEid
 } from "../../credentials/store/selectors";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 /**
  * This magic number is the lenght of the encoded fiscal code in a CODE39 barcode.
@@ -72,6 +73,7 @@ const ItwPresentationCredentialFiscalCodeModal = () => {
   const nameSurname = useIOSelector(selectNameSurnameFromEid);
   const fiscalCode = useIOSelector(selectFiscalCodeFromEid);
 
+  usePreventScreenCapture();
   useMaxBrightness({ useSmoothTransition: true });
 
   React.useLayoutEffect(() => {

ts/features/itwallet/trustmark/screens/ItwCredentialTrustmarkScreen.tsx

@@ -9,6 +9,7 @@ import { ItwParamsList } from "../../navigation/ItwParamsList";
 import { ItwTrustmarkExpirationTimer } from "../components/ItwTrustmarkExpirationTimer";
 import { ItwTrustmarkQrCode } from "../components/ItwTrustmarkQrCode";
 import { ItwTrustmarkMachineProvider } from "../machine/provider";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 export type ItwCredentialTrustmarkScreenNavigationParams = {
   credentialType: string;
@@ -22,6 +23,7 @@ type ScreenProps = IOStackNavigationRouteProps<
 export const ItwCredentialTrustmarkScreen = (params: ScreenProps) => {
   const { credentialType } = params.route.params;
 
+  usePreventScreenCapture();
   useMaxBrightness({ useSmoothTransition: true });
 
   return (

ts/features/payments/onboarding/screens/PaymentsOnboardingSelectMethodScreen.tsx

@@ -12,8 +12,11 @@ import { PaymentsOnboardingRoutes } from "../navigation/routes";
 import { paymentsOnboardingGetMethodsAction } from "../store/actions";
 import { selectPaymentOnboardingMethods } from "../store/selectors";
 import { IOScrollViewWithLargeHeader } from "../../../../components/ui/IOScrollViewWithLargeHeader";
+import { usePreventScreenCapture } from "../../../../utils/hooks/usePreventScreenCapture";
 
 const PaymentsOnboardingSelectMethodScreen = () => {
+  usePreventScreenCapture();
+
   const navigation = useIONavigation();
   const dispatch = useIODispatch();