Merge pull request #1086 from Shopify/remove/use-picture

Remove usePicture deprecation

Author: chrfalch

docs/docs/Picture.md

@@ -16,7 +16,7 @@ A Picture renders a previously recorded list of drawing operations on the canvas
 ```tsx twoslash
 import React, { useMemo } from "react";
 import {
-  usePicture,
+  createPicture,
   Canvas,
   Picture,
   Skia,
@@ -25,7 +25,7 @@ import {
 
 export const PictureExample = () => {
   // Create picture
-  const picture = usePicture(
+  const picture = useMemo(() => createPicture(
     { x: 0, y: 0, width: 100, height: 100 },
     (canvas) => {
       const paint = Skia.Paint();
@@ -36,7 +36,7 @@ export const PictureExample = () => {
       circlePaint.setColor(Skia.Color("orange"));
       canvas.drawCircle(50, 50, 50, circlePaint);
     }
-  );
+  ), []);
 
   // Serialize the picture
   const serialized = useMemo(() => picture.serialize(), [picture]);

example/src/Examples/API/PictureView.tsx

@@ -1,20 +1,25 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { StyleSheet } from "react-native";
-import { usePicture, Skia, SkiaPictureView } from "@shopify/react-native-skia";
+import {
+  createPicture,
+  Skia,
+  SkiaPictureView,
+} from "@shopify/react-native-skia";
 
 export const PictureViewExample = () => {
   // Create picture
-  const picture = usePicture(
-    { x: 0, y: 0, width: 100, height: 100 },
-    (canvas) => {
-      const paint = Skia.Paint();
-      paint.setColor(Skia.Color("pink"));
-      canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
+  const picture = useMemo(
+    () =>
+      createPicture({ x: 0, y: 0, width: 100, height: 100 }, (canvas) => {
+        const paint = Skia.Paint();
+        paint.setColor(Skia.Color("pink"));
+        canvas.drawRect({ x: 0, y: 0, width: 100, height: 100 }, paint);
 
-      const circlePaint = Skia.Paint();
-      circlePaint.setColor(Skia.Color("orange"));
-      canvas.drawCircle(50, 50, 50, circlePaint);
-    }
+        const circlePaint = Skia.Paint();
+        circlePaint.setColor(Skia.Color("orange"));
+        canvas.drawCircle(50, 50, 50, circlePaint);
+      }),
+    []
   );
 
   return <SkiaPictureView style={styles.container} picture={picture} debug />;

package/src/mock/index.ts

@@ -53,7 +53,6 @@ export const Mock: typeof SkiaExports &
   useTypeface: Noop,
   useImage: Noop,
   useSVG: Noop,
-  usePicture: Noop,
   createPicture: Noop,
   // 3. Point/Rect/Transform utilities
   vec,

package/src/skia/core/Picture.ts

@@ -1,30 +1,6 @@
-import type { DependencyList } from "react";
-import { useMemo } from "react";
-
 import { Skia } from "../Skia";
 import type { SkCanvas, SkRect } from "../types";
 
-/**
- * Memoizes and returns an SkPicture that can be drawn to another canvas.
- * @param rect Picture bounds
- * @param cb Callback for drawing to the canvas
- * @returns SkPicture
- */
-export const usePicture = (
-  rect: SkRect,
-  cb: (canvas: SkCanvas) => void,
-  deps: DependencyList = []
-) => {
-  console.warn("usePicture() is deprecated. Use createPicture() instead.");
-  return useMemo(() => {
-    const recorder = Skia.PictureRecorder();
-    const canvas = recorder.beginRecording(rect);
-    cb(canvas);
-    return recorder.finishRecordingAsPicture();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-};
-
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds