fix: android image preview

app/ios/Podfile.lock

@@ -1033,7 +1033,7 @@ PODS:
   - React-Mapbuffer (0.73.11):
     - glog
     - React-debug
-  - react-native-attestation (2.7.2):
+  - react-native-attestation (2.7.3):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1258,10 +1258,6 @@ PODS:
     - React-Core
   - RNCClipboard (1.16.3):
     - React-Core
-  - RNCMaskedView (0.3.2):
-    - glog
-    - RCT-Folly (= 2022.05.16.00)
-    - React-Core
   - RNDeviceInfo (8.7.1):
     - React-Core
   - RNFBApp (14.12.0):
@@ -1300,11 +1296,11 @@ PODS:
     - SDWebImage/Core (= 5.21.1)
   - SDWebImage/Core (5.21.1)
   - SocketRocket (0.6.1)
-  - VisionCamera (4.3.2):
-    - VisionCamera/Core (= 4.3.2)
-    - VisionCamera/React (= 4.3.2)
-  - VisionCamera/Core (4.3.2)
-  - VisionCamera/React (4.3.2):
+  - VisionCamera (4.7.2):
+    - VisionCamera/Core (= 4.7.2)
+    - VisionCamera/React (= 4.7.2)
+  - VisionCamera/Core (4.7.2)
+  - VisionCamera/React (4.7.2):
     - React-Core
   - Yoga (1.14.0)
 
