search

Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.7k stars 286 forks source link

Masonry items stack in the first column to lengths far beyond that of the second column without apparent reason #1169

Open Nantris opened 7 months ago

Nantris commented 7 months ago

Current behavior

MasonryFlashList appends items to the first column when they should be dispersed evenly between the first and second columns on a 2-column masonry layout.

Expected behavior

More even column allotments

To Reproduce

Unknown exactly when this occurs or doesn't, but it's rather frequent.

Platform:

Environment

@shopify/flash-list version: 1.4.3 (I understand this is old, but I see no entries in the release history to suggest it is fixed and I will test a newer version as soon as I am able to)

walshie4 commented 6 months ago

This happens for me on the latest release FWIW

perroudsky commented 4 months ago

up

Nantris commented 4 months ago

Anyone experiencing this should really upvote the initial report comment - because maintainers can sort issues by number of reactions.

CrazyStoneJy commented 2 months ago

same bug on 1.7.0

hanwenbo commented 2 months ago

same bug on 1.7.1

    "@shopify/flash-list": "^1.7.1",

Image

https://github.com/Shopify/flash-list/issues/1264

hanwenbo commented 2 months ago

solved by

<MasonryFlashList
  ... 
  optimizeItemArrangement={true} 
  overrideItemLayout={ (layoutObject, sourceData, ...) => { layoutObject.size = calculateItemHeight(sourceData) } }
/>
Nantris commented 2 months ago

@hanwenbo it's not exactly clear what your solution is. Where does calculateItemHeight come from? It seems like that's the key to your fix but calculating item height isn't necessarily easy (I think.)

hanwenbo commented 2 months ago

@Nantris You need to calculate the height yourself ，Yes, it's not easy to calculate, but you still have to figure out how to calculate it, and flash-list for you will make the performance of the list uncontrollable

hanwenbo commented 2 months ago

It is still just a bug. After updating a piece of data, even if the overrideItemLayout is calculated correctly, a bug will occur

If I don't update one of these, there's no bug, and there's no bug in the append data

recomputeViewableItems,extraData, data, recordInteraction ，each change cannot recalibrate the layout change

This happens when data is modified and when data is deleted

If the height of a piece of data is changed, the probability of triggering this bug is the highest

"@shopify/flash-list": "^1.7.1",

Image

Image