Shopify / Shopify/flash-list

Disappearing items in Masonry layout

Open
#2,103 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

agent-fix bug P1
Dominant language
TypeScript
Stars
7.2k
Forks
393
Avg merge
1d 3h
Merged PRs (30d)
1

Description

Description

When using FlashList with masonry enabled and optimizeItemArrangement set to false, items can sometimes disappear during scrolling. The issue is more likely to happen where there is a difference in column heights.

Current behavior

When there is a significant discrepancy of visible items' indices, cards sometimes disappear unexpectedly while scrolling. The root cause seems to be that the layout uses binary search for calculating visible items; and because binary search expects sorted items, the algorithm fails when there is a difference in indices between columns

Video:

https://github.com/user-attachments/assets/68e9a65a-4981-4675-b705-4985e300f491

Expected behavior

Cards should not disappear or flicker as user scrolls.

Reproduction

The issue can be reproduced in fixture app.

  1. Disable optimizeItemArrangement in ComplexMasonry example:
        optimizeItemArrangement={false}
  1. Open the ComplexMasonry screen and scroll down (see video above)

Platform

  • iOS
  • Android
  • Web (if applicable)

Environment

FlashList version: "2.2.2"

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

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 fixture/react-native/src/ComplexMasonry.tsx at the optimizeItemArrangement setting, then reproduce the disappearance by opening ComplexMasonry and scrolling with it disabled. Trace the visible-item calculation described in the issue, including its binary-search assumption across columns. Done means cards no longer disappear or flicker on both iOS and Android in this reproduction.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.