Accounting for SVG viewBox in react native using PanResponder - react-native

Question

I'm trying to make an SVG element draggable inside but PanResponder doesn't account for the SVG viewBox causing the dragged element to not follow the touch around the screen.
I've tried utilizing the X and Y values of the touch event to affect the X and Y value of the SVG element, but get a worse effect than when I use the PanResponder. When I switched to using just the X and Y values of the touch event I tried to convert the touch event X and Y to the SVG coordinates by using an equation I found on svgwg.org.
viewBox: "0 0 960.1 1856.51"
Code used when I was converting X Y values to SVG cordinates
svgXYConvert = (eX, eY) =>{
let eW = this.props.width;
let eH = this.props.height;
let [vbX, vbY, vbW, vbH] = this.props.viewBox.split(" ");
// Calculate the scale of elements and vb
let scaleX = eW/vbW;
let scaleY = eH/vbH;
// translation points
let translateX = eX - (vbX * scaleX);
let translateY = eY - (vbY * scaleY);
return [translateX, translateY];
}
PanResponder component
import React from 'react';
import {PanResponder, Animated} from 'react-native';
import {Image, G, Rect} from 'react-native-svg';
const AnimatedG = Animated.createAnimatedComponent(G);
class DragImg extends React.Component {
constructor(props) {
super(props)
this.state = {
pan: new Animated.ValueXY({x: this.props.x, y: this.props.y}),
x: this.props.x,
y: this.props.y,
}
}
componentWillMount() {
this._panResponder = PanResponder.create({
onPanResponderTerminationRequest: () => false,
onStartShouldSetPanResponder: (e, gesture) => true,
onPanResponderGrant: (e, gesture) => {
this.state.pan.setOffset(this.state.pan.__getValue());
},
onPanResponderMove: Animated.event([
null, { dx: this.state.pan.x, dy: this.state.pan.y}
])
},
onPanResponderRelease: (e) => {
this.state.pan.flattenOffset();
}
})
}
render(){
let imgStyle = {transform: this.state.pan.getTranslateTransform()};
return <AnimatedG style={imgStyle} {...this._panResponder.panHandlers} x={this.state.x} y={this.state.y}>
<Image href={this.props.href} height={this.props.height} width={this.props.width} />
<Rect fill="transparent" height={this.props.height} width={this.props.width}/>
</AnimatedG>
}
}
export default DragImg;
When this is rendered inside of an SVG that is 100% height of the device, I am forcing landscape on an iPad, I allow them to zoom the SVG that is being used to see the details clearer. If they zoom in where the SVG takes up the entire screen the element moves at the right speed with the PanResponder and follows the touch perfectly almost, but if they are zoomed out or at the default screen we show them where the entire SVG is visible the dragged element moves slowly and doesn't track well.
I'm not sure what I should be doing differently to get the SVG element to track well regardless of if they are zoomed in or out on the SVG.

Answer 1

I made some similar code. I added an Animated.View with position: absolute so I move it and in the same time the SVG Circleis moved inside of the SVG area. To do it, I scaled the SVG size to have a perfect size with the maxWidth and minWidth. Also, the SVG must have this property: preserveAspectRatio="xMinYMin"its because it need to start in (0,0) as start point.
You can see it working here: https://snack.expo.io/#albertcito/svg-pan-responder