[HOLD for payment 2024-03-18] [$500] Scroll bar appears overlapping on the onboarding modal

[izarutskaya]

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

---

Version Number: v1.4.42-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): kiatest.80+0216@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team
Slack conversation:

Action Performed:

1. Navigate to staging.new.expensify.com
2. Create new account either with Gmail or Expensifail domain
3. Scroll the onboarding modal

Expected Result:

Scroll should display on the extreme right side of the modal

Actual Result:

Scroll bar appears overlapping on the onboarding modal

Note : On Prod, scroll bar displayed on the extreme left side of the modal (please check screenshot attached)

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6381586_1708067736964.RPReplay_Final1708066763.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01ca2148015592295b
• Upwork Job ID: 1760741874670796800
• Last Price Increase: 2024-02-22
• Automatic offers:
• Pujan92 | Reviewer | 0
• mkhutornyi | Contributor | 0

[melvin-bot]

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

[izarutskaya]

I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[mkhutornyi]

Proposal

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

scroll bar on enable wallet page is in the middle of the screen on iOS

What is the root cause of that problem?

react-navigation/react-navigation#8452
This is upstream issue so transition switch between navigation stacks when the screen stack that we navigate to uses ScrollView.

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

Add scrollIndicatorInsets={{right: Number.MIN_VALUE}} to ScrollView in PurposeForUsingExpensifyPage.tsx. (same solution as #31608)

If needed, we can apply to same to other pages where same issue happens.

What alternative solutions did you explore? (Optional)

As a general solution, introduce new custom ScrollView with additional prop so set scrollIndicatorInsets conditionally like this:
scrollIndicatorInsets={flag ? {right: Number.MIN_VALUE} : undefined} and replace all (or necessary) ScrollView with this custom one throughout the app

[melvin-bot]

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

[melvin-bot]

@kevinksullivan Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Auto-assigning issues to engineers is no longer supported. If you think this issue should receive engineering attention, please raise it in #whatsnext.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01ca2148015592295b

[melvin-bot]

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

[Pujan92]

@mkhutornyi's proposal has correct RCA and solution. We should go with a general approach as I am also reproducing a similar issue #33526 which gets closed. cc: @bfitzexpensify

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-02-23.at.12.39.31.mp4

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[MariaHCD]

We should go with a general approach

Agreed, looks like it's happening on more screens so a more general solution should be better here.

[melvin-bot]

📣 @Pujan92 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @mkhutornyi 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[Pujan92]

I am still able to reproduce for the Terms page and other similar issue raised here earlier.

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2024-02-28.at.02.26.39.mp4

[melvin-bot]

@MariaHCD @Pujan92 @kevinksullivan @mkhutornyi this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[melvin-bot]

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

• apply custom scrollview throughout the app #37727

If no regressions arise, payment will be issued on 2024-03-18. 🎊

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

• @Pujan92 requires payment automatic offer (Reviewer)
• @mkhutornyi requires payment automatic offer (Contributor)

[melvin-bot]

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:

• [@Pujan92 / @mkhutornyi] The PR that introduced the bug has been identified. Link to the PR:
• [@Pujan92 / @mkhutornyi] 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:
• [@Pujan92 / @mkhutornyi] 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:
• [@Pujan92 / @mkhutornyi] Determine if we should create a regression test for this bug.
• [@Pujan92 / @mkhutornyi] 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.
• [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@MariaHCD, @Pujan92, @kevinksullivan, @mkhutornyi Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[mkhutornyi]

@kevinksullivan ready for payment

[kevinksullivan]

@mkhutornyi can you complete the checklist above please?

[kevinksullivan]

Made payments, but please complete the checklist. Thanks!

[mkhutornyi]

I am contributor here. Maybe @Pujan92 is responsible for checklist.
Btw I can cover.

There was no regression.
I don't think we need regression test for this. It's super minor. And to prevent such bugs further, we applied eslint rule to force use custom scrollview introduced here.

[Pujan92]

Agree with @mkhutornyi , @kevinksullivan I think we don't need a checklist here as none of the PR has introduced this bug, and these edge case scenarios were there from the start which couldn't be consistently reproducible.

[melvin-bot]

@MariaHCD, @Pujan92, @kevinksullivan, @mkhutornyi 12 days overdue. Walking. Toward. The. Light...

[MariaHCD]

I agree with the reasoning from @mkhutornyi and @Pujan92, there was no PR that caused a regression here and there's no need for a regression test - if this bug were to resurface, it would be noticed on any page that uses the scrollbar.