Touchable event bug [Android]

…

Expect

Touchable events to be consistent between android & iOS.

Actual

Android doesn’t render path correctly, when using Android

Reproduce

"react": "16.0.0",
"react-native": "0.50.3",
"react-native-svg": "5.5.1"

import React, { Component } from 'react'
import { View } from 'react-native'
import Svg, { Rect, Path } from 'react-native-svg'

export default class App extends Component<{}> {
  state = {
    isDown: false,
    path: ''
  }

  getCoords(e) {
    const { locationX, locationY } = e.nativeEvent
    const X = parseInt(locationX)
    const Y = parseInt(locationY)

    return `${X},${Y}`
  }

  down(e) {
    this.setState({
      path: `${this.state.path}M${this.getCoords(e)} `,
      isDown: true
    })
  }

  move(e) {
    if (this.state.isDown) {
      this.setState({
        path: `${this.state.path}L${this.getCoords(e)} `
      })
    }
  }

  up() {
    this.setState({
      isDown: false
    })
  }

  render() {
    return (
      <View style={{ flex: 1, width: '100%', height: '100%' }}>
        <View
          onStartShouldSetResponder={() => true}
          onMoveShouldSetResponder={() => true}
          onResponderGrant={this.down.bind(this)}
          onResponderMove={this.move.bind(this)}
          onResponderRelease={this.up.bind(this)}
          style={{ width: '100%', height: '50%', backgroundColor: '#eee' }}
        />
        <Svg style={{ width: '100%', height: '50%' }}>
          <Rect
            fill="#fff"
            width="100%"
            height="100%"
            onPressIn={this.down.bind(this)}
            onResponderMove={this.move.bind(this)}
            onPressOut={this.up.bind(this)}
          />
          <Path
            fill="none"
            stroke="#111"
            strokeWidth="2"
            d={this.state.path}
            strokeMiterLimit="5"
            strokeLinecap="round"
            strokeLinejoin="round"
            pointerEvents={() => 'none'}
          />
        </Svg>
      </View>
    )
  }
}

snack.expo.io

Run the example in IOS, drawing in the top grey area with cursor and note the svg path output in the white area, now try the same in the bottom white area. note (path rendered is consistent).

Now run the example in Android, note the white area path doesn’t render properly, but works in the grey area indicating a bug in react-native-svg touchables.

[msand]

Can you try again with the latest commit from the master branch? I’ve fixed some issues with the gesture responder logic and think this might be fixed as well.

[msand]

Closing because of inactivity.