add its-fine for polar chart

FormidableLabs · Dec 5, 2024 · 945fa06 · 945fa06
1 parent 4aa3a56
commit 945fa06
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 27 deletions.
diff --git a/lib/package.json b/lib/package.json
@@ -36,14 +36,15 @@
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
     "d3-zoom": "^3.0.0",
+    "its-fine": "^1.2.5",
     "react-fast-compare": "^3.2.2"
   },
   "peerDependencies": {
+    "@shopify/react-native-skia": ">=1.2.3",
     "react": "*",
     "react-native": "*",
-    "@shopify/react-native-skia": ">=1.2.3",
-    "react-native-reanimated": ">=3.0.0",
-    "react-native-gesture-handler": ">=2.0.0"
+    "react-native-gesture-handler": ">=2.0.0",
+    "react-native-reanimated": ">=3.0.0"
   },
   "devDependencies": {
     "@types/d3-scale": "^4.0.3",

diff --git a/lib/src/polar/PolarChart.tsx b/lib/src/polar/PolarChart.tsx
@@ -8,10 +8,8 @@ import {
   type StyleProp,
 } from "react-native";
 import { Gesture, GestureHandlerRootView } from "react-native-gesture-handler";
-import {
-  PolarChartProvider,
-  usePolarChartContext,
-} from "./contexts/PolarChartContext";
+import { type ContextBridge, FiberProvider, useContextBridge } from "its-fine";
+import { PolarChartProvider } from "./contexts/PolarChartContext";
 import type {
   ColorFields,
   InputFields,
@@ -47,8 +45,7 @@ const PolarChartBase = (
     transformState,
   } = props;
   const { width, height } = canvasSize;
-
-  const ctx = usePolarChartContext();
+  const Bridge: ContextBridge = useContextBridge();
 
   let composed = Gesture.Race();
   if (transformState) {
@@ -70,12 +67,9 @@ const PolarChartBase = (
             canvasStyle,
           ])}
         >
-          {/* https://shopify.github.io/react-native-skia/docs/canvas/contexts/
-            we have to re-inject our context to make it available in the skia renderer
-         */}
-          <PolarChartProvider {...ctx} canvasSize={canvasSize}>
+          <Bridge>
             <Group matrix={transformState?.matrix}>{children}</Group>
-          </PolarChartProvider>
+          </Bridge>
         </Canvas>
         <GestureHandler
           gesture={composed}
@@ -126,20 +120,22 @@ export const PolarChart = <
   );
 
   return (
-    <PolarChartProvider
-      data={data}
-      labelKey={labelKey.toString()}
-      colorKey={colorKey.toString()}
-      valueKey={valueKey.toString()}
-      canvasSize={canvasSize}
-    >
-      <PolarChartBase
-        {...props}
-        onLayout={onLayout}
-        hasMeasuredLayoutSize={hasMeasuredLayoutSize}
+    <FiberProvider>
+      <PolarChartProvider
+        data={data}
+        labelKey={labelKey.toString()}
+        colorKey={colorKey.toString()}
+        valueKey={valueKey.toString()}
         canvasSize={canvasSize}
-      />
-    </PolarChartProvider>
+      >
+        <PolarChartBase
+          {...props}
+          onLayout={onLayout}
+          hasMeasuredLayoutSize={hasMeasuredLayoutSize}
+          canvasSize={canvasSize}
+        />
+      </PolarChartProvider>
+    </FiberProvider>
   );
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -2738,6 +2738,21 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
   integrity sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==
 
+"@types/react-reconciler@^0.28.0":
+  version "0.28.8"
+  resolved "https://registry.yarnpkg.com/@types/react-reconciler/-/react-reconciler-0.28.8.tgz#e51710572bcccf214306833c2438575d310b3e98"
+  integrity sha512-SN9c4kxXZonFhbX4hJrZy37yw9e7EIxcpHCxQv5JUS18wDE5ovkQKlqQEkufdJCCMfuI9BnjUJvhYeJ9x5Ra7g==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react@*":
+  version "18.3.13"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.13.tgz#84c9690d9a271f548659760754ea8745701bfd82"
+  integrity sha512-ii/gswMmOievxAJed4PAHT949bpYjPKXvXo1v6cRB/kqc2ZR4n+SgyCyvyc5Fec5ez8VnUumI1Vk7j6fRyRogg==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^3.0.2"
+
 "@types/react@~18.2.14":
   version "18.2.79"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
@@ -5983,6 +5998,13 @@ iterator.prototype@^1.1.2:
     reflect.getprototypeof "^1.0.4"
     set-function-name "^2.0.1"
 
+its-fine@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/its-fine/-/its-fine-1.2.5.tgz#5466c287f86a0a73e772c8d8d515626c97195dc9"
+  integrity sha512-fXtDA0X0t0eBYAGLVM5YsgJGsJ5jEmqZEPrGbzdf5awjv0xE7nqv3TVnvtUF060Tkes15DbDAKW/I48vsb6SyA==
+  dependencies:
+    "@types/react-reconciler" "^0.28.0"
+
 jackspeak@^3.1.2:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/jackspeak/-/jackspeak-3.4.3.tgz#8833a9d89ab4acde6188942bd1c53b6390ed5a8a"