Shopify Flashlist items load on top of each other initially

Question

I have recently migrated from using Flatlist to shopify Flashlist in React Native.

I have a big list to render (a few hundred items with images in each), and I am running into a bug where in the loading stage, the items are rendering on top of each other, so for a few seconds during the initial loading, all the items in my list are rendering at the top of the screen. After that, the list stabilizes and I can scroll normally and with no issues.

Here is my code

<View
      style={{
        flex: 1,
        alignItems: "center",
      }}
    >
      <Header />
      <View
        style={{
          height: Dimensions.get("screen").height - 120,
          width: Dimensions.get("screen").width * 0.9,
        }}
      >
          <FlashList
            estimatedItemSize={200}
            estimatedListSize={{
              height: Dimensions.get("screen").height,
              width: Dimensions.get("screen").width * 0.9,
            }}
            ref={ref}
            data={finalPosts}
            renderItem={renderItem}
            keyExtractor={(_, i) => i}
            refreshing={refreshing}
            showsVerticalScrollIndicator={false}
            refreshControl={
              <RefreshControl
                refreshing={refreshing}
                onRefresh={() => {
                  loadData();
                }}
              />
            }
          />
      </View>
    </View>

Why is it rendering all of the components at the start of the screen? My initial hypothesis is that it's a styling issue, where because I set the height as Dimensions.height, the list is just looping around and rendering all items at the first position. I experimented a bit with those values but it did not help. Would love to find a solution to this as Flashlist seems to be solving all of the performance issues I had with Flatlist (once all items are loaded). Thanks!

Answer 1

Does this happened in build too? because FlashList performance in development mode is not as good as builds. If yes probably is something to do with estimatedItemSize. How to calculate estimated item size prop

Also I think you should remove estimatedListSize, there is no need for that.

Answer 2

I had a similar issue.

I think you need to reduce the estimatedItemSize. The bigger this value is, the earlier Flashlist thinks the screen is covered and it needs to render more items so when you scroll a bit they are ready to be displayed (AFAIK).

But in reality, this value is much bigger than the items' true height.

So the rendered items aren't covering the entire screen (as Flashlist thinks they are) so Flashlist renders more, and they end up on top of each other initially.

Answer 3

If anyone is still facing the issue of Items stacking on each other on first load for few second. The FlashList prop estimatedItemSize should be set to the width of the item.

• Say you have a CardItem of width: 180px and height: 200px
• set estimatedItemSize to 180

you should have

<FlashList
        data={data}
        renderItem={renderItem}
        estimatedItemSize={180}
        horizontal
        showsHorizontalScrollIndicator={false}
/>

This solved the problem for me both on ios and android device.