React Native performance issues with Shopify's FlashList component

Other Questions Shopify
1

I’m having trouble with the FlashList component from Shopify in my React Native app. It’s supposed to show a list of 114 Surahs but it’s not working right. Here are the main problems:

  1. The screen goes blank for a bit when I scroll. It’s like the list items disappear and then come back after a few seconds.

  2. When I tap on an item to open a modal, it takes forever. The whole thing feels really slow and clunky.

I’ve tried a bunch of things to fix it:

  • Used useCallback for the renderItem function
  • Made sure my Redux setup is okay
  • Played around with FlashList settings like estimatedItemSize and renderAheadOffset
  • Used memo for all my components

Here’s a simplified version of my code:

function renderListItem({ item, index }) {
  return (
    <SurahItem
      data={item}
      position={index}
      onFavClick={() => toggleFav(item.id)}
      onDownloadClick={() => toggleDownload(item)}
    />
  );
}

<FastList
  HeaderComponent={<MusicPlayer small={true} />}
  renderItem={renderListItem}
  getItemKey={(item, index) => item?.id?.toString() || `s-${index}`}
  startIndex={currentId}
  items={surahList}
  containerStyle={{ paddingBottom: 90 }}
  EmptyView={
    <CenteredBox>
      <PlainText>No items found</PlainText>
    </CenteredBox>
  }
/>

Any ideas on how to make this work better?

2

hey charlottew, sounds like a real headache! i’ve had similar issues w/ FlashList. have u tried disabling the initialScrollIndex prop? that fixed my blank screen probs. also, maybe try using getItemType to optimize rendering? jus some ideas. good luck!

3

I’ve been down this road with FlashList, and it can be frustrating. One thing that made a huge difference for me was implementing proper list item recycling. Make sure your SurahItem component isn’t doing any heavy lifting on re-render.

Also, have you considered using the overscan property? It pre-renders items off-screen, which can help with that blank screen issue during scrolling. Something like overscan={5} might smooth things out.

For the modal loading, I’d suggest moving any data fetching or complex calculations out of the onPress handler. Maybe preload that data or use a loading state in the modal itself.

Lastly, double-check that you’re not passing unnecessary props to your list items. Even small tweaks here can add up with 114 items. Hope this helps!

4

bro, i feel ur pain. flashlist can be a real pain sometimes. have u tried using the experimental_layoutAnimationEnabled prop? it smoothed out my scrolling issues. also, check if ur modal is doing any heavy lifting on open. maybe move some logic to a useEffect or smthn. good luck!

5

I’ve faced similar challenges with FlashList in large datasets. One approach that significantly improved performance for me was implementing virtualization techniques. This means only rendering the items that are actually visible on screen, plus a small buffer.

Have you tried adjusting the initialNumToRender prop? Setting it to a lower value, say 10, can speed up initial render time. Also, make sure you’re not doing any expensive operations in your renderItem function.

Another thing to look into is the keyExtractor prop. Ensure it’s returning unique, stable keys for each item. This helps React optimize re-renders.

Lastly, if you’re still having issues, consider breaking your list into smaller chunks using pagination or infinite scrolling. This can drastically improve performance for large datasets.