From b68fcf505329ac8b18c37a1c33458b21157c63c9 Mon Sep 17 00:00:00 2001
From: Ekaterina Mulyukina <am@jetlend.ru>
Date: Thu, 31 Jul 2025 12:55:22 +0300
Subject: [PATCH] fix(victory-cursor-container): Fixes clipping/loss of
 interactivity bug in VictoryCursorContainer (#3063)

---
 .changeset/odd-goats-tan.md                   |  5 ++++
 demo/rn/src/navigation-config.ts              |  2 ++
 demo/rn/src/screens/components-screen.tsx     | 13 +++++-----
 demo/rn/src/screens/cursor-screen.tsx         | 25 +++++++++++++++++++
 demo/rn/src/screens/root-navigator.tsx        |  8 ++++++
 .../components/victory-cursor-container.tsx   |  5 ++--
 6 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/odd-goats-tan.md
 create mode 100644 demo/rn/src/screens/cursor-screen.tsx

diff --git a/.changeset/odd-goats-tan.md b/.changeset/odd-goats-tan.md
new file mode 100644
index 000000000..f1c52575e
--- /dev/null
+++ b/.changeset/odd-goats-tan.md
@@ -0,0 +1,5 @@
+---
+"victory-native": patch
+---
+
+Fixes clipping/loss of interactivity bug in VictoryCursorContainer (#3063)
diff --git a/demo/rn/src/navigation-config.ts b/demo/rn/src/navigation-config.ts
index 58b4bfca1..6a5039143 100644
--- a/demo/rn/src/navigation-config.ts
+++ b/demo/rn/src/navigation-config.ts
@@ -12,6 +12,8 @@ export type RootStackNavigatorParams = {
   Voronoi: undefined;
   BrushLine: undefined;
 
+  Cursor: undefined;
+
   Legends: undefined;
   Axis: undefined;
   PolarAxis: undefined;
diff --git a/demo/rn/src/screens/components-screen.tsx b/demo/rn/src/screens/components-screen.tsx
index dc4ffa243..694eb21ab 100644
--- a/demo/rn/src/screens/components-screen.tsx
+++ b/demo/rn/src/screens/components-screen.tsx
@@ -79,13 +79,12 @@ const sections: SectionItem[] = [
     ],
     title: "Charts",
   },
-  // {
-  //   data: [
-  //     { key: "ContainersView", title: "Built–in Containers" },
-  //     { key: "CreateContainerView", title: "Custom Containers" }
-  //   ],
-  //   title: "Containers"
-  // },
+  {
+    data: [
+      { key: "Cursor", title: "Cursor" },
+    ],
+    title: "Containers"
+  },
   {
     data: [
       { key: "Legends", title: "Legends" },
diff --git a/demo/rn/src/screens/cursor-screen.tsx b/demo/rn/src/screens/cursor-screen.tsx
new file mode 100644
index 000000000..c273ee01f
--- /dev/null
+++ b/demo/rn/src/screens/cursor-screen.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useState } from "react";
+import { View } from 'react-native';
+import { Text, VictoryBar, VictoryChart, VictoryCursorContainer } from 'victory-native';
+
+export const CursorScreen: React.FC = () => {
+    const data = [100, 76, 23, 123, 80, 90, 45, 66, 50, 85];
+    const [ value, setValue ] = useState<any>(0);
+
+    return (
+        <View>
+            <Text>{JSON.stringify(value) ?? '<null>'}</Text>
+            <VictoryChart
+                containerComponent={
+                    <VictoryCursorContainer
+                        onCursorChange={v => setValue(v)}
+                        cursorDimension="x"
+                    />
+                }
+            >
+                <VictoryBar barRatio={1.2} data={data} />
+            </VictoryChart>
+        </View>
+    );
+}
\ No newline at end of file
diff --git a/demo/rn/src/screens/root-navigator.tsx b/demo/rn/src/screens/root-navigator.tsx
index 87a87ccff..3acf7db12 100644
--- a/demo/rn/src/screens/root-navigator.tsx
+++ b/demo/rn/src/screens/root-navigator.tsx
@@ -16,6 +16,7 @@ import { ErrorBarScreen } from "./error-bar-screen";
 import { PolarAxisScreen } from "./polar-axis-screen";
 import { VoronoiScreen } from "./voronoi-screen";
 import { BrushLineScreen } from "./brush-line-screen";
+import { CursorScreen } from "./cursor-screen";
 
 export const RootNavigator: React.FC = () => {
   return (
@@ -77,6 +78,13 @@ export const RootNavigator: React.FC = () => {
         options={{ title: "VictoryBrushLine" }}
       />
 
+      {/* Containers */}
+      <RootStack.Screen
+        name="Cursor"
+        component={CursorScreen}
+        options={{ title: "Cursor" }}
+      />
+
       {/* Other */}
       <RootStack.Screen
         name="Legends"
diff --git a/packages/victory-native/src/components/victory-cursor-container.tsx b/packages/victory-native/src/components/victory-cursor-container.tsx
index d7d4c4688..4019241b6 100644
--- a/packages/victory-native/src/components/victory-cursor-container.tsx
+++ b/packages/victory-native/src/components/victory-cursor-container.tsx
@@ -20,12 +20,13 @@ export interface VictoryCursorContainerNativeProps
 export const VictoryCursorContainer = (
   initialProps: VictoryCursorContainerNativeProps,
 ) => {
-  const props = useVictoryCursorContainer({
+  const { props, children } = useVictoryCursorContainer({
     ...initialProps,
     cursorLabelComponent: initialProps.cursorLabelComponent ?? <VictoryLabel />,
     cursorComponent: initialProps.cursorComponent ?? <LineSegment />,
   });
-  return <VictoryContainer {...props} />;
+
+  return <VictoryContainer {...props}>{children}</VictoryContainer>;
 };
 
 VictoryCursorContainer.role = "container";