search

openspacelabs / react-native-zoomable-view

A view component for react-native with pinch to zoom, tap to move and double tap to zoom capability.
MIT License
205 stars 57 forks source link

how to suppress inner onPress #50

Closed AceBlazer closed 1 year ago

AceBlazer commented 1 year ago

i'm having an onpress event on an svg inside the zoomable view whitch will navigate to another screen, so when i zoom in and try to swipe to move the pan, the inner component (the svg) onpress will win. any ideas on how to force swipe over onpress?

AceBlazer commented 1 year ago

ended up by changing the package code onPanResponderTerminationRequest and onMoveShouldSetPanResponder were not passing into jsx, only gotten by props and not used anywhere

paulbremer commented 1 year ago

Can you elaborate a little bit more on the code changes you made? I'm running in to the same issue where my onPress is blocking the swiping of a user.

questicles commented 1 year ago

@paulbremer Try this: Go into node_modules\@openspacelabs\react-native-zoomable-view\src\ReactNativeZoomableView.tsx and add the following 'onMoveShouldSetPanResponder' function to the 'this.gestureHandlers = PanResponder.create({' block around ln131.

onMoveShouldSetPanResponder: (e, s) => {
    return Math.abs(s.dx) > 5 || Math.abs(s.dy) > 5;
}

This is required when their are child Pressable components where you want to support a 'press' on them or a 'drag' to trigger the ReactNativeZoomableView to do its thing. The value of 5 is just a value I was testing with to see how much distance the fingers' drag needs to be trigger the pan vs the press.

For me, using 2 fingers to drag always worked. Just a single finger drag has this problem.

Any chance this function can be formerly exposed please @elliottkember ?