MasonryFlashList: The right column often doesn't come out when I slide down

[BennyTian]

Platform:

iOS + Android

Environment

@shopify/flash-list: "1.4.3"

Code

<MasonryFlashList
        data={data}
        keyExtractor={keyExtractor}
        initialNumToRender={10}
        numColumns={2}
        columnWrapperStyle={styles.columnWrapper}
        renderItem={({ item, index }) => (
          <StoryItem {...item} onItemClick={() => onItemClick(item, index)} />
        )}
        refreshControl={
          <RefreshControl refreshing={isRefreshing} onRefresh={handleRefresh} />
        }
        onEndReached={handleLoadMore}
        ListFooterComponent={renderFooter}
        onEndReachedThreshold={0.1}
      />

472_1699516744.mp4

Tasks

Preview Give feedback

No tasks being tracked yet.

[yaoz0816]

friend, how solved it ?

[BennyTian]

friend, how solved it ?

We haven't found a solution yet

[zyestin]

See official documentation masonry#optimizeitemarrangement

If enabled, MasonryFlashList will try to reduce difference in column height by modifying item order. If true, specifying overrideItemLayout is required. Default value is false.

Use as below

<MasonryFlashList
  ... 
  optimizeItemArrangement={true} 
  overrideItemLayout={ (layoutObject, sourceData, ...) => { layoutObject.size = calculateItemHeight(sourceData) } }
/>

[naqvitalha]

@zyestin's suggestion is the right one.