React-native android images flashing on load-CodePudding

I am having trouble on Android where the images are flashing only on Android and I cannot seem to find a solution.

I have attached a video below to show the problem

Here is my Flatlist

  <FlatList
   ListEmptyComponent={_listEmptyComponent}
   initialNumToRender={2}
   keyExtractor={(item) => item.key}
   renderItem={renderItem}
   data={walletData}
   contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-start', paddingBottom: 80, marginTop: 20 }}
   style={{ padding: 5, marginTop: 40, backgroundColor: '#ffff' }} />

Here is my renderItem Function:

     const renderItem = ({ item }: any) => { return (
            <View style={{marginTop: 20}}>
            <Card title={item.category} logo={item.logoImage} name={item.name} address={item.shortAddress} background={item.backgroundImage} Key={item.chainId} Stamps={item.schemes} Vouchers={item.vouchers} />
            </View>
          )
   }

Here is the Card Image part:

  <View style={styles.top}>

          {/* Background image */}
          {loading &&
            <View style={{ justifyContent: 'center', flexDirection: 'row', width: '100%' }}>
              <ActivityIndicator size="small" color="black" />
            </View>
          }
          {

            <FastImage
              style={{
                height: Dimensions.get('window').height / 4.5,
                width: '100%',
                borderRadius: 12
              }}
              onl oadStart={() => onl oading(true)}
              onl oadEnd={() => onl oading(false)}
              source={{
                uri: background,
                priority: FastImage.priority.normal,
              }}
              resizeMode={FastImage.resizeMode.cover}>

          {/* Logo image */}

              <View style={styles.test} >
                <Image
                  style={styles.imageTop2}
                  source={{ uri: logo }}
                  onl oadStart={() => onl oading(true)}
                  onl oadEnd={() => onl oading(false)}
                />

              </View>
            </FastImage>

          }

        </View>

Video Link: https://www.youtube.com/shorts/_v758YEg9iY

CodePudding user response：

Some logic cause screen to rerender 2 times. iOS caches pre-loaded images and use cached images for the next rerender without refetch them.

Android doesn't cache t images and fetches them again for the next rerender which takes some milliseconds to be ready and results in flickering.

The solution is to avoid a second rerender or wait until all data fetching finishes before app render a FlatList.

Try to remove this state change.

...
onLoadStart={() => onl oading(true)}
onLoadEnd={() => onl oading(false)
...