Chrome mWeb - scan button provides no feedback

src/pages/iou/ReceiptSelector/NavigationAwareCamera.js

@@ -1,13 +1,20 @@
-import React, {useEffect, useRef} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import Webcam from 'react-webcam';
 import {useIsFocused} from '@react-navigation/native';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
+import {useTabAnimation} from '@react-navigation/material-top-tabs';
 
 const propTypes = {
     /* Flag to turn on/off the torch/flashlight - if available */
     torchOn: PropTypes.bool,
 
+    /* The index of the tab that contains this camera */
+    cameraTabIndex: PropTypes.number.isRequired,
+
+    /* Whether we're in a tab navigator */
+    isInTabNavigator: PropTypes.bool.isRequired,
+
     /* Callback function when media stream becomes available - user granted camera permissions and camera starts to work */
     onUserMedia: PropTypes.func,
 
@@ -21,10 +28,40 @@ const defaultProps = {
     torchOn: false,
 };
 
+function useTabNavigatorFocus({cameraTabIndex, isInTabNavigator}) {
+    // Get navigation to get initial isFocused value (only needed once during init!)
+    const isPageFocused = useIsFocused();
+    const [isTabFocused, setIsTabFocused] = useState(false);
+
+    // Retrieve the animation value from the tab navigator, which ranges from 0 to the total number of pages displayed.
+    // Even a minimal scroll towards the camera page (e.g., a value of 0.001 at start) should activate the camera for immediate responsiveness.
+
+    // STOP!!!!!!! This is not a pattern to be followed! We are conditionally rendering this hook becase when used in the edit flow we'll never be inside a tab navigator.
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tabPositionAnimation = isInTabNavigator ? useTabAnimation() : null;
+
+    useEffect(() => {
+        if (!isInTabNavigator) {
+            return;
+        }
+
+        const listenerId = tabPositionAnimation.addListener(({value}) => {
+            // Activate camera as soon the index is animating towards the `cameraTabIndex`
+            setIsTabFocused(value > cameraTabIndex - 1 && value < cameraTabIndex + 1);
+        });
+
+        return () => {
+            tabPositionAnimation.removeListener(listenerId);
+        };
+    }, [cameraTabIndex, tabPositionAnimation, isInTabNavigator]);
+
+    return isTabFocused && isPageFocused;
+}
+
 // Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
-const NavigationAwareCamera = React.forwardRef(({torchOn, onTorchAvailability, ...props}, ref) => {
+const NavigationAwareCamera = React.forwardRef(({torchOn, onTorchAvailability, cameraTabIndex, isInTabNavigator, ...props}, ref) => {
     const trackRef = useRef(null);
-    const isCameraActive = useIsFocused();
+    const showCamera = useTabNavigatorFocus({cameraTabIndex, isInTabNavigator});
 
     const handleOnUserMedia = (stream) => {
         if (props.onUserMedia) {
@@ -47,11 +84,15 @@ const NavigationAwareCamera = React.forwardRef(({torchOn, onTorchAvailability, .
         }
 
         trackRef.current.applyConstraints({
-            advanced: [{torch: torchOn}],
+            advanced: [
+                {
+                    torch: torchOn,
+                },
+            ],
         });
     }, [torchOn]);
 
-    if (!isCameraActive) {
+    if (!showCamera) {
         return null;
     }
     return (

src/pages/iou/ReceiptSelector/index.js

@@ -67,8 +67,9 @@ const defaultProps = {
     isInTabNavigator: true,
 };
 
-function ReceiptSelector({route, transactionID, iou, report}) {
+function ReceiptSelector({route, transactionID, iou, report, isInTabNavigator}) {
     const iouType = lodashGet(route, 'params.iouType', '');
+    const pageIndex = lodashGet(route, 'params.pageIndex', 1);
 
     // Grouping related states
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
@@ -82,7 +83,7 @@ function ReceiptSelector({route, transactionID, iou, report}) {
 
     const [cameraPermissionState, setCameraPermissionState] = useState('prompt');
     const [isFlashLightOn, toggleFlashlight] = useReducer((state) => !state, false);
-    const [isTorchAvailable, setIsTorchAvailable] = useState(true);
+    const [isTorchAvailable, setIsTorchAvailable] = useState(false);
     const cameraRef = useRef(null);
 
     const hideReciptModal = () => {
@@ -201,6 +202,8 @@ function ReceiptSelector({route, transactionID, iou, report}) {
                     torchOn={isFlashLightOn}
                     onTorchAvailability={setIsTorchAvailable}
                     forceScreenshotSourceSize
+                    cameraTabIndex={pageIndex}
+                    isInTabNavigator={isInTabNavigator}
                 />
             </View>