Masonry items jump between columns upon size change

[j0sip]

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:

flash-list-masonry-issue.mp4

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

[j0sip]

In our case, this issue prevents us from using optimizedItemArrangement because our list contains multiple items whose height can change dynamically and item jumping between columns is not acceptable.

I have opened an PR (#2108) with a potential fix. I'm happy to make any necessary adjustments. Looking forward to the feedback.