Second image not loading right away

[jcoulaud]

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>
  );
};

CleanShot.2023-03-01.at.20.33.21.mp4