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}
  />