@@ -1386,7 +1382,6 @@ DEPENDENCIES:
   - RNArgon2 (from `../node_modules/react-native-argon2`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
-  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - "RNFBApp (from `../node_modules/@react-native-firebase/app`)"
   - "RNFBMessaging (from `../node_modules/@react-native-firebase/messaging`)"
@@ -1567,8 +1562,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-async-storage/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
-  RNCMaskedView:
-    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNDeviceInfo:
     :path: "../node_modules/react-native-device-info"
   RNFBApp:
@@ -1648,7 +1641,7 @@ SPEC CHECKSUMS:
   React-jsinspector: a98428936fb888cc15d857226a26d9ac0a668a0e
   React-logger: 6e4873d1f9c54cca30f6c91a6617f8c91b75ba4c
   React-Mapbuffer: 57bf49a458398d329dad2bf8bc660e3e35b96989
-  react-native-attestation: d35b7756ef9ea75fc600d5c63c2b48929ddf9f65
+  react-native-attestation: e25a5c51296da09097a8c7f7e155953eb52c3939
   react-native-config: 644074ab88db883fcfaa584f03520ec29589d7df
   react-native-date-picker: 2eca217a8fb09c517f5bb6b23978718c6cec59ec
   react-native-encrypted-storage: 569d114e329b1c2c2d9f8c84bcdbe4478dda2258
@@ -1687,7 +1680,6 @@ SPEC CHECKSUMS:
   RNArgon2: 708e188b7a4d4ec8baf62463927c47abef453a94
   RNCAsyncStorage: 9350c2956f996b3ff1ac7cfdb50901c113a27640
   RNCClipboard: f6679d470d0da2bce2a37b0af7b9e0bf369ecda5
-  RNCMaskedView: 3f3c27b339db863b1fd5f39cc9660484ecfd46ee
   RNDeviceInfo: d3e91ffb33ee97a7982108476edb68cb3672efa6
   RNFBApp: 827b4dfadf8c039738c1c928474e45b3ec306ba0
   RNFBMessaging: 6465e1ccc5421e9493a5ed8d7d69e4daf8a2de6d
@@ -1702,7 +1694,7 @@ SPEC CHECKSUMS:
   RNVectorIcons: 102cd20472bf0d7cd15443d43cd87f9c97228ac3
   SDWebImage: f29024626962457f3470184232766516dee8dfea
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  VisionCamera: 6ad4b86176f6fea45e90e380d3d530bc5e1abff9
+  VisionCamera: 30b358b807324c692064f78385e9a732ce1bebfe
   Yoga: 1f93d5925ea12fb0880b21efe3566677337cf2ed
 
 PODFILE CHECKSUM: 7143c901b4221bb5cd19672e06910ed9b96d7c96

app/package.json

@@ -40,11 +40,11 @@
     "gradle:write-locks": "cd android && ./gradlew app:dependencies --write-locks"
   },
   "dependencies": {
-    "@bifold/core": "2.7.2",
-    "@bifold/oca": "2.7.2",
-    "@bifold/react-native-attestation": "2.7.2",
-    "@bifold/remote-logs": "2.7.2",
-    "@bifold/verifier": "2.7.2",
+    "@bifold/core": "2.7.3",
+    "@bifold/oca": "2.7.3",
+    "@bifold/react-native-attestation": "2.7.3",
+    "@bifold/remote-logs": "2.7.3",
+    "@bifold/verifier": "2.7.3",
     "@credo-ts/anoncreds": "0.5.13",
     "@credo-ts/askar": "0.5.13",
     "@credo-ts/core": "0.5.13",
@@ -74,7 +74,6 @@
     "@react-native-community/netinfo": "~11.3.3",
     "@react-native-firebase/app": "~14.12.0",
     "@react-native-firebase/messaging": "~14.12.0",
-    "@react-native-masked-view/masked-view": "~0.3.2",
     "@react-navigation/bottom-tabs": "~6.0.9",
     "@react-navigation/devtools": "~6.0.27",
     "@react-navigation/native": "~6.0.16",
@@ -128,7 +127,7 @@
     "react-native-uuid": "~2.0.3",
     "react-native-vector-icons": "~10.0.3",
     "react-native-video": "~6.16.1",
-    "react-native-vision-camera": "~4.3.2",
+    "react-native-vision-camera": "4.7.2",
     "react-native-volume-manager": "~1.10.0",
     "react-native-webrtc": "~124.0.6",
     "react-native-webview": "~13.10.7",

app/src/bcsc-theme/components/MaskedCamera.tsx

@@ -1,26 +1,26 @@
-import { ThemedText, TOKENS, useServices, useTheme } from '@bifold/core'
-import { useEffect, useState, useRef } from 'react'
-import { StyleSheet, View, Text, Alert, TouchableOpacity } from 'react-native'
+import { MaskType, SVGOverlay, ThemedText, TOKENS, useServices, useTheme } from '@bifold/core'
+import { useEffect, useRef, useState } from 'react'
+import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
-import MaskedView from '@react-native-masked-view/masked-view'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
 import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera'
-import CircularMask from './CircularMask'
 
 type MaskedCameraProps = {
   navigation: any
   cameraFace: 'front' | 'back'
   cameraInstructions?: string
   cameraLabel?: string
-  cameraMask?: React.ReactElement
+  maskType?: MaskType
+  maskLineColor?: string
   onPhotoTaken: (path: string) => void
 }
 
 const MaskedCamera = ({
   navigation,
-  cameraMask,
   cameraInstructions,
   cameraLabel,
+  maskLineColor,
+  maskType,
   cameraFace = 'back',
   onPhotoTaken,
 }: MaskedCameraProps) => {
@@ -96,7 +96,8 @@ const MaskedCamera = ({
     checkPermissions()
   }, [hasPermission, requestPermission, navigation])
 
-  const toggleTorch = () => setTorchOn((prev) => !prev)
+  const toggleTorch = () => setTorchOn((prev: boolean) => !prev)
+
   if (!hasPermission) {
     return (
       <SafeAreaView style={styles.container}>
@@ -140,22 +141,20 @@ const MaskedCamera = ({
       Alert.alert('Error', 'Failed to take photo. Please try again.')
     }
   }
-  const DefaultMask = <CircularMask />
 
   return (
     <View style={{ flex: 1, backgroundColor: 'black', position: 'relative' }}>
-      <MaskedView style={{ flex: 1, backgroundColor: 'black' }} maskElement={cameraMask || DefaultMask}>
-        <Camera
-          ref={cameraRef}
-          style={styles.camera}
-          device={device}
-          isActive={isActive}
-          photo={true}
-          onInitialized={() => setIsActive(true)}
-          onError={onError}
-          torch={torchOn ? 'on' : 'off'}
-        />
-      </MaskedView>
+      <Camera
+        ref={cameraRef}
+        style={styles.camera}
+        device={device}
+        isActive={isActive}
+        photo={true}
+        onInitialized={() => setIsActive(true)}
+        onError={onError}
+        torch={torchOn ? 'on' : 'off'}
+      />
+      <SVGOverlay maskType={maskType} strokeColor={maskLineColor ?? ColorPalette.brand.tertiary} />
       <View style={styles.instructionText}>
         <ThemedText style={{ color: 'white', textAlign: 'center' }} variant={'headingThree'}>
           {cameraLabel}

app/src/bcsc-theme/components/PhotoReview.tsx

@@ -38,7 +38,6 @@ const PhotoReview: React.FC<PhotoReviewProps> = ({ photoPath, onAccept, onRetake
       setLoading(false)
     }
   }
-
   return (
     <View style={styles.contentContainer}>
       <Image source={{ uri: `file://${photoPath}` }} style={{ height: '100%', width: 'auto', resizeMode: 'cover' }} />

app/src/bcsc-theme/features/verify/SetupStepsScreen.tsx

@@ -1,17 +1,17 @@
+import useApi from '@/bcsc-theme/api/hooks/useApi'
+import { BCSCCardType } from '@/bcsc-theme/types/cards'
+import { hitSlop } from '@/constants'
+import { useSetupSteps } from '@/hooks/useSetupSteps'
+import { BCDispatchAction, BCState } from '@/store'
 import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@bcsc-theme/types/navigators'
 import { Button, ButtonType, testIdWithKey, ThemedText, TOKENS, useServices, useStore, useTheme } from '@bifold/core'
 import { StackNavigationProp } from '@react-navigation/stack'
 import React, { useCallback } from 'react'
-import useApi from '@/bcsc-theme/api/hooks/useApi'
-import { BCDispatchAction, BCState } from '@/store'
 import { useTranslation } from 'react-i18next'
 import { Alert, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { BCSCCardType } from '@/bcsc-theme/types/cards'
 import { SetupStep } from './components/SetupStep'
-import { hitSlop } from '@/constants'
-import { useSetupSteps } from '@/hooks/useSetupSteps'
-import { SafeAreaView } from 'react-native-safe-area-context'
 
 type SetupStepsScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.SetupSteps>

app/src/bcsc-theme/features/verify/TakePhotoScreen.tsx

@@ -2,11 +2,11 @@ import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/n
 
 import { StackNavigationProp } from '@react-navigation/stack'
 
-import { StyleSheet } from 'react-native'
-import { SafeAreaView } from 'react-native-safe-area-context'
 import MaskedCamera from '@/bcsc-theme/components/MaskedCamera'
-import CircularMask from '@/bcsc-theme/components/CircularMask'
+import { MaskType } from '@bifold/core'
 import { RouteProp } from '@react-navigation/native'
+import { StyleSheet } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
 
 type PhotoInstructionsScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.TakePhoto>
@@ -35,7 +35,7 @@ const TakePhotoScreen = ({ navigation, route }: PhotoInstructionsScreenProps) =>
         navigation={navigation}
         cameraFace="front"
         cameraLabel="Position your face within the oval and press the button on the screen"
-        cameraMask={<CircularMask />}
+        maskType={MaskType.OVAL}
         onPhotoTaken={handlePhotoTaken}
       />
     </SafeAreaView>

app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx

@@ -1,15 +1,14 @@
-import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/navigators'
-import { StackNavigationProp } from '@react-navigation/stack'
-import { useCallback, useState } from 'react'
 import { EvidenceType } from '@/bcsc-theme/api/hooks/useEvidenceApi'
 import MaskedCamera from '@/bcsc-theme/components/MaskedCamera'
-import RectangularMask from '@/bcsc-theme/components/RectangularMask'
 import PhotoReview from '@/bcsc-theme/components/PhotoReview'
-import { useStore, useTheme } from '@bifold/core'
-import { BCState, BCDispatchAction } from '@/store'
+import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/navigators'
 import { getPhotoMetadata, PhotoMetadata } from '@/bcsc-theme/utils/file-info'
-import { StyleSheet, useWindowDimensions, View } from 'react-native'
+import { BCDispatchAction, BCState } from '@/store'
+import { MaskType, useStore, useTheme } from '@bifold/core'
 import { useFocusEffect } from '@react-navigation/native'
+import { StackNavigationProp } from '@react-navigation/stack'
+import { useCallback, useState } from 'react'
+import { StyleSheet, useWindowDimensions, View } from 'react-native'
 
 type EvidenceCaptureScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.EvidenceCapture>
@@ -116,12 +115,10 @@ const EvidenceCaptureScreen = ({ navigation, route }: EvidenceCaptureScreenProps
             cameraFace={'back'}
             cameraInstructions={currentSide.image_side_tip}
             cameraLabel={currentSide.image_side_label}
-            cameraMask={<RectangularMask />}
+            maskType={MaskType.ID_CARD}
+            maskLineColor={ColorPalette.brand.primary}
             onPhotoTaken={handlePhotoTaken}
           />
-          <View style={styles.reticleContainer}>
-            <View style={styles.reticle} />
-          </View>
         </View>
       ) : (
         <PhotoReview photoPath={currentPhotoPath!} onAccept={handleAcceptPhoto} onRetake={handleRetakePhoto} />

app/src/bcsc-theme/features/verify/send-video/InformationRequiredScreen.tsx

@@ -32,9 +32,6 @@ const InformationRequiredScreen = ({ navigation }: InformationRequiredScreenProp
       flex: 1,
       justifyContent: 'space-between',
     },
-    // no properties needed, just a helpful label for the View
-    mediaContainer: {},
-
     controlsContainer: {
       padding: Spacing.md,
     },
@@ -133,7 +130,7 @@ const InformationRequiredScreen = ({ navigation }: InformationRequiredScreenProp
 
   return (
     <SafeAreaView style={styles.container} edges={['bottom']}>
-      <View style={styles.mediaContainer}>
+      <View>
         <TakeMediaButton
           onPress={() => {
             navigation.navigate(BCSCScreens.PhotoInstructions, { forLiveCall: false })