FlashList 2.2.0 [Masonry] misaligned items after appending data (pagination)

[sahiljena-jpg]

Description

With masonry={true} and numColumns={2}, after onEndReached loads the next page and data is extended, the masonry grid can leave a large empty vertical gap in one column while the other column continues to stack items normally. Items appear misaligned relative to a tight masonry packing (see screenshot).

Current behavior

• Initial page renders as a two-column masonry grid.
• After pagination (more items appended to data), one column can show a tall blank region while the opposite column still receives cards. The gap does not correspond to a missing item in the data set; it looks like layout / column assignment not reflowing correctly after the append.

Screenshot:

ScreenRecording_04-30-2026.18-58-46_1.MP4

Expected behavior

After each pagination append, masonry should repack items so both columns stay filled according to shortest-column (or equivalent) logic, without a large artificial gap in one column when more items exist that could occupy that space.

Reproduction

Minimal pattern: masonry + numColumns={2} + append on onEndReached + variable-height rows + optional ListFooterComponent (loader), matching how a paginated feed behaves.

Expo Snack or minimal reproduction link:

https://snack.expo.dev/@sahiljena1/flashlist-masonry-bug-report

Platform

• iOS
• Android
• [] Web (if applicable)

Environment

React Native info output:

System:
  OS: macOS 26.0.1
  CPU: (14) arm64 Apple M4 Pro
  Memory: 145.91 MB / 24.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.22.0
    path: /opt/homebrew/opt/node@22/bin/node
  Yarn:
    version: 4.10.2
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.9.4
    path: /opt/homebrew/opt/node@22/bin/npm
  Watchman:
    version: 2026.01.12.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.2
      - iOS 26.2
      - macOS 26.2
      - tvOS 26.2
      - visionOS 26.2
      - watchOS 26.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2025.3 AI-253.29346.138.2531.14850935
  Xcode:
    version: 26.2/17C52
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.18
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

FlashList version: 2.2.0

Additional context

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

[anirudh-ramanan]

@naqvitalha can you help with this one

[jingjing2222]

anyone help

[l2hyunwoo]

+1