Event "onSwipeToClose" is not working

[usamaabutt]

I am using the library for the image zoom feature and am thankful to the authors that they build it. But I am not able to get work "onSwipeToClose" event but all other events are working for me. I am using it as below. Any help will be appreciated thanks! @pavelbabenko @alantoa

<CustomModal isModalVisible={openZoomViewer} backdropOpacity={1}> <Gallery data={image} hideAdjacentImagesOnScaledImage={true} disableSwipeUp={true} renderItem={renderItem} onSwipeToClose={closeZoomViewer} onDoubleTap={closeZoomViewer} onIndexChange={(newIndex) => { console.log(newIndex); }} style={{ alignSelf: 'center' }} /> </CustomModal>

[alantoa]

Hi, I guess your code is running on the emulator. On the emulator, I think translationY is a bug, I suggest you test it on a device. @usamaabutt

This library is already running in my project, I feel good, thanks author.

If you have any questions, I'd be happy to answer. :)

[usamaabutt]

Hi @alantoa Thanks for your reply but unfortunately it is not working on a real iOS device I have just tested it now. And another issue is swipe-down gesture is not smooth as it should be. Can you please share your particular piece of code of the component in which you have used it?

Here's mine:

export const ImageZoomView: FunctionComponent<ImageProps> = ({
  openZoomViewer,
  image,
  closeZoomViewer,
}) => {
  const ref = useRef<GalleryRef>(null);

  const renderItem = ({
    index,
    item,
    setImageDimensions,
  }: RenderItemInfo<{ item: string }>) => {
    return (
      <ImageViewContainer>
        <ThreadCloudinaryImage imageId={item} />
      </ImageViewContainer>
    );
  };
  return (
    <CustomModal isModalVisible={openZoomViewer} backdropOpacity={1}>
      <Gallery
        ref={ref}
        data={image}
        renderItem={renderItem}
        onSwipeToClose={closeZoomViewer}
        disableSwipeUp={true}
        hideAdjacentImagesOnScaledImage={true}
        style={{ alignSelf: 'center' }}
      />
    </CustomModal>
  );
};

[alantoa]

Hi, other than swipe-down, other gestures it's OK ?

I see you example code, In addition to <CustomModal/>, everything else is fine, <CustomModal/> is react-native-modal ? @usamaabutt Maybe it's your modal affects swiper down gesture, I suggest you running Example.

[usamaabutt]

Yes @alantoa <CustomModal/> is react-native-modal. @alantoa I am using this library just to have an image zooming effect by pressing an image in the app. So, every time I have a single image in the array. So do you think it will fit according to my scenario?

[alantoa]

You can't use react-native-modal, beacuse modals are not located under React Native Root view in native hierarchy, ModalView will block gesture.

This library does not support scaling, This is only a image gallery, if you use @react-navigation/stack, you can use eact-navigation-shared-element.

Now I'm implementing the image lightbox effect use react-native-reanimated & react-native-gueture-handle, But it's still under development.@usamaabutt

[FadiAboMsalam]

@usamaabutt did you figure a fix for using this lib under react-native-modal for onSwipeToClose ? I am facing same thing

[nateguy]

I'm having the same issue and I'm not even using Modal

[gerryfletch]

I was about to reply that I was having the same issue but I went ahead and downgraded all of my dependencies to the same as the example: https://github.com/Flair-Dev/react-native-awesome-gallery/blob/main/example/package.json

And it works. The culprit for me was react-native-gesture-handler, which I had as 2.2.0 but the example package is on the previous major version, 1.10.1.

Downgrading a major version may or may not be acceptable for your use cases. It would be great if this library could be updated for the new API.

[mtflud]

Can confirm this is an issue when using react-native-gesture-handler v2. API is supposed to be backwards compatible, but vertical gestures are not being properly detected. v1 works fine

[alantoa]

👋 Hi, everyone, It's been a few days and many people still have this problem, I will simply answer it.

@mtflud Vertical doesn't working on emulator, The main problem that velocityY & velocityX is always 0 under the emulator, you can set true, it will work on emulator. Souce Code

@gerryfletch @nateguy @FadiAboMsalam This library is awesome, I also learned a lot from this library. In fact, react-native-gesture-handle v2 API is backwards compatible, but there are some incompatible methods in this library, I already know some problem, so I plan to rewrite this lib using react-native-gesture-handler v2, and will add some features and fix some bugs, I will notify your of progress.

Thank you all! 🤝

[felippepuhle]

@alantoa is there anything we can do to help you on that rewrite? we don't really understand or know what are the incompatibilities but we can allocate some hours trying to fix it as well, thanks!

[alantoa]

@felippepuhle Hi! I will contact you when I need help! Thank you!🤝

[pavelbabenko]

@alantoa @felippepuhle If you have any changes which you think should be merged and released - create your pull request, please. I don't have much time to work on my library because of the current situation in Ukraine, but I'll review all pull requests and create new releases.

[pavelbabenko]

Fixed in v0.3.0 by migration to RNGH v2