@shopify/react-native-skia 2.3.8 → 2.3.10

package/lib/typescript/src/skia/types/Recorder.d.ts

@@ -48,6 +48,7 @@ export interface BaseRecorder {
     drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 export interface JsiRecorder extends BaseRecorder {
-    play(): SkPicture;
+    play(picture: SkPicture): void;
     applyUpdates(variables: SharedValue<unknown>[]): void;
+    reset(): void;
 }

package/lib/typescript/src/sksg/Container.native.d.ts

@@ -5,6 +5,10 @@ import "../views/api";
 declare class NativeReanimatedContainer extends Container {
     private nativeId;
     private mapperId;
+    private picture;
+    private recorderA;
+    private recorderB;
+    private currentRecorder;
     constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }

package/lib/typescript/src/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -10,6 +10,7 @@ export declare class ReanimatedRecorder implements BaseRecorder {
     private values;
     private recorder;
     constructor(Skia: Skia);
+    reset(): void;
     private processAnimationValues;
     getRecorder(): JsiRecorder;
     getSharedValues(): SharedValue<unknown>[];

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.3.8",
+  "version": "2.3.10",
   "skia": {
     "version": "m142",
     "checksums": {

package/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(() => {

package/src/skia/types/Picture/PictureFactory.ts

@@ -5,5 +5,5 @@ export interface PictureFactory {
    * Returns an SkPicture which has been serialized previously to the given bytes.
    * @param bytes
    */
-  MakePicture(bytes: Uint8Array | ArrayBuffer): SkPicture | null;
+  MakePicture(bytes: Uint8Array | ArrayBuffer | null): SkPicture | null;
 }

package/src/skia/types/Recorder.ts

@@ -92,6 +92,7 @@ export interface BaseRecorder {
 }
 
 export interface JsiRecorder extends BaseRecorder {
-  play(): SkPicture;
+  play(picture: SkPicture): void;
   applyUpdates(variables: SharedValue<unknown>[]): void;
+  reset(): void;
 }

package/src/sksg/Container.native.ts

@@ -1,5 +1,5 @@
 import Rea from "../external/reanimated/ReanimatedProxy";
-import type { Skia } from "../skia/types";
+import type { Skia, SkPicture } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
@@ -10,11 +10,15 @@ import { visit } from "./Recorder/Visitor";
 import "../skia/NativeSetup";
 import "../views/api";
 
-const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
+const nativeDrawOnscreen = (
+  nativeId: number,
+  recorder: JsiRecorder,
+  picture: SkPicture
+) => {
   "worklet";
 
   //const start = performance.now();
-  const picture = recorder.play();
+  recorder.play(picture);
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
@@ -22,12 +26,20 @@ const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
 
 class NativeReanimatedContainer extends Container {
   private mapperId: number | null = null;
+  private picture: SkPicture;
+  private recorderA: ReanimatedRecorder;
+  private recorderB: ReanimatedRecorder;
+  private currentRecorder: ReanimatedRecorder;
 
   constructor(
     Skia: Skia,
     private nativeId: number
   ) {
     super(Skia);
+    this.recorderA = new ReanimatedRecorder(Skia);
+    this.recorderB = new ReanimatedRecorder(Skia);
+    this.currentRecorder = this.recorderA;
+    this.picture = Skia.Picture.MakePicture(null)!;
   }
 
   redraw() {
@@ -37,20 +49,26 @@ class NativeReanimatedContainer extends Container {
     if (this.unmounted) {
       return;
     }
-    const { nativeId, Skia } = this;
-    const recorder = new ReanimatedRecorder(Skia);
+
+    // Swap to the next recorder (double buffering)
+    const recorder = this.currentRecorder;
+    this.currentRecorder =
+      this.currentRecorder === this.recorderA ? this.recorderB : this.recorderA;
+
+    const { nativeId, picture } = this;
+    recorder.reset();
     visit(recorder, this.root);
     const sharedValues = recorder.getSharedValues();
     const sharedRecorder = recorder.getRecorder();
     Rea.runOnUI(() => {
       "worklet";
-      nativeDrawOnscreen(nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder, picture);
     })();
     if (sharedValues.length > 0) {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder, picture);
       }, sharedValues);
     }
   }

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -44,6 +44,11 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.recorder = Skia.Recorder();
   }
 
+  reset() {
+    this.values.clear();
+    this.recorder.reset();
+  }
+
   private processAnimationValues(props?: Record<string, unknown>) {
     if (!props) {
       return;