FlashList 2.2.0 [Masonry] misaligned items after appending data (pagination)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 7.2k
- Forks
- 393
- Avg merge
- 1d 3h
- Merged PRs (30d)
- 1
Description
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:
https://github.com/user-attachments/assets/83b77e78-7f1d-4c01-92a1-1f34cb4f05a5
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
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
Run the linked Expo Snack with masonry enabled, two columns, variable-height rows, pagination, and the optional footer. Trace how the masonry layout responds when onEndReached appends to data; done means appended items repack according to shortest-column logic without an artificial vertical gap.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- frontend, mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100