Masonry items jump between columns upon size change
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 393
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 1
Description
Current behavior
In a Masonry layout with optimizedItemArangement enabled, items sometimes jump to other column when their height is modified. This results in bad UX.
See video below:
https://github.com/user-attachments/assets/466e1bd5-9173-4339-8405-c25ac7ac1433
Expected behavior
There should at least be a prop that disallow items to switch columns upon size change or it should be enabled by default, at least for the visible items.
Unexpectedly switching columns seems glitchy and leads to bad UX.
Reproduction
Reproducible in flash-list fixture app:
- Open ComplexMasonry screen example
- Click on Item 9 or Item 13 to increase their size and notice how other cards jump to different column
Platform
- iOS
- Android
Environment
FlashList version: 2.2.2
Checklist
- I've searched existing issues and couldn't find a duplicate
- 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 fixture app's ComplexMasonry screen and reproduce the issue by increasing the size of Item 9 or Item 13 on both listed platforms. Compare the column assignments before and after the size change; the work is done when visible items no longer jump columns unexpectedly or the requested column-stability behavior is available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100