Skip to content

Disappearing items in Masonry layout #2103

@j0sip

Description

@j0sip

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:

flashlist-issue.mp4

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions