I am using Victory Native XL to develop a React Native app. While implementing a CartesianChart with a pan gesture using useChartTransformState, I noticed that the gesture detector (GestureHandler) moves along with the chart during the pan interaction.

This behavior causes the detection area to shift, making subsequent gestures misaligned with the intended area. I want to keep the gesture detector stationary while allowing the chart to pan.

Here is the code

import { StyleSheet, SafeAreaView } from 'react-native';
import { CartesianChart, Scatter, useChartTransformState } from "victory-native";
import { useFont } from "@shopify/react-native-skia"
import inter from "./assets/inter-medium.ttf"
import React from 'react';


export default function App() {

  const { state } = useChartTransformState()
  const font = useFont(inter,12)
  const data = [{"x": 123, "y": 300,}, {"x": 50, "y": 3,}]
    

  return (
    <SafeAreaView style={styles.container}>
        <CartesianChart
            data ={data}
            xKey="x" 
            yKeys={["y"]}
            domainPadding={{ top: 20, bottom: 20, right: 20, left: 20 }}
            padding={{ top: 20, bottom: 20, right: 50, left: 50 }}
            frame={
                {
                    lineColor:"hsla(0, 0%, 0%, 0.25)"
                }
            }
            transformState={state}
            yAxis={[
                {
                  font: font,
                enableRescaling: true,
                },
            ]}
            xAxis={{
              font: font,
                enableRescaling: true,
            }}                    >
      {({ points }) => (
        //👇 pass a PointsArray to the Scatter component
        <Scatter
          points={points.y}
          shape="star"
          radius={10}
          style="fill"
          color="red"
        />
      )}      
      </CartesianChart>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

I experimented with customizing transformState but couldn’t fix the issue.
I am using the latest versions of react-native-gesture-handler and react-native-reanimated.