[HOLD for payment 2023-10-31] [HOLD for payment 2023-10-30] [$500] Scroll is not working properly on the distance detail page, it sometimes gets stuck when scrolling up and down #29038

m-natarajan · 2023-10-06T20:44:37Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

Action Performed:

Click on the "+" button.
Go to Request money > Distance.
Select Start and Finish points and proceed with the request.
Navigate to the distance detail page.
Attempt to scroll up and down the page

Expected Result:

The page should smoothly scroll up and down without getting stuck

Actual Result:

Scrolling is not properly, and the page sometimes gets stuck when scrolling on the distance detail page

Workaround:

unknown

Platforms:

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

Version Number: 1.3.79-3
Reproducible in staging?: y
Reproducible in production?: y
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

screen-recording-2023-10-04-at-113521-pm_daRS8ow5.mp4

Recording.16.mp4

Expensify/Expensify Issue URL:
Issue reported by: @ayazhussain79
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696444461290349

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01348e03e4994bab90
Upwork Job ID: 1710395668949966848
Last Price Increase: 2023-10-06

melvin-bot · 2023-10-06T20:44:42Z

Job added to Upwork: https://www.upwork.com/jobs/~01348e03e4994bab90

melvin-bot · 2023-10-06T20:44:47Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

abdel-h66 · 2023-10-06T23:00:44Z

Proposal

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

Scroll is briefly blocked when trying to scroll to the distance details page, or IOU page with receipt.

The issue can be better replicated using the trackpad

Use the same steps as above
Scroll to the top of the page using the trackpad
try scrolling back down, you will notice that the page is kind of stuck until you scroll down faster

What is the root cause of that problem?

The problem comes from the container of the AnimatedEmptyStateBackground used in both these pages

src/components/ReportActionItem/MoneyRequestView.js
src/components/ReportActionItem/MoneyReportView.js

<View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth), StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT)]}>
   <AnimatedEmptyStateBackground />
</View>

The style StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT) is setting min height of 250 regardless of the devices causing the container becoming small and assumes there is not room to scroll down

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

I suggest removing the StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT) as it overridesStyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth) that is more device size friendly instead of forcing the minHeight to be CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT .

What alternative solutions did you explore? (Optional)

The issue comes partially from the AnimatedEmptyStateBackground component that ignores all pointerEvents. Including the scroll event. Somehow, setting it to auto or at least to box-none fixed the issue.

        <Animated.Image
            pointerEvents="box-none"
            source={EmptyStateBackgroundImage}
            style={[StyleUtils.getReportWelcomeBackgroundImageStyle(isSmallScreenWidth), animatedStyles]}
        />

N/A

allroundexperts · 2023-10-06T23:06:42Z

Proposal

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

Scroll is not working properly on the Money request view page.

What is the root cause of that problem?

The root cause of the issue is that we're defining a min height for the empty state background image container without adding a appropriate margin on the child components in MoneyRequestView and MoneyReportView components.

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

We should follow the same pattern as defined here and try to replicate in the MoneyRequestView and MoneyReportView components (this and this) as well.

This involves replacing this with:

<View style={StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)}>
            <AnimatedEmptyStateBackground />
            <View style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
                .
                .
                .
                .
                .
                .
           </View>

Result

Screen.Recording.2023-10-07.at.4.19.48.AM.mov

Screen.Recording.2023-10-07.at.4.20.44.AM.mov

Screen.Recording.2023-10-07.at.4.21.10.AM.mov

What alternative solutions did you explore? (Optional)

We can also just remove StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT) from here as suggested by the first proposal. However, doing that results in the following:

melvin-bot · 2023-10-07T00:11:05Z

📣 @Arcadekwizera! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Arcadekwizera · 2023-10-07T00:19:45Z

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01abf672ae2e36f8b1

melvin-bot · 2023-10-07T00:19:46Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

corpitts · 2023-10-07T01:26:49Z

Hello, How to join to Expensify group?

melvin-bot · 2023-10-07T01:26:52Z

📣 @corpitts! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

corpitts · 2023-10-07T01:28:54Z

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01598019cf72f02b90

melvin-bot · 2023-10-07T01:28:57Z

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

corpitts · 2023-10-07T01:31:24Z

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01598019cf72f02b90

melvin-bot · 2023-10-07T01:31:26Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

Ollyws · 2023-10-07T17:34:18Z

I can reproduce this on staging but not on the latest main.

Can either of you still reproduce it on the latest main?

