Shopify / Shopify/flash-list

Masonry items jump between columns upon size change

Open
#2,107 1 comment 0 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

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:

  1. Open ComplexMasonry screen example
  2. 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.