From 18d8cccee396122dd13601ccc826023617ab6913 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Wed, 18 Oct 2023 16:45:58 +0700
Subject: [PATCH] fix: android-scan camera preview in Scan becomes blank

---
 .../iou/ReceiptSelector/NavigationAwareCamera.native.js  | 9 ++++++++-
 src/pages/iou/ReceiptSelector/index.native.js            | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
index 9fb420791539..2427e9d710ec 100644
--- a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
+++ b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
@@ -3,6 +3,7 @@ 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 */
@@ -10,10 +11,13 @@ const propTypes = {
 
     /* 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,6 +35,9 @@ 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);
         });
diff --git a/src/pages/iou/ReceiptSelector/index.native.js b/src/pages/iou/ReceiptSelector/index.native.js
index 8bf13422f70c..649b6ea521f3 100644
--- a/src/pages/iou/ReceiptSelector/index.native.js
+++ b/src/pages/iou/ReceiptSelector/index.native.js
@@ -53,6 +53,9 @@ 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 = {
@@ -60,9 +63,10 @@ const defaultProps = {
     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]}>