Add Freeze example

example/src/Examples/API/Freeze.tsx

@@ -1,13 +1,18 @@
+import type { ReactNode } from "react";
 import React, { useEffect, useState } from "react";
+import type { SkPaint, SkRect } from "@shopify/react-native-skia";
 import {
+  FilterMode,
   Canvas,
   Group,
   Rect,
   Text,
   useClockValue,
   useDerivedValue,
-  Freeze,
   rect,
+  createDrawing,
+  Skia,
+  TileMode,
 } from "@shopify/react-native-skia";
 
 const size = 200;
@@ -61,3 +66,32 @@ const Checkerboard = ({ color }: { color: string }) => {
     </>
   );
 };
+
+interface FreezeProps {
+  rect: SkRect;
+  children?: ReactNode | ReactNode[];
+}
+
+const onDraw = createDrawing<FreezeProps>(
+  (ctx, { rect: boundingRect }, node) => {
+    if (node.memoized === null) {
+      const recorder = Skia.PictureRecorder();
+      const canvas = recorder.beginRecording(boundingRect);
+      node.visit({
+        ...ctx,
+        canvas,
+      });
+      const pic = recorder.finishRecordingAsPicture();
+      const shaderPaint = Skia.Paint();
+      shaderPaint.setShader(
+        pic.makeShader(TileMode.Decal, TileMode.Decal, FilterMode.Nearest)
+      );
+      node.memoized = shaderPaint;
+    }
+    ctx.canvas.drawRect(boundingRect, node.memoized as SkPaint);
+  }
+);
+
+export const Freeze = (props: FreezeProps) => {
+  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;
+};

package/src/renderer/components/index.ts

@@ -10,7 +10,6 @@ export * from "./pathEffects";
 export * from "../processors";
 export * from "./Picture";
 
-export * from "./Freeze";
 export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";