Waterfall Layout with Severe Jumping Issues
Open
Nobody has claimed this yet.
bug
v2.0
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 392
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 1
Description
In waterfall layout, （masonry layout）severe jumping occurs when scrolling down after using scrollToIndex to navigate to a specific index. Similarly, after switching between narrow and wide screens on foldable devices with the same waterfall layout, scrolling down also triggers significant jumping.
version: "@shopify/flash-list": "^2.0.0-rc.4",
<FlashList
ref={v=>{(this.listRef=v)}}
data={this.state.cardViewModelList}
numColumns={2}
masonry
scrollEventThrottle={1}
renderItem={this.renderItem}
maintainVisibleContentPosition={{
disabled: true,
}}
estimatedItemSize={200}
/>
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 by reproducing the issue with FlashList 2.0.0-rc.4 using masonry, numColumns={2}, estimatedItemSize={200}, and scrollToIndex. Test both scrolling after navigation and switching between narrow and wide foldable-device layouts; done means scrolling no longer causes severe jumping.
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