From 9a4baaa22877dfc77d6d95184a11abcd955518a3 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Mon, 8 Sep 2025 11:48:20 -0700
Subject: [PATCH 1/6] feat: stubbing out new overlay changes for camera
 compoonents

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 app/ios/Podfile.lock                          |  8 ++--
 .../bcsc-theme/components/CircularMask.tsx    | 46 -------------------
 .../components/CodeScanningCamera.tsx         | 13 +++---
 .../bcsc-theme/components/MaskedCamera.tsx    | 37 +++++++--------
 .../bcsc-theme/components/RectangularMask.tsx | 45 ------------------
 .../features/verify/SetupStepsScreen.tsx      | 16 ++++++-
 .../non-photo/EvidenceCaptureScreen.tsx       | 15 +++---
 .../verify/send-video/TakePhotoScreen.tsx     |  5 +-
 8 files changed, 50 insertions(+), 135 deletions(-)
 delete mode 100644 app/src/bcsc-theme/components/CircularMask.tsx
 delete mode 100644 app/src/bcsc-theme/components/RectangularMask.tsx

diff --git a/app/ios/Podfile.lock b/app/ios/Podfile.lock
index 9c5062c5e..a9cae9b86 100644
--- a/app/ios/Podfile.lock
+++ b/app/ios/Podfile.lock
@@ -1031,7 +1031,7 @@ PODS:
   - React-Mapbuffer (0.73.11):
     - glog
     - React-debug
-  - react-native-attestation (2.4.6):
+  - react-native-attestation (2.6.0):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1625,7 +1625,7 @@ SPEC CHECKSUMS:
   React-jsinspector: a98428936fb888cc15d857226a26d9ac0a668a0e
   React-logger: 6e4873d1f9c54cca30f6c91a6617f8c91b75ba4c
   React-Mapbuffer: 57bf49a458398d329dad2bf8bc660e3e35b96989
-  react-native-attestation: c2eaf0789330d5ae353d011458794bd6844d53bf
+  react-native-attestation: 8b3f86d2fcdf2818167ecd188ca68cecefe0280b
   react-native-config: 644074ab88db883fcfaa584f03520ec29589d7df
   react-native-date-picker: 2eca217a8fb09c517f5bb6b23978718c6cec59ec
   react-native-encrypted-storage: 569d114e329b1c2c2d9f8c84bcdbe4478dda2258
