fix(🐛): improve Canvas unmounting (#2619)

So far Canvas unmounting was treated as a regular SkiaDOM update where the drawing is simply empty. But we want to keep the last frame visible until the view is destroyed.

packages/skia/src/renderer/Container.tsx

@@ -10,6 +10,7 @@ import type { Skia } from "../skia/types";
 export class Container {
   private _root: RenderNode<GroupProps>;
   public Sk: SkDOM;
+  public unmounted = false;
   constructor(
     Skia: Skia,
     public redraw: () => void = () => {},

packages/skia/src/renderer/HostConfig.ts

@@ -53,9 +53,13 @@ const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
   parent.addChild(child);
 };
 
-const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+const removeNode = (parent: Node<unknown>, child: Node<unknown>, unmounted = false) => {
+  // If the drawing is unmounted we don't want to update it.
+  // We can just stop the reanimated mappers
   unbindReanimatedNode(child);
-  return parent.removeChild(child);
+  if (!unmounted) {
+    parent.removeChild(child);
+  }
 };
 
 const insertBefore = (
@@ -224,7 +228,7 @@ export const skHostConfig: SkiaHostConfig = {
   },
 
   removeChildFromContainer: (container, child) => {
-    removeNode(container.root, child);
+    removeNode(container.root, child, container.unmounted);
   },
 
   insertInContainerBefore: (container, child, before) => {

packages/skia/src/renderer/Reconciler.tsx

@@ -46,6 +46,7 @@ export class SkiaRoot {
   }
 
   unmount() {
+    this.container.unmounted = true;
     skiaReconciler.updateContainer(null, this.root, null, () => {
       hostDebug("unmountContainer");
     });

packages/skia/src/views/SkiaDomView.tsx

@@ -88,14 +88,6 @@ See: https://shopify.github.io/react-native-skia/docs/animations/gestures`
     SkiaViewApi.requestRedraw(this._nativeId);
   }
 
-  /**
-   * Clear up the dom node when unmounting to release resources.
-   */
-  componentWillUnmount(): void {
-    assertSkiaViewApi();
-    SkiaViewApi.setJsiProperty(this._nativeId, "root", null);
-  }
-
   render() {
     const { mode, debug = false, ...viewProps } = this.props;
     return (

turbo.json

@@ -17,7 +17,7 @@
           "!apps/*/src/app/build"
         ],
         "outputs": [
-          "apps/*/ios/android/**"
+          "apps/*/android/**"
         ]
       },
       "build:ios": {