Merge pull request #52083 from QichenZhu/fix/51821

Fix web camera not loading

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

@@ -1,16 +1,14 @@
+import {useIsFocused} from '@react-navigation/native';
 import React 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 useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
 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>) {
-    const shouldShowCamera = useTabNavigatorFocus({
-        tabIndex: cameraTabIndex,
-    });
+    const shouldShowCamera = useIsFocused();
 
     if (!shouldShowCamera) {
         return null;

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

@@ -1,3 +1,4 @@
+import {useIsFocused} from '@react-navigation/native';
 import {Str} from 'expensify-common';
 import React, {useCallback, useContext, useEffect, useMemo, useReducer, useRef, useState} from 'react';
 import {ActivityIndicator, PanResponder, PixelRatio, View} from 'react-native';
@@ -24,7 +25,6 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD
 import useLocalize from '@hooks/useLocalize';
 import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
-import useTabNavigatorFocus from '@hooks/useTabNavigatorFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
@@ -93,7 +93,7 @@ function IOURequestStepScan({
 
     const [videoConstraints, setVideoConstraints] = useState<MediaTrackConstraints>();
     const tabIndex = 1;
-    const isTabActive = useTabNavigatorFocus({tabIndex});
+    const isTabActive = useIsFocused();
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
     const defaultTaxCode = TransactionUtils.getDefaultTaxCode(policy, transaction);