Merge pull request #28792 from dukenv0307/fix/27879

Fix: Android-Scan camera preview in Scan becomes blank
Expensify · Oct 23, 2023 · 22ccf4b · 22ccf4b
2 parents b535caf + 470ba28
commit 22ccf4b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
@@ -3,17 +3,21 @@ import {Camera} from 'react-native-vision-camera';
 import {useTabAnimation} from '@react-navigation/material-top-tabs';
 import {useNavigation} from '@react-navigation/native';
 import PropTypes from 'prop-types';
+import CONST from '../../../CONST';
 
 const propTypes = {
     /* The index of the tab that contains this camera */
     cameraTabIndex: PropTypes.number.isRequired,
 
     /* Whether we're in a tab navigator */
     isInTabNavigator: PropTypes.bool.isRequired,
+
+    /** Name of the selected receipt tab */
+    selectedTab: PropTypes.string.isRequired,
 };
 
 // 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(({cameraTabIndex, isInTabNavigator, ...props}, ref) => {
+const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, isInTabNavigator, selectedTab, ...props}, ref) => {
     // Get navigation to get initial isFocused value (only needed once during init!)
     const navigation = useNavigation();
     const [isCameraActive, setIsCameraActive] = useState(navigation.isFocused());
@@ -31,14 +35,17 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, isInTabNavigato
         }
 
         const listenerId = tabPositionAnimation.addListener(({value}) => {
+            if (selectedTab !== CONST.TAB.SCAN) {
+                return;
+            }
             // Activate camera as soon the index is animating towards the `cameraTabIndex`
             setIsCameraActive(value > cameraTabIndex - 1 && value < cameraTabIndex + 1);
         });
 
         return () => {
             tabPositionAnimation.removeListener(listenerId);
         };
-    }, [cameraTabIndex, tabPositionAnimation, isInTabNavigator]);
+    }, [cameraTabIndex, tabPositionAnimation, isInTabNavigator, selectedTab]);
 
     // Note: The useEffect can be removed once VisionCamera V3 is used.
     // Its only needed for android, because there is a native cameraX android bug. With out this flow would break the camera:

diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
@@ -53,16 +53,20 @@ const propTypes = {
 
     /** Whether or not the receipt selector is in a tab navigator for tab animations */
     isInTabNavigator: PropTypes.bool,
+
+    /** Name of the selected receipt tab */
+    selectedTab: PropTypes.string,
 };
 
 const defaultProps = {
     report: {},
     iou: iouDefaultProps,
     transactionID: '',
     isInTabNavigator: true,
+    selectedTab: '',
 };
 
-function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator}) {
+function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator, selectedTab}) {
     const devices = useCameraDevices('wide-angle-camera');
     const device = devices.back;
 
@@ -195,6 +199,7 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
                     photo
                     cameraTabIndex={pageIndex}
                     isInTabNavigator={isInTabNavigator}
+                    selectedTab={selectedTab}
                 />
             )}
             <View style={[styles.flexRow, styles.justifyContentAround, styles.alignItemsCenter, styles.pv3]}>