Replace onLayout with ref to measure Canvas size (#605)

Co-authored-by: Eli Zibin <1131641+zibs@users.noreply.github.com>

Author: TomCorvus

.changeset/poor-coins-compete.md

@@ -0,0 +1,5 @@
+---
+"victory-native": patch
+---
+
+move deprecate canvas onLayout onto parent containers

lib/src/cartesian/CartesianChart.tsx

@@ -649,7 +649,7 @@ function CartesianChartContent<
 
   // Body of the chart.
   const body = (
-    <Canvas style={{ flex: 1 }} onLayout={onLayout}>
+    <Canvas style={{ flex: 1 }}>
       {YAxisComponents}
       {XAxisComponents}
       {FrameComponent}
@@ -689,7 +689,10 @@ function CartesianChartContent<
   }
 
   return (
-    <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
+    <GestureHandlerRootView
+      style={{ flex: 1, overflow: "hidden" }}
+      onLayout={onLayout}
+    >
       {body}
       <GestureHandler
         config={gestureHandlerConfig}

lib/src/polar/PolarChart.tsx

@@ -4,8 +4,8 @@ import {
   StyleSheet,
   View,
   type ViewStyle,
-  type LayoutChangeEvent,
   type StyleProp,
+  type LayoutChangeEvent,
 } from "react-native";
 import { Gesture, GestureHandlerRootView } from "react-native-gesture-handler";
 import { type ContextBridge, FiberProvider, useContextBridge } from "its-fine";
@@ -57,10 +57,9 @@ const PolarChartBase = (
   }
 
   return (
-    <View style={[styles.baseContainer, containerStyle]}>
+    <View style={[styles.baseContainer, containerStyle]} onLayout={onLayout}>
       <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
         <Canvas
-          onLayout={onLayout}
           style={StyleSheet.flatten([
             styles.canvasContainer,
             hasMeasuredLayoutSize ? { width, height } : null,