@shopify/react-native-skia 2.1.1 → 2.2.1

package/src/renderer/Canvas.tsx

@@ -1,57 +1,59 @@
 import type { FC } from "react";
 import React, {
-  useCallback,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
   useMemo,
   useRef,
+  useState,
 } from "react";
-import type { LayoutChangeEvent, ViewProps } from "react-native";
-import type { SharedValue } from "react-native-reanimated";
+import type {
+  MeasureInWindowOnSuccessCallback,
+  MeasureOnSuccessCallback,
+  View,
+  ViewProps,
+} from "react-native";
+import { type SharedValue } from "react-native-reanimated";
 
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
-import type { SkiaBaseViewProps } from "../views";
 
 export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
   makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
   redraw(): void;
   getNativeId(): number;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
 }
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
-//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 const useCanvasSize = () => {
+  const ref = useCanvasRef();
+  const [size, setSize] = useState<SkSize>({ width: 0, height: 0 });
+  useLayoutEffect(() => {
+    if (ref.current) {
+      ref.current.measure((_x, _y, width, height) => {
+        setSize({ width, height });
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return { ref, size };
 };
 
-export interface CanvasProps extends ViewProps {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const isFabric = Boolean((global as any)?.nativeFabricUIManager);
+
+export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   debug?: boolean;
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
+  colorSpace?: "p3" | "srgb";
   ref?: React.Ref<CanvasRef>;
 }
 
@@ -60,23 +62,36 @@ export const Canvas = ({
   opaque,
   children,
   onSize,
-  onLayout: _onLayout,
+  colorSpace = "p3",
   ref,
+  // Here know this is a type error but this is done on purpose to check it at runtime
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  onLayout,
   ...viewProps
 }: CanvasProps) => {
-  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  if (onLayout && isFabric) {
+    console.error(
+      // eslint-disable-next-line max-len
+      "<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);
   // Native ID
   const nativeId = useMemo(() => {
     return SkiaViewNativeId.current++;
   }, []);
 
   // Root
-  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+  const root = useMemo(
+    () => new SkiaSGRoot(Skia, nativeId, onSize),
+    [nativeId, onSize]
+  );
 
   // Render effects
   useLayoutEffect(() => {
     root.render(children);
-  }, [children, root]);
+  }, [children, root, nativeId]);
 
   useEffect(() => {
     return () => {
@@ -101,15 +116,23 @@ export const Canvas = ({
         getNativeId: () => {
           return nativeId;
         },
+        measure: (callback) => {
+          viewRef.current?.measure(callback);
+        },
+        measureInWindow: (callback) => {
+          viewRef.current?.measureInWindow(callback);
+        },
       } as CanvasRef)
   );
+
   return (
     <SkiaPictureViewNativeComponent
+      ref={viewRef}
       collapsable={false}
       nativeID={`${nativeId}`}
       debug={debug}
       opaque={opaque}
-      onLayout={onLayout}
+      colorSpace={colorSpace}
       {...viewProps}
     />
   );