Fixes clipping/loss of interactivity bug in VictoryCursorContainer (#3063)

.changeset/odd-goats-tan.md

@@ -0,0 +1,5 @@
+---
+"victory-native": patch
+---
+
+Fixes clipping/loss of interactivity bug in VictoryCursorContainer (#3063)

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;

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" },

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>
+    );
+}

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"

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";