[$1000] Scrolling speed is 2 to 3 times faster compared to other apps

[kavimuru]

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:

1. Navigate to any chat with a lot of messages
2. Scroll through the messages quickly
3. Leave your finger on the trackpad and move it a little

Expected Result:

Speed of scroll should be similar to other apps

Actual Result:

One trackpad of scrolling in Slack seems to scroll about 2/3 of a screen -- which feels "right". But one trackpad of scrolling in NewDot scrolls like 3 screens, which feels like way too much.

Workaround:

unknown

Platforms:

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

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

Version Number: 1.2.80-1
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:

Recording.123.mp4

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01919eac50b0e2020d
• Upwork Job ID: 1635974790592495616
• Last Price Increase: 2023-03-15

[MelvinBot]

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

[MelvinBot]

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

[sakluger]

Asking in Slack why this is an issue, since we fixed it previously here #10654.

[sakluger]

We're not sure why this issue resurfaced, but I agree that scrolling feels too fast. Moving along to external.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01919eac50b0e2020d

[MelvinBot]

Current assignee @sakluger is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[mananjadhav]

@sakluger @tgolen I think we can assign this to @0xmiroslav while the C+ enlisting gets fix for them. Unassigning myself.

[MelvinBot]

📣 @0xmiroslav You have been assigned to this job by @mountiny!
Please apply to this job in Upwork 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 📖

[mountiny]

I thinks this one might be good for Callstack too

[BeeMargarida]

Hi, Ana from Callstack here, I would like to pick up this issue

[BeeMargarida]

Working on it!

[mountiny]

Yep, exporting harder issues to expert contributors sorry for just jumping inc its just faster

[BeeMargarida]

Still working on it, currently drafting the proposal

[mountiny]

I will take this one from Tim since he is ooo. @BeeMargarida excited for your proposal

[BeeMargarida]

Proposal

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

The scroll speed of the chats (and other listings) in Web/Desktop is faster than in other similar apps (for example Slack).

What is the root cause of that problem?

After checking the app code, there is no specific change made to the scroll logic recently that would cause this, so I checked the react-native-web fork.

The logic differs from the mainstream in the method this.invertedWheelEventHandler, but even removing the changes it does not cause perceptible changes to the scroll (it shouldn't since the delta calculation is the same).

Trying it out in the examples app of react-native-web (here) using the Lists example with inverted enabled, the scroll also feels fast (faster than with the inverted disabled). So this seems to be something specific to the inverted wheel logic in react-native-web.

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

The first though would be to use the decelerationRate prop. There are two problems:

1. It's not really related to scroll speed, only the deceleration of that speed after the user "lifts their finger". In this case, the speed is faster while the user is scrolling, so this would not help us
2. It's not being used in react-native-web
   The problem seems to be that the delta is too big.

The proposed and quick solution would be to use a constant value to apply to the delta of the wheel event in the Expensify's react-native-web fork. An example of the code would be the one below. This would be an hardcoded value of 0.5, which makes the scroll feel similar to the one in Slack.

const WHEEL_SENSITIVITY = 0.5;
...
this.invertedWheelEventHandler = {
    ...
    var leftoverDelta = delta * WHEEL_SENSITIVITY;
    ...
}

There is a similar logic in VSCode scrollElement with a const called SCROLL_WHEEL_SENSITIVITY.

It would also be beneficial to open the conversation on react-native-web side to see what if there's a better solution.

What alternative solutions did you explore? (Optional)

Instead of modifying the react-native-web code, the other solution explored consisted in adding the wheel handler in the specific page (ReportActionsList) and stop the propagation to the existing one, similar to the code below:+.

componentDidMount() {
    this.fadeIn();

    if (ReportScrollManager.flatListRef.current) {
        ReportScrollManager.flatListRef.current._listRef._scrollRef.addEventListener('wheel', this.handleWheel);
    }
}

componentWillUnmount() {
    ReportScrollManager.flatListRef.current._listRef._scrollRef.removeEventListener('wheel', this.handleWheel);
}

handleWheel(event) {
    event.preventDefault();
    event.stopImmediatePropagation();

    const newScrollPosition = window.pageYOffset + (event.deltaY * SCROLL_SPEED);
    window.scrollTo({top: newScrollPosition, behavior: 'smooth'});
}

However, there are several problems with this approach:

• The access of private properties _listRef and scrollRef
• The refs for the scroll won't be populated on mount, so we would have to wait
• When the refs were populated, they already had the internal wheel event listener, so we could not override the default behaviour

[mountiny]

@BeeMargarida Love the write up! Can we implement the fix in our fork please and try the 0.5 sensitivity same as VSCode?

Could you also create an issue in react-native-web so some discussion can be open, it does not seem ideal that the speed is not same for those.

Only thing I am concerned about is that this behaviour seemed to work well for a bit at least I think, but it could be a rumour too :D

[BeeMargarida]

Can we implement the fix in our fork please and try the 0.5 sensitivity same as VSCode?

Could you also create an issue in react-native-web so some discussion can be open, it does not seem ideal that the speed is not same for those.

Yap, on it!

Only thing I am concerned about is that this behaviour seemed to work well for a bit at least I think, but it could be a rumour too

Hope not 🤞, but I'm still not sure what cause the change in the behaviour 🤔

[mountiny]

Its hard to find if we dont know the exact time, it could be anytime in last 2 months. But given this is repro in the example app, I think its fine to proceed with the speed modifier

[BeeMargarida]

Created the issue on react-native-web and the PR in the Expensify fork:
PR: Expensify/react-native-web#16
Issue: necolas/react-native-web#2500

[BeeMargarida]

@mountiny What are the next steps? Is it necessary to wait for a release of the react-native-web fork?

[mountiny]

Yes, I will release the fork and then you can create an App PR with the new version @BeeMargarida

[MelvinBot]

@sakluger @BeeMargarida @mountiny @0xmiroslav 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!

[mountiny]

I am a bit sick so working not full days, going to try to release the new version today

[mountiny]

@BeeMargarida so I have published a new release, but there is also this PR which was on hold and @kidroca will most likely update the version there so we might just want to test after that #15663

[BeeMargarida]

@BeeMargarida so I have published a new release, but there is also this PR which was on hold and @kidroca will most likely update the version there so we might just want to test after that #15663

Got it, thank you 👍

[mountiny]

The other PR was merged in main with the updated react-natve-web version so this should be good to go I believe, we should test to make sure.

[mountiny]

Screen.Recording.2023-03-24.at.18.29.29.mov

🎉 Seems to be working great! I think we can close this one out now since there is no C+ payment to be done and it was reported internally.

Thank you @BeeMargarida

[AndrewGable]

Did we ever submit an upstream PR for this?

[mountiny]

We made an issue in RNW necolas/react-native-web#2500 seems like Necolas directed us towards RN.

@BeeMargarida do you think you could try to work on this in RN directly?

[BeeMargarida]

Yap, I've subscribed to the open issue. I can take a look at the incomplete tasks in there, see if I can pick and help at any of them

[mountiny]

Thank you, feel free to reprot back on this issue if that works for you