how to work with react-native-pager-view

[lovetingyuan]

I think the user gesture conflicts between [react-native-zoomable-view] and react-native-pager-view

[davide-granello]

I'm also trying to implement a sliding carousel with zoomable images, using this library in combination of this: https://reanimated-carousel.dev/

Disabling the pan in react-native-zoomable-view and a few other tricks, i managed to make it work

[akira-0924]

@lovetingyuan
I also used react-native-zoomable-view and react-native-pager-view together and faced exactly the same problem. In my case, I wanted to be able to swipe if the zommLevel was 1 and adapt the zoom-view panning otherwise, so I solved this by using onShouldBlockNativeResponder Hooks.

import { ReactNativeZoomableView, ZoomableViewEvent } from '@openspacelabs/react-native-zoomable-view';
import { GestureResponderEvent, PanResponderGestureState } from 'react-native';


const onShouldBlockNativeResponderHandler = (
    event: GestureResponderEvent,
    gestureState: PanResponderGestureState,
    zoomableViewEventObject: ZoomableViewEvent
  ): boolean => {
    if (zoomableViewEventObject.zoomLevel === 1) {
      return false;
    } else {
      return true;
    }
  };

return (
    <ReactNativeZoomableView
      maxZoom={2.4}
      disablePanOnInitialZoom={true}
      onShouldBlockNativeResponder={onShouldBlockNativeResponderHandler}
    >
      <Image
        source={}
      />
    </ReactNativeZoomableView>

[cveklica]

Thanks for this @akira-0924, but this disables doubleTap zoom when zoomLevel is 1. Any solutions?
I tried doing custom zoomTo on event onDoubleTapBefore but still blocked. onDoubleTapAfter and zoomTo gives bad behaviour.

[emreer94]

Thank you @akira-0924 <3 this works quite well. Also, it works in doubleTap zoom as well @cveklica I tried that as well