Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CP Staging] Fix crash on navigation aware camera #29525

Merged
merged 1 commit into from
Oct 13, 2023
Merged

[CP Staging] Fix crash on navigation aware camera #29525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/pages/iou/ReceiptSelector/NavigationAwareCamera.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ const propTypes = {

/* Callback function passing torch/flashlight capability as bool param of the browser */
onTorchAvailability: PropTypes.func,

/* Whether we're in a tab navigator */
isInTabNavigator: PropTypes.bool.isRequired,
};

const defaultProps = {
Expand Down
16 changes: 13 additions & 3 deletions src/pages/iou/ReceiptSelector/NavigationAwareCamera.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,29 @@ const propTypes = {

/* Forwarded ref */
forwardedRef: refPropTypes.isRequired,

/* Whether we're in a tab navigator */
isInTabNavigator: PropTypes.bool.isRequired,
};

// Wraps a camera that will only be active when the tab is focused or as soon as it starts to become focused.
function NavigationAwareCamera({cameraTabIndex, forwardedRef, ...props}) {
function NavigationAwareCamera({cameraTabIndex, forwardedRef, isInTabNavigator, ...props}) {
// Get navigation to get initial isFocused value (only needed once during init!)
const navigation = useNavigation();
const [isCameraActive, setIsCameraActive] = useState(navigation.isFocused());

// 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.
const tabPositionAnimation = useTabAnimation();

// 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`
setIsCameraActive(value > cameraTabIndex - 1 && value < cameraTabIndex + 1);
Expand All @@ -32,7 +42,7 @@ function NavigationAwareCamera({cameraTabIndex, forwardedRef, ...props}) {
return () => {
tabPositionAnimation.removeListener(listenerId);
};
}, [cameraTabIndex, tabPositionAnimation]);
}, [cameraTabIndex, tabPositionAnimation, isInTabNavigator]);

// 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:
Expand Down
77 changes: 0 additions & 77 deletions src/pages/iou/ReceiptSelector/TabNavigationAwareCamera.js
View file
Open in desktop

This file was deleted.

6 changes: 2 additions & 4 deletions src/pages/iou/ReceiptSelector/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ import {iouPropTypes, iouDefaultProps} from '../propTypes';
import NavigationAwareCamera from './NavigationAwareCamera';
import Navigation from '../../../libs/Navigation/Navigation';
import * as FileUtils from '../../../libs/fileDownload/FileUtils';
import TabNavigationAwareCamera from './TabNavigationAwareCamera';

const propTypes = {
/** React Navigation route */
Expand Down Expand Up @@ -76,8 +75,6 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})

const {translate} = useLocalize();

const CameraComponent = isInTabNavigator ? TabNavigationAwareCamera : NavigationAwareCamera;

useEffect(() => {
const refreshCameraPermissionStatus = () => {
CameraPermission.getCameraPermissionStatus()
Expand Down Expand Up @@ -190,13 +187,14 @@ function ReceiptSelector({route, report, iou, transactionID, isInTabNavigator})
</View>
)}
{cameraPermissionStatus === RESULTS.GRANTED && device != null && (
<CameraComponent
<NavigationAwareCamera
ref={camera}
device={device}
style={[styles.cameraView]}
zoom={device.neutralZoom}
photo
cameraTabIndex={pageIndex}
isInTabNavigator={isInTabNavigator}
/>
)}
<View style={[styles.flexRow, styles.justifyContentAround, styles.alignItemsCenter, styles.pv3]}>
Expand Down