Enable new reconciler by default on iOS and Android

apps/paper/ios/Podfile.lock

@@ -1694,6 +1694,8 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNSVG (15.10.1):
+    - React-Core
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1768,6 +1770,7 @@ DEPENDENCIES:
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
   - RNScreens (from `../../../node_modules/react-native-screens`)
+  - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../../../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1912,6 +1915,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../../../node_modules/react-native-screens"
+  RNSVG:
+    :path: "../node_modules/react-native-svg"
   Yoga:
     :path: "../../../node_modules/react-native/ReactCommon/yoga"
 
@@ -1984,6 +1989,7 @@ SPEC CHECKSUMS:
   RNGestureHandler: 939f21fabf5d45a725c0bf175eb819dd25cf2e70
   RNReanimated: 9d20a811e6987cba268ef4f56242dfabd40e85c1
   RNScreens: b03d696c70cc5235ce4587fcc27ae1a93a48f98c
+  RNSVG: 7ff26379b2d1871b8571e6f9bc9630de6baf9bdf
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae
 

apps/paper/ios/paper/main.m

@@ -1,4 +1,4 @@
-#import <UIKit/UIKit.h>
+  #import <UIKit/UIKit.h>
 
 #import "AppDelegate.h"
 

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"
   },

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";

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,81 +38,91 @@ 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 () => {
         root.unmount();
       };
     }, [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;
-};
+);