Content Jumping Issue with Shopify FlashList on iOS React Native

Other Questions Shopify
1

I’m facing a frustrating scrolling problem and hoping someone here can point me in the right direction.

My React Native app has a feed with lots of images using Shopify’s FlashList component. The scrolling works but there’s this annoying content jump or flicker that happens when users scroll through the list on iOS devices.

I’ve spent hours trying different approaches but can’t seem to fix this flickering behavior. Has anyone dealt with similar scrolling issues using FlashList?

What I’ve already attempted:

  • Managing all state from parent component
  • Adding extraData prop
  • Testing different estimatedItemSize values (tried 500px, 650px, and FlashList’s suggested size)
  • Using fixed layout for items
  • Setting drawDistance to 3x the estimated size
  • Removing key props from nested elements

My setup:

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

Current implementation:

<FlashList
  ref={listRef}
  data={feedItems}
  extraData={{ cache: dataCache, total: feedItems.length }}
  renderItem={renderFeedItem}
  ListHeaderComponent={() => TopSection(feedItems[0]?.type === 'recommended')}
  ListFooterComponent={BottomSection}
  ItemSeparatorComponent={Separator}
  estimatedListSize={{ width: screenDimensions.width, height: screenDimensions.availableHeight }}
  estimatedItemSize={650}
  drawDistance={1950}
  onRefresh={handleRefresh}
  onEndReached={fetchMoreItems}
  onEndReachedThreshold={0.7}
  removeClippedSubviews
  refreshing={false}
  showsVerticalScrollIndicator={false}
  disableAutoLayout
  keyExtractor={getItemKey}
/>

Any suggestions would be really helpful!

2

I encountered similar flickering with FlashList when working on a social media app last year. The issue turned out to be related to how iOS handles the native scrolling optimization. What worked for me was adding maintainVisibleContentPosition={{ minIndexForVisible: 0 }} to the FlashList props - this helped stabilize the scroll position during content updates. Another thing that significantly reduced the jumping was implementing proper image preloading and caching. I used react-native-fast-image with aggressive cache settings to ensure images were ready before rendering. Also consider checking if you have any async state updates happening during scroll that might trigger re-renders. Sometimes the flickering comes from components updating their state while the user is actively scrolling, which creates those visual jumps you’re experiencing.

3

Had this exact same issue about 6 months ago and it drove me crazy. The flickering was happening because FlashList was constantly recalculating item heights during scroll. What finally solved it for me was removing disableAutoLayout completely - I know it sounds counterintuitive but that prop was causing more harm than good in my case. Also try setting removeClippedSubviews={false} temporarily to see if that helps isolate the issue. The other thing that made a huge difference was ensuring my image components had explicit width/height props set before they loaded, not just flex styling. This prevented the layout shifts that were causing the visual jumps. Your estimatedItemSize looks reasonable but you might want to measure a few actual rendered items and get a more precise average.

4

weird but i fixed similar jumping by adding getItemType={() => 'item'} prop to flashlist - forces consistent item handling. also check if your renderFeedItem function is stable, creating new functions on each render causes jumps. try wrapping it with useCallback if u havent already.

5

This flickering behavior often stems from FlashList’s internal scroll position tracking getting out of sync with the native scroll view. I dealt with something very similar when migrating from FlatList to FlashList in a news app. The solution that worked for me was adjusting the overrideItemLayout prop to provide more precise layout information. Since you’re working with images, try implementing overrideItemLayout={(layout, item) => { layout.size = 650; }} to enforce consistent sizing regardless of content loading states. Additionally, I found that setting contentInsetAdjustmentBehavior="never" on the underlying ScrollView helped eliminate iOS-specific scroll jank. The other crucial fix was ensuring my image containers had a consistent aspect ratio wrapper - even a few pixels difference in actual vs estimated height causes accumulating scroll drift that manifests as those annoying jumps during fast scrolling.

6

The content jumping you’re seeing is likely caused by image loading affecting layout calculations mid-scroll. I ran into this exact problem when building an e-commerce app with heavy image content. What resolved it for me was implementing a two-phase approach: first, I added initialNumToRender={10} and maxToRenderPerBatch={5} to prevent too many items from rendering simultaneously during fast scrolling. Second, I wrapped my entire item component in a container with fixed dimensions that matched my estimatedItemSize exactly - this prevented any layout shifts when images finished loading. The key insight was that even with proper image sizing, the loading state transitions were still causing micro-layout changes that accumulated into visible jumps. Also worth checking your ListHeaderComponent and ListFooterComponent - if they’re changing height dynamically, that can trigger the flickering behavior you’re experiencing.