From 6bc050872d67e473da6716b3d99647ab51d09628 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Sun, 12 Jan 2025 08:25:40 +0100
Subject: [PATCH] =?UTF-8?q?feat(=F0=9F=8E=A8):=20Enable=20new=20reconciler?=
 =?UTF-8?q?=20by=20default=20on=20iOS=20and=20Android=20(#2865)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The old reconciler is still available via `CanvasOld` if needed
---
 apps/paper/package.json                       |   2 +-
 .../src/Examples/Breathe/TestReconciller.tsx  | 106 ++++++++
 packages/skia/src/index.ts                    |   2 +-
 packages/skia/src/renderer/Canvas.tsx         | 158 +++++------
 packages/skia/src/renderer/Canvas2.tsx        | 128 ---------
 packages/skia/src/renderer/Canvas2.web.tsx    |   6 -
 packages/skia/src/renderer/CanvasOld.tsx      | 126 +++++++++
 packages/skia/src/sksg/Container.ts           |   8 +-
 packages/skia/src/sksg/HostConfig2.ts         | 247 ++++++++++++++++++
 packages/skia/src/sksg/Recorder/Core.ts       |   1 +
 packages/skia/src/sksg/Recorder/Player.ts     |   4 +-
 packages/skia/src/sksg/Recorder/Recorder.ts   |   1 -
 yarn.lock                                     |  18 +-
 13 files changed, 579 insertions(+), 228 deletions(-)
 create mode 100644 apps/paper/src/Examples/Breathe/TestReconciller.tsx
 delete mode 100644 packages/skia/src/renderer/Canvas2.tsx
 delete mode 100644 packages/skia/src/renderer/Canvas2.web.tsx
 create mode 100644 packages/skia/src/renderer/CanvasOld.tsx
 create mode 100644 packages/skia/src/sksg/HostConfig2.ts

diff --git a/apps/paper/package.json b/apps/paper/package.json
index 77226ab3f8..0bf42d9ada 100644
--- a/apps/paper/package.json
+++ b/apps/paper/package.json
@@ -31,7 +31,7 @@
     "react-native-reanimated": "^3.16.5",
     "react-native-safe-area-context": "^4.10.9",
     "react-native-screens": "^4.3.0",
-    "react-native-svg": "^15.9.0",
+    "react-native-svg": "^15.10.1",
     "react-native-wgpu": "0.1.19",
     "typescript": "^5.2.2"
   },
