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

lanitochka17 · 2023-09-20T23:12:39Z

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

Launch App
Request money via Scan option
Tap the report preview
Tap the request preview
Tap the receipt image
When the modal opens, tap the three dot menu at the top
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?

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 · 2023-09-20T23:12:44Z

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

melvin-bot · 2023-09-20T23:12:46Z

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 · 2023-09-20T23:14:21Z

👋 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:

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

melvin-bot · 2023-09-20T23:14:23Z

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

akinwale · 2023-09-21T03:50:26Z

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

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);

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

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);

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

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

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}}
/>

Add support for the isTab prop to the NavigationAwareCamera component.

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

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.

melvin-bot · 2023-09-21T06:05:04Z

Triggered auto assignment to @Li357 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

Li357 · 2023-09-21T06:40:13Z

@akinwale I agree with the RCA here but is there a more elegant way to do this? This might not work, but could have a param on the EditRequestReceiptPage that we can directly get from the navigation context in NavigationAwareCamera?

akinwale · 2023-09-21T07:07:41Z

@akinwale I agree with the RCA here but is there a more elegant way to do this? This might not work, but could have a param on the EditRequestReceiptPage that we can directly get from the navigation context in NavigationAwareCamera?

@Li357 Two options I can think of:

We can check with the cameraTabIndex prop which is already being passed (which is the pageIndex param set in MoneyRequestSelectorPage). In the lodashGet for pageIndex in ReceiptSelector, set the default value to -1. Then we can perform the necessary checks in NavigationAwareCamera. We can safely assume that if the index is > -1, that means that a page index was set, and we are surely within a tab.
Forward the route prop to the NavigationAwareCamera from ReceiptSelector and use this to check, but we still need to set a param that can be used to check.

akinwale · 2023-09-21T07:33:22Z

Proposal

Updated

Li357 · 2023-09-21T09:08:30Z

Going to handle this with Proposal 1

parasharrajat · 2023-09-22T12:31:33Z

@laurenreidexpensify Please assign me to the issue as reviewer. Thanks.

melvin-bot · 2023-09-25T09:29:58Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.73-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

[CP Stag] Only use tab animation when in tab navigator #27974

If no regressions arise, payment will be issued on 2023-10-02. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-09-25T09:29:59Z

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@Li357] The PR that introduced the bug has been identified. Link to the PR: Replace receipt #26508
[@Li357] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/26508/files#r1348225877
[@Li357] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@Li357] Determine if we should create a regression test for this bug. N/A
[@Li357] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@laurenreidexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

parasharrajat · 2023-09-25T09:53:08Z

@laurenreidexpensify Please assign me to the issue as reviewer. Thanks.

melvin-bot · 2023-10-02T10:54:12Z

@Li357, @laurenreidexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

laurenreidexpensify · 2023-10-03T14:41:06Z

Also assigning @akinwale for a discretionary bonus here, as we used their solution.

laurenreidexpensify · 2023-10-03T14:42:53Z

Payment Summary:

External issue reporter - Applause, N/A
Contributor that fixed the issue - @Li357 internal, N/A
Contributor+ that helped on the issue and/or PR - @parasharrajat $500, please request payment in newdot
~~Proposal bonus - @akinwale $125, please apply in Upwork thank you!~~

akinwale · 2023-10-03T15:02:13Z

Payment Summary:

External issue reporter - Applause, N/A Contributor that fixed the issue - @Li357 internal, N/A Contributor+ that helped on the issue and/or PR - @parasharrajat $500, please request payment in newdot Proposal bonus - @akinwale $125, please apply in Upwork thank you!

There isn't an Upwork job created for this issue.

melvin-bot · 2023-10-05T09:54:38Z

Job added to Upwork: https://www.upwork.com/jobs/~016d18ed8dd8d228a2

melvin-bot · 2023-10-05T09:54:42Z

Current assignees @akinwale and @parasharrajat are eligible for the External assigner, not assigning anyone new.

laurenreidexpensify · 2023-10-05T09:55:26Z

@akinwale apols, Upwork job live now! Please apply and I will adjust payment to $125 when when we pay out the job. Thanks!

akinwale · 2023-10-05T09:57:27Z

@akinwale apols, Upwork job live now! Please apply and I will adjust payment to $125 when when we pay out the job. Thanks!

@laurenreidexpensify Applied. Thanks!

parasharrajat · 2023-10-05T15:17:13Z

Note: I don't think we used any of the existing proposals. Initially, we thought of using existing proposals then it as changed after my suggestion #27974 (comment). Thus the final solution does not use any proposals.

@laurenreidexpensify

parasharrajat · 2023-10-05T15:20:07Z

Payment requested as per #27903 (comment)

JmillsExpensify · 2023-10-05T20:45:41Z

$500 payment approved for @parasharrajat based on BZ summary.

laurenreidexpensify · 2023-10-09T09:19:22Z

Thanks for confirmation @parasharrajat

