Scrolling not working when renderItem uses ImageZoom component

[elad30300]

Hi, I'm not sure if this is a bug but I would like to get some help here :)

I want to have a carousel that each item is a zoomable image, the carousel should be all over the screen so I use Portal for that. To support zoom I use ImageZoom component from react-native-image-pan-zoom in the following way:

      <Portal>
        <Carousel
          loop
          windowSize={1}
          width={SCREEN_WIDTH}
          height={SCREEN_HEIGHT}
          data={images}
          style={{
            flex: 1,
            backgroundColor: "black",
          }}
          defaultIndex={imageIndexToDisplay}
          onSnapToItem={handleImageChange}
          renderItem={({ item: { url, width, height } }) => (
            <ImageZoom
              cropWidth={SCREEN_WIDTH}
              cropHeight={SCREEN_HEIGHT}
              imageWidth={width}
              imageHeight={height}
              enableSwipeDown
              onSwipeDown={handleClose}
              onClick={handlePress}
              useNativeDriver
            >
              <Image
                imageSource={url}
                defaultImage={defaultImage}
                imageStyle={{ height, width }}
              />
            </ImageZoom>
          )}
        />
      </Portal>

What happens is that the carousel barely let me scroll left or right since it seems like the ImageZoom responds first to the scrolls. I tried to set onStartShouldSetPanResponder={() => false} on the ImageView which solves the Carousel scrolling but doesn't let me use the ImageZoom to zoom since it appears like the Carousel now responds first to gestures.

I would like to know if there is any way to make them both work together.

Thanks ahead!

[hurajgor]

@dohooo, Any update on this? The scrolling isn't working with the PhotoView library as well.

[eduardfarkas]

react-native-reanimated-zoom not working as well

[AdirTrichter]

Any updates regarding this issue please?

[MadeinFrance]

@eduardfarkas I've tried to instantiate differently but no luck:

 import {
  Zoom,
  createZoomListWithReanimatedComponent,
} from 'react-native-reanimated-zoom';

const ZoomCarousel = createZoomListWithReanimatedComponent(Carousel);

Same issue Carousel is not scrolling.

[zoom2009]

I found other solution and it work well try this package react-native-pinchable

Ex.

import Pinchable from 'react-native-pinchable'
import Carousel from 'react-native-reanimated-carousel'
import { Image, useWindowDimensions } from 'react-native'

export const ImagesView = () => {
  const { width } = useWindowDimensions()

  return (
    <Carousel
      loop
      width={width}
      height={width / 2}
      data={[...new Array(6).keys()]}
      scrollAnimationDuration={1000}
      onSnapToItem={(index) => console.log('current index:', index)}
      renderItem={({ index }) => (
        <Pinchable>
          <Image resizeMode="contain" style={{ width: 200, height: 200 }} source={{ uri: 'https://www.shopat24.com/blog/wp-content/uploads/2020/04/7.jpg' }} />
        </Pinchable>
      )}
    />
  )
}

[ammarfaris]

any suggestion on other package besides react-native-pinchable for zooming and panning of images?