diff --git a/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js b/src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js index 9fb420791539..8faec1cbbe37 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); }); @@ -38,7 +45,7 @@ const NavigationAwareCamera = React.forwardRef(({cameraTabIndex, isInTabNavigato 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 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} /> )}