Jitter/flickering when scrolling upwards through variable-height items after prepending data
Nobody has claimed this yet.
- 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
keyExtractorusage to return unique, stable keys for each item. - Using
getItemTypeto better predict height for different item types. - Tested various
drawDistancevalues. Nothing but extremely high values (10000+) made a significant difference. - Deferred state updates during scroll.
scrollEventThrottle={16}- Confirmed no
keyprops - 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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