You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Have a Flatlist with expensive items and enough items to go beyond the virtual area.
Use the mouse and drag the scroll bar up and down.
Things should start looking weird: scroll jumps, items appearing and disappearing
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:
Is there an existing issue for this?
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:
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:
$lead_spacer expands scroll artificially when VirtualizedList is mounting new items —> Problem Explanation and Solution in this PR.
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.
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
The text was updated successfully, but these errors were encountered: