diff --git a/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/WebCamera.tsx b/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/WebCamera.tsx index db8c1656b3f8..fd20bb7aae5d 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/WebCamera.tsx +++ b/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) { +function WebCamera(props: NavigationAwareCameraProps, ref: ForwardedRef) { + const [isInitialized, setIsInitialized] = useState(false); const shouldShowCamera = useIsFocused(); + const styles = useThemeStyles(); if (!shouldShowCamera) { return null; } + return ( - + // Hide the camera during initialization to prevent random failures on some iOS versions. + setIsInitialized(true)} ref={ref as unknown as ForwardedRef} /> diff --git a/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/types.ts b/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/types.ts index 555cb7a92367..0869ecf34199 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/NavigationAwareCamera/types.ts +++ b/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 & { cameraTabIndex: number; diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx index 2304fe4d749e..8708d1d9ce54 100644 --- a/src/pages/iou/request/step/IOURequestStepScan/index.tsx +++ b/src/pages/iou/request/step/IOURequestStepScan/index.tsx @@ -93,7 +93,6 @@ function IOURequestStepScan({ const [isLoadingReceipt, setIsLoadingReceipt] = useState(false); const [videoConstraints, setVideoConstraints] = useState(); - 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}