React-native android images flashing on load - react-native

Question

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
}}
onLoadStart={() => onLoading(true)}
onLoadEnd={() => onLoading(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 }}
onLoadStart={() => onLoading(true)}
onLoadEnd={() => onLoading(false)}
/>
</View>
</FastImage>
}
</View>
Video Link: https://www.youtube.com/shorts/_v758YEg9iY

Answer 1

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={() => onLoading(true)}
onLoadEnd={() => onLoading(false)
...