@shopify/react-native-skia 2.6.8 → 2.7.0

package/src/Platform/Platform.web.tsx

@@ -1,104 +1,16 @@
-import type { RefObject, CSSProperties } from "react";
-import React, { useLayoutEffect, useMemo, useRef } from "react";
-import type { LayoutChangeEvent, ViewComponent, ViewProps } from "react-native";
+import type { CSSProperties } from "react";
+import React, { useMemo } from "react";
+import type { ViewComponent, ViewProps } from "react-native";
 
 import type { DataModule } from "../skia/types";
 import { isRNModule } from "../skia/types";
 
 import type { IPlatform } from "./IPlatform";
 
-// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js
-const DOM_LAYOUT_HANDLER_NAME = "__reactLayoutHandler";
-type OnLayout = ((event: LayoutChangeEvent) => void) | undefined;
-type Div = HTMLDivElement & {
-  __reactLayoutHandler: OnLayout;
-};
-
-let resizeObserver: ResizeObserver | null = null;
-
-const getObserver = () => {
-  if (resizeObserver == null) {
-    resizeObserver = new window.ResizeObserver(function (entries) {
-      entries.forEach((entry) => {
-        const node = entry.target as Div;
-        const { left, top, width, height } = entry.contentRect;
-        const onLayout = node[DOM_LAYOUT_HANDLER_NAME];
-        if (typeof onLayout === "function") {
-          // setTimeout 0 is taken from react-native-web (UIManager)
-          setTimeout(
-            () =>
-              onLayout({
-                timeStamp: Date.now(),
-                nativeEvent: { layout: { x: left, y: top, width, height } },
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                currentTarget: 0,
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-expect-error
-                target: 0,
-                bubbles: false,
-                cancelable: false,
-                defaultPrevented: false,
-                eventPhase: 0,
-                isDefaultPrevented() {
-                  throw new Error("Method not supported on web.");
-                },
-                isPropagationStopped() {
-                  throw new Error("Method not supported on web.");
-                },
-                persist() {
-                  throw new Error("Method not supported on web.");
-                },
-                preventDefault() {
-                  throw new Error("Method not supported on web.");
-                },
-                stopPropagation() {
-                  throw new Error("Method not supported on web.");
-                },
-                isTrusted: true,
-                type: "",
-              }),
-            0
-          );
-        }
-      });
-    });
-  }
-  return resizeObserver;
-};
-
-const useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {
-  const observer = getObserver();
-
-  useLayoutEffect(() => {
-    const node = ref.current;
-    if (node !== null) {
-      node[DOM_LAYOUT_HANDLER_NAME] = onLayout;
-    }
-  }, [ref, onLayout]);
-
-  useLayoutEffect(() => {
-    const node = ref.current;
-    if (node != null && observer != null) {
-      if (typeof node[DOM_LAYOUT_HANDLER_NAME] === "function") {
-        observer.observe(node);
-      } else {
-        observer.unobserve(node);
-      }
-    }
-    return () => {
-      if (node != null && observer != null) {
-        observer.unobserve(node);
-      }
-    };
-  }, [observer, ref]);
-};
-
-const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
+// Layout is observed by the views themselves (see SkiaPictureView.web.tsx):
+// this shim only reproduces react-native-web's default View styling.
+const View = (({ children, style: rawStyle }: ViewProps) => {
   const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
-  const ref = useRef<Div>(null);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  useElementLayout(ref as any, onLayout);
   const cssStyles = useMemo(() => {
     return {
       alignItems: "stretch" as const,
@@ -121,11 +33,7 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
     };
   }, [style]);
 
-  return (
-    <div ref={ref} style={cssStyles}>
-      {children}
-    </div>
-  );
+  return <div style={cssStyles}>{children}</div>;
 }) as unknown as typeof ViewComponent;
 
 export const Platform: IPlatform = {

package/src/mock/index.ts

@@ -24,6 +24,7 @@ export const Mock = (CanvasKit: CanvasKit) => {
     ...require("../dom/nodes"),
     Canvas: require("react-native").View,
     WebGPUCanvas: require("react-native").View,
+    getPreferredHighBitDepthCanvasFormat: () => "rgba16float",
     SkiaPictureView: require("react-native").View,
     JsiSkImage: JsiSkImage,
     drawAsPicture: Noop,

package/src/renderer/Canvas.tsx

@@ -69,6 +69,15 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
+  /**
+   * Renders into a surface with more than 8 bits per channel (16-bit float on
+   * iOS, 10-bit on Android) to avoid banding in subtle gradients. Colors are
+   * identical to the default 8-bit surface, only with more precision (this is
+   * about bit depth, not HDR). On Android the extra precision survives
+   * composition only when combined with `opaque`, and the prop must be set
+   * before the canvas is mounted.
+   */
+  highBitDepth?: boolean;
   ref?: React.Ref<CanvasRef>;
   androidWarmup?: boolean;
   __destroyWebGLContextAfterRender?: boolean;
@@ -80,6 +89,7 @@ export const Canvas = ({
   children,
   onSize,
   colorSpace = "p3",
+  highBitDepth = false,
   androidWarmup = false,
   ref,
   onLayout,
@@ -180,6 +190,7 @@ export const Canvas = ({
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
+      highBitDepth={highBitDepth}
       androidWarmup={androidWarmup}
       onLayout={
         Platform.OS === "web" && (onSize || onLayout) ? onLayoutWeb : onLayout

package/src/skia/types/Surface/Surface.ts

@@ -39,8 +39,12 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
 
   /**
    * Make sure any queued draws are sent to the screen or the GPU.
+   * @param sync - When true, block until the GPU has finished executing the
+   * submitted work. Use this before reading the surface's texture from a native
+   * consumer on a different command queue (see {@link getNativeTextureUnstable}).
+   * Defaults to false.
    */
-  flush(): void;
+  flush(sync?: boolean): void;
 
   /**
    * Returns the possibly scaled width of the surface.

package/src/skia/web/JsiSkParagraphStyle.ts

@@ -1,8 +1,10 @@
-import type { CanvasKit, ParagraphStyle } from "canvaskit-wasm";
+import type { CanvasKit, ParagraphStyle, TextStyle } from "canvaskit-wasm";
 
 import { TextDirection } from "../types";
 import type { SkParagraphStyle } from "../types";
 
+import { JsiSkTextStyle } from "./JsiSkTextStyle";
+
 export class JsiSkParagraphStyle {
   static toParagraphStyle(
     ck: CanvasKit,
@@ -10,7 +12,19 @@ export class JsiSkParagraphStyle {
   ): ParagraphStyle {
     // Seems like we need to provide the textStyle.color value, otherwise
     // the constructor crashes.
-    const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } });
+    const textStyle: TextStyle = { color: ck.BLACK };
+    if (value.textStyle) {
+      // Only merge the properties that are set; toTextStyle() emits undefined
+      // for the others and the ParagraphStyle constructor requires a color.
+      Object.entries(JsiSkTextStyle.toTextStyle(value.textStyle)).forEach(
+        ([key, v]) => {
+          if (v !== undefined) {
+            (textStyle as Record<string, unknown>)[key] = v;
+          }
+        }
+      );
+    }
+    const ps = new ck.ParagraphStyle({ textStyle });
 
     ps.disableHinting = value.disableHinting ?? ps.disableHinting;
     ps.ellipsis = value.ellipsis ?? ps.ellipsis;

package/src/skia/web/JsiSkSurface.ts

@@ -19,7 +19,8 @@ export class JsiSkSurface
     this.ref.dispose();
   }
 
-  flush() {
+  flush(_sync?: boolean) {
+    // CanvasKit has no separate CPU sync; flush() is sufficient on the web backend.
     this.ref.flush();
   }
 

package/src/sksg/Container.native.ts

@@ -39,9 +39,21 @@ class NativeReanimatedContainer extends Container {
     this.picture = Skia.Picture.MakePicture(null)!;
   }
 
+  unmount() {
+    super.unmount();
+    if (this.mapperId !== null) {
+      // The mapper closure retains the recorder and its resources (e.g.
+      // images) on the UI runtime and keeps updating the picture of an
+      // unmounted view — stop it or it leaks for the lifetime of the app.
+      Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
+    }
+  }
+
   redraw() {
     if (this.mapperId !== null) {
       Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
     }
     if (this.unmounted) {
       return;

package/src/sksg/Container.web.ts

@@ -40,9 +40,21 @@ class ReanimatedContainer extends Container {
     super(Skia);
   }
 
+  unmount() {
+    super.unmount();
+    if (this.mapperId !== null) {
+      // The mapper closure retains the recording and keeps updating the
+      // picture of an unmounted view — stop it or it leaks for the
+      // lifetime of the app.
+      Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
+    }
+  }
+
   redraw() {
     if (this.mapperId !== null) {
       Rea.stopMapper(this.mapperId);
+      this.mapperId = null;
     }
     if (this.unmounted) {
       return;

package/src/specs/NativeSkiaModule.web.ts

@@ -6,29 +6,45 @@ import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 export type ISkiaViewApiWeb = ISkiaViewApi & {
   views: Record<string, SkiaPictureViewHandle>;
   deferedPictures: Record<string, SkPicture>;
+  unregisteredViews: Set<string>;
   registerView(nativeId: string, view: SkiaPictureViewHandle): void;
+  unregisterView(nativeId: string): void;
 };
 
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
+  unregisteredViews: new Set<string>(),
   deferedOnSize: {},
   web: true,
   registerView(nativeId: string, view: SkiaPictureViewHandle) {
+    this.unregisteredViews.delete(nativeId);
     // Maybe a picture for this view was already set
     if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);
+      delete this.deferedPictures[nativeId];
     }
     this.views[nativeId] = view;
   },
+  unregisterView(nativeId: string) {
+    // Views must be removed on unmount: the handle's closures capture the
+    // canvas element, so a stale entry retains the whole detached DOM tree.
+    this.unregisteredViews.add(nativeId);
+    delete this.views[nativeId];
+    delete this.deferedPictures[nativeId];
+  },
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   setJsiProperty(nativeId: number, name: string, value: any) {
     if (name === "picture") {
-      if (!this.views[`${nativeId}`]) {
-        this.deferedPictures[`${nativeId}`] = value;
-      } else {
-        this.views[`${nativeId}`].setPicture(value);
+      const id = `${nativeId}`;
+      if (this.views[id]) {
+        this.views[id].setPicture(value);
+      } else if (!this.unregisteredViews.has(id)) {
+        this.deferedPictures[id] = value;
       }
+      // Otherwise the view has unmounted (e.g. a trailing animation frame):
+      // drop the picture instead of deferring it for an id that will never
+      // register again, which would retain it forever.
     }
   },
   size(nativeId: number) {
@@ -39,14 +55,30 @@ global.SkiaViewApi = {
     }
   },
   requestRedraw(nativeId: number) {
-    this.views[`${nativeId}`].redraw();
+    // The view may already have unmounted (e.g. a trailing animation frame).
+    this.views[`${nativeId}`]?.redraw();
   },
   makeImageSnapshot(nativeId: number, rect?: SkRect) {
-    return this.views[`${nativeId}`].makeImageSnapshot(rect);
+    const view = this.views[`${nativeId}`];
+    if (!view) {
+      throw new Error(
+        `Cannot make image snapshot: view with nativeID ${nativeId} is not registered (it may have unmounted)`
+      );
+    }
+    return view.makeImageSnapshot(rect);
   },
   makeImageSnapshotAsync(nativeId: number, rect?: SkRect) {
     return new Promise((resolve, reject) => {
-      const result = this.views[`${nativeId}`].makeImageSnapshot(rect);
+      const view = this.views[`${nativeId}`];
+      if (!view) {
+        reject(
+          new Error(
+            `Cannot make image snapshot: view with nativeID ${nativeId} is not registered (it may have unmounted)`
+          )
+        );
+        return;
+      }
+      const result = view.makeImageSnapshot(rect);
       if (result) {
         resolve(result);
       } else {

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -7,6 +7,7 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   colorSpace?: string;
+  highBitDepth?: boolean;
   androidWarmup?: boolean;
   pointerEvents?: WithDefault<
     "auto" | "none" | "box-none" | "box-only",

package/src/views/SkiaPictureView.tsx

@@ -87,6 +87,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
       mode,
       debug = false,
       opaque = false,
+      highBitDepth = false,
       androidWarmup = false,
       ...viewProps
     } = this.props;
@@ -96,6 +97,7 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
         nativeID={`${this._nativeId}`}
         debug={debug}
         opaque={opaque}
+        highBitDepth={highBitDepth}
         androidWarmup={androidWarmup}
         {...viewProps}
       />