in that case @akinwale as we didn't use your proposals in end, there won't be a discretionary bonus after all. thanks all.

lanitochka17 added DeployBlockerCash This issue or pull request should block deployment Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 20, 2023

melvin-bot bot assigned laurenreidexpensify Sep 20, 2023

OSBotify mentioned this issue Sep 20, 2023

Deploy Checklist: New Expensify 2023-09-20 #27837

Closed

github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Sep 20, 2023

laurenreidexpensify added Engineering and removed Engineering labels Sep 21, 2023

melvin-bot bot assigned Li357 Sep 21, 2023

Li357 mentioned this issue Sep 22, 2023

[CP Stag] Only use tab animation when in tab navigator #27974

Merged

59 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Hourly KSv2 labels Sep 22, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Sep 22, 2023

melvin-bot bot changed the title ~~RM - App crashed when tap replace receipt~~ [HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt Sep 22, 2023

melvin-bot bot changed the title ~~[HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt~~ [HOLD for payment 2023-10-02] [HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt Sep 25, 2023

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Sep 29, 2023

laurenreidexpensify assigned parasharrajat and akinwale Oct 3, 2023

melvin-bot bot removed the Overdue label Oct 3, 2023

laurenreidexpensify added the External Added to denote the issue can be worked on by a contributor label Oct 5, 2023

melvin-bot bot changed the title ~~[HOLD for payment 2023-10-02] [HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt~~ [$500] [HOLD for payment 2023-10-02] [HOLD for payment 2023-09-29] RM - App crashed when tap replace receipt Oct 5, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 5, 2023

laurenreidexpensify removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 5, 2023

Li357 mentioned this issue Oct 6, 2023

Replace receipt #26508

Merged

59 tasks

melvin-bot bot added the Overdue label Oct 9, 2023

laurenreidexpensify closed this as completed Oct 9, 2023

melvin-bot bot removed the Overdue label Oct 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lanitochka17 commented Sep 20, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 20, 2023

melvin-bot bot commented Sep 20, 2023

OSBotify commented Sep 20, 2023

melvin-bot bot commented Sep 20, 2023

akinwale commented Sep 21, 2023 •

edited

Loading

melvin-bot bot commented Sep 21, 2023

Li357 commented Sep 21, 2023

akinwale commented Sep 21, 2023 •

edited

Loading

akinwale commented Sep 21, 2023

Li357 commented Sep 21, 2023

parasharrajat commented Sep 22, 2023

melvin-bot bot commented Sep 25, 2023

melvin-bot bot commented Sep 25, 2023 •

edited by Li357

Loading

parasharrajat commented Sep 25, 2023

melvin-bot bot commented Oct 2, 2023

laurenreidexpensify commented Oct 3, 2023

laurenreidexpensify commented Oct 3, 2023 •

edited

Loading

akinwale commented Oct 3, 2023

melvin-bot bot commented Oct 5, 2023

melvin-bot bot commented Oct 5, 2023

laurenreidexpensify commented Oct 5, 2023

akinwale commented Oct 5, 2023

parasharrajat commented Oct 5, 2023

parasharrajat commented Oct 5, 2023

JmillsExpensify commented Oct 5, 2023

laurenreidexpensify commented Oct 9, 2023

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

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

Comments

lanitochka17 commented Sep 20, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 20, 2023

melvin-bot bot commented Sep 20, 2023

Bug0 Triage Checklist (Main S/O)

OSBotify commented Sep 20, 2023

melvin-bot bot commented Sep 20, 2023

akinwale commented Sep 21, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 21, 2023

Li357 commented Sep 21, 2023

akinwale commented Sep 21, 2023 • edited Loading

akinwale commented Sep 21, 2023

Proposal

Li357 commented Sep 21, 2023

parasharrajat commented Sep 22, 2023

melvin-bot bot commented Sep 25, 2023

melvin-bot bot commented Sep 25, 2023 • edited by Li357 Loading

parasharrajat commented Sep 25, 2023

melvin-bot bot commented Oct 2, 2023

laurenreidexpensify commented Oct 3, 2023

laurenreidexpensify commented Oct 3, 2023 • edited Loading

akinwale commented Oct 3, 2023

melvin-bot bot commented Oct 5, 2023

melvin-bot bot commented Oct 5, 2023

laurenreidexpensify commented Oct 5, 2023

akinwale commented Oct 5, 2023

parasharrajat commented Oct 5, 2023

parasharrajat commented Oct 5, 2023

JmillsExpensify commented Oct 5, 2023

laurenreidexpensify commented Oct 9, 2023

lanitochka17 commented Sep 20, 2023 •

edited by melvin-bot bot

Loading

akinwale commented Sep 21, 2023 •

edited

Loading

akinwale commented Sep 21, 2023 •

edited

Loading

melvin-bot bot commented Sep 25, 2023 •

edited by Li357

Loading

laurenreidexpensify commented Oct 3, 2023 •

edited

Loading