diff --git a/apps/paper/src/Examples/Breathe/TestReconciller.tsx b/apps/paper/src/Examples/Breathe/TestReconciller.tsx
new file mode 100644
index 0000000000..f117bc037b
--- /dev/null
+++ b/apps/paper/src/Examples/Breathe/TestReconciller.tsx
@@ -0,0 +1,106 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { Button, StyleSheet, useWindowDimensions, View } from "react-native";
+import {
+  BlurMask,
+  vec,
+  Canvas,
+  Circle,
+  Fill,
+  Group,
+  polar2Canvas,
+  mix,
+} from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-reanimated";
+import { useDerivedValue } from "react-native-reanimated";
+
+import { useLoop } from "../../components/Animations";
+
+const c1 = "#61bea2";
+const c2 = "#529ca0";
+
+interface RingProps {
+  index: number;
+  progress: SharedValue<number>;
+  total: number;
+}
+
+const Ring = ({ index, progress, total }: RingProps) => {
+  const { width, height } = useWindowDimensions();
+  const R = width / 4;
+  const center = useMemo(
+    () => vec(width / 2, height / 2 - 64),
+    [height, width]
+  );
+
+  const theta = (index * (2 * Math.PI)) / total;
+  const transform = useDerivedValue(() => {
+    const { x, y } = polar2Canvas(
+      { theta, radius: progress.value * R },
+      { x: 0, y: 0 }
+    );
+    const scale = mix(progress.value, 0.3, 1);
+    return [{ translateX: x }, { translateY: y }, { scale }];
+  });
+
+  return (
+    <Circle
+      c={center}
+      r={R}
+      color={index % 2 ? c1 : c2}
+      origin={center}
+      transform={transform}
+    />
+  );
+};
+
+export const Breathe = () => {
+  const [rings, setRings] = useState(12);
+  const { width, height } = useWindowDimensions();
+  const center = useMemo(
+    () => vec(width / 2, height / 2 - 64),
+    [height, width]
+  );
+
+  const progress = useLoop({ duration: 3000 });
+
+  const transform = useDerivedValue(() => [
+    { rotate: mix(progress.value, -Math.PI, 0) },
+  ]);
+
+  const add = useCallback(() => {
+    setRings((r) => r + 1);
+  }, []);
+  const remove = useCallback(() => {
+    setRings((r) => Math.max(1, r - 1));
+  }, []);
+  return (
+    <View style={{ flex: 1 }}>
+      <View>
+        <Button onPress={add} title="add" />
+        <Button onPress={remove} title="remove" />
+      </View>
+      <Canvas style={styles.container} opaque>
+        <Fill color="rgb(36,43,56)" />
+        <Group origin={center} transform={transform} blendMode="screen">
+          <BlurMask style="solid" blur={40} />
+          {new Array(rings).fill(0).map((_, index) => {
+            return (
+              <Ring
+                key={index}
+                index={index}
+                progress={progress}
+                total={rings}
+              />
+            );
+          })}
+        </Group>
+      </Canvas>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/packages/skia/src/index.ts b/packages/skia/src/index.ts
index 5f0e709115..5ebc0cadf0 100644
--- a/packages/skia/src/index.ts
+++ b/packages/skia/src/index.ts
@@ -1,8 +1,8 @@
 import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
+export * from "./renderer/CanvasOld";
 export * from "./renderer/Canvas";
-export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";
diff --git a/packages/skia/src/renderer/Canvas.tsx b/packages/skia/src/renderer/Canvas.tsx
index bf6f300334..d16fca2843 100644
--- a/packages/skia/src/renderer/Canvas.tsx
+++ b/packages/skia/src/renderer/Canvas.tsx
@@ -1,32 +1,24 @@
-import React, {
-  useEffect,
+import {
+  forwardRef,
   useCallback,
+  useEffect,
+  useImperativeHandle,
   useMemo,
-  forwardRef,
   useRef,
 } from "react";
-import type {
-  RefObject,
-  ReactNode,
-  MutableRefObject,
-  ForwardedRef,
-  FunctionComponent,
-} from "react";
-import type { LayoutChangeEvent } from "react-native";
+import type { LayoutChangeEvent, ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 
-import { SkiaDomView } from "../views";
+import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
+import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
+import type { SkRect, SkSize } from "../skia/types";
+import { SkiaSGRoot } from "../sksg/Reconciler";
+import { Skia } from "../skia";
 import type { SkiaBaseViewProps } from "../views";
 
-import { SkiaRoot } from "./Reconciler";
-
-export const useCanvasRef = () => useRef<SkiaDomView>(null);
-
-export interface CanvasProps extends SkiaBaseViewProps {
-  ref?: RefObject<SkiaDomView>;
-  children: ReactNode;
-  mode?: "default" | "continuous";
-}
+const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
+// TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (
   resultValue: SkiaBaseViewProps["onSize"],
   onLayout?: (event: LayoutChangeEvent) => void
@@ -46,39 +38,40 @@ const useOnSizeEvent = (
   );
 };
 
-export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+export interface CanvasProps extends ViewProps {
+  debug?: boolean;
+  opaque?: boolean;
+  onSize?: SharedValue<SkSize>;
+  mode?: "continuous" | "default";
+}
+
+export const Canvas = forwardRef(
   (
     {
-      children,
-      style,
+      mode,
       debug,
-      mode = "default",
-      onSize: _onSize,
+      opaque,
+      children,
+      onSize,
       onLayout: _onLayout,
-      ...props
-    },
-    forwardedRef
+      ...viewProps
+    }: CanvasProps,
+    ref
   ) => {
-    const onLayout = useOnSizeEvent(_onSize, _onLayout);
-    const innerRef = useCanvasRef();
-    const ref = useCombinedRefs(forwardedRef, innerRef);
-    const redraw = useCallback(() => {
-      innerRef.current?.redraw();
-    }, [innerRef]);
-    const getNativeId = useCallback(() => {
-      const id = innerRef.current?.nativeId ?? -1;
-      return id;
-    }, [innerRef]);
+    const rafId = useRef<number | null>(null);
+    const onLayout = useOnSizeEvent(onSize, _onLayout);
+    // Native ID
+    const nativeId = useMemo(() => {
+      return SkiaViewNativeId.current++;
+    }, []);
 
-    const root = useMemo(
-      () => new SkiaRoot(redraw, getNativeId),
-      [redraw, getNativeId]
-    );
+    // Root
+    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-    // Render effect
+    // Render effects
     useEffect(() => {
       root.render(children);
-    }, [children, root, redraw]);
+    }, [children, root]);
 
     useEffect(() => {
       return () => {
@@ -86,41 +79,50 @@ export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
       };
     }, [root]);
 
+    const requestRedraw = useCallback(() => {
+      rafId.current = requestAnimationFrame(() => {
+        root.render(children);
+        if (mode === "continuous") {
+          requestRedraw();
+        }
+      });
+    }, [children, mode, root]);
+
+    useEffect(() => {
+      if (mode === "continuous") {
+        console.warn("The `mode` property in `Canvas` is deprecated.");
+        requestRedraw();
+      }
+      return () => {
+        if (rafId.current !== null) {
+          cancelAnimationFrame(rafId.current);
+        }
+      };
+    }, [mode, requestRedraw]);
+    // Component methods
+    useImperativeHandle(ref, () => ({
+      makeImageSnapshot: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
+      },
+      makeImageSnapshotAsync: (rect?: SkRect) => {
+        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
+      },
+      redraw: () => {
+        SkiaViewApi.requestRedraw(nativeId);
+      },
+      getNativeId: () => {
+        return nativeId;
+      },
+    }));
     return (
-      <SkiaDomView
-        ref={ref}
-        style={style}
-        root={root.dom}
-        onLayout={onLayout}
+      <NativeSkiaPictureView
+        collapsable={false}
+        nativeID={`${nativeId}`}
         debug={debug}
-        mode={mode}
-        {...props}
+        opaque={opaque}
+        onLayout={onLayout}
+        {...viewProps}
       />
     );
   }
