Troubles with images using flashlist in react native

Question

I have trouble like this:

The more pictures, the more interference and the longer they last

Does flashlist have a method to display the loading indicator for such cases? If not, how to fix it? When I use simple flatlist, I dont't have any troubles with this P.s: I have found onLoad event, but it doesn't work:

    <FlashList
        numColumns={2}
        onEndReached={async() => {
          getData()
        }}
        data={DATA}
        renderItem={renderItem}
        estimatedItemSize={200}
        onLoad={()=>{
          setIsLoading(false)
        }}
    />

Answer 1

You can use the react-native-fast-image library to load images quickly and show indicators for each image of the list in the renderItem component.

 <FastImage
    style={[
      styles.image,
      {
        width: StyleConfig.smartWidthScale(250),
        height: StyleConfig.smartWidthScale(165),
        backgroundColor: isLoading ? Color.blackOpacity : Color.transparent,
      },
    ]}
    source={{uri:item.image}}
    onLoadStart={() => {
      setLoading(true);
    }}
    onLoadEnd={() => {
      setLoading(false);
    }}
    onError={() => {
      setLoading(false);
    }}>
    {loading && <ActivityIndicator size={'small'} animating={isLoading} />}

  </FastImage>