@@ -1677,8 +1677,8 @@ SPEC CHECKSUMS:
   SDWebImage: f29024626962457f3470184232766516dee8dfea
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   VisionCamera: 6ad4b86176f6fea45e90e380d3d530bc5e1abff9
-  Yoga: 1f93d5925ea12fb0880b21efe3566677337cf2ed
+  Yoga: a813a6d82538ccba91c54406404e3ed80b48a692
 
 PODFILE CHECKSUM: 7143c901b4221bb5cd19672e06910ed9b96d7c96
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.16.2
diff --git a/app/src/bcsc-theme/components/CircularMask.tsx b/app/src/bcsc-theme/components/CircularMask.tsx
deleted file mode 100644
index b73501095..000000000
--- a/app/src/bcsc-theme/components/CircularMask.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { View, StyleSheet, useWindowDimensions } from 'react-native'
-import { useTheme } from '@bifold/core'
-import React from 'react'
-
-export interface CircularMaskProps {
-  maskWidth?: number
-  maskHeight?: number
-  maskBorderRadius?: number
-}
-
-const CircularMask: React.FC<CircularMaskProps> = ({
-  maskWidth: customWidth,
-  maskHeight: customHeight,
-  maskBorderRadius: customBorderRadius,
-}) => {
-  const { Spacing, ColorPalette } = useTheme()
-  const { width } = useWindowDimensions()
-
-  // Use provided dimensions or calculate defaults
-  const maskWidth = customWidth ?? width - Spacing.lg * 2
-  const maskHeight = customHeight ?? width * 1.2
-  const maskBorderRadius = customBorderRadius ?? maskWidth / 2
-
-  const styles = StyleSheet.create({
-    mask: {
-      flex: 1,
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    maskShape: {
-      backgroundColor: 'white',
-      width: maskWidth,
-      height: maskHeight,
-      borderRadius: maskBorderRadius,
-    },
-  })
-
-  return (
-    <View style={styles.mask}>
-      <View style={styles.maskShape} />
-    </View>
-  )
-}
-
-export default CircularMask
diff --git a/app/src/bcsc-theme/components/CodeScanningCamera.tsx b/app/src/bcsc-theme/components/CodeScanningCamera.tsx
index f2882c08d..541f69f42 100644
--- a/app/src/bcsc-theme/components/CodeScanningCamera.tsx
+++ b/app/src/bcsc-theme/components/CodeScanningCamera.tsx
@@ -1,16 +1,15 @@
-import { useTheme } from '@bifold/core'
+import { QRScannerTorch, useTheme } from '@bifold/core'
 import React, { useEffect, useRef, useState } from 'react'
-import { StyleSheet, View, ViewStyle, useWindowDimensions, ColorValue } from 'react-native'
+import { ColorValue, StyleSheet, View, ViewStyle, useWindowDimensions } from 'react-native'
 import {
   Camera,
-  useCameraPermission,
-  useCameraDevice,
-  useCodeScanner,
-  CodeType,
   Code,
   CodeScannerFrame,
+  CodeType,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
 } from 'react-native-vision-camera'
-import QRScannerTorch from '@bifold/core/src/components/misc/QRScannerTorch'
 
 const overlayTint: ColorValue = 'rgba(0, 0, 0, 0.4)'
 
diff --git a/app/src/bcsc-theme/components/MaskedCamera.tsx b/app/src/bcsc-theme/components/MaskedCamera.tsx
index ab055a3d8..fe93e2ae0 100644
--- a/app/src/bcsc-theme/components/MaskedCamera.tsx
+++ b/app/src/bcsc-theme/components/MaskedCamera.tsx
@@ -1,26 +1,24 @@
-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
   onPhotoTaken: (path: string) => void
 }
 
 const MaskedCamera = ({
   navigation,
-  cameraMask,
   cameraInstructions,
   cameraLabel,
+  maskType,
   cameraFace = 'back',
   onPhotoTaken,
 }: MaskedCameraProps) => {
@@ -97,6 +95,7 @@ const MaskedCamera = ({
   }, [hasPermission, requestPermission, navigation])
 
   const toggleTorch = () => setTorchOn((prev) => !prev)
+  MaskType.ID_CARD
   if (!hasPermission) {
     return (
       <SafeAreaView style={styles.container}>
@@ -140,22 +139,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={ColorPalette.brand.tertiary} />
       <View style={styles.instructionText}>
         <ThemedText style={{ color: 'white' }} variant={'headingThree'}>
           {cameraLabel}
diff --git a/app/src/bcsc-theme/components/RectangularMask.tsx b/app/src/bcsc-theme/components/RectangularMask.tsx
deleted file mode 100644
index 115caeb14..000000000
--- a/app/src/bcsc-theme/components/RectangularMask.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useWindowDimensions, View, StyleSheet } from 'react-native'
-import { useTheme } from '@bifold/core'
-import React from 'react'
-
-interface RectangularMaskProps {
-  aspectRatio?: number // Default CR80 card ratio is 1.59
-  padding?: number
-}
-
-const RectangularMask: React.FC<RectangularMaskProps> = ({
-  aspectRatio = 1.59, // Standard ID card ratio (3.375/2.125)
-  padding = 40,
-}) => {
-  const { width: screenWidth } = useWindowDimensions()
-  const { ColorPalette } = useTheme()
-
-  // Calculate mask dimensions
-  const maskWidth = screenWidth - padding * 2
-  const maskHeight = maskWidth / aspectRatio
-
-  const styles = StyleSheet.create({
-    maskContainer: {
-      flex: 1,
-      backgroundColor: ColorPalette.notification.popupOverlay,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    cardMask: {
-      width: maskWidth,
-      height: maskHeight,
-      backgroundColor: 'black',
-      borderRadius: 16, // Slight rounding for ID card corners
-      borderWidth: 2,
-      borderColor: 'white',
-    },
-  })
-
-  return (
-    <View style={styles.maskContainer}>
-      <View style={styles.cardMask} />
-    </View>
-  )
-}
-
-export default RectangularMask
diff --git a/app/src/bcsc-theme/features/verify/SetupStepsScreen.tsx b/app/src/bcsc-theme/features/verify/SetupStepsScreen.tsx
index f90ae2db6..8c50b669c 100644
--- a/app/src/bcsc-theme/features/verify/SetupStepsScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/SetupStepsScreen.tsx
@@ -4,12 +4,12 @@ import { StackNavigationProp } from '@react-navigation/stack'
 import React, { useMemo } from 'react'
 
 import useApi from '@/bcsc-theme/api/hooks/useApi'
+import { BCSCCardType } from '@/bcsc-theme/types/cards'
 import { hitSlop } from '@/constants'
 import { BCDispatchAction, BCState } from '@/store'
 import { useTranslation } from 'react-i18next'
 import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native'
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons'
-import { BCSCCardType } from '@/bcsc-theme/types/cards'
 
 type SetupStepsScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.SetupSteps>
@@ -383,7 +383,19 @@ const SetupStepsScreen: React.FC<SetupStepsScreenProps> = ({ navigation }) => {
         <Button
           title={'Reset data'}
           onPress={() => {
-            dispatch({ type: BCDispatchAction.CLEAR_ADDITIONAL_EVIDENCE, payload: [undefined] })
+            dispatch({ type: BCDispatchAction.CLEAR_BCSC, payload: [undefined] })
+          }}
+          testID={testIdWithKey('ResetData')}
+          accessibilityLabel={'Reset data'}
+          buttonType={ButtonType.Secondary}
+        />
+      </View>
+      <View style={styles.itemSeparator} />
+      <View style={{ padding: Spacing.md }}>
+        <Button
+          title={'Masked Camera'}
+          onPress={() => {
+            navigation.navigate(BCSCScreens.TakePhoto)
           }}
           testID={testIdWithKey('ResetData')}
           accessibilityLabel={'Reset data'}
diff --git a/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx b/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx
index 0081869e0..473071cbf 100644
--- a/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx
+++ b/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,7 +115,7 @@ const EvidenceCaptureScreen = ({ navigation, route }: EvidenceCaptureScreenProps
             cameraFace={'back'}
             cameraInstructions={currentSide.image_side_tip}
             cameraLabel={currentSide.image_side_label}
-            cameraMask={<RectangularMask />}
+            maskType={MaskType.ID_CARD}
             onPhotoTaken={handlePhotoTaken}
           />
           <View style={styles.reticleContainer}>
diff --git a/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx b/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
index 9249d41f7..797605e86 100644
--- a/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
@@ -2,10 +2,9 @@ import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/n
 
 import { StackNavigationProp } from '@react-navigation/stack'
 
+import MaskedCamera from '@/bcsc-theme/components/MaskedCamera'
 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'
 
 type PhotoInstructionsScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.TakePhoto>
@@ -32,7 +31,7 @@ const TakePhotoScreen = ({ navigation }: PhotoInstructionsScreenProps) => {
         navigation={navigation}
         cameraFace="front"
         cameraLabel="Position your face within the oval and press the button on the screen"
-        cameraMask={<CircularMask />}
+        // maskType={MaskT.OVAL}
         onPhotoTaken={handlePhotoTaken}
       />
     </SafeAreaView>

From c187aa334c25ca6a3ba7459c1f829300aa98ff64 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Thu, 11 Sep 2025 12:44:11 -0700
Subject: [PATCH 2/6] fix: fixed thumbnail photo with css

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 app/src/bcsc-theme/components/MaskedCamera.tsx      |  4 ++--
 app/src/bcsc-theme/components/PhotoReview.tsx       |  1 -
 .../verify/send-video/InformationRequiredScreen.tsx |  9 +++------
 .../send-video/components/TakeMediaButton.tsx       | 13 ++++++++++++-
 app/src/services/attestation.ts                     |  6 +++---
 app/src/services/version.ts                         |  4 ++--
 6 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/src/bcsc-theme/components/MaskedCamera.tsx b/app/src/bcsc-theme/components/MaskedCamera.tsx
index fe93e2ae0..6778d6de1 100644
--- a/app/src/bcsc-theme/components/MaskedCamera.tsx
+++ b/app/src/bcsc-theme/components/MaskedCamera.tsx
@@ -94,8 +94,8 @@ const MaskedCamera = ({
     checkPermissions()
   }, [hasPermission, requestPermission, navigation])
 
-  const toggleTorch = () => setTorchOn((prev) => !prev)
-  MaskType.ID_CARD
+  const toggleTorch = () => setTorchOn((prev: boolean) => !prev)
+
   if (!hasPermission) {
     return (
       <SafeAreaView style={styles.container}>
diff --git a/app/src/bcsc-theme/components/PhotoReview.tsx b/app/src/bcsc-theme/components/PhotoReview.tsx
index e6e5bef99..613099a8d 100644
--- a/app/src/bcsc-theme/components/PhotoReview.tsx
+++ b/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' }} />
diff --git a/app/src/bcsc-theme/features/verify/send-video/InformationRequiredScreen.tsx b/app/src/bcsc-theme/features/verify/send-video/InformationRequiredScreen.tsx
index fb97fe697..12183cb36 100644
--- a/app/src/bcsc-theme/features/verify/send-video/InformationRequiredScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/send-video/InformationRequiredScreen.tsx
@@ -2,14 +2,14 @@ import useApi from '@/bcsc-theme/api/hooks/useApi'
 import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/navigators'
 import { BCDispatchAction, BCState } from '@/store'
 import { Button, ButtonType, TOKENS, useAnimatedComponents, useServices, useStore, useTheme } from '@bifold/core'
+import { CommonActions } from '@react-navigation/native'
 import { StackNavigationProp } from '@react-navigation/stack'
+import { Buffer } from 'buffer'
 import { useMemo, useState } from 'react'
 import { StyleSheet, View } from 'react-native'
 import RNFS from 'react-native-fs'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import TakeMediaButton from './components/TakeMediaButton'
-import { CommonActions } from '@react-navigation/native'
-import { Buffer } from 'buffer'
 
 type InformationRequiredScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.InformationRequired>
@@ -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)
diff --git a/app/src/bcsc-theme/features/verify/send-video/components/TakeMediaButton.tsx b/app/src/bcsc-theme/features/verify/send-video/components/TakeMediaButton.tsx
index c3c99d7cf..d32b8f67f 100644
--- a/app/src/bcsc-theme/features/verify/send-video/components/TakeMediaButton.tsx
+++ b/app/src/bcsc-theme/features/verify/send-video/components/TakeMediaButton.tsx
@@ -57,7 +57,18 @@ const TakeMediaButton = ({ onPress, title, actionLabel, thumbnailUri, style = {}
       </ThemedText>
       <View style={styles.actionContainer}>
         {thumbnailUri ? (
-          <Image source={{ uri: thumbnailUri }} resizeMode={'cover'} style={styles.image} />
+          // At smaller sizes the Image tag will ignore exif tags, which provide orientation (along with other metadata)
+          // Image is rendered at a larger size to pick up the exif data, then scaled down to fit in the button
+          <Image
+            style={{
+              height: 200,
+              aspectRatio: 1 / 1.3,
+              overflow: 'hidden',
+              transform: [{ scale: 0.5 }],
+              margin: -50,
+            }}
+            source={{ uri: thumbnailUri }}
+          />
         ) : (
           <ThemedText style={{ color: ColorPalette.brand.primary }}>{actionLabel}</ThemedText>
         )}
diff --git a/app/src/services/attestation.ts b/app/src/services/attestation.ts
index 979cbbd9b..97c7e90cb 100644
--- a/app/src/services/attestation.ts
+++ b/app/src/services/attestation.ts
@@ -1,9 +1,9 @@
 import {
+  AbstractBifoldLogger,
   AttestationEventTypes,
   AttestationMonitor as AttestationMonitorI,
   BifoldAgent,
   BifoldError,
-  BifoldLogger,
   removeExistingInvitationsById,
 } from '@bifold/core'
 import {
@@ -153,7 +153,7 @@ export class AttestationMonitor implements AttestationMonitorI {
   private offerSubscription?: AgentSubscription
   private agent?: Agent
   private options: AttestationMonitorOptions
-  private log?: BifoldLogger
+  private log?: AbstractBifoldLogger
   private _attestationWorkflowInProgress = false
   private _shouldHandleProofRequestAutomatically = false
   private _proofRequest?: ProofExchangeRecord
@@ -161,7 +161,7 @@ export class AttestationMonitor implements AttestationMonitorI {
 
   // take in options, agent, and logger. Options should include the attestation service URL
   // and the proof to watch for along with the cred_ef_id of the attestation credentials.
-  public constructor(logger: BifoldLogger, options: AttestationMonitorOptions) {
+  public constructor(logger: AbstractBifoldLogger, options: AttestationMonitorOptions) {
     this.log = logger
     this.options = options
     const { shouldHandleProofRequestAutomatically } = options
diff --git a/app/src/services/version.ts b/app/src/services/version.ts
index b59001729..7fc4a2f9b 100644
--- a/app/src/services/version.ts
+++ b/app/src/services/version.ts
@@ -1,10 +1,10 @@
+import { AbstractBifoldLogger, IVersionCheckService, VersionInfo } from '@bifold/core'
 import { checkVersion } from 'react-native-check-version'
-import { VersionInfo, IVersionCheckService, BifoldLogger } from '@bifold/core'
 
 export class VersionCheckService implements IVersionCheckService {
   private _cachedVersionInfo: VersionInfo | undefined
 
-  constructor(private readonly log: BifoldLogger) {
+  constructor(private readonly log: AbstractBifoldLogger) {
     // Logger is now injected
   }
 

From 6183a24f2775045ea33e2aa24c8191a4fba13830 Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Thu, 11 Sep 2025 16:31:52 -0700
Subject: [PATCH 3/6] feat: updated bifold packages, removed old package,
 removed reticle

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 app/ios/Podfile.lock                          | 28 +++++++------------
 app/package.json                              | 13 ++++-----
 .../bcsc-theme/components/MaskedCamera.tsx    |  4 ++-
 .../non-photo/EvidenceCaptureScreen.tsx       |  4 +--
 4 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/app/ios/Podfile.lock b/app/ios/Podfile.lock
index 5ec604a5d..41c81000a 100644
--- a/app/ios/Podfile.lock
+++ b/app/ios/Podfile.lock
@@ -1031,7 +1031,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
@@ -1248,10 +1248,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):
@@ -1290,11 +1286,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)
 
@@ -1373,7 +1369,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`)"
@@ -1546,8 +1541,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:
@@ -1625,7 +1618,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
@@ -1661,7 +1654,6 @@ SPEC CHECKSUMS:
   RNArgon2: 708e188b7a4d4ec8baf62463927c47abef453a94
   RNCAsyncStorage: 9350c2956f996b3ff1ac7cfdb50901c113a27640
   RNCClipboard: f6679d470d0da2bce2a37b0af7b9e0bf369ecda5
-  RNCMaskedView: 3f3c27b339db863b1fd5f39cc9660484ecfd46ee
   RNDeviceInfo: d3e91ffb33ee97a7982108476edb68cb3672efa6
   RNFBApp: 827b4dfadf8c039738c1c928474e45b3ec306ba0
   RNFBMessaging: 6465e1ccc5421e9493a5ed8d7d69e4daf8a2de6d
@@ -1676,9 +1668,9 @@ SPEC CHECKSUMS:
   RNVectorIcons: 102cd20472bf0d7cd15443d43cd87f9c97228ac3
   SDWebImage: f29024626962457f3470184232766516dee8dfea
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
-  VisionCamera: 6ad4b86176f6fea45e90e380d3d530bc5e1abff9
-  Yoga: a813a6d82538ccba91c54406404e3ed80b48a692
+  VisionCamera: 30b358b807324c692064f78385e9a732ce1bebfe
+  Yoga: 1f93d5925ea12fb0880b21efe3566677337cf2ed
 
 PODFILE CHECKSUM: 7143c901b4221bb5cd19672e06910ed9b96d7c96
 
-COCOAPODS: 1.16.2
+COCOAPODS: 1.14.3
diff --git a/app/package.json b/app/package.json
index 0ef2aea91..926b31710 100644
--- a/app/package.json
+++ b/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",
@@ -73,7 +73,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",
@@ -126,7 +125,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-webview": "~13.10.7",
     "reflect-metadata": "~0.1.14",
     "rxjs": "~7.8.2",
diff --git a/app/src/bcsc-theme/components/MaskedCamera.tsx b/app/src/bcsc-theme/components/MaskedCamera.tsx
index 6778d6de1..1dc87ab24 100644
--- a/app/src/bcsc-theme/components/MaskedCamera.tsx
+++ b/app/src/bcsc-theme/components/MaskedCamera.tsx
@@ -11,6 +11,7 @@ type MaskedCameraProps = {
   cameraInstructions?: string
   cameraLabel?: string
   maskType?: MaskType
+  maskLineColor?: string
   onPhotoTaken: (path: string) => void
 }
 
@@ -18,6 +19,7 @@ const MaskedCamera = ({
   navigation,
   cameraInstructions,
   cameraLabel,
+  maskLineColor,
   maskType,
   cameraFace = 'back',
   onPhotoTaken,
@@ -152,7 +154,7 @@ const MaskedCamera = ({
         onError={onError}
         torch={torchOn ? 'on' : 'off'}
       />
-      <SVGOverlay maskType={maskType} strokeColor={ColorPalette.brand.tertiary} />
+      <SVGOverlay maskType={maskType} strokeColor={maskLineColor ?? ColorPalette.brand.tertiary} />
       <View style={styles.instructionText}>
         <ThemedText style={{ color: 'white' }} variant={'headingThree'}>
           {cameraLabel}
diff --git a/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx b/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx
index 473071cbf..4f082cbf5 100644
--- a/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/non-photo/EvidenceCaptureScreen.tsx
@@ -116,11 +116,9 @@ const EvidenceCaptureScreen = ({ navigation, route }: EvidenceCaptureScreenProps
             cameraInstructions={currentSide.image_side_tip}
             cameraLabel={currentSide.image_side_label}
             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} />

From 9d80e69c6460c4f2655ffe0c2c04c96fb39fc49c Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Thu, 11 Sep 2025 16:32:27 -0700
Subject: [PATCH 4/6] chore: updated packages

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 yarn.lock | 74 +++++++++++++++++++++++--------------------------------
 1 file changed, 31 insertions(+), 43 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 584833b6e..e4a64fcee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3068,9 +3068,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@bifold/core@npm:2.7.2":
-  version: 2.7.2
-  resolution: "@bifold/core@npm:2.7.2"
+"@bifold/core@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@bifold/core@npm:2.7.3"
   peerDependencies:
     "@credo-ts/anoncreds": 0.5.13
     "@credo-ts/askar": 0.5.13
@@ -3097,7 +3097,6 @@ __metadata:
     "@react-native-async-storage/async-storage": ~1.22.3
     "@react-native-clipboard/clipboard": ~1.16.3
     "@react-native-community/netinfo": ~11.3.3
-    "@react-native-masked-view/masked-view": ~0.3.2
     "@react-navigation/bottom-tabs": ~6.0.9
     "@react-navigation/core": ~6.1.0
     "@react-navigation/devtools": ~6.0.27
@@ -3145,38 +3144,38 @@ __metadata:
     uuid: ~9.0.1
   bin:
     bifold: bin/bifold
-  checksum: 10c0/45e23404be1bd6d7cf32c19c7aee41ee3e046e05e8596be2597b5fa91f14f8da3af5b8e9b811f00a5a0e3245c0d4776cb1428d5f9187291c4cada78f8a316829
+  checksum: 10c0/b58b40870343c51a3008723c197f04ba48c8823938dd8a724f4ca1808a2256c93bc63097798926c2ad4794f1970f9760ebf18eacfa662d2e170bd92847e994dd
   languageName: node
   linkType: hard
 
-"@bifold/oca@npm:2.7.2":
-  version: 2.7.2
-  resolution: "@bifold/oca@npm:2.7.2"
+"@bifold/oca@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@bifold/oca@npm:2.7.3"
   dependencies:
     "@credo-ts/anoncreds": "npm:0.5.13"
     "@credo-ts/core": "npm:0.5.13"
     axios: "npm:~1.4.0"
     lodash.startcase: "npm:~4.4.0"
     react-native-fs: "npm:~2.20.0"
-  checksum: 10c0/3eff931db3f316de5a2b09a0ea37d6ddc782ec652428fa54ab0c68d55e4125a524f8bae9b589164553d5993b4e33c8cdaf33d3d4b28782698a7e8dbe530587fa
+  checksum: 10c0/a28500a52412e82666149140d917338341ae958351c7e205037a0ea0dfba27b9d25ebce12150a58bc28fab094dd9583bdce49289102a7c1385646c4e5f2c73b5
   languageName: node
   linkType: hard
 
-"@bifold/react-native-attestation@npm:2.7.2":
-  version: 2.7.2
-  resolution: "@bifold/react-native-attestation@npm:2.7.2"
+"@bifold/react-native-attestation@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@bifold/react-native-attestation@npm:2.7.3"
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 10c0/50a6d1884ae389f36ed6cd439a9c71402419af468845438d6b168ca1a6f31bae1af521809a384fb5c36b42e5b087871018d036d388e6971305fd0e66f63ba76a
+  checksum: 10c0/3e0a78aa2b299edfa22b71a3dbec8e9b63e49b463b34c087031a1fdfc4494878c620767fc809fe92340ea3b344d538b907ebb75c38da6f9863c95f1839077737
   languageName: node
   linkType: hard
 
-"@bifold/remote-logs@npm:2.7.2":
-  version: 2.7.2
-  resolution: "@bifold/remote-logs@npm:2.7.2"
+"@bifold/remote-logs@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@bifold/remote-logs@npm:2.7.3"
   dependencies:
-    "@bifold/core": "npm:2.7.2"
+    "@bifold/core": "npm:2.7.3"
     "@credo-ts/core": "npm:0.5.13"
     axios: "npm:~1.4.0"
     buffer: "npm:~6.0.3"
@@ -3190,20 +3189,20 @@ __metadata:
     react: ~18.3.1
     react-native: 0.73.11
     react-native-logs: ~5.1.0
-  checksum: 10c0/6eae28b199bf4c1e249b5c627eae9a0326786e4fddc5dd3898ace935ed0a060662114cd2852b347c254abfcc6e168511645ba707dec709ce6ea78fa560dce282
+  checksum: 10c0/aba45c0ae3d6f3fd12c757d74476472967153a8d2009125d0370a17021f22bc5f0e091ca63a51d70cbe9c665fd33689e5e25ec027626649d6f4784df53ad1158
   languageName: node
   linkType: hard
 
-"@bifold/verifier@npm:2.7.2":
-  version: 2.7.2
-  resolution: "@bifold/verifier@npm:2.7.2"
+"@bifold/verifier@npm:2.7.3":
+  version: 2.7.3
+  resolution: "@bifold/verifier@npm:2.7.3"
   peerDependencies:
     "@credo-ts/anoncreds": 0.5.13
     "@credo-ts/core": 0.5.13
     "@credo-ts/react-hooks": 0.6.0
     "@hyperledger/anoncreds-shared": 0.2.4
     react: ~18.3.1
-  checksum: 10c0/5919119de7dcadf48bd12c310738f8e645955f15236555e8872634156a21d7d02c7ecc86458431417d2ce1c54cf39359f7ced056888febd88d0608c82be8bd79
+  checksum: 10c0/92215c06ccb3edcf567eb1af88d3de233e12f9eff7ca672475801254ca05673d82c049ac278018b292e8a23400489f970b176182c70468af22a29cf3c0b5e9a6
   languageName: node
   linkType: hard
 
@@ -6500,16 +6499,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-native-masked-view/masked-view@npm:~0.3.2":
-  version: 0.3.2
-  resolution: "@react-native-masked-view/masked-view@npm:0.3.2"
-  peerDependencies:
-    react: ">=16"
-    react-native: ">=0.57"
-  checksum: 10c0/4ec84b7af2ded49dc21f17cc723a0ef341076cbe40cf758dd2daff8734bea63ba83e2fee7e63958984385314b8915b6804135997e07697abdd4141217c847fe9
-  languageName: node
-  linkType: hard
-
 "@react-native/assets-registry@npm:0.73.1":
   version: 0.73.1
   resolution: "@react-native/assets-registry@npm:0.73.1"
@@ -11162,11 +11151,11 @@ __metadata:
     "@babel/core": "npm:~7.22.20"
     "@babel/preset-env": "npm:~7.22.20"
     "@babel/runtime": "npm:~7.23.9"
-    "@bifold/core": "npm:2.7.2"
-    "@bifold/oca": "npm:2.7.2"
-    "@bifold/react-native-attestation": "npm:2.7.2"
-    "@bifold/remote-logs": "npm:2.7.2"
-    "@bifold/verifier": "npm:2.7.2"
+    "@bifold/core": "npm:2.7.3"
+    "@bifold/oca": "npm:2.7.3"
+    "@bifold/react-native-attestation": "npm:2.7.3"
+    "@bifold/remote-logs": "npm:2.7.3"
+    "@bifold/verifier": "npm:2.7.3"
     "@commitlint/cli": "npm:~11.0.0"
     "@credo-ts/anoncreds": "npm:0.5.13"
     "@credo-ts/askar": "npm:0.5.13"
@@ -11197,7 +11186,6 @@ __metadata:
     "@react-native-community/netinfo": "npm:~11.3.3"
     "@react-native-firebase/app": "npm:~14.12.0"
     "@react-native-firebase/messaging": "npm:~14.12.0"
-    "@react-native-masked-view/masked-view": "npm:~0.3.2"
     "@react-native/babel-preset": "npm:~0.73.21"
     "@react-native/eslint-config": "npm:~0.73.2"
     "@react-native/eslint-plugin": "npm:~0.73.1"
@@ -11295,7 +11283,7 @@ __metadata:
     react-native-uuid: "npm:~2.0.3"
     react-native-vector-icons: "npm:~10.0.3"
     react-native-video: "npm:~6.16.1"
-    react-native-vision-camera: "npm:~4.3.2"
+    react-native-vision-camera: "npm:4.7.2"
     react-native-webview: "npm:~13.10.7"
     react-test-renderer: "npm:~18.2.0"
     reflect-metadata: "npm:~0.1.14"
@@ -25739,9 +25727,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-vision-camera@npm:~4.3.2":
-  version: 4.3.2
-  resolution: "react-native-vision-camera@npm:4.3.2"
+"react-native-vision-camera@npm:4.7.2":
+  version: 4.7.2
+  resolution: "react-native-vision-camera@npm:4.7.2"
   peerDependencies:
     "@shopify/react-native-skia": "*"
     react: "*"
@@ -25755,7 +25743,7 @@ __metadata:
       optional: true
     react-native-worklets-core:
       optional: true
-  checksum: 10c0/a388fa15586cb11425b76cbdaf3f49dff4d8d8a45d4c9a1c5504b89d792b6afbc5a01d9f680b4554b965d2d7cbd217b69f5a32a8f81956e27dd30536be27f341
+  checksum: 10c0/1d6dd49991f5b9481c0724bd8353a38af7eb05e5277b4a27bbeb0885c1cd01c86f92a0126ec7e0a2d19b50c7f583c12f0a301de831de328dc5a0b33bc88bd0b7
   languageName: node
   linkType: hard
 

From d70a130d470d5bc668902e5a6cbd18cf2e3cf6da Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Thu, 11 Sep 2025 16:39:24 -0700
Subject: [PATCH 5/6] fix: added mask type

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 .../bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx  | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx b/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
index 797605e86..fac215da7 100644
--- a/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/send-video/TakePhotoScreen.tsx
@@ -3,6 +3,7 @@ import { BCSCScreens, BCSCVerifyIdentityStackParams } from '@/bcsc-theme/types/n
 import { StackNavigationProp } from '@react-navigation/stack'
 
 import MaskedCamera from '@/bcsc-theme/components/MaskedCamera'
+import { MaskType } from '@bifold/core'
 import { StyleSheet } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 
@@ -31,7 +32,7 @@ const TakePhotoScreen = ({ navigation }: PhotoInstructionsScreenProps) => {
         navigation={navigation}
         cameraFace="front"
         cameraLabel="Position your face within the oval and press the button on the screen"
-        // maskType={MaskT.OVAL}
+        maskType={MaskType.OVAL}
         onPhotoTaken={handlePhotoTaken}
       />
     </SafeAreaView>

From e1bf299ae21c4d4e1abb5dce91e9bece9b6828fd Mon Sep 17 00:00:00 2001
From: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
Date: Fri, 12 Sep 2025 10:23:40 -0700
Subject: [PATCH 6/6] fix: fixed start call screen image

Signed-off-by: Alfred Rosenthal <alfred.k.rosenthal@gmail.com>
---
 .../features/verify/live-call/StartCallScreen.tsx     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/src/bcsc-theme/features/verify/live-call/StartCallScreen.tsx b/app/src/bcsc-theme/features/verify/live-call/StartCallScreen.tsx
index dfb99efdc..36e02f858 100644
--- a/app/src/bcsc-theme/features/verify/live-call/StartCallScreen.tsx
+++ b/app/src/bcsc-theme/features/verify/live-call/StartCallScreen.tsx
@@ -11,8 +11,6 @@ type StartCallScreenProps = {
   navigation: StackNavigationProp<BCSCVerifyIdentityStackParams, BCSCScreens.StartCall>
 }
 
-const thumbnailHeight = 120
-
 const StartCallScreen = ({ navigation }: StartCallScreenProps) => {
   const { ColorPalette, Spacing } = useTheme()
   const { t } = useTranslation()
@@ -29,9 +27,14 @@ const StartCallScreen = ({ navigation }: StartCallScreenProps) => {
       flex: 1,
     },
     image: {
-      height: thumbnailHeight,
-      aspectRatio: 1,
+      // At smaller sizes the Image tag will ignore exif tags, which provide orientation (along with other metadata)
+      // Image is rendered at a larger size to pick up the exif data, then scaled down to fit in the button
+      height: 240,
       alignSelf: 'center',
+      aspectRatio: 1 / 1.3,
+      overflow: 'hidden',
+      transform: [{ scale: 0.5 }],
+      margin: -60,
     },
     controlsContainer: {
       marginTop: 'auto',