Merge pull request #1577 from Shopify/onsize

Add support for shared values in onSize
Shopify · May 23, 2023 · c6b68ed · c6b68ed
2 parents c37c429 + 0e162e5
commit c6b68ed
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 5 deletions.
diff --git a/docs/docs/animations/values.md b/docs/docs/animations/values.md
@@ -98,7 +98,7 @@ const Demo = () => {
 
 ## Canvas Size
 
-The `onSize` property will update the provided Skia Value with the current canvas size when the Canvas is resized.
+The `onSize` property will update the provided Skia Value with the current canvas size when the Canvas is resized. This property can also be a Reanimated shared value (see [reanimated integration](/docs/animations/reanimated)).
 
 ```tsx twoslash
 import React from "react";

diff --git a/docs/docs/canvas/canvas.md b/docs/docs/canvas/canvas.md
@@ -15,7 +15,7 @@ Behind the scenes, it is using its own React renderer.
 | ref?   | `Ref<SkiaView>` | Reference to the `SkiaView` object |
 | mode?   | `default` or `continuous` | By default, the canvas is only updated when the drawing tree or animation values change. With `mode="continuous"`, the canvas will redraw on every frame |
 | onTouch?    | `TouchHandler` | Touch handler for the Canvas (see [touch handler](/docs/animations/touch-events#usetouchhandler)) |
-| onSize? | `SkiaMutableValue<Size>` | Skia value to which the canvas size will be assigned  (see [canvas size](/docs/animations/values#canvas-size)) |
+| onSize? | `SkiaMutableValue<Size>` or `SharedValue<Size>` | Skia or Reanimated value to which the canvas size will be assigned  (see [canvas size](/docs/animations/values#canvas-size)) |
 | onLayout? | `NativeEvent<LayoutEvent>` | Invoked on mount and on layout changes (see [onLayout](https://reactnative.dev/docs/view#onlayout)) |
 
 ## Getting the Canvas size

diff --git a/package/src/renderer/Canvas.tsx b/package/src/renderer/Canvas.tsx
@@ -17,9 +17,11 @@ import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
 import { JsiDrawingContext } from "../dom/types";
+import { useValue } from "../values";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
+import { isValue } from "./processors";
 
 export const useCanvasRef = () => useRef<SkiaDomView>(null);
 
@@ -31,9 +33,27 @@ export interface CanvasProps extends SkiaBaseViewProps {
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: onSizeReanimatedOrSkia,
+      ...props
+    },
     forwardedRef
   ) => {
+    const size = useValue({ width: 0, height: 0 });
+    const onSize = isValue(onSizeReanimatedOrSkia)
+      ? onSizeReanimatedOrSkia
+      : size;
+    useEffect(() => {
+      if (!isValue(onSizeReanimatedOrSkia) && onSizeReanimatedOrSkia) {
+        return size.addListener((v) => (onSizeReanimatedOrSkia.value = v));
+      }
+      return undefined;
+    }, [onSizeReanimatedOrSkia, size]);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {

diff --git a/package/src/views/SkiaDomView.web.tsx b/package/src/views/SkiaDomView.web.tsx
@@ -1,6 +1,7 @@
 import { Skia } from "../skia";
 import type { SkCanvas } from "../skia/types";
 import { JsiDrawingContext } from "../dom/types/DrawingContext";
+import { isValue } from "../renderer/processors/Animations/Animations";
 
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 import type { SkiaDomViewProps, TouchInfo } from "./types";
@@ -16,7 +17,11 @@ export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
     }
     if (this.props.onSize) {
       const { width, height } = this.getSize();
-      this.props.onSize.current = { width, height };
+      if (isValue(this.props.onSize)) {
+        this.props.onSize.current = { width, height };
+      } else {
+        this.props.onSize.value = { width, height };
+      }
     }
     if (this.props.root) {
       const ctx = new JsiDrawingContext(Skia, canvas);

diff --git a/package/src/views/types.ts b/package/src/views/types.ts
@@ -9,6 +9,7 @@ import type {
   SkSize,
 } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
 export type DrawMode = "continuous" | "default";
 
@@ -97,7 +98,7 @@ export interface SkiaBaseViewProps extends ViewProps {
    * Pass an animated value to the onSize property to get updates when
    * the Skia view is resized.
    */
-  onSize?: SkiaMutableValue<SkSize>;
+  onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
 }
 
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {