feat: Upgrade VisionCamera to V4

ios/Podfile.lock

@@ -1415,7 +1415,7 @@ PODS:
     - SDWebImage/Core (~> 5.17)
   - SocketRocket (0.6.1)
   - Turf (2.7.0)
-  - VisionCamera (2.16.8):
+  - VisionCamera (4.0.0-beta.8):
     - React
     - React-callinvoker
     - React-Core
@@ -1920,7 +1920,7 @@ SPEC CHECKSUMS:
   SDWebImageWebPCoder: af09429398d99d524cae2fe00f6f0f6e491ed102
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Turf: 13d1a92d969ca0311bbc26e8356cca178ce95da2
-  VisionCamera: 0a6794d1974aed5d653d0d0cb900493e2583e35a
+  VisionCamera: 5722c0900990b8826fc716e337af4a930f448e8e
   Yoga: e64aa65de36c0832d04e8c7bd614396c77a80047
 
 PODFILE CHECKSUM: a431c146e1501391834a2f299a74093bac53b530

package.json

@@ -165,7 +165,7 @@
     "react-native-tab-view": "^3.5.2",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-view-shot": "3.8.0",
-    "react-native-vision-camera": "2.16.8",
+    "react-native-vision-camera": "^4.0.0-beta.8",
     "react-native-web": "^0.19.9",
     "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-sound": "^0.1.3",

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/index.native.js

@@ -15,6 +15,7 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, ...props}, ref)
     return (
         <Camera
             ref={ref}
+            photoQualityBalance="speed"
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             isActive={isCameraActive}

src/pages/iou/request/step/IOURequestStepScan/index.native.js

@@ -5,7 +5,7 @@ import {ActivityIndicator, Alert, AppState, InteractionManager, View} from 'reac
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
 import {RESULTS} from 'react-native-permissions';
 import Animated, {runOnJS, useAnimatedStyle, useSharedValue, withDelay, withSequence, withSpring, withTiming} from 'react-native-reanimated';
-import {useCameraDevices} from 'react-native-vision-camera';
+import {useCameraDevice} from 'react-native-vision-camera';
 import Hand from '@assets/images/hand.svg';
 import Shutter from '@assets/images/shutter.svg';
 import AttachmentPicker from '@components/AttachmentPicker';
@@ -60,9 +60,11 @@ function IOURequestStepScan({
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
-    const devices = useCameraDevices('wide-angle-camera');
-    const device = devices.back;
+    const device = useCameraDevice('back', {
+        physicalDevices: ['wide-angle-camera'],
+    });
 
+    const hasFlash = device != null && device.hasFlash;
     const camera = useRef(null);
     const [flash, setFlash] = useState(false);
     const [cameraPermissionStatus, setCameraPermissionStatus] = useState(undefined);
@@ -245,8 +247,7 @@ function IOURequestStepScan({
 
         return camera.current
             .takePhoto({
-                qualityPrioritization: 'speed',
-                flash: flash ? 'on' : 'off',
+                flash: flash && hasFlash ? 'on' : 'off',
             })
             .then((photo) => {
                 // Store the receipt on the transaction object in Onyx
@@ -266,7 +267,7 @@ function IOURequestStepScan({
                 showCameraAlert();
                 Log.warn('Error taking photo', error);
             });
-    }, [flash, action, translate, transactionID, updateScanAndNavigate, navigateToConfirmationStep, cameraPermissionStatus]);
+    }, [flash, hasFlash, action, translate, transactionID, updateScanAndNavigate, navigateToConfirmationStep, cameraPermissionStatus]);
 
     // Wait for camera permission status to render
     if (cameraPermissionStatus == null) {
@@ -365,20 +366,22 @@ function IOURequestStepScan({
                         height={CONST.RECEIPT.SHUTTER_SIZE}
                     />
                 </PressableWithFeedback>
-                <PressableWithFeedback
-                    role={CONST.ACCESSIBILITY_ROLE.BUTTON}
-                    accessibilityLabel={translate('receipt.flash')}
-                    style={[styles.alignItemsEnd]}
-                    disabled={cameraPermissionStatus !== RESULTS.GRANTED}
-                    onPress={() => setFlash((prevFlash) => !prevFlash)}
-                >
-                    <Icon
-                        height={32}
-                        width={32}
-                        src={Expensicons.Bolt}
-                        fill={flash ? theme.iconHovered : theme.textSupporting}
-                    />
-                </PressableWithFeedback>
+                {hasFlash && (
+                    <PressableWithFeedback
+                        role={CONST.ACCESSIBILITY_ROLE.BUTTON}
+                        accessibilityLabel={translate('receipt.flash')}
+                        style={[styles.alignItemsEnd]}
+                        disabled={cameraPermissionStatus !== RESULTS.GRANTED}
+                        onPress={() => setFlash((prevFlash) => !prevFlash)}
+                    >
+                        <Icon
+                            height={32}
+                            width={32}
+                            src={Expensicons.Bolt}
+                            fill={flash ? theme.iconHovered : theme.textSupporting}
+                        />
+                    </PressableWithFeedback>
+                )}
             </View>
         </StepScreenWrapper>
     );