Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flatlist with expensive items breaks scroll #2432

Closed
1 task done
LucioChavezFuentes opened this issue Nov 20, 2022 · 2 comments
Closed
1 task done

Flatlist with expensive items breaks scroll #2432

LucioChavezFuentes opened this issue Nov 20, 2022 · 2 comments
Labels

Comments

@LucioChavezFuentes
Copy link
Contributor

LucioChavezFuentes commented Nov 20, 2022

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

I noticed this issue in an App called Expensify. It uses Flatlist for a chat of reports that supports text, images, emojis, and reports as items (and perhaps others that I am not aware of). These items have complex code to support interactions and features on them. As you scroll in the report chat in Web, especially if you scroll fast, you will notice scroll issues like scroll jumps, items appearing and disappearing, or items not showing at all.

Flatlist.Web.Broken.mp4

Expected behavior

Naturally, expensive items will take time to show, but you should find no issues on scroll fast.

Steps to reproduce

Steps to Reproduce:

  1. Have a Flatlist with expensive items and enough items to go beyond the virtual area.
  2. Use the mouse and drag the scroll bar up and down.
  3. Things should start looking weird: scroll jumps, items appearing and disappearing

Test case

https://codesandbox.io/p/github/Lucio-s-Forks/react-native-web/only-longFlatlist-expensive-items-VirtualizedList-updated-no-proposal?file=%2Fpackages%2Freact-native-web-examples%2Fpages%2Findex.js&selection=%5B%7B%22endColumn%22%3A43%2C%22endLineNumber%22%3A90%2C%22startColumn%22%3A43%2C%22startLineNumber%22%3A90%7D%5D

Additional comments

I found the solution to this issue. I discovered this issue is caused by three “sub-issues” and I will explain each of them along with their respective solution in react-native PRs:

  1. $lead_spacer expands scroll artificially when VirtualizedList is mounting new items —> Problem Explanation and Solution in this PR.

  2. VirtualizedList skip items for offset measuring when the user scrolls very fast while new items are mounted and measured —> Problem Explanation and Solution in this PR.

  3. VirtualizedList gets offsets below or equal to zero for items that are not the list's first item —> Problem Explanation and Solution in this PR.

You can test the Flatlist with all solutions applied in this sandbox

Here's Expensify's App after solutions (plus another solution for Inverted VirtualizedLists in react-native-web):

Flatlist.Web.Good.mp4
@timothyerwin
Copy link

any update on this? I see the same problem. if its not a basic text or something the auto scrolling breaks. I think its too fast or something.

I am using an inverted flatlist

@LucioChavezFuentes
Copy link
Contributor Author

@timothyerwin My solutions have already been merged, try the latest version.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment