Second image not loading right away
Opened this issue · 0 comments
jcoulaud commented
Hi,
If I open an image and slide to the left or right, the following image does not load immediately.
I have to go back and slide it again, as you can see in the video. Would you happen to know why?
Here is my code:
export const Gallery = ({ images }: Props) => {
// variables
const [isGalleryVisible, setIsGalleryVisible] = useState<boolean>(false);
const [currentImageIndex, setImageIndex] = useState<number>(0);
// functions
const onShowGallery = (index: number) => {
setImageIndex(index);
setIsGalleryVisible(true);
};
const onHideGallery = () => setIsGalleryVisible(false);
// renders
const renderImage = ({ item, index }: { item: Image | string; index: number }) => {
return (
<ImageContainer onPress={() => onShowGallery(index)}>
<CustomImage uri={item.url} height={index > 0 ? THUMBNAIL_SIZE : 0} />
<IconContainer>
<CustomIcon name="expand" type="lined" fill={colors.white} width={16} />
</IconContainer>
</ImageContainer>
);
};
return (
<Container>
<FlatList
data={gif ? images : images.slice(1)}
renderItem={({ item, index }) => renderImage({ item, index: index + 1 })}
horizontal
/>
<ImageView
images={images}
imageIndex={currentImageIndex}
visible={isGalleryVisible}
onRequestClose={onHideGallery}
backgroundColor={colors.primaryReverse}
presentationStyle="overFullScreen"
/>
</Container>
);
};