melvin-bot · 2023-10-07T17:38:16Z

📣 @abdel-h! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Ollyws · 2023-10-07T17:41:00Z

@abdel-h66 I have, I can reproduce it easily on staging but have yet to reproduce it atall on main.

abdel-h66 · 2023-10-07T17:54:42Z

Yes, I just checked on the latest main, and still could reproduce it. Try the reproduction steps on this comment #29038 (comment)

allroundexperts · 2023-10-07T17:55:50Z

@Ollyws Same here. It's easily reproducible.

Ollyws · 2023-10-07T17:57:11Z

Ahh got it now, was a technical problem on my end.

Ollyws · 2023-10-07T18:09:22Z

@abdel-h66
Thanks for your proposal but simply removing StyleUtils.getMinimumHeight(CONST.EMPTY_STATE_BACKGROUND.MONEY_REPORT.MIN_HEIGHT) leaves alot of empty space at the top of the page:

Image

I like @allroundexperts proposal, it fixes the problem by using a common pattern we're already using in multiple places.

🎀👀🎀 C+ reviewed

melvin-bot · 2023-10-07T18:09:28Z

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

abdel-h66 · 2023-10-07T18:11:11Z

Yes I failed to mention in my comment the pattern seen ReportActionItemCreated which is how I got to my initial solution

melvin-bot · 2023-10-23T04:42:01Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2023-10-24T01:16:42Z

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

[CP Staging] fix: unify the spacing on the money report #30143

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

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

For reference, here are some details about the assignees on this issue:

@Ollyws requires payment
@allroundexperts does not require payment (Eligible for Manual Requests)
@ayazhussain79 requires payment

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-10-24T01:16:44Z

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:

[@Ollyws / @allroundexperts] The PR that introduced the bug has been identified. Link to the PR: Gyroscope-driven animations of empty chats #23737
[@Ollyws / @allroundexperts] 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/23737/files#r1377413396
[@Ollyws / @allroundexperts] 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: N/A
[@Ollyws / @allroundexperts] Determine if we should create a regression test for this bug.
[@Ollyws / @allroundexperts] 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.
[@joekaufmanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: N/A

joekaufmanexpensify · 2023-10-30T13:48:15Z

@Ollyws could you please complete the BZ checklist here so we can prep to issue payment?

Ollyws · 2023-10-31T11:06:06Z

BugZero Checklist:

The PR that introduced the bug has been identified. Link to the PR:

#23737

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/23737/files#r1377413396

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:

N/A

Determine if we should create a regression test for this bug.

I don't think a regression test would be helpful here as it's fairly edge case, hard to test for accurately and doesn't affect the flow in any significant way.

joekaufmanexpensify · 2023-10-31T13:45:40Z

Great, TY! BZ checklist is now complete.

joekaufmanexpensify · 2023-10-31T13:51:35Z

All set to issue payment. @allroundexperts was assigned to the PR on 2023-10-09, and PR was merged on 2023-10-19, so no speed bonus is applicable here. This means we need to pay:

@allroundexperts - $250 for PR (50% regression penalty applies). Paid via NewDot.
@Ollyws - $250 for C+ review (50% regression penalty applies). Paid via Upwork.
@ayazhussain79 - $50 for reporting (Paid via Upwork).

joekaufmanexpensify · 2023-10-31T13:53:48Z

@Ollyws offer sent for $500! (Only $250 will be paid out because of regression).

joekaufmanexpensify · 2023-10-31T14:00:50Z

@ayazhussain79 offer for $50 sent!

joekaufmanexpensify · 2023-10-31T14:01:03Z

@allroundexperts could you please request $250 via NewDot and confirm here once complete?

ayazhussain79 · 2023-10-31T14:03:26Z

@joekaufmanexpensify offer accepted, Thank you

Ollyws · 2023-10-31T14:09:18Z

We did have a regression from this one.

joekaufmanexpensify · 2023-10-31T14:25:37Z

Ah, okay. Thanks for flagging that! In that case, the 50% regression penalty applies here. I've adjusted the payment amounts above to reflect this.

joekaufmanexpensify · 2023-10-31T14:50:21Z

@Ollyws $250 sent and contract ended!

joekaufmanexpensify · 2023-10-31T14:51:33Z

@ayazhussain79 $50 sent and contract ended!

joekaufmanexpensify · 2023-11-01T13:45:50Z

Chatted with @allroundexperts and confirmed they already submitted a request here, so this is all set.

joekaufmanexpensify · 2023-11-01T13:46:25Z

Closing as we're good to go here. Payment summary message is here. Thanks everyone!

JmillsExpensify · 2023-11-03T21:59:30Z

$250 payment approved for @allroundexperts based on this comment.

m-natarajan added the External Added to denote the issue can be worked on by a contributor label Oct 6, 2023

melvin-bot bot changed the title ~~Scroll is not working properly on the distance detail page, it sometimes gets stuck when scrolling up and down~~ [$500] Scroll is not working properly on the distance detail page, it sometimes gets stuck when scrolling up and down Oct 6, 2023

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

melvin-bot bot assigned Ollyws Oct 6, 2023

melvin-bot bot added the Daily KSv2 label Oct 6, 2023

melvin-bot bot assigned mountiny Oct 7, 2023

mountiny assigned allroundexperts Oct 9, 2023

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

melvin-bot bot added the Awaiting Payment Auto-added when associated PR is deployed to production label Oct 23, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Oct 23, 2023

This comment was marked as outdated.

Sign in to view

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 24, 2023

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

Ollyws mentioned this issue Oct 31, 2023

Gyroscope-driven animations of empty chats #23737

Merged

58 tasks

joekaufmanexpensify closed this as completed Nov 1, 2023

[HOLD for payment 2023-10-31] [HOLD for payment 2023-10-30] [$500] Scroll is not working properly on the distance detail page, it sometimes gets stuck when scrolling up and down #29038

[HOLD for payment 2023-10-31] [HOLD for payment 2023-10-30] [$500] Scroll is not working properly on the distance detail page, it sometimes gets stuck when scrolling up and down #29038

Comments

m-natarajan commented Oct 6, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Oct 6, 2023

melvin-bot bot commented Oct 6, 2023

abdel-h66 commented Oct 6, 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)

