Android: Svg elements are inside of a PanResponder don't update event.nativeEvent.location

This may be related to https://github.com/react-native-community/react-native-svg/issues/363, but I wasn’t sure so I’ll file a separate issue.

When Svg elements are inside of a PanResponder, onPanResponderMove’s event.nativeEvent.locationX (and Y) do not change for Android, but do for iOS. Demo:

import React from 'react';
import { StyleSheet, Text, View, PanResponder } from 'react-native';
import Svg, { Rect } from "react-native-svg";

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.panResponder = this.getResponder();
  }

  getResponder() {
    const yes = () => true;
    const no = () => false;
    return PanResponder.create({
      onStartShouldSetPanResponder: yes,

      onStartShouldSetPanResponderCapture: no,

      onMoveShouldSetPanResponder: yes,

      onMoveShouldSetPanResponderCapture: yes,

      onShouldBlockNativeResponder: yes,

      onPanResponderTerminationRequest: yes,
      // Active touch or touches have moved
      onPanResponderMove: this.props.onPanResponderMove.bind(this),
      onPanResponderGrant: this.props.onPanResponderMove.bind(this),
    });
  }

  render() {
    return (
      <View {...this.panResponder.panHandlers}>
        {this.props.children}
      </View>
    );
  }
};

export default class App extends React.Component {
  render() {
    return (
      <View>
        <Container
          onPanResponderMove={
            (event) => {
              console.log(
                event.nativeEvent.locationX,
                event.nativeEvent.locationY
              );
            }
          }
        >
          <Svg
            height="100"
            width="100"
          >
            <Rect
              width={100}
              height={100}
              fill="blue"
            />
          </Svg>
        </Container>
      </View>
    );
  }
}

[macrozone]

I have a similar issue. I have a panresponder on a View which contains an SVG.

in onMoveShouldSetPanResponderCapture, dx and dy start with a big value even on the first press. I think this is because mutlipe elements inside the svg report different locations. Also movement speeds (vx, vy) get messed up because of this. I tried to work around it, but without any success.

[aditya1711]

Can you make a repro?

This is a repr code.

import React from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import {
  VictoryLine,
  VictoryChart,
  VictoryZoomContainer,
} from 'victory-native';

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <VictoryChart
        containerComponent={
          <VictoryZoomContainer
            zoomDimension="x"
            // minimumZoom={{x: 1, y: 0.01}}
          />
        }>
        <VictoryLine
          data={data1.frst}
          style={{data: {stroke: 'red'}}}
          interpolation="natural"
        />
      </VictoryChart>
    </View>
  );
};

const data1 = {
  frst: [
    {x: 'Mon', y: 6},
    {x: 'Tue', y: 2},
    {x: 'Wed', y: 3},
    {x: 'Thu', y: 2},
    {x: 'Fri', y: 5},
    {x: 'Sat', y: 1},
    {x: 'Sun', y: 6},
    {x: 'Mon2', y: 6},
    {x: 'Tue2', y: 2},
    {x: 'Wed2', y: 3},
    {x: 'Thu2', y: 2},
    {x: 'Fri2', y: 5},
    {x: 'Sat2', y: 1},
    {x: 'Sun2', y: 6},
    {x: 'Mon3', y: 6},
    {x: 'Tue3', y: 2},
    {x: 'Wed3', y: 3},
    {x: 'Thu3', y: 2},
    {x: 'Fri3', y: 5},
    {x: 'Sat3', y: 1},
    {x: 'Sun3', y: 6},
  ],
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // padding: 10,
    justifyContent: 'center',
  }
});

export default App;

Were you able to reproduce the issue?