I am using a react-native-snap-carousel to render a photo gallery. I noticed that first entrance to the gallery takes a lot of time to render photos, especially if there are several photos.
const renderItem = ( photo) => {
console.log(photo); //<- it shows up quickly in the console, but the photo is not visible for a long time
return (
<View style={styles.imgContainer}>
<Image source={{ uri: photo.item.uri }} style={styles.img} />
</View>
)};
return (<Carousel
ref={carouselRef}
data={props.photos}
renderItem={renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
activeSlideAlignment={'center'}
onSnapToItem={index => setActiveSlide(index)}
/>)
What could be the reason for this behavior? What can I do with this?