React-native-svg: Detect press event on svg item in a SVG area

[ngnclht1102]

Dear every body!

I have an SVG area that contain many svg object. And I want to detect click event on single SVG item.
But I can't find any document about it. Please give me some solutions. Thanks!

Nam Nguyen

[magicismight]

The shape elements support the touchable props:

    disabled: PropTypes.bool,
    onPress: PropTypes.func,
    onPressIn: PropTypes.func,
    onPressOut: PropTypes.func,
    onLongPress: PropTypes.func,
    delayPressIn: PropTypes.number,
    delayPressOut: PropTypes.number,
    delayLongPress: PropTypes.number

And panResponder.

You can set those props on shape elements.

<Circle onPress={this.pressHandler} />

[steveliles]

Is it possible to support touchable props on Group elements also? It is probably possible to work around by propagating touch handlers down to nested shape elements, but this is pretty painful!

[magicismight]

It`s a good idea,
This feature with be shiped within next version

[steveliles]

Cool, onPress event's on Group's work (testing with git master), but a G with no onPress event prevents touches from propagating to nested shapes (including other G elements), e.g.

This echoes "i'm touched" to the console when you tap the circle:

<G onPress={()=>{console.log("i'm touched")}}>
  <Circle cx={50} cy={50} r={100} fill='#f00'/>
</G>

This should output on the console but does not:

<G>
  <Circle cx={50} cy={50} r={100} fill='#f00' onPress={()=>{console.log("i'm touched")}}/>
</G>