Merge pull request #85642 from samranahm/83380/IOURequestStepScan-phase-4

[No QA] refactor: `IOURequestStepScan` clean-up, phase 4: fix react-hooks/exhaustive-deps warning

Author: roryabraham

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

@@ -368,8 +368,8 @@ function IOURequestStepScan({
 
         const path = getReceiptsUploadFolderPath();
 
-        camera?.current
-            ?.takePhoto({
+        camera.current
+            .takePhoto({
                 flash: flash && hasFlash ? 'on' : 'off',
                 enableShutterSound: !isPlatformMuted,
                 path,
@@ -422,7 +422,6 @@ function IOURequestStepScan({
                 showCameraAlert();
                 Log.warn('Error taking photo', error);
             });
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- askForPermissions is not needed
     }, [
         cameraPermissionStatus,
         isMultiScanEnabled,
@@ -437,9 +436,11 @@ function IOURequestStepScan({
         initialTransactionID,
         isEditing,
         receiptFiles,
+        setReceiptFiles,
         submitReceipts,
         updateScanAndNavigate,
         askForPermissions,
+        maybeCancelShutterSpan,
     ]);
 
     const cameraLoadingReasonAttributes: SkeletonSpanReasonAttributes = {
@@ -522,7 +523,7 @@ function IOURequestStepScan({
                                     <Animated.View style={[styles.cameraFocusIndicator, cameraFocusIndicatorAnimatedStyle]} />
                                     <Animated.View
                                         pointerEvents="none"
-                                        style={[StyleSheet.absoluteFillObject, StyleUtils.getBackgroundColorStyle(theme.appBG), blinkStyle, styles.zIndex10]}
+                                        style={[StyleSheet.absoluteFill, StyleUtils.getBackgroundColorStyle(theme.appBG), blinkStyle, styles.zIndex10]}
                                     />
                                 </View>
                             </GestureDetector>

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

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect} from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {RESULTS} from 'react-native-permissions';
 import LocationPermissionModal from '@components/LocationPermissionModal';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
@@ -95,10 +95,17 @@ function IOURequestStepScan({
         onLayout?.(setTestReceiptAndNavigate);
     }, [onLayout, setTestReceiptAndNavigate]);
 
-    // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, make the user star scanning flow from scratch.
+    const hasValidatedInitialScanFiles = useRef(false);
+
+    // When the component mounts, if there is a receipt, see if the image can be read from the disk. If not, make the user start scanning flow from scratch.
     // This is because until the request is saved, the receipt file is only stored in the browsers memory as a blob:// and if the browser is refreshed, then
     // the image ceases to exist. The best way for the user to recover from this is to start over from the start of the request process.
     useEffect(() => {
+        if (hasValidatedInitialScanFiles.current) {
+            return;
+        }
+        hasValidatedInitialScanFiles.current = true;
+
         let isAllScanFilesCanBeRead = true;
 
         Promise.all(
@@ -124,9 +131,7 @@ function IOURequestStepScan({
             removeTransactionReceipt(CONST.IOU.OPTIMISTIC_TRANSACTION_ID);
             removeDraftTransactionsByIDs(draftTransactionIDs, true);
         });
-        // We want this hook to run on mounting only
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+    }, [setIsMultiScanEnabled, transactions, draftTransactionIDs]);
 
     // this effect will pre-fetch location in web if the location permission is already granted to optimize the flow
     useEffect(() => {