React-Native Pinch Gesture Handler Zoom Position

[hemanth307]

`import React from "react";
import { View, Text, StyleSheet, ScrollView, Button, Dimensions } from "react-native";
import Svg, { G } from "react-native-svg";
import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
import Fixtures from "./Fixtures";
import Positions from "./Positions";
import Segments from "./Segments";
import { getData } from "@/assets/json/prob";
import { ThemedView } from "./ThemedView";

const SvgPOC: React.FC = () => {
const { width, height } = Dimensions.get("window");

const { Fixture: fixtures, Position: positions, Segment: segments, prob } =
getData();

const viewBoxHeight = Math.min(height, prob.height) + 20;
const viewBoxWidth = Math.min(width, prob.width);

const scale = useSharedValue(1);
const translateX = useSharedValue(0);
const translateY = useSharedValue(0);
const lastScale = useSharedValue(1);
const lastTranslateX = useSharedValue(0);
const lastTranslateY = useSharedValue(0);
const focalX = useSharedValue(0);
const focalY = useSharedValue(0);

const pinchGesture = Gesture.Pinch()
.onStart(() => {
lastScale.value = scale.value;
lastTranslateX.value = translateX.value;
lastTranslateY.value = translateY.value;
})
.onUpdate((event) => {
const newScale = Math.max(1, Math.min(lastScale.value * event.scale, 5));
const adjustedFocalX = event.focalX - width / 2 - translateX.value;
const adjustedFocalY = event.focalY - height / 2 - translateY.value;
const scaleFactor = newScale / lastScale.value;
translateX.value = lastTranslateX.value + adjustedFocalX * (1 - scaleFactor);
translateY.value = lastTranslateY.value + adjustedFocalY * (1 - scaleFactor);
scale.value = newScale;
})
.onEnd(() => {
if (scale.value <= 1) {
scale.value = withSpring(1);
translateX.value = withSpring(0);
translateY.value = withSpring(0);
} else {
scale.value = withSpring(scale.value);
}
});

const panGesture = Gesture.Pan()
.onStart(() => {
lastTranslateX.value = translateX.value;
lastTranslateY.value = translateY.value;
})
.onUpdate((event) => {
if (scale.value > 1) {
const maxTranslateX = (scale.value - 1) * width / 2;
const maxTranslateY = (scale.value - 1) * height / 2;
translateX.value = Math.max(-maxTranslateX, Math.min(lastTranslateX.value + event.translationX, maxTranslateX));
translateY.value = Math.max(-maxTranslateY, Math.min(lastTranslateY.value + event.translationY, maxTranslateY));
}
});

const animatedTransform = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ translateY: translateY.value },
{ scale: scale.value },
],
}));

return (
<GestureHandlerRootView style={{ flex: 1 }}>
<ThemedView style={styles.container}>
<GestureDetector gesture={Gesture.Simultaneous(pinchGesture, panGesture)}>
<Animated.View style={[styles.svgContainer, animatedTransform]}>
<Svg viewBox={0 0 ${viewBoxWidth} ${viewBoxHeight}} preserveAspectRatio="xMidYMin meet">
<G transform={scale(1, -1) translate(0, -${viewBoxHeight})}>
<Segments segments={segments} height={viewBoxHeight} />
<Fixtures fixtures={fixtures} />
<Positions positions={positions} />
</G>
</Svg>
</Animated.View>
</GestureDetector>
</ThemedView>
</GestureHandlerRootView>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#f5fcff",
},
svgContainer: {
width: '100%',
height: 500,
borderColor: "red",
borderWidth: 1,
overflow: "hidden",
},
});

export default SvgPOC;
`

I tried implementing pinch-to-zoom, but regardless of where I pinch, only the contents in the center of the screen are being zoomed instead of the ones between my fingers. Could someone please help me on this.

[hemanth307]

You could refer to the below post.
https://stackoverflow.com/questions/77288163/react-native-pinch-gesture-handler-zoom-position

[Glazzes]

You may find this gist I made like a year ago useful, https://gist.github.com/Glazzes/357201f74fbfaddb3e933f4c258c4878