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

[chrisbolin]

This may be related to #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>
    );
  }
}

[SteveGreenley]

We're developing a prototype app that uses Victory Charts and is affected by this issue. It affects several of the best features of Victory Charts including cursors and scrollable charts.

[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.

[macrozone]

Maybe its related to #433 ?

[hasLandon]

This may be of interest:
facebook/react-native#12591
https://github.com/facebook/react-native/pull/15123/files

[msand]

I think I might have fixed the issue now, can you try with the latest commit from the master branch?

[msand]

Closing because of inactivity.

[aditya1711]

Is this fixed? Zoom still doesn't work for Victory Native Zoom container. Unable to Zoom Out of Line graph.
"dependencies": {
"victory-native": "^34.1.0"
"react-native-svg": "^12.0.3",
"react-native": "0.62.2",
}

[msand]

Can you make a repro?

[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;

[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?