@shopify/react-native-skia 2.2.9 → 2.2.11

package/lib/typescript/src/sksg/StaticContainer.d.ts

@@ -1,5 +1,4 @@
-import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Skia, SkCanvas } from "../skia/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
 import "../views/api";
@@ -18,7 +17,6 @@ export declare abstract class Container {
 }
 export declare class StaticContainer extends Container {
     private nativeId;
-    private onSize?;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    constructor(Skia: Skia, nativeId: number);
     redraw(): void;
 }

package/lib/typescript/src/specs/NativeSkiaModule.web.d.ts

@@ -1,10 +1,10 @@
 import type { SkPicture } from "../skia/types";
 import type { ISkiaViewApi } from "../views/types";
-import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 export type ISkiaViewApiWeb = ISkiaViewApi & {
-    views: Record<string, SkiaPictureView>;
+    views: Record<string, SkiaPictureViewHandle>;
     deferedPictures: Record<string, SkPicture>;
-    registerView(nativeId: string, view: SkiaPictureView): void;
+    registerView(nativeId: string, view: SkiaPictureViewHandle): void;
 };
 declare const _default: {};
 export default _default;

package/lib/typescript/src/specs/SkiaPictureViewNativeComponent.web.d.ts

@@ -1,9 +1,8 @@
 import type { ViewProps } from "react-native";
-import { SkiaPictureView } from "../views/SkiaPictureView.web";
 export interface NativeProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     nativeID: string;
 }
-declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").CElement<import("..").SkiaPictureViewNativeProps, SkiaPictureView>;
+declare const SkiaPictureViewNativeComponent: ({ nativeID, debug, opaque, onLayout, ...viewProps }: NativeProps) => import("react").FunctionComponentElement<import("..").SkiaPictureViewNativeProps & import("react").RefAttributes<import("../views/SkiaPictureView.web").SkiaPictureViewHandle>>;
 export default SkiaPictureViewNativeComponent;

package/lib/typescript/src/views/SkiaPictureView.web.d.ts

@@ -1,9 +1,13 @@
-import type { SkCanvas, SkPicture } from "../skia/types";
+import React from "react";
+import type { SkRect, SkPicture, SkImage } from "../skia/types";
 import type { SkiaPictureViewNativeProps } from "./types";
-import { SkiaBaseWebView } from "./SkiaBaseWebView";
-export declare class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {
-    private picture;
-    constructor(props: SkiaPictureViewNativeProps);
+export interface SkiaPictureViewHandle {
     setPicture(picture: SkPicture): void;
-    protected renderInCanvas(canvas: SkCanvas): void;
+    getSize(): {
+        width: number;
+        height: number;
+    };
+    redraw(): void;
+    makeImageSnapshot(rect?: SkRect): SkImage | null;
 }
+export declare const SkiaPictureView: React.ForwardRefExoticComponent<SkiaPictureViewNativeProps & React.RefAttributes<SkiaPictureViewHandle>>;

package/lib/typescript/src/views/types.d.ts

@@ -26,6 +26,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      */
     onSize?: SharedValue<SkSize>;
     opaque?: boolean;
+    __destroyWebGLContextAfterRender?: boolean;
 }
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {
     picture?: SkPicture;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.9",
+  "version": "2.2.11",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/renderer/Canvas.tsx

@@ -1,5 +1,6 @@
 import type { FC, RefObject } from "react";
 import React, {
+  useCallback,
   useEffect,
   useImperativeHandle,
   useLayoutEffect,
@@ -8,6 +9,7 @@ import React, {
   useState,
 } from "react";
 import type {
+  LayoutChangeEvent,
   MeasureInWindowOnSuccessCallback,
   MeasureOnSuccessCallback,
   View,
@@ -20,6 +22,7 @@ import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeCompon
 import type { SkImage, SkRect, SkSize } from "../skia/types";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
+import { Platform } from "../Platform";
 
 export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
@@ -56,6 +59,7 @@ export interface CanvasProps extends Omit<ViewProps, "onLayout"> {
   onSize?: SharedValue<SkSize>;
   colorSpace?: "p3" | "srgb";
   ref?: React.Ref<CanvasRef>;
+  __destroyWebGLContextAfterRender?: boolean;
 }
 
 export const Canvas = ({
@@ -126,6 +130,19 @@ export const Canvas = ({
       } as CanvasRef)
   );
 
+  const onLayoutWeb = useCallback(
+    (e: LayoutChangeEvent) => {
+      if (onLayout) {
+        onLayout(e);
+      }
+      if (Platform.OS === "web" && onSize) {
+        const { width, height } = e.nativeEvent.layout;
+        onSize.value = { width, height };
+      }
+    },
+    [onLayout, onSize]
+  );
+
   return (
     <SkiaPictureViewNativeComponent
       ref={viewRef}
@@ -134,6 +151,7 @@ export const Canvas = ({
       debug={debug}
       opaque={opaque}
       colorSpace={colorSpace}
+      onLayout={onLayoutWeb}
       {...viewProps}
     />
   );

package/src/renderer/__tests__/e2e/ParagraphMethods.spec.tsx

@@ -11,109 +11,109 @@ const RobotoRegular = Array.from(
 
 describe("Paragraph Methods", () => {
   describe("getRectsForPlaceholders", () => {
-  it("should handle multiple placeholders with different alignments", async () => {
-    const placeholderRects = await surface.eval(
-      (Skia, ctx) => {
-        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
-          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
-        )!;
-        const provider = Skia.TypefaceFontProvider.Make();
-        provider.registerFont(robotoRegular, "Roboto");
-
-        const builder = Skia.ParagraphBuilder.Make(
-          {
-            textStyle: {
-              color: Skia.Color("black"),
-              fontFamilies: ["Roboto"],
-              fontSize: 16,
+    it("should handle multiple placeholders with different alignments", async () => {
+      const placeholderRects = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
             },
-          },
-          provider
-        );
-
-        builder.addText("Start ");
-        builder.addPlaceholder(
-          20,
-          20,
-          ctx.PlaceholderAlignment.Baseline,
-          ctx.TextBaseline.Alphabetic
-        );
-        builder.addText(" middle ");
-        builder.addPlaceholder(
-          15,
-          15,
-          ctx.PlaceholderAlignment.Top,
-          ctx.TextBaseline.Alphabetic
-        );
-        builder.addText(" end");
-
-        const paragraph = builder.build();
-        paragraph.layout(200);
-
-        const rects = paragraph.getRectsForPlaceholders();
-        return rects.map((r) => ({
-          x: r.rect.x,
-          y: r.rect.y,
-          width: r.rect.width,
-          height: r.rect.height,
-          direction: r.direction,
-        }));
-      },
-      {
-        RobotoRegular,
-        PlaceholderAlignment,
-        TextBaseline,
-      }
-    );
-
-    expect(placeholderRects).toHaveLength(2);
-    expect(placeholderRects[0].width).toBe(20);
-    expect(placeholderRects[0].height).toBe(20);
-    expect(placeholderRects[1].width).toBeCloseTo(15);
-    expect(placeholderRects[1].height).toBeCloseTo(15);
-  });
+            provider
+          );
 
-  it("should return correct direction for placeholders", async () => {
-    const placeholderInfo = await surface.eval(
-      (Skia, ctx) => {
-        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
-          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
-        )!;
-        const provider = Skia.TypefaceFontProvider.Make();
-        provider.registerFont(robotoRegular, "Roboto");
-
-        const builder = Skia.ParagraphBuilder.Make(
-          {
-            textStyle: {
-              color: Skia.Color("black"),
-              fontFamilies: ["Roboto"],
-              fontSize: 16,
+          builder.addText("Start ");
+          builder.addPlaceholder(
+            20,
+            20,
+            ctx.PlaceholderAlignment.Baseline,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" middle ");
+          builder.addPlaceholder(
+            15,
+            15,
+            ctx.PlaceholderAlignment.Top,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" end");
+
+          const paragraph = builder.build();
+          paragraph.layout(200);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            x: r.rect.x,
+            y: r.rect.y,
+            width: r.rect.width,
+            height: r.rect.height,
+            direction: r.direction,
+          }));
+        },
+        {
+          RobotoRegular,
+          PlaceholderAlignment,
+          TextBaseline,
+        }
+      );
+
+      expect(placeholderRects).toHaveLength(2);
+      expect(placeholderRects[0].width).toBe(20);
+      expect(placeholderRects[0].height).toBe(20);
+      expect(placeholderRects[1].width).toBeCloseTo(15);
+      expect(placeholderRects[1].height).toBeCloseTo(15);
+    });
+
+    it("should return correct direction for placeholders", async () => {
+      const placeholderInfo = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
             },
-          },
-          provider
-        );
-
-        builder.addText("Text with ");
-        builder.addPlaceholder(30, 30);
-        builder.addText(" placeholder");
-
-        const paragraph = builder.build();
-        paragraph.layout(300);
-
-        const rects = paragraph.getRectsForPlaceholders();
-        return rects.map((r) => ({
-          direction: r.direction === ctx.TextDirection.LTR ? "LTR" : "RTL",
-        }));
-      },
-      {
-        RobotoRegular,
-        TextDirection,
-      }
-    );
-
-    expect(placeholderInfo).toHaveLength(1);
-    expect(placeholderInfo[0].direction).toBe("LTR");
-  });
+            provider
+          );
+
+          builder.addText("Text with ");
+          builder.addPlaceholder(30, 30);
+          builder.addText(" placeholder");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            direction: r.direction === ctx.TextDirection.LTR ? "LTR" : "RTL",
+          }));
+        },
+        {
+          RobotoRegular,
+          TextDirection,
+        }
+      );
+
+      expect(placeholderInfo).toHaveLength(1);
+      expect(placeholderInfo[0].direction).toBe("LTR");
+    });
 
     it("should return empty array when no placeholders", async () => {
       const placeholderCount = await surface.eval(
@@ -194,7 +194,7 @@ describe("Paragraph Methods", () => {
       expect(lineMetrics[0].ascent).toBeGreaterThan(0);
       expect(lineMetrics[0].descent).toBeGreaterThan(0);
       // Note: Even single lines without explicit breaks may report isHardBreak as true
-      expect(typeof lineMetrics[0].isHardBreak).toBe('boolean');
+      expect(typeof lineMetrics[0].isHardBreak).toBe("boolean");
     });
 
     it("should return line metrics for multi-line text with wrapping", async () => {
@@ -232,12 +232,12 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics.length).toBeGreaterThan(1);
-      
+
       // Check first line
       expect(lineMetrics[0].lineNumber).toBe(0);
       expect(lineMetrics[0].startIndex).toBe(0);
       expect(lineMetrics[0].width).toBeLessThanOrEqual(100);
-      
+
       // Check second line
       expect(lineMetrics[1].lineNumber).toBe(1);
       expect(lineMetrics[1].startIndex).toBeGreaterThan(0);
@@ -277,12 +277,12 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(3);
-      
+
       // All lines report isHardBreak as true in this implementation
       expect(lineMetrics[0].isHardBreak).toBe(true);
       expect(lineMetrics[1].isHardBreak).toBe(true);
       expect(lineMetrics[2].isHardBreak).toBe(true);
-      
+
       // Check line numbers
       expect(lineMetrics[0].lineNumber).toBe(0);
       expect(lineMetrics[1].lineNumber).toBe(1);
@@ -322,19 +322,24 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(2);
-      
+
       // First line
       const firstLine = lineMetrics[0];
       // Height should be close to ascent + descent
       expect(firstLine.height).toBeGreaterThan(0);
-      expect(Math.abs(firstLine.height - (firstLine.ascent + firstLine.descent))).toBeLessThan(1);
+      expect(
+        Math.abs(firstLine.height - (firstLine.ascent + firstLine.descent))
+      ).toBeLessThan(1);
       expect(firstLine.left).toBe(0);
       expect(firstLine.baseline).toBeGreaterThan(0);
-      
+
       // Second line should be below the first
       const secondLine = lineMetrics[1];
       expect(secondLine.baseline).toBeGreaterThan(firstLine.baseline);
-      expect(secondLine.baseline - firstLine.baseline).toBeCloseTo(firstLine.height, 1);
+      expect(secondLine.baseline - firstLine.baseline).toBeCloseTo(
+        firstLine.height,
+        1
+      );
     });
 
     it("should handle empty lines correctly", async () => {
@@ -370,7 +375,7 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(3);
-      
+
       // Middle line should be empty but still have metrics
       const emptyLine = lineMetrics[1];
       // Empty line might have startIndex != endIndex depending on implementation

package/src/sksg/Container.native.ts

@@ -18,17 +18,10 @@ const nativeDrawOnscreen = (
   onSize?: SharedValue<SkSize>
 ) => {
   "worklet";
-
-  //const start = performance.now();
   if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (
-      size.width !== onSize.value.width ||
-      size.height !== onSize.value.height
-    ) {
-      onSize.value = size;
-    }
+    SkiaViewApi.setJsiProperty(nativeId, "onSize", onSize);
   }
+  //const start = performance.now();
   const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);

package/src/sksg/Container.ts

@@ -7,7 +7,7 @@ import { StaticContainer } from "./StaticContainer";
 export const createContainer = (
   Skia: Skia,
   nativeId: number,
-  onSize?: SharedValue<SkSize>
+  _onSize?: SharedValue<SkSize>
 ) => {
-  return new StaticContainer(Skia, nativeId, onSize);
+  return new StaticContainer(Skia, nativeId);
 };

package/src/sksg/Container.web.ts

@@ -14,22 +14,8 @@ import { Container, StaticContainer } from "./StaticContainer";
 import "../skia/NativeSetup";
 import "../views/api";
 
-const drawOnscreen = (
-  Skia: Skia,
-  nativeId: number,
-  recording: Recording,
-  onSize?: SharedValue<SkSize>
-) => {
+const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (
-      size.width !== onSize.value.width ||
-      size.height !== onSize.value.height
-    ) {
-      onSize.value = size;
-    }
-  }
   const rec = Skia.PictureRecorder();
   const canvas = rec.beginRecording();
   //const start = performance.now();
@@ -45,11 +31,7 @@ const drawOnscreen = (
 class ReanimatedContainer extends Container {
   private mapperId: number | null = null;
 
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
+  constructor(Skia: Skia, private nativeId: number) {
     super(Skia);
   }
 
@@ -75,20 +57,20 @@ class ReanimatedContainer extends Container {
         drawOnscreen(Skia, nativeId, recording!);
       }, Array.from(animationValues));
     }
-    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
+    Rea.runOnUI(() => {
       "worklet";
-      drawOnscreen(Skia, nativeId, recording!, onSize);
-    })(this.onSize);
+      drawOnscreen(Skia, nativeId, recording!);
+    })();
   }
 }
 
 export const createContainer = (
   Skia: Skia,
   nativeId: number,
-  onSize?: SharedValue<SkSize>
+  _onSize?: SharedValue<SkSize>
 ) => {
   if (HAS_REANIMATED_3 && nativeId !== -1) {
-    return new ReanimatedContainer(Skia, nativeId, onSize);
+    return new ReanimatedContainer(Skia, nativeId);
   } else {
     return new StaticContainer(Skia, nativeId);
   }

package/src/sksg/StaticContainer.ts

@@ -1,6 +1,4 @@
-import type { SharedValue } from "react-native-reanimated";
-
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Skia, SkCanvas } from "../skia/types";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -50,11 +48,7 @@ export abstract class Container {
 }
 
 export class StaticContainer extends Container {
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
+  constructor(Skia: Skia, private nativeId: number) {
     super(Skia);
   }
 
@@ -64,15 +58,6 @@ export class StaticContainer extends Container {
     this.recording = recorder.getRecording();
     const isOnScreen = this.nativeId !== -1;
     if (isOnScreen) {
-      if (this.onSize) {
-        const size = SkiaViewApi.size(this.nativeId);
-        if (
-          size.width !== this.onSize.value.width ||
-          size.height !== this.onSize.value.height
-        ) {
-          this.onSize.value = size;
-        }
-      }
       const rec = this.Skia.PictureRecorder();
       const canvas = rec.beginRecording();
       this.drawOnCanvas(canvas);

package/src/specs/NativeSkiaModule.web.ts

@@ -1,19 +1,20 @@
 /* eslint-disable import/no-anonymous-default-export */
 import type { SkPicture, SkRect } from "../skia/types";
 import type { ISkiaViewApi } from "../views/types";
-import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 
 export type ISkiaViewApiWeb = ISkiaViewApi & {
-  views: Record<string, SkiaPictureView>;
+  views: Record<string, SkiaPictureViewHandle>;
   deferedPictures: Record<string, SkPicture>;
-  registerView(nativeId: string, view: SkiaPictureView): void;
+  registerView(nativeId: string, view: SkiaPictureViewHandle): void;
 };
 
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
+  deferedOnSize: {},
   web: true,
-  registerView(nativeId: string, view: SkiaPictureView) {
+  registerView(nativeId: string, view: SkiaPictureViewHandle) {
     // Maybe a picture for this view was already set
     if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);