Refine deprecations

example/src/Examples/API/Picture.tsx

@@ -10,7 +10,6 @@ import {
 
 // Create picture
 const picture = createPicture(
-  { x: 0, y: 0, width: 100, height: 100 },
   (canvas) => {
     const paint = Skia.Paint();
     paint.setColor(Skia.Color("pink"));
@@ -19,7 +18,8 @@ const picture = createPicture(
     const circlePaint = Skia.Paint();
     circlePaint.setColor(Skia.Color("orange"));
     canvas.drawCircle(50, 50, 50, circlePaint);
-  }
+  },
+  { x: 0, y: 0, width: 100, height: 100 }
 );
 
 export const PictureExample = () => {

example/src/Examples/API/PictureView.tsx

@@ -10,7 +10,7 @@ export const PictureViewExample = () => {
   // Create picture
   const picture = useMemo(
     () =>
-      createPicture({ x: 0, y: 0, width: 100, height: 100 }, (canvas) => {
+      createPicture((canvas) => {
         const paint = Skia.Paint();
         paint.setColor(Skia.Color("pink"));
         canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);

example/src/Examples/API/Touch.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { StyleSheet, View } from "react-native";
-import type { SkPicture, SkSize } from "@shopify/react-native-skia";
+import type { SkPicture } from "@shopify/react-native-skia";
 import {
   Group,
   Fill,

package/cpp/api/JsiSkPictureRecorder.h

@@ -28,7 +28,7 @@ class JsiSkPictureRecorder
 
   JSI_HOST_FUNCTION(beginRecording) {
     SkCanvas *canvas;
-    if (count > 0) {
+    if (count > 0 && !arguments[0].isUndefined()) {
       auto rect = JsiSkRect::fromValue(runtime, arguments[0]);
       SkRTreeFactory factory;
       canvas = getObject()->beginRecording(*rect, &factory);

package/src/renderer/Canvas.tsx

@@ -4,7 +4,6 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
-  useLayoutEffect,
 } from "react";
 import type {
   RefObject,
@@ -13,13 +12,13 @@ import type {
   ForwardedRef,
   FunctionComponent,
 } from "react";
+import type { LayoutChangeEvent } from "react-native";
 
 import { SkiaDomView, SkiaPictureView } from "../views";
 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";
@@ -33,34 +32,42 @@ export interface CanvasProps extends SkiaBaseViewProps {
   onTouch?: TouchHandler;
 }
 
-const useOnSizeEvent = (resultValue: SkiaBaseViewProps["onSize"]) => {
-  const onSize = useValue({
-    width: 0,
-    height: 0,
-  });
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
 
-  useLayoutEffect(() => {
-    if (!resultValue) {
-      return;
-    }
-    return onSize.addListener((newValue) => {
       if (isValue(resultValue)) {
-        resultValue.current = newValue;
-      } else {
-        resultValue.value = newValue;
+        resultValue.current = { width, height };
+      } else if (resultValue) {
+        resultValue.value = { width, height };
       }
-    });
-  }, [resultValue, onSize]);
-
-  return onSize;
+    },
+    [onLayout, resultValue]
+  );
 };
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize: _onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
     forwardedRef
   ) => {
-    const onSize = useOnSizeEvent(_onSize);
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {
@@ -102,7 +109,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           style={style}
           root={root.dom}
           onTouch={onTouch}
-          onSize={onSize}
+          onLayout={onLayout}
           mode={mode}
           debug={debug}
           {...props}
@@ -125,7 +132,7 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
           mode={mode}
           debug={debug}
           picture={picture}
-          onSize={onSize}
+          onLayout={onLayout}
           {...props}
         />
       );

package/src/skia/core/Picture.ts

@@ -11,15 +11,13 @@ export const createPicture = (
   cb: (canvas: SkCanvas) => void,
   rect?: SkRect | SkSize
 ) => {
+  "worklet";
   const recorder = Skia.PictureRecorder();
-  const canvas = recorder.beginRecording(
-    // eslint-disable-next-line no-nested-ternary
-    rect
-      ? isRect(rect)
-        ? rect
-        : Skia.XYWHRect(0, 0, rect.width, rect.height)
-      : undefined
-  );
+  let bounds: undefined | SkRect;
+  if (rect) {
+    bounds = isRect(rect) ? rect : Skia.XYWHRect(0, 0, rect.width, rect.height);
+  }
+  const canvas = recorder.beginRecording(bounds);
   cb(canvas);
   return recorder.finishRecordingAsPicture();
 };

package/src/skia/types/Rect.ts

@@ -6,6 +6,7 @@ export interface SkRect {
 }
 
 export const isRect = (def: unknown): def is SkRect => {
+  "worklet";
   if (typeof def === "object" && def !== null) {
     const rect = def as SkRect;
     return (

package/src/values/api.ts

@@ -26,6 +26,7 @@ export const ValueApi = {
    * for animating Skia: https://shopify.github.io/react-native-skia/docs/animations/animations
    */
   createValue<T>(initialValue: T): SkiaMutableValue<T> {
+    deprecatedWarning();
     return SkiaValueApi.createValue(initialValue);
   },
   /**