I have a FlatList contains list of product item. Each product has an image to display and I'm using FastImage
<FlatList
ref={scrollRef}
style={{ flex: 1, backgroundColor: 'white', marginTop: 10 }}
columnWrapperStyle={{ justifyContent: 'space-between', paddingHorizontal: '3%' }}
numColumns={2}
data={productList}
keyExtractor={item => item.id}
renderItem={renderProduct}
// removeClippedSubviews={true}
onEndReachedThreshold={0.3}
onEndReached={() => {
if (!isLoading) getMoreProducts();
}}
initialNumToRender={20}
maxToRenderPerBatch={20}
/>
<View style={[{ width: '100%', height: '100%' }, style]}>
...
<FastImage
onLoadEnd={() => {
// console.log(optimizeUri);
Animated.timing(animVal).reset();
}}
style={{ width: '100%', height: '100%' }}
source={{ uri: cdn == true ? optimizeUri : uri }}
//onLoadStart={() => console.log('begin')}
resizeMode={'cover'}
/>
</View>
When I comment out the console log and start debugging, in the first time I received all the log from onLoadStart function of all item, which means all images start loading in the first time render. But seconds later, only a few items at beginning of the list log the second message from onLoadEnd function. Only when I scroll down the list, more logs are appeared and the image is rendered. This behavior makes the entire loading time of my list is a bit slow. I assume that when the image is outside of the main view, it won't loading until I scroll to it. Is there anyway to make image loading even it's outside of main view, for better appearance ?
