performance - @shopifyflash-list shows blank screen during scroll and renders list items slowly in React Native - Stack Overflow

I am using @shopify/flash-list in my React Native project to display a list of 114 Surahs. I am experiencing two major issues:

1. Blank Screen During Scroll: The UI occasionally shows a blank screen for a few seconds before rendering the list items.

2. Slow Item Interaction: Each item contains a TouchableOpacity that opens a modal when pressed. The modal takes a long time to appear, and the interaction feels laggy and unresponsive.

Steps Taken:

• Optimized renderItem with useCallback.

• Verified that Redux efficiently manages the list data.

• Experimented with FlashList props such as estimatedItemSize and renderAheadOffset.

• Ensured all components were memoized to avoid unnecessary re-renders.

const renderItem = useCallback(
  ({ item, index }: { item: Surah; index: number }) => (
    <SurahCard
      surahData={item}
      index={index}
      onFavouriteToggle={() => handleFavouriteToggle(item.surahId)}
      handleDownloadToggle={() => handleDownloadToggle(item)}
    />
  ),
  []
);

<FlashList
  ListHeaderComponent={
    <AndroidAudioPlayer minimize={true} />
  }
  renderItem={renderItem}
  keyExtractor={(item, index) =>
    item?.surahId?.toString() ?? `surah-${index}`
  }
  initialScrollIndex={currentSurahId}
  data={allSurahList}
  contentContainerStyle={{ paddingBottom: 90 }}
  ListEmptyComponent={
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>No Surahs available</Text>
    </View>
  }
/>