fix(📏): improve onSize infrastructure to rely on Reanimated (#3500)

wcandillon · web-flow · commit 60f5f500e4a1 · 2025-11-02T15:27:03.000+01:00
diff --git a/packages/skia/cpp/api/JsiSkAnimatedImage.h b/packages/skia/cpp/api/JsiSkAnimatedImage.h
@@ -106,10 +106,9 @@ class JsiSkAnimatedImage
         if (bytesPerPixel == 0) {
           bytesPerPixel = 4;
         }
-        frameBytes =
-            safeMul(safeMul(static_cast<size_t>(frame->width()),
-                            static_cast<size_t>(frame->height())),
-                    bytesPerPixel);
+        frameBytes = safeMul(safeMul(static_cast<size_t>(frame->width()),
+                                     static_cast<size_t>(frame->height())),
+                             bytesPerPixel);
       }
     }
 
diff --git a/packages/skia/cpp/api/JsiSkSurface.h b/packages/skia/cpp/api/JsiSkSurface.h
@@ -152,14 +152,15 @@ class JsiSkSurface : public JsiSkWrappingSkPtrHostObject<SkSurface> {
 
     auto canvas = surface->getCanvas();
     const bool isGpuBacked =
-        surface->recordingContext() != nullptr || surface->recorder() != nullptr ||
+        surface->recordingContext() != nullptr ||
+        surface->recorder() != nullptr ||
         (canvas && (canvas->recordingContext() != nullptr ||
                     canvas->recorder() != nullptr));
 
     if (isGpuBacked) {
       // Account for a resolved texture and depth/stencil attachments.
-      estimated = safeAdd(estimated, pixelBytes);      // resolve/texture copy
-      estimated = safeAdd(estimated, pixelBytes / 2);  // depth-stencil buffers
+      estimated = safeAdd(estimated, pixelBytes);     // resolve/texture copy
+      estimated = safeAdd(estimated, pixelBytes / 2); // depth-stencil buffers
     }
 
     // Add a small overhead buffer for bookkeeping allocations.
diff --git a/packages/skia/cpp/jsi/ViewProperty.h b/packages/skia/cpp/jsi/ViewProperty.h
@@ -53,47 +53,13 @@ class ViewProperty {
 
   template <typename PlatformContext>
   ViewProperty(jsi::Runtime &runtime, const jsi::Value &value,
-               PlatformContext platformContext, size_t nativeId) {
-    // Set the onSize callback with all the necessary context
-    auto runtimeGuard = std::make_shared<RuntimeAwareRuntimeGuard>(runtime);
-    _value = std::function<void(int, int)>(
-        [runtimeGuard, platformContext, nativeId](int width, int height) {
-          auto runtimePtr = runtimeGuard->getRuntime();
-          if (runtimePtr == nullptr) {
-            return;
-          }
-
-          jsi::Runtime &runtime = *runtimePtr;
-          jsi::Object size(runtime);
-          auto pd = platformContext->getPixelDensity();
-          size.setProperty(runtime, "width", jsi::Value(width / pd));
-          size.setProperty(runtime, "height", jsi::Value(height / pd));
-
-          // Get the stored shared value from global
-          std::string globalKey =
-              "__onSize_" + std::to_string(static_cast<int>(nativeId));
-          auto globalProp =
-              runtime.global().getProperty(runtime, globalKey.c_str());
-          if (!globalProp.isUndefined()) {
-            globalProp.asObject(runtime).setProperty(runtime, "value", size);
-          }
-        });
-  }
+               PlatformContext platformContext, size_t nativeId) {}
 
   bool isNull() { return std::holds_alternative<std::nullptr_t>(_value); }
 
   sk_sp<SkPicture> getPicture() { return std::get<sk_sp<SkPicture>>(_value); }
 
-  std::variant<std::nullptr_t, std::function<void(int, int)>>
-  getOnSize() const {
-    if (std::holds_alternative<std::function<void(int, int)>>(_value)) {
-      return std::get<std::function<void(int, int)>>(_value);
-    }
-    return nullptr;
-  }
-
 private:
-  std::variant<std::nullptr_t, sk_sp<SkPicture>, std::function<void(int, int)>>
-      _value = nullptr;
+  std::variant<std::nullptr_t, sk_sp<SkPicture>> _value = nullptr;
 };
 } // namespace RNJsi
diff --git a/packages/skia/cpp/rnskia/RNSkJsiViewApi.h b/packages/skia/cpp/rnskia/RNSkJsiViewApi.h
@@ -106,11 +106,6 @@ class RNSkJsiViewApi : public RNJsi::JsiHostObject,
           info->props.insert_or_assign(
               arguments[1].asString(runtime).utf8(runtime),
               RNJsi::ViewProperty(runtime, arguments[2]));
-          if (info->props.find("onSize") == info->props.end()) {
-            info->props.insert_or_assign(
-                "onSize", RNJsi::ViewProperty(runtime, arguments[2],
-                                              _platformContext, nativeId));
-          }
           // Now let's see if we have a view that we can update
           if (info->view != nullptr) {
             // Update view!
diff --git a/packages/skia/cpp/rnskia/RNSkPictureView.h b/packages/skia/cpp/rnskia/RNSkPictureView.h
@@ -56,25 +56,8 @@ class RNSkPictureRenderer
     _requestRedraw();
   }
 