-) as FunctionComponent<CanvasProps & React.RefAttributes<SkiaDomView>>;
-
-/**
- * Combines a list of refs into a single ref. This can be used to provide
- * both a forwarded ref and an internal ref keeping the same functionality
- * on both of the refs.
- * @param refs Array of refs to combine
- * @returns A single ref that can be used in a ref prop.
- */
-const useCombinedRefs = <T,>(
-  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
-) => {
-  const targetRef = React.useRef<T>(null);
-  React.useEffect(() => {
-    refs.forEach((ref) => {
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(targetRef.current);
-        } else {
-          ref.current = targetRef.current;
-        }
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};
+);
diff --git a/packages/skia/src/renderer/Canvas2.tsx b/packages/skia/src/renderer/Canvas2.tsx
deleted file mode 100644
index e935535bc2..0000000000
--- a/packages/skia/src/renderer/Canvas2.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from "react";
-import type { LayoutChangeEvent, ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
-
-import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
-import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
-import type { SkRect, SkSize } from "../skia/types";
-import { SkiaSGRoot } from "../sksg/Reconciler";
-import { Skia } from "../skia";
-import type { SkiaBaseViewProps } from "../views";
-
-const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
-
-// TODO: no need to go through the JS thread for this
-const useOnSizeEvent = (
-  resultValue: SkiaBaseViewProps["onSize"],
-  onLayout?: (event: LayoutChangeEvent) => void
-) => {
-  return useCallback(
-    (event: LayoutChangeEvent) => {
-      if (onLayout) {
-        onLayout(event);
-      }
-      const { width, height } = event.nativeEvent.layout;
-
-      if (resultValue) {
-        resultValue.value = { width, height };
-      }
-    },
-    [onLayout, resultValue]
-  );
-};
-
-export interface Canvas2Props extends ViewProps {
-  debug?: boolean;
-  opaque?: boolean;
-  onSize?: SharedValue<SkSize>;
-  mode?: "continuous" | "default";
-}
-
-export const Canvas2 = forwardRef(
-  (
-    {
-      mode,
-      debug,
-      opaque,
-      children,
-      onSize,
-      onLayout: _onLayout,
-      ...viewProps
-    }: Canvas2Props,
-    ref
-  ) => {
-    const rafId = useRef<number | null>(null);
-    const onLayout = useOnSizeEvent(onSize, _onLayout);
-    // Native ID
-    const nativeId = useMemo(() => {
-      return SkiaViewNativeId.current++;
-    }, []);
-
-    // Root
-    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
-
-    // Render effects
-    useEffect(() => {
-      root.render(children);
-    }, [children, root]);
-
-    useEffect(() => {
-      return () => {
-        root.unmount();
-      };
-    }, [root]);
-
-    const requestRedraw = useCallback(() => {
-      rafId.current = requestAnimationFrame(() => {
-        root.render(children);
-        if (mode === "continuous") {
-          requestRedraw();
-        }
-      });
-    }, [children, mode, root]);
-
-    useEffect(() => {
-      if (mode === "continuous") {
-        requestRedraw();
-      }
-      return () => {
-        if (rafId.current !== null) {
-          cancelAnimationFrame(rafId.current);
-        }
-      };
-    }, [mode, requestRedraw]);
-
-    // Component methods
-    useImperativeHandle(ref, () => ({
-      makeImageSnapshot: (rect?: SkRect) => {
-        return SkiaViewApi.makeImageSnapshot(nativeId, rect);
-      },
-      makeImageSnapshotAsync: (rect?: SkRect) => {
-        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);
-      },
-      redraw: () => {
-        SkiaViewApi.requestRedraw(nativeId);
-      },
-      getNativeId: () => {
-        return nativeId;
-      },
-    }));
-    return (
-      <NativeSkiaPictureView
-        collapsable={false}
-        nativeID={`${nativeId}`}
-        debug={debug}
-        opaque={opaque}
-        onLayout={onLayout}
-        {...viewProps}
-      />
-    );
-  }
-);
diff --git a/packages/skia/src/renderer/Canvas2.web.tsx b/packages/skia/src/renderer/Canvas2.web.tsx
deleted file mode 100644
index 033790665b..0000000000
--- a/packages/skia/src/renderer/Canvas2.web.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { CanvasProps } from "./Canvas";
-import { Canvas } from "./Canvas";
-
-export type Canvas2Props = CanvasProps;
-
-export const Canvas2 = Canvas;
diff --git a/packages/skia/src/renderer/CanvasOld.tsx b/packages/skia/src/renderer/CanvasOld.tsx
new file mode 100644
index 0000000000..4c88752d3e
--- /dev/null
+++ b/packages/skia/src/renderer/CanvasOld.tsx
@@ -0,0 +1,126 @@
+import React, {
+  useEffect,
+  useCallback,
+  useMemo,
+  forwardRef,
+  useRef,
+} from "react";
+import type {
+  RefObject,
+  ReactNode,
+  MutableRefObject,
+  ForwardedRef,
+  FunctionComponent,
+} from "react";
+import type { LayoutChangeEvent } from "react-native";
+
+import { SkiaDomView } from "../views";
+import type { SkiaBaseViewProps } from "../views";
+
+import { SkiaRoot } from "./Reconciler";
+
+export const useCanvasRef = () => useRef<SkiaDomView>(null);
+
+export interface CanvasOldProps extends SkiaBaseViewProps {
+  ref?: RefObject<SkiaDomView>;
+  children: ReactNode;
+  mode?: "default" | "continuous";
+}
+
+const useOnSizeEvent = (
+  resultValue: SkiaBaseViewProps["onSize"],
+  onLayout?: (event: LayoutChangeEvent) => void
+) => {
+  return useCallback(
+    (event: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(event);
+      }
+      const { width, height } = event.nativeEvent.layout;
+
+      if (resultValue) {
+        resultValue.value = { width, height };
+      }
+    },
+    [onLayout, resultValue]
+  );
+};
+
+export const CanvasOld = forwardRef<SkiaDomView, CanvasOldProps>(
+  (
+    {
+      children,
+      style,
+      debug,
+      mode = "default",
+      onSize: _onSize,
+      onLayout: _onLayout,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const onLayout = useOnSizeEvent(_onSize, _onLayout);
+    const innerRef = useCanvasRef();
+    const ref = useCombinedRefs(forwardedRef, innerRef);
+    const redraw = useCallback(() => {
+      innerRef.current?.redraw();
+    }, [innerRef]);
+    const getNativeId = useCallback(() => {
+      const id = innerRef.current?.nativeId ?? -1;
+      return id;
+    }, [innerRef]);
+
+    const root = useMemo(
+      () => new SkiaRoot(redraw, getNativeId),
+      [redraw, getNativeId]
+    );
+
+    // Render effect
+    useEffect(() => {
+      root.render(children);
+    }, [children, root, redraw]);
+
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
+
+    return (
+      <SkiaDomView
+        ref={ref}
+        style={style}
+        root={root.dom}
+        onLayout={onLayout}
+        debug={debug}
+        mode={mode}
+        {...props}
+      />
+    );
+  }
+) as FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;
+
+/**
+ * Combines a list of refs into a single ref. This can be used to provide
+ * both a forwarded ref and an internal ref keeping the same functionality
+ * on both of the refs.
+ * @param refs Array of refs to combine
+ * @returns A single ref that can be used in a ref prop.
+ */
+const useCombinedRefs = <T,>(
+  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
+) => {
+  const targetRef = React.useRef<T>(null);
+  React.useEffect(() => {
+    refs.forEach((ref) => {
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(targetRef.current);
+        } else {
+          ref.current = targetRef.current;
+        }
+      }
+    });
+  }, [refs]);
+  return targetRef;
+};
diff --git a/packages/skia/src/sksg/Container.ts b/packages/skia/src/sksg/Container.ts
index 09363f4242..94a784dbbc 100644
--- a/packages/skia/src/sksg/Container.ts
+++ b/packages/skia/src/sksg/Container.ts
@@ -14,7 +14,7 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
 
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
-  // const start = performance.now();
+  //const start = performance.now();
 
   const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
   replay(ctx, recording.commands);
