FlashList Flicker During Scroll in React Native (iOS)

[eelnar]

Hey folks,

We're somewhat stuck and need the community's brilliant mind to help us find a possible solution—or at least some clarification to better understand the issue.

We're building an app in React Native with an image-heavy feed, using Shopify's ``. Everything works fine except that a quick flash or jump of content happens during scrolling. We’ve tried a bunch of things, but the issue still persists (on both emulator and physical iOS devices).

Does anyone know what we might be missing? And is it even possible to achieve truly optimal scroll performance with FlashList in this kind of setup?

What we’ve tried so far:

• All state is managed in the parent component
• extraData is implemented
• estimatedItemSize:
  - Precisely calculated and set to 604px
  - Tried FlashList’s recommended size (614px)
  - Tried reducing to 300px
• Implemented fixed item layout
• drawDistance is set to 2x estimatedItemSize
• No key props in child components

Would really appreciate any insights!

Environment Info:

"@shopify/flash-list": 1.8.0  
"react-native": 0.74.5
"expo": ~51.0.39

Code snippet:

<FlashList
      ref={ref}
      data={nodeList}
      extraData={{ map: extraDataMap, nodeCount: nodeList.length }}
      renderItem={renderFlashListItem}
      ListHeaderComponent={() => Header(nodeList[0]?.source_type === 'suggested')}
      ListFooterComponent={Footer}
      ItemSeparatorComponent={Divider}
      estimatedListSize={{ width: deviceState.screenWidth, height: deviceState.screenUsableHeight }}
      estimatedItemSize={607}
      drawDistance={2000}
      onRefresh={refreshScreen}
      onEndReached={loadMoreData}
      onEndReachedThreshold={0.8}
      removeClippedSubviews
      refreshing={false}
      showsVerticalScrollIndicator={false}
      disableAutoLayout
      keyExtractor={keyExtractor}
  />

[Iltimirov]

Hello
Try next optimizations:

1. Memoize extraData. It should have stable link otherwise all mounted views will rerender when component rerenders
2. Remove disableautolayout prop
3. Draw distance is too big. Make it smaller for ex 500 or 1000
4. Renderitem should have stable link too, do not change this func dynamically
5. Components inside render item func should be react.memo ofc
6. If you have different types of nodes use getItemType prop to have different recycle pools for each type of node

If it not help here is one ultimate solution - overrideItemLayout prop

You can provide precalculated node sizes of each node. But you will need to calculate it before render. If you have stable heights for each type of node then func will simple. Otherwise you will need store this info inside node data. Additionally you can add height prop to your render item component to be sure that your components have height equals to precalculated heights