🔧

apps/paper/src/Examples/Breathe/Breathe.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { StyleSheet, useWindowDimensions, View } from "react-native";
 import {
   BlurMask,
@@ -66,6 +66,12 @@ export const Breathe = () => {
     { rotate: mix(progress.value, -Math.PI, 0) },
   ]);
 
+  useEffect(() => {
+    return () => {
+      console.log("Breathe unmounting");
+    };
+  }, []);
+
   return (
     <View style={{ flex: 1 }}>
       <Canvas style={styles.container} opaque>

packages/skia/src/skia/core/Data.ts

@@ -56,6 +56,7 @@ const useLoading = <T extends SkJSIInstance<string>>(
     });
     return () => {
       if (manage) {
+        console.log("dispose!");
         dataRef.current?.dispose();
       }
       mounted.current = false;

packages/skia/src/sksg/Container.ts

@@ -11,28 +11,6 @@ import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 
-const drawOnscreen = (
-  Skia: Skia,
-  nativeId: number,
-  recording: SharedValue<Recording | null>
-) => {
-  "worklet";
-  if (!recording.value) {
-    return;
-  }
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
-  // const start = performance.now();
-
-  const ctx = createDrawingContext(Skia, recording.value.paintPool, canvas);
-  //console.log(recording.commands);
-  replay(ctx, recording.value.commands);
-  const picture = rec.finishRecordingAsPicture();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-
 export interface Container {
   drawOnCanvas(canvas: SkCanvas): void;
   set root(root: Node[]);
@@ -73,6 +51,29 @@ class StaticContainer implements Container {
   }
 }
 
+const drawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recording: SharedValue<Recording | null>
+) => {
+  "worklet";
+  if (!recording.value) {
+    console.log("No recording to draw");
+    return;
+  }
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  // const start = performance.now();
+
+  const ctx = createDrawingContext(Skia, recording.value.paintPool, canvas);
+  //console.log(recording.commands);
+  replay(ctx, recording.value.commands);
+  const picture = rec.finishRecordingAsPicture();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
 class ReanimatedContainer implements Container {
   private recording: SharedValue<Recording | null>;
 
@@ -83,6 +84,9 @@ class ReanimatedContainer implements Container {
   }
 
   set root(root: Node[]) {
+    if (this.mapperId !== null) {
+      Rea.stopMapper(this.mapperId);
+    }
     const recorder = new Recorder();
     visit(recorder, root);
     const record = recorder.getRecording();
@@ -92,10 +96,8 @@ class ReanimatedContainer implements Container {
       paintPool: record.paintPool,
     };
 
-    if (this.mapperId !== null) {
-      Rea.stopMapper(this.mapperId);
-    }
-
+    console.log("new recording is set: " + root.length);
+    console.log("Animation values to register: ", animationValues.size);
     if (animationValues.size > 0) {
       const { nativeId, Skia, recording } = this;
       this.mapperId = Rea.startMapper(() => {

packages/skia/src/sksg/HostConfig.ts

@@ -203,7 +203,6 @@ export const sksgHostConfig: SkiaHostConfig = {
   },
 
   replaceContainerChildren(container: Container, newChildren: ChildSet) {
-    debug("replaceContainerChildren");
     container.root = newChildren;
   },