[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