onPress works on Circle element, but not on Image element

[gurramlokesh]

Question

<Circle onPress={()=>handleMarkerTouch(key)} cx={scaleX(x)} cy={scaleY(y)} r={5} fill={'#367be2'}/>

<Image onPress={()=>handleMarkerTouch(key)} x={scaleX(x) - MarkerWidth/2} y= {scaleY(y) - MarkerHeight} width={MarkerWidth} height={MarkerHeight} href={imageResouce} />

I'm trying to use onPress for an image element inside an SVG. It doesn't trigger any onPress events. However if I try that on a Circle element, it works.

I also tried the TouchableOpacityG hack suggested by @msand on this expo (https://snack.expo.io/@msand/touchableopacityg).

Can anyone please guide on what could be the mistake I'm doing?

[msand]

Hmm, this seems to work fine for me:

import React from 'react';
import {SafeAreaView, StatusBar} from 'react-native';
import {Svg, Image} from 'react-native-svg';

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <Svg height="100%" width="100%" style={{backgroundColor: '#222'}}>
          <Image
            x="5%"
            y="5%"
            width="90%"
            height="90%"
            href={require('./img.png')}
            onPress={(...args) => alert('Image onPress', args)}
          />
        </Svg>
      </SafeAreaView>
    </>
  );
};

export default App;

Can you make a full reproduction?

[msand]

Seems it's not working on android actually

[msand]

Can you try with v9.13.3 in a plain react-native or ejected expo project?

[gurramlokesh]

Thanks a lot for the fix. Works fine in plain react-native + 9.13.3