Can't click item inside SVG

Question

I'm having very weird behavior with React-native-svg, for example i have sample circle like this:

<Circle
    cx={props.x}
    cy={props.y}
    r={15}
    // stroke={selected ? 'green' : 'white'}
    stroke="green"
    // strokeWidth={}
    // fill="blue"
    fill="none"
    onPress={() => {
      console.log('pressed', props.index);
      clickable(!boolean);
      setSelected(!selected);
    }}
    // fill={selected ? 'blue' : 'grey'}
  />

I can totally can click it, like normal, BUT , if i want another circle, or simply i put SVG wrap the circle, i can't not click on circle anymore!!! Why ???

  <Svg> <========== I CAN NOT DO ANYTHING
      <Circle
        cx={props.x}
        cy={props.y}
        r={15}
        // stroke={selected ? 'green' : 'white'}
        stroke="green"
        // strokeWidth={}
        // fill="blue"
        fill="none"
        onPress={() => {
          console.log('pressed', props.index);
          clickable(!boolean);
          setSelected(!selected);
        }}
        // fill={selected ? 'blue' : 'grey'}
      />
    </Svg>

Even i put on press on SVG , but nothing happen, so if i want add press on SVG, how can i do that??

EDIT: I solve by replace SVG with G

     <G>   <------- it work ?????
      <Circle
        cx={props.x}
        cy={props.y}
        r={15}
        stroke="green"
        fill="none"
        onPress={() => {
          console.log('pressed', props.index);
          clickable(!boolean);
          setSelected(!selected);
        }}
       
      />
    </G>

So WHY it work with ???????

SVGs should not have onClick events, you can wrap the SVG with a div or a Button, though. — Eldar B., Nov 16 '21 at 09:06
@EldarB. I solved myself, but still veryyyyyyyyyy confuse, please help me — CODEforDREAM, Nov 16 '21 at 09:07

score 1 · Answer 1 · answered Nov 16 '21 at 09:43

Its not a good idea to have click events on svg. You can put that svg inside a button and add onClick event on the button itself.

<button className="hidden-btn" onClick={() => {
          console.log('pressed', props.index);
          clickable(!boolean);
          setSelected(!selected);
        }}
>
  <Circle
     cx={props.x}
     cy={props.y}
     r={15}
     stroke="green"
     fill="none"       
  />
</button

You can make the button hidden if you want with some css like

.hidden-btn {
  background: transparent;
  border: none !important;
}

Can't click item inside SVG

1 Answers1