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

[gispada]

Short description

This PR prevents screenshots and screen recordings in several IT Wallet screens. In order to work on iOS, react-native-flag-secure-android (currently used) has been changed with react-native-screenshot-prevent.

The implementation is the following:

• On Android it leverages the FLAG_SECURE option;
• On iOS it creates a hidden secure text field, that renders the screen blank.

List of changes proposed in this pull request

• Removed react-native-flag-secure-android
• Installed react-native-screenshot-prevent
• Added ITW routes to screenBlackList

How to test

Ensure it is not possible to take screenshots or record the content of the screen in the following:

• CIE pin screen during identification
• Trust issuer screen
• Credential preview and detail (including trustmark)

Be sure to disable debug mode, because isAllowedSnapshotCurrentScreen always returns true in debug.

Note

iOS does not seem to offer a direct API to disable screenshots. react-native-screenshot-prevent makes use of a workaround solution, so please test it thoroughly on iOS.

[github-actions]

Jira Pull Request Link

This Pull Request refers to the following Jira issue SIW-1945

[LazyAfternoons]

I suggest a quick search through the app files to remove any react-native-flag-secure-android leftovers:

• Manual linking in settings.gradle;
• Entry in patches.md and the related patch;
• A type definition under ts/@types/react-native-flag-secure-android.

[mastro993]

On iOS, is still possibile to see the screen content when navigating back. I think we should improve the FlagSecureComponent, allowing the component to know if the screen is completely off the screen.

IMG_0088.MP4

[mastro993]

On iOS, is still possibile to see the screen content when navigating back. I think we should improve the FlagSecureComponent, allowing the component to know if the screen is completely off the screen.

IMG_0088.MP4

This happens because the route changes before the screen is correctly unmounted. To solve this we need to rethink how we handle screen capture prevention.
Instead of using a "global" component, we should handle this on a per-component basis, maybe with an hook.

A great example is how the Expo team implemented it. Take a look here: https://github.com/expo/expo/blob/main/packages/expo-screen-capture/src/ScreenCapture.ts#L84

When a component which uses the usePreventScreenCapture hook is mounted, they add a tag to a list. When the component is unmounted, they remove the tag.
If the list contains at least one item, screen recording prevention is enabled. If the list is empty, it is disabled.

I find this approach very simple and effective. I think we should implement something similar!

What do you think?

[gispada]

Good catch @mastro993! I'll work on something like the Expo solution.

[codecov]

Codecov Report

Attention: Patch coverage is 60.86957% with 9 lines in your changes missing coverage. Please review.

Project coverage is 46.33%. Comparing base (b207270) to head (dc5a26c).
Report is 1 commits behind head on master.

Files with missing lines	Patch %	Lines
...let/identification/screens/cie/ItwCiePinScreen.tsx	0.00%	1 Missing ⚠️
...nce/screens/ItwIssuanceCredentialPreviewScreen.tsx	0.00%	1 Missing ⚠️
...screens/ItwIssuanceCredentialTrustIssuerScreen.tsx	0.00%	1 Missing ⚠️
...eens/ItwPresentationCredentialAttachmentScreen.tsx	0.00%	1 Missing ⚠️
...ion/screens/ItwPresentationCredentialCardModal.tsx	0.00%	1 Missing ⚠️
.../screens/ItwPresentationCredentialDetailScreen.tsx	0.00%	1 Missing ⚠️
...reens/ItwPresentationCredentialFiscalCodeModal.tsx	0.00%	1 Missing ⚠️
...trustmark/screens/ItwCredentialTrustmarkScreen.tsx	0.00%	1 Missing ⚠️
...g/screens/PaymentsOnboardingSelectMethodScreen.tsx	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6595      +/-   ##
==========================================
- Coverage   49.30%   46.33%   -2.97%     
==========================================
  Files        1565     1562       -3     
  Lines       32223    32189      -34     
  Branches     7288     7334      +46     
==========================================
- Hits        15887    14915     -972     
- Misses      16298    17236     +938     
  Partials       38       38              

Files with missing lines	Coverage Δ
ts/utils/hooks/usePreventScreenCapture.ts	100.00% <100.00%> (ø)
...let/identification/screens/cie/ItwCiePinScreen.tsx	14.70% <0.00%> (-0.45%)	⬇️
...nce/screens/ItwIssuanceCredentialPreviewScreen.tsx	9.37% <0.00%> (-0.31%)	⬇️
...screens/ItwIssuanceCredentialTrustIssuerScreen.tsx	8.33% <0.00%> (-25.96%)	⬇️
...eens/ItwPresentationCredentialAttachmentScreen.tsx	12.12% <0.00%> (-0.38%)	⬇️
...ion/screens/ItwPresentationCredentialCardModal.tsx	20.00% <0.00%> (-1.43%)	⬇️
.../screens/ItwPresentationCredentialDetailScreen.tsx	9.37% <0.00%> (-0.31%)	⬇️
...reens/ItwPresentationCredentialFiscalCodeModal.tsx	38.09% <0.00%> (-1.91%)	⬇️
...trustmark/screens/ItwCredentialTrustmarkScreen.tsx	20.00% <0.00%> (-5.00%)	⬇️
...g/screens/PaymentsOnboardingSelectMethodScreen.tsx	4.76% <0.00%> (-0.24%)	⬇️

... and 96 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4c8f237...dc5a26c. Read the comment docs.