allroundexperts commented Oct 6, 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?

Result

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Oct 7, 2023

Arcadekwizera commented Oct 7, 2023

melvin-bot bot commented Oct 7, 2023

corpitts commented Oct 7, 2023

melvin-bot bot commented Oct 7, 2023

corpitts commented Oct 7, 2023

melvin-bot bot commented Oct 7, 2023

corpitts commented Oct 7, 2023

melvin-bot bot commented Oct 7, 2023

Ollyws commented Oct 7, 2023 • edited Loading

melvin-bot bot commented Oct 7, 2023

Ollyws commented Oct 7, 2023 • edited Loading

abdel-h66 commented Oct 7, 2023 • edited Loading

allroundexperts commented Oct 7, 2023

Ollyws commented Oct 7, 2023

Ollyws commented Oct 7, 2023 • edited Loading

melvin-bot bot commented Oct 7, 2023

abdel-h66 commented Oct 7, 2023

melvin-bot bot commented Oct 23, 2023

This comment was marked as outdated.

This comment was marked as outdated.

melvin-bot bot commented Oct 24, 2023 • edited by joekaufmanexpensify Loading

melvin-bot bot commented Oct 24, 2023 • edited by joekaufmanexpensify Loading

joekaufmanexpensify commented Oct 30, 2023

Ollyws commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023 • edited Loading

joekaufmanexpensify commented Oct 31, 2023 • edited Loading

joekaufmanexpensify commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023 • edited Loading

ayazhussain79 commented Oct 31, 2023

Ollyws commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023

joekaufmanexpensify commented Oct 31, 2023

joekaufmanexpensify commented Nov 1, 2023

joekaufmanexpensify commented Nov 1, 2023

JmillsExpensify commented Nov 3, 2023

m-natarajan commented Oct 6, 2023 •

edited by melvin-bot bot

Loading

abdel-h66 commented Oct 6, 2023 •

edited

Loading

allroundexperts commented Oct 6, 2023 •

edited

Loading

Ollyws commented Oct 7, 2023 •

edited

Loading

Ollyws commented Oct 7, 2023 •

edited

Loading

abdel-h66 commented Oct 7, 2023 •

edited

Loading

Ollyws commented Oct 7, 2023 •

edited

Loading

melvin-bot bot commented Oct 24, 2023 •

edited by joekaufmanexpensify

Loading

melvin-bot bot commented Oct 24, 2023 •

edited by joekaufmanexpensify

Loading

joekaufmanexpensify commented Oct 31, 2023 •

edited

Loading

joekaufmanexpensify commented Oct 31, 2023 •

edited

Loading

joekaufmanexpensify commented Oct 31, 2023 •

edited

Loading