[$500] [HOLD for payment 2023-10-02] [HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #26508

1. Launch App
2. Request money via Scan option
3. Tap the report preview
4. Tap the request preview
5. Tap the receipt image
6. When the modal opens, tap the three dot menu at the top
7. Select replace

Action Performed:

Camera should be open again to replace the receipt image.

Expected Result:

App crashed when tap replace receipt
Issue occurred on Android App as well

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.72-6

Reproducible in staging?: Yes

Reproducible in production?: No

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6208089_receipt_crash.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016d18ed8dd8d228a2
• Upwork Job ID: 1709869686165725184
• Last Price Increase: 2023-10-05

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Auto-assign attempt failed, all eligible assignees are OOO.

[akinwale]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The app crashes when attempting to replace a receipt.

What is the root cause of that problem?

When the Replace Receipt option is selected, the app navigates to the EditRequestReceiptPage component which contains a ReceiptSelector. On native platforms, ReceiptSelector makes use of a NavigationAwareCamera which uses the useTabAnimation() hook.

App/src/pages/iou/ReceiptSelector/NavigationAwareCamera.js

Line 25 in ca48769

const tabPositionAnimation = useTabAnimation();

This hook is designed to throw an error if the component using it is not embedded within a tab. Since the ReceiptSelector in this scenario is not within a tab, the app crashes with this error.

App/patches/@react-navigation+material-top-tabs+6.6.3.patch

Lines 35 to 41 in 832a12b

	+export function useTabAnimation() {
	+ const animation = React.useContext(TabAnimationContext);
	+ if (animation === undefined) {
	+ throw new Error("Couldn't find values for card animation. Are you inside a screen in Tab?");
	+ }
	+ return animation;
	+}

What changes do you think we should make in order to solve the problem?

Add a way to check if the component is within a tab and then update the implementation accordingly. This can be achieved with the following steps in either solution.

Solution 1

1. Update the default value of the lodashGet call for the pageIndex param in ReceiptSelector.

-const pageIndex = lodashGet(route, 'params.pageIndex', 1);
+const pageIndex = lodashGet(route, 'params.pageIndex', -1);

2. Conditionally set tabPositionAnimation based on the value of cameraTabIndex (which is set to the value of pageIndex).

+const tabPositionAnimation = cameraTabIndex > -1 ? useTabAnimation() : null;
useEffect(() => {
+    if (!tabPositionAnimation) {
+        return;
+    }
    const listenerId = tabPositionAnimation.addListener(({value}) => {
        // Activate camera as soon the index is animating towards the `cameraTabIndex`
        setIsCameraActive(value > cameraTabIndex - 1 && value < cameraTabIndex + 1);
    });

    return () => {
        tabPositionAnimation.removeListener(listenerId);
    };
}, [cameraTabIndex, tabPositionAnimation]);

Solution 2

1. Add a lodashGet for a new param in ReceiptSelector, isTab which should indicate whether or not the component is in a tab.

const isTab = lodashGet(route, 'params.isTab', 0);

3. Pass the isTab param as a prop to the NavigationAwareCamera component.

<NavigationAwareCamera
  ref={camera}
  ...
+  isTab={isTab}
/>

4. Update the initialParams for the ReceiptSelector tab in MoneyRequestSelectorPage.

<TopTab.Screen
    name={CONST.TAB.SCAN}
    component={ReceiptSelector}
-    initialParams={{reportID, iouType, pageIndex: 1}}
+    initialParams={{reportID, iouType, pageIndex: 1, isTab: 1}}
/>

5. Add support for the isTab prop to the NavigationAwareCamera component.

function NavigationAwareCamera({cameraTabIndex, isTab, forwardedRef, ...props}) {

6. Conditionally set tabPositionAnimation based on the value of isTab.

+const tabPositionAnimation = isTab ? useTabAnimation() : null;
useEffect(() => {
+    if (!tabPositionAnimation) {
+        return;
+    }
    const listenerId = tabPositionAnimation.addListener(({value}) => {
        // Activate camera as soon the index is animating towards the `cameraTabIndex`
        setIsCameraActive(value > cameraTabIndex - 1 && value < cameraTabIndex + 1);
    });

    return () => {
        tabPositionAnimation.removeListener(listenerId);
    };
}, [cameraTabIndex, tabPositionAnimation]);

What alternative solutions did you explore? (Optional)

None.