Shopify / Shopify/flash-list

Jitter/flickering when scrolling upwards through variable-height items after prepending data

Open
#2,052 2 comments 10 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P1
Dominant language
TypeScript
Stars
7.2k
Forks
393
Avg merge
1d 3h
Merged PRs (30d)
1

Description

Description

When items are prepended to a FlashList with variable-height content, scrolling upwards through the newly added items causes visible jitter/flickering. The content visibly jumps as items are measured during scroll.

Current behavior

  • Fixed-height items: No jitter
  • Variable-height items: Jitter present
  • FlatList does NOT exhibit this issue on iOS
FlashList (jitter)

https://github.com/user-attachments/assets/77ef19fc-7b7b-424a-8125-fd6408a931cb

FlatList (no jitter)

https://github.com/user-attachments/assets/2aeedde9-5fa0-439b-8080-9c51d7a2fc64

Expected behavior

Smooth scrolling without significant jitter when scrolling upwards through prepended variable-height items.

Reproduction

Expo Snack or minimal reproduction link:

https://snack.expo.dev/@jessejanderson/flash-list-jitter

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

FlashList version: 2.2.0
React Native version: 0.81 (Expo SDK 54)

Additional context

In the app where I first ran into this issue, I've tried a number of recommendations from the v2 documentation and other sources, but none of them have resolved the issue.

  • Memoized props
  • Proper keyExtractor usage to return unique, stable keys for each item.
  • Using getItemType to better predict height for different item types.
  • Tested various drawDistance values. Nothing but extremely high values (10000+) made a significant difference.
  • Deferred state updates during scroll.
  • scrollEventThrottle={16}
  • Confirmed no key props
  • A bunch of random other things. 🙃

None of these resolved the issue (other than the extremely high drawDistance values, which eventually break when the prepended/new item count is high enough).

Checklist

  • I've searched existing issues and couldn't find a duplicate
    (there are some similar issues, but involve multi-column layouts or other more complex setups)
  • I've provided a minimal reproduction (Expo Snack preferred)
  • I'm using the latest version of @shopify/flash-list
  • I've included all required information above

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Expo Snack reproduction and run it on iOS with FlashList 2.2.0 and React Native 0.81. Compare prepended fixed-height and variable-height items while scrolling upward, using the FlatList recording as a baseline. Trace the measurement and prepend behavior responsible for visible jumps, and verify that variable-height prepended items scroll smoothly without significant jitter.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
mobile, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.