Cannot drag when child component has onPress - ReactNativeZoomableView

[aaydin29]

Hello, as seen in the code I shared below, there is an onPress in the Path in ReactNativeZoomableView. The dragging function works successfully from areas not covered by this path, but if I try to do this on the Path, the dragging does not work. I have no other way than having the two work together for the project I'm developing.

<ReactNativeZoomableView
  ref={zoomableViewRef}
  maxZoom={maxZoom}
  minZoom={minZoom}
  zoomStep={0.5}
  initialZoom={1}
  bindToBorders={false}
  contentWidth={2000}
  contentHeight={857}
>
  <Svg width={2000} height={857}>
    {data.map((item, index) => (
      <Path
        key={index}
        d={item.path}
        fill={'#fff'}
        stroke="black"
        strokeWidth={0.75}
        onPress={() => {
          console.log(`${item.name} clicked!`);
        }}
      />
    ))}
  </Svg>
</ReactNativeZoomableView>

[bumjin1013]

did you solve it?

[CozeaRaluca]

Any updates on this? 😄

[DanielKuhn]

I also have this problem. The solution seems to be related to the onStartShouldSetPanResponderCapture prop (discussion: #91 , PR: #93), but I don't understand how to use it. Can anyone explain?

[bumjin1013]

@DanielKuhn
@CozeaRaluca

import React, {useState} from "react";
import {StyleSheet, View} from "react-native";
import {gestureHandlerRootHOC} from "react-native-gesture-handler";
import {ReactNativeZoomableView} from "@openspacelabs/react-native-zoomable-view";

function ZoomView({children, size}) {
  return (
    <View style={styles.container}>
      <ReactNativeZoomableView
        maxZoom={2.0}
        minZoom={0.3}
        zoomStep={0.5}
        initialZoom={0.6}
        bindToBorders={true}
        onMoveShouldSetPanResponderCapture={(evt, gestureState) => Math.abs(gestureState.dx) > 3 || Math.abs(gestureState.dy) > 3} //add this
        contentWidth={size.width + 100}
        contentHeight={size.height + 200}>
        <View style={styles.content}>{children}</View>
      </ReactNativeZoomableView>
    </View>
  );
}

export default gestureHandlerRootHOC(ZoomView);

const styles = StyleSheet.create({
  container: {
    overflow: "hidden",
    width: "100%",
    height: "100%",
  },
  content: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  contentWindow: {
    alignSelf: "flex-start",
  },
});

[DanielKuhn]

Awesome, thanks @bumjin1013 !