Merge pull request Expensify#53194 from QichenZhu/fix/51337

Fix camera not working on the second time opening it

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/WebCamera.tsx

@@ -1,23 +1,29 @@
 import {useIsFocused} from '@react-navigation/native';
-import React from 'react';
+import React, {useState} from 'react';
 import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import type {Camera} from 'react-native-vision-camera';
 import Webcam from 'react-webcam';
+import useThemeStyles from '@hooks/useThemeStyles';
 import type {NavigationAwareCameraProps} from './types';
 
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-function WebCamera({torchOn, onTorchAvailability, cameraTabIndex, ...props}: NavigationAwareCameraProps, ref: ForwardedRef<Webcam | Camera>) {
+function WebCamera(props: NavigationAwareCameraProps, ref: ForwardedRef<Webcam | Camera>) {
+    const [isInitialized, setIsInitialized] = useState(false);
     const shouldShowCamera = useIsFocused();
+    const styles = useThemeStyles();
 
     if (!shouldShowCamera) {
         return null;
     }
+
     return (
-        <View>
+        // Hide the camera during initialization to prevent random failures on some iOS versions.
+        <View style={isInitialized ? styles.dFlex : styles.dNone}>
             <Webcam
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                onResize={() => setIsInitialized(true)}
                 ref={ref as unknown as ForwardedRef<Webcam>}
             />
         </View>

src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/types.ts

@@ -1,16 +1,7 @@
 import type {CameraProps} from 'react-native-vision-camera';
 import type {WebcamProps} from 'react-webcam';
 
-type NavigationAwareCameraProps = WebcamProps & {
-    /** Flag to turn on/off the torch/flashlight - if available */
-    torchOn?: boolean;
-
-    /** The index of the tab that contains this camera */
-    onTorchAvailability?: (torchAvailable: boolean) => void;
-
-    /** Callback function when media stream becomes available - user granted camera permissions and camera starts to work */
-    cameraTabIndex: number;
-};
+type NavigationAwareCameraProps = WebcamProps;
 
 type NavigationAwareCameraNativeProps = Omit<CameraProps, 'isActive'> & {
     cameraTabIndex: number;

src/pages/iou/request/step/IOURequestStepScan/index.tsx

@@ -93,7 +93,6 @@ function IOURequestStepScan({
     const [isLoadingReceipt, setIsLoadingReceipt] = useState(false);
 
     const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>();
-    const tabIndex = 1;
     const isTabActive = useIsFocused();
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
@@ -118,7 +117,7 @@ function IOURequestStepScan({
      * The last deviceId is of regular len camera.
      */
     const requestCameraPermission = useCallback(() => {
-        if (!isEmptyObject(videoConstraints) || !Browser.isMobile()) {
+        if (!Browser.isMobile()) {
             return;
         }
 
@@ -129,7 +128,7 @@ function IOURequestStepScan({
                 setCameraPermissionState('granted');
                 stream.getTracks().forEach((track) => track.stop());
                 // Only Safari 17+ supports zoom constraint
-                if (Browser.isMobileSafari() && stream.getTracks().length > 0) {
+                if (Browser.isMobileWebKit() && stream.getTracks().length > 0) {
                     let deviceId;
                     for (const track of stream.getTracks()) {
                         const setting = track.getSettings();
@@ -167,11 +166,11 @@ function IOURequestStepScan({
                 setVideoConstraints(defaultConstraints);
                 setCameraPermissionState('denied');
             });
-        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
     useEffect(() => {
         if (!Browser.isMobile() || !isTabActive) {
+            setVideoConstraints(undefined);
             return;
         }
         navigator.permissions
@@ -665,7 +664,6 @@ function IOURequestStepScan({
                         screenshotFormat="image/png"
                         videoConstraints={videoConstraints}
                         forceScreenshotSourceSize
-                        cameraTabIndex={tabIndex}
                         audio={false}
                         disablePictureInPicture={false}
                         imageSmoothing={false}