2 thoughts on “Detect press event on svg item in a SVG area

  1. 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} />
    
  2. 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>
    

Comments are closed.

2 thoughts on “Detect press event on svg item in a SVG area

  1. 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} />
    
  2. 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>
    

Comments are closed.