Help with pinch-to-zoom gesture in React Native Reanimated

[khldonAlkateeh]

I’ve been working on a zoomable canvas in React Native using Reanimated. I managed to get panning and tapping working fine, but I’m running into trouble with the pinch-to-zoom gesture.

What I want is simple: when I pinch to zoom, the point between my fingers should stay fixed on the screen. Right now, when I zoom in or out, the content slides to the left or right, and it doesn’t feel natural at all.

Here’s a simplified version of my code for the zoom gesture:

export const Test: React.FC<{
  items: ContentCard[];
  onItemSelected?: (id: string) => void;
}> = ({ items, onItemSelected }) => {
  const { width: screenWidth, height: screenHeight } = Dimensions.get('window');


  const panX = useSharedValue(0);
  const panY = useSharedValue(0);
  const scale = useSharedValue(1);

  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);

  //  Pinch (Zoom)
  const pinchGesture = Gesture.Pinch().onUpdate((e) => {
    const zoomSensitivity = 0.15;
    const newScale = Math.max(
      0.3,
      Math.min(2, scale.value * (1 + (e.scale - 1) * zoomSensitivity))
    );

    const focalX = e.focalX;
    const focalY = e.focalY;
    const worldX = (focalX - panX.value) / scale.value;
    const worldY = (focalY - panY.value) / scale.value;

    scale.value = newScale;
    panX.value = focalX - worldX * newScale;
    panY.value = focalY - worldY * newScale;
  });

  const combinedGesture = Gesture.Simultaneous(pinchGesture);

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

  return (
    <View style={{ flex: 1, backgroundColor: '#f8f9fa' }}>
      <GestureDetector gesture={combinedGesture}>
        <Animated.View
          style={[
            {
              flex: 1,
              width: 10000,
              height: 10000,
              position: 'absolute',
            },
            transformStyle,
          ]}>
          {items.map((item) => {
            const isSelected = selectedItemId === item.id;
            const { x, y, width, height } = item.position;

            return (
              <View
                key={item.id}
                style={{
                  position: 'absolute',
                  left: x,
                  top: y,
                  width,
                  height,
                  borderWidth: isSelected ? 2 : 1,
                  borderColor: isSelected ? '#007AFF' : '#aaa',
                  backgroundColor: '#fff',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <Text>test</Text>
              </View>
            );
          })}
        </Animated.View>
      </GestureDetector>
    </View>
  );
};