@@ -87,13 +87,17 @@ class ReanimatedContainer extends Container {
       commands: record.commands,
       paintPool: record.paintPool,
     };
+    const { nativeId, Skia, recording } = this;
     if (animationValues.size > 0) {
-      const { nativeId, Skia, recording } = this;
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
+    Rea.runOnUI(() => {
+      "worklet";
+      drawOnscreen(Skia, nativeId, recording!);
+    })();
   }
 }
 
diff --git a/packages/skia/src/sksg/HostConfig2.ts b/packages/skia/src/sksg/HostConfig2.ts
new file mode 100644
index 0000000000..760970ee05
--- /dev/null
+++ b/packages/skia/src/sksg/HostConfig2.ts
@@ -0,0 +1,247 @@
+/*global NodeJS*/
+import type { Fiber, HostConfig } from "react-reconciler";
+import { DefaultEventPriority } from "react-reconciler/constants";
+
+import type { NodeType } from "../dom/types";
+import { shallowEq } from "../renderer/typeddash";
+
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+
+const DEBUG = false;
+export const debug = (...args: Parameters<typeof console.log>) => {
+  if (DEBUG) {
+    console.log(...args);
+  }
+};
+
+type Instance = Node<unknown>;
+
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+
+type SkiaHostConfig = HostConfig<
+  NodeType,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.push(child);
+};
+
+const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+  parent.children.splice(parent.children.indexOf(child), 1);
+};
+
+const insertBefore = (
+  parent: Node<unknown>,
+  child: Node<unknown>,
+  before: Node<unknown>
+) => {
+  parent.children.splice(parent.children.indexOf(before), 0, child);
+};
+
+export const sksgHostConfig: SkiaHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer");
+    container.root.push(child);
+  },
+
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+
+  getRootHostContext: (_rootContainerInstance: Container) => {
+    debug("getRootHostContext");
+    return null;
+  },
+
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+
+  createTextInstance(
+    _text,
+    _rootContainerInstance,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createTextInstance");
+    // return SpanNode({}, text) as SkNode;
+    throw new Error("Text nodes are not supported yet");
+  },
+
+  createInstance(
+    type,
+    propsWithChildren,
+    _container,
+    _hostContext,
+    _internalInstanceHandle
+  ) {
+    debug("createInstance", type);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = propsWithChildren as any;
+    debug("createInstance", type);
+    const instance = {
+      type,
+      props,
+      children: [],
+    };
+    return instance;
+  },
+
+  appendInitialChild(parentInstance, child) {
+    debug("appendInitialChild");
+    appendNode(parentInstance, child);
+  },
+
+  finalizeInitialChildren(
+    parentInstance,
+    _type,
+    _props,
+    _rootContainerInstance,
+    _hostContext
+  ) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+
+  getPublicInstance(node: Instance) {
+    debug("getPublicInstance");
+    return node;
+  },
+
+  prepareUpdate: (
+    _instance,
+    type,
+    oldProps,
+    newProps,
+    rootContainerInstance,
+    _hostContext
+  ) => {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+    if (propsAreEqual) {
+      return null;
+    }
+    debug("update ", type);
+    return rootContainerInstance;
+  },
+
+  commitUpdate(
+    instance,
+    _updatePayload,
+    type,
+    prevProps,
+    nextProps,
+    _internalHandle
+  ) {
+    debug("commitUpdate: ", type);
+    if (shallowEq(prevProps, nextProps)) {
+      return;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { children, ...props } = nextProps as any;
+    instance.props = props;
+  },
+
+  commitTextUpdate: (
+    _textInstance: TextInstance,
+    _oldText: string,
+    _newText: string
+  ) => {
+    //  textInstance.instance = newText;
+  },
+
+  clearContainer: (container) => {
+    debug("clearContainer");
+    container.root = [];
+  },
+
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+
+  removeChildFromContainer: (container, child) => {
+    container.root.splice(container.root.indexOf(child), 1);
+  },
+
+  insertInContainerBefore: (container, child, before) => {
+    container.root.splice(container.root.indexOf(before), 0, child);
+  },
+
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+
+  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
+  getCurrentEventPriority: () => DefaultEventPriority,
+  beforeActiveInstanceBlur: () => {},
+  afterActiveInstanceBlur: () => {},
+  detachDeletedInstance: () => {},
+
+  getInstanceFromNode: function (_node): Fiber | null | undefined {
+    return null;
+  },
+  prepareScopeUpdate: function (_scopeInstance, _instance): void {},
+  getInstanceFromScope: function (_scopeInstance): Instance | null {
+    return null;
+  },
+};
diff --git a/packages/skia/src/sksg/Recorder/Core.ts b/packages/skia/src/sksg/Recorder/Core.ts
index ed502ca6ee..7a018eaeb1 100644
--- a/packages/skia/src/sksg/Recorder/Core.ts
+++ b/packages/skia/src/sksg/Recorder/Core.ts
@@ -27,6 +27,7 @@ import type {
 
 // export enum CommandType {
 //   // Context
+//   Group = "Group",
 //   SavePaint = "SavePaint",
 //   RestorePaint = "RestorePaint",
 //   SaveCTM = "SaveCTM",
diff --git a/packages/skia/src/sksg/Recorder/Player.ts b/packages/skia/src/sksg/Recorder/Player.ts
index c71a0fdc2e..caea4acd8b 100644
--- a/packages/skia/src/sksg/Recorder/Player.ts
+++ b/packages/skia/src/sksg/Recorder/Player.ts
@@ -49,7 +49,7 @@ import {
 } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
-const play = (ctx: DrawingContext, command: Command) => {
+function play(ctx: DrawingContext, command: Command) {
   "worklet";
   if (isGroup(command)) {
     command.children.forEach((child) => play(ctx, child));
@@ -154,7 +154,7 @@ const play = (ctx: DrawingContext, command: Command) => {
       ctx.paints.pop();
     });
   }
-};
+}
 
 export const replay = (ctx: DrawingContext, commands: Command[]) => {
   "worklet";
diff --git a/packages/skia/src/sksg/Recorder/Recorder.ts b/packages/skia/src/sksg/Recorder/Recorder.ts
index 25a1cbe00a..9c72ba0c15 100644
--- a/packages/skia/src/sksg/Recorder/Recorder.ts
+++ b/packages/skia/src/sksg/Recorder/Recorder.ts
@@ -69,7 +69,6 @@ export class Recorder {
       const prop = props[key];
       if (isSharedValue(prop)) {
         this.animationValues.add(prop);
-        props[key] = prop.value;
         animatedProps[key] = prop;
         hasAnimatedProps = true;
       }
diff --git a/yarn.lock b/yarn.lock
index dcee1bdff4..e22507ae0a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17535,7 +17535,7 @@ __metadata:
     react-native-reanimated: ^3.16.5
     react-native-safe-area-context: ^4.10.9
     react-native-screens: ^4.3.0
-    react-native-svg: ^15.9.0
+    react-native-svg: ^15.10.1
     react-native-wgpu: 0.1.19
     react-test-renderer: 18.3.1
     typescript: ^5.2.2
@@ -19176,9 +19176,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-svg@npm:^15.6.0":
-  version: 15.6.0
-  resolution: "react-native-svg@npm:15.6.0"
+"react-native-svg@npm:^15.10.1":
+  version: 15.10.1
+  resolution: "react-native-svg@npm:15.10.1"
   dependencies:
     css-select: ^5.1.0
     css-tree: ^1.1.3
@@ -19186,13 +19186,13 @@ __metadata:
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 31c70317b7ca4c74d2b1db28af7ae127920c004c606ed4bd37f1e191a9433f6ce9929eabd105ed8768a1327ad26675ef0eaa06a97ca736ced8bfc6410b0d7480
+  checksum: c210426b424e99730ba35d6bbf18335a99f04f2f234cb5bb578ac685c31cfca5e39d48ebf05f9189edd61c028405f4ff242b5edc98ee3e3f41c8bfa960f5bff4
   languageName: node
   linkType: hard
 
-"react-native-svg@npm:^15.9.0":
-  version: 15.9.0
-  resolution: "react-native-svg@npm:15.9.0"
+"react-native-svg@npm:^15.6.0":
+  version: 15.6.0
+  resolution: "react-native-svg@npm:15.6.0"
   dependencies:
     css-select: ^5.1.0
     css-tree: ^1.1.3
@@ -19200,7 +19200,7 @@ __metadata:
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: a9fa366699d824d1cf43543d37e5d2d36551002b1878dae27618c2bbd7dbaccaad42586c382a32a56ba20df20b564777581a6139da48ed766eaed95c8267b9df
+  checksum: 31c70317b7ca4c74d2b1db28af7ae127920c004c606ed4bd37f1e191a9433f6ce9929eabd105ed8768a1327ad26675ef0eaa06a97ca736ced8bfc6410b0d7480
   languageName: node
   linkType: hard