onPress is not working

[dion-george]

Bug

When I am adding onPress to a Text, it works sporadically for all devices! Tried adding onPress directly to the Text and to the Group as well. Didn't work.

Secondly, on a separate note, onPress as a whole does not work for certain android devices. (like 1 plus 6t) any idea why?

Code

If I am adding onPress to each component separately

<Svg width={width} height={height}>
  <G x={0} y={topY}>
        {data.map(
          ({ id, text }) => (
            <G key={id}>
              <Path
                d={path}
                ...
                onPress={() => handleOnPress(id)}
              />

              <Text
                x={X}
                y={Y}
                ...
                onPress={() => handleOnPress(id)}
              >
                {text}
              </Text>
            </G>
          ),
        )}
  </G>
</Svg>

If I am adding onPress to the Group

<Svg width={width} height={height}>
  <G x={0} y={topY}>
        {data.map(
          ({ id, text }) => (
            <G key={id} onPress={() => handleOnPress(id)}>
              <Path
                d={path}
                ...
              />
              <Text
                x={X}
                y={Y}
                ...
              >
                {text}
              </Text>
            </G>
          ),
        )}
  </G>
</Svg>

Environment info

React native info output:

 System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 2.14 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7322048
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.1 => 0.64.1 

Library version: 12.1.0

[HTHstudy]

I also had the same problem on android and solved it using PanResponder.

const Button = ({x, y}: {x:number; y:number}) => { 
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      console.log(index);
    },
  });

  return (
    <G x={x} y={y} {...panResponder.panHandlers}>
      ...
    </G>
  );
};

[mosesjohn6969]

Bug

When I am adding onPress to a Text, it works sporadically for all devices! Tried adding onPress directly to the Text and to the Group as well. Didn't work.

Secondly, on a separate note, onPress as a whole does not work for certain android devices. (like 1 plus 6t) any idea why?

Code

If I am adding onPress to each component separately

<Svg width={width} height={height}>
  <G x={0} y={topY}>
        {data.map(
          ({ id, text }) => (
            <G key={id}>
              <Path
                d={path}
                ...
                onPress={() => handleOnPress(id)}
              />

              <Text
                x={X}
                y={Y}
                ...
                onPress={() => handleOnPress(id)}
              >
                {text}
              </Text>
            </G>
          ),
        )}
  </G>
</Svg>

If I am adding onPress to the Group

<Svg width={width} height={height}>
  <G x={0} y={topY}>
        {data.map(
          ({ id, text }) => (
            <G key={id} onPress={() => handleOnPress(id)}>
              <Path
                d={path}
                ...
              />
              <Text
                x={X}
                y={Y}
                ...
              >
                {text}
              </Text>
            </G>
          ),
        )}
  </G>
</Svg>

Environment info

React native info output:

 System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 2.14 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.2.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.0.10 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7322048
    Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild
  Languages:
    Java: 15.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1 
    react-native: 0.64.1 => 0.64.1 

Library version: 12.1.0

did you find solution to this

[mosesjohn6969]

I also had the same problem on android and solved it using PanResponder.

const Button = ({x, y}: {x:number; y:number}) => { 
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
      console.log(index);
    },
  });

  return (
    <G x={x} y={y} {...panResponder.panHandlers}>
      ...
    </G>
  );
};

please can you help me with similar issue

[cauyyl]

this is awesome, solve my question ` function SVGTouchableOpacityG({ onPress, children }) { const [isPressed, setIsPressed] = useState(false)

const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderGrant: () => {
        console.log('press in')
        setIsPressed(true)
    },
    onPanResponderTerminate: () => {
        console.log('terminate')
        setIsPressed(false)
    },
    onPanResponderRelease: () => {
        if (isPressed) {
            console.log('release')
            setIsPressed(false)
            onPress()
        }
    },
})

const fillColor = isPressed ? 'rgba(255, 255, 255, 0.5)' : 'transparent'
return (
    <G {...panResponder.panHandlers}>
        {children}

        <Rect
            x="0"
            y="0"
            width={100}
            height={100}
            stoken={'red'}
            fill={fillColor}
        />
    </G>
)

} `

[bohdanprog]

Hello @dion-george @cauyyl , I tried to reproduce that problem but couldn't. If you still have that problem feel free to open a new issue. Thank you.