-  void setOnSize(
-      std::variant<std::nullptr_t, std::function<void(int, int)>> onSize) {
-    _onSize = onSize;
-  }
-
 private:
   bool performDraw(std::shared_ptr<RNSkCanvasProvider> canvasProvider) {
-    // Call onSize callback only if the size has changed
-    int currentWidth = canvasProvider->getWidth();
-    int currentHeight = canvasProvider->getHeight();
-
-    if (std::holds_alternative<std::function<void(int, int)>>(_onSize)) {
-      if (_lastWidth != currentWidth || _lastHeight != currentHeight) {
-        _lastWidth = currentWidth;
-        _lastHeight = currentHeight;
-        std::get<std::function<void(int, int)>>(_onSize)(currentWidth,
-                                                         currentHeight);
-      }
-    }
     return canvasProvider->renderToCanvas([=, this](SkCanvas *canvas) {
       // Make sure to scale correctly
       auto pd = _platformContext->getPixelDensity();
@@ -90,9 +73,6 @@ class RNSkPictureRenderer
 
   std::shared_ptr<RNSkPlatformContext> _platformContext;
   sk_sp<SkPicture> _picture;
-  std::variant<std::nullptr_t, std::function<void(int, int)>> _onSize = nullptr;
-  int _lastWidth = -1;
-  int _lastHeight = -1;
 };
 
 class RNSkPictureView : public RNSkView {
@@ -109,7 +89,7 @@ class RNSkPictureView : public RNSkView {
 
   void setJsiProperties(
       std::unordered_map<std::string, RNJsi::ViewProperty> &props) override {
-    // Base implementation - no onSize callback
+    // Base implementation
     for (auto &prop : props) {
       if (prop.first == "picture") {
         if (prop.second.isNull()) {
@@ -121,9 +101,6 @@ class RNSkPictureView : public RNSkView {
         // Save picture
         std::static_pointer_cast<RNSkPictureRenderer>(getRenderer())
             ->setPicture(prop.second.getPicture());
-      } else if (prop.first == "onSize") {
-        std::static_pointer_cast<RNSkPictureRenderer>(getRenderer())
-            ->setOnSize(prop.second.getOnSize());
       }
     }
   }
diff --git a/packages/skia/cpp/rnskia/RNSkView.h b/packages/skia/cpp/rnskia/RNSkView.h
@@ -148,13 +148,6 @@ class RNSkView : public std::enable_shared_from_this<RNSkView> {
   virtual void setJsiProperties(
       std::unordered_map<std::string, RNJsi::ViewProperty> &props) = 0;
 
-  virtual void
-  setJsiProperties(std::unordered_map<std::string, RNJsi::ViewProperty> &props,
-                   std::function<jsi::Object(int, int)> onSize) {
-    // Default implementation just calls the base method, ignoring onSize
-    setJsiProperties(props);
-  }
-
   void requestRedraw() {
     if (!_redrawRequested) {
       _redrawRequested = true;
diff --git a/packages/skia/src/renderer/Canvas.tsx b/packages/skia/src/renderer/Canvas.tsx
@@ -15,7 +15,7 @@ import type {
   View,
   ViewProps,
 } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
+import type { AnimatedRef, SharedValue } from "react-native-reanimated";
 
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
@@ -38,6 +38,11 @@ export interface CanvasRef extends FC<CanvasProps> {
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
 const useReanimatedFrame = !HAS_REANIMATED_3 ? () => {} : Rea.useFrameCallback;
+const measure = !HAS_REANIMATED_3 ? null : Rea.measure;
+
+const useCanvasRefPriv: typeof useRef<View> = !HAS_REANIMATED_3
+  ? useRef
+  : Rea.useAnimatedRef;
 
 export const useCanvasSize = (userRef?: RefObject<CanvasRef | null>) => {
   const ourRef = useCanvasRef();
@@ -84,7 +89,7 @@ export const Canvas = ({
       "<Canvas onLayout={onLayout} /> is not supported on the new architecture, to fix the issue, see: https://shopify.github.io/react-native-skia/docs/canvas/overview/#getting-the-canvas-size"
     );
   }
-  const viewRef = useRef<View>(null);
+  const viewRef = useCanvasRefPriv(null);
   // Native ID
   const nativeId = useMemo(() => {
     return SkiaViewNativeId.current++;
@@ -95,20 +100,16 @@ export const Canvas = ({
 
   useReanimatedFrame(() => {
     "worklet";
-  }, !!onSize);
-  useEffect(() => {
-    if (onSize) {
-      Rea.runOnUI(() => {
-        (global as Record<string, unknown>)[`__onSize_${nativeId}`] = onSize;
-      })();
-      return () => {
-        Rea.runOnUI(() => {
-          delete (global as Record<string, unknown>)[`__onSize_${nativeId}`];
-        })();
-      };
+    if (onSize && measure) {
+      const result = measure(viewRef as AnimatedRef<View>);
+      if (result) {
+        const { width, height } = result;
+        if (onSize.value.width !== width || onSize.value.height !== height) {
+          onSize.value = { width, height };
+        }
+      }
     }
-    return undefined;
-  }, [onSize, nativeId]);
+  }, !!onSize);
 
   // Render effects
   useLayoutEffect(() => {

Original file line number	Diff line number	Diff line change
`@@ -106,10 +106,9 @@ class JsiSkAnimatedImage`
`106`	`106`	`if (bytesPerPixel == 0) {`
`107`	`107`	`bytesPerPixel = 4;`
`108`	`108`	`}`
`109`		`- frameBytes =`
`110`		`- safeMul(safeMul(static_cast<size_t>(frame->width()),`
`111`		`- static_cast<size_t>(frame->height())),`
`112`		`- bytesPerPixel);`
	`109`	`+ frameBytes = safeMul(safeMul(static_cast<size_t>(frame->width()),`
	`110`	`+ static_cast<size_t>(frame->height())),`
	`111`	`+ bytesPerPixel);`
`113`	`112`	`}`
`114`	`113`	`}`
`115`	`114`