Jumpy rendering during upwards scrolling; the list jumps back down despite scrolling up

[jaedub8]

Current behavior

When scrolling down from top to bottom at a moderate / typical pace, the items are rendered smoothly. However, when starting at the bottom and scrolling up, there is a lot of jumpiness. Specifically, the list jumps back downwards, despite scrolling up, meaning we see the same set of items we just scrolled past.

Expected behavior

Scrolling up should be just as smooth as scrolling down. The list should not jump back down.

To Reproduce

Create a list of 1000 items, numColumns 3 (seems, to happen with 4 and 5 as well). Render the items as squares, with the index value as Text (to observe how the items jump). Either force the list to start at the bottom (scrollToIndex) or scroll down to the bottom as fast as your fingers can. Then scroll upwards around 10-20 items at a moderate/typical pace and observe the list jump back down.

Platform:

Only tested on iOS

Environment

FlashList 2.0.3
Expo Go 1017721, SDK 53

[arasrezaei]

I had same problem.
Removing removeClippedSubviews fixed issue for me.

[ptrnk0]

I was able to resolve the initial issue by add removeClippedSubviews. However, this introduced a new problem: when loading more items with onStartReached, the list remains stuck at the top and enters an infinite loading state.

[gotokatsuya]

@ptrnk0 I had same issue.

From reading applyOffsetCorrection, it looks like the logic stores the key of the first visible item and tries to scroll back to that same key after new data is added.

Are all of your list item keys unique?

For example:

// before load
data = ["loading", "data-1", "data-0"]

// after load
data = ["loading", "data-2", "data-1", "data-0"]

In this case the "loading" element remains at the top, so the correction logic keeps anchoring to it. That would explain why the list sticks to the top and can cause infinite loading.

My workaround is to render the loading indicator with ListHeaderComponent instead of keeping it inside the data array.

[naqvitalha]

Hi! This issue may have been addressed by #2138. Since this issue is quite old, we're going to close it. If you're still experiencing this on the latest version, please open a new issue and we'll look into it. Thanks!