@shopify/react-native-skia 1.11.8 → 1.11.9-next.1

package/libs/apple/libsvg.xcframework/Info.plist

@@ -8,22 +8,25 @@
 			<key>BinaryPath</key>
 			<string>libsvg.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>tvos-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
-			<string>ios</string>
+			<string>tvos</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libsvg.a</string>
 			<key>LibraryIdentifier</key>
-			<string>tvos-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
@@ -33,7 +36,7 @@
 				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
-			<string>tvos</string>
+			<string>ios</string>
 			<key>SupportedPlatformVariant</key>
 			<string>simulator</string>
 		</dict>
@@ -56,7 +59,7 @@
 			<key>BinaryPath</key>
 			<string>libsvg.a</string>
 			<key>LibraryIdentifier</key>
-			<string>tvos-arm64_arm64e</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
@@ -65,25 +68,22 @@
 				<string>arm64e</string>
 			</array>
 			<key>SupportedPlatform</key>
-			<string>tvos</string>
+			<string>ios</string>
 		</dict>
 		<dict>
 			<key>BinaryPath</key>
 			<string>libsvg.a</string>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>tvos-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
-			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
+			<string>tvos</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.8",
+  "version": "1.11.9-next.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -76,9 +76,9 @@
   "licenseFilename": "LICENSE.md",
   "readmeFilename": "README.md",
   "peerDependencies": {
-    "react": ">=18.0",
-    "react-native": ">=0.64",
-    "react-native-reanimated": ">=2.0.0"
+    "react": ">=19.0",
+    "react-native": ">=0.78",
+    "react-native-reanimated": ">=3.0.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -108,10 +108,10 @@
     "pixelmatch": "5.3.0",
     "pngjs": "6.0.0",
     "prettier": "2.8.7",
-    "react": "18.3.1",
-    "react-native": "0.75.2",
+    "react": "19.0.0",
+    "react-native": "0.78.0",
     "react-native-builder-bob": "0.18.2",
-    "react-native-reanimated": "^3.16.5",
+    "react-native-reanimated": "^3.17.1",
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
@@ -122,7 +122,7 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.39.1",
-    "react-reconciler": "0.27.0"
+    "react-reconciler": "0.31.0"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -154,5 +154,6 @@
         }
       ]
     ]
-  }
+  },
+  "stableVersion": "0.0.0"
 }

package/src/external/reanimated/textures.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useState } from "react";
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 
@@ -27,13 +27,14 @@ const createTexture = (
 
 export const useTexture = (element: ReactElement, size: SkSize) => {
   const { width, height } = size;
-  const picture = useMemo(() => {
-    return drawAsPicture(element, {
+  const [picture, setPicture] = useState<SkPicture | null>(null);
+  useEffect(() => {
+    drawAsPicture(element, {
       x: 0,
       y: 0,
       width,
       height,
-    });
+    }).then((pic) => setPicture(pic));
   }, [element, width, height]);
   return usePictureAsTexture(picture, size);
 };

package/src/headless/index.ts

@@ -29,9 +29,9 @@ export const getSkiaExports = () => {
   return { Skia };
 };
 
-export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
+export const drawOffscreen = async (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaSGRoot(Skia);
-  root.render(element);
+  await root.render(element);
   const canvas = surface.getCanvas();
   root.drawOnCanvas(canvas);
   root.unmount();

package/src/renderer/Canvas.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 import React, {
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -26,7 +25,7 @@ interface CanvasRef extends FC<CanvasProps> {
 
 export const useCanvasRef = () => useRef<CanvasRef>(null);
 
-const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
+//const NativeSkiaPictureView = SkiaPictureViewNativeComponent;
 
 // TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (
@@ -52,87 +51,65 @@ export interface CanvasProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
-  mode?: "continuous" | "default";
+  ref?: React.Ref<CanvasRef>;
 }
 
-export const Canvas = forwardRef(
-  (
-    {
-      mode,
-      debug,
-      opaque,
-      children,
-      onSize,
-      onLayout: _onLayout,
-      ...viewProps
-    }: CanvasProps,
-    ref
-  ) => {
-    const rafId = useRef<number | null>(null);
-    const onLayout = useOnSizeEvent(onSize, _onLayout);
-    // Native ID
-    const nativeId = useMemo(() => {
-      return SkiaViewNativeId.current++;
-    }, []);
+export const Canvas = ({
+  debug,
+  opaque,
+  children,
+  onSize,
+  onLayout: _onLayout,
+  ref,
+  ...viewProps
+}: CanvasProps) => {
+  const onLayout = useOnSizeEvent(onSize, _onLayout);
+  // Native ID
+  const nativeId = useMemo(() => {
+    return SkiaViewNativeId.current++;
+  }, []);
 
-    // Root
-    const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
+  // Root
+  const root = useMemo(() => new SkiaSGRoot(Skia, nativeId), [nativeId]);
 
-    // Render effects
-    useEffect(() => {
-      root.render(children);
-    }, [children, root]);
+  // Render effects
+  useEffect(() => {
+    root.render(children);
+  }, [children, root]);
 
-    useEffect(() => {
-      return () => {
-        root.unmount();
-      };
-    }, [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 (
-      <NativeSkiaPictureView
-        collapsable={false}
-        nativeID={`${nativeId}`}
-        debug={debug}
-        opaque={opaque}
-        onLayout={onLayout}
-        {...viewProps}
-      />
-    );
-  }
-);
+  // 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;
+        },
+      } as CanvasRef)
+  );
+  return (
+    <SkiaPictureViewNativeComponent
+      collapsable={false}
+      nativeID={`${nativeId}`}
+      debug={debug}
+      opaque={opaque}
+      onLayout={onLayout}
+      {...viewProps}
+    />
+  );
+};

package/src/renderer/Offscreen.tsx

@@ -14,19 +14,19 @@ export const isOnMainThread = () => {
   );
 };
 
-export const drawAsPicture = (element: ReactElement, bounds?: SkRect) => {
+export const drawAsPicture = async (element: ReactElement, bounds?: SkRect) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording(bounds);
   const root = new SkiaSGRoot(Skia);
-  root.render(element);
+  await root.render(element);
   root.drawOnCanvas(canvas);
   const picture = recorder.finishRecordingAsPicture();
   root.unmount();
   return picture;
 };
 
-export const drawAsImage = (element: ReactElement, size: SkSize) => {
-  return drawAsImageFromPicture(drawAsPicture(element), size);
+export const drawAsImage = async (element: ReactElement, size: SkSize) => {
+  return drawAsImageFromPicture(await drawAsPicture(element), size);
 };
 
 export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {

package/src/renderer/__tests__/Data.spec.tsx

@@ -39,29 +39,28 @@ describe("Data Loading", () => {
     expect(SkiaRenderer).toBeDefined();
   });
   it("Should accept null as an argument", async () => {
-    const { surface, draw } = mountCanvas(<CheckData />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckData />);
+    await draw();
     processResult(surface, "snapshots/font/green.png");
-    await wait(42);
-    draw();
+    await draw();
     processResult(surface, "snapshots/font/green.png");
   });
 
   it("Should load a font file", async () => {
-    const { surface, draw } = mountCanvas(<CheckFont />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckFont />);
+    await draw();
     processResult(surface, "snapshots/font/red.png");
     await wait(1500);
-    draw();
+    await draw();
     processResult(surface, "snapshots/font/green.png");
   });
 
   it("Should load an image", async () => {
-    const { surface, draw } = mountCanvas(<CheckImage />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckImage />);
+    await draw();
     processResult(surface, "snapshots/font/red.png");
     await wait(1500);
-    draw();
+    await draw();
     processResult(surface, "snapshots/font/green.png");
   });
 });

package/src/renderer/__tests__/Drawings.spec.tsx

@@ -30,9 +30,9 @@ const CheckEmptyCanvas = () => {
 };
 
 describe("Test introductionary examples from our documentation", () => {
-  it("Should blend colors using multiplication", () => {
+  it("Should blend colors using multiplication", async () => {
     const r = width * 0.33;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group blendMode="multiply">
         <Circle cx={r} cy={r} r={r} color="cyan" />
         <Circle cx={width - r} cy={r} r={r} color="magenta" />
@@ -42,9 +42,9 @@ describe("Test introductionary examples from our documentation", () => {
     processResult(surface, "snapshots/drawings/blend-mode-multiply.png");
   });
 
-  it("Should use a blur image filter", () => {
+  it("Should use a blur image filter", async () => {
     const r = width * 0.33;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group blendMode="multiply">
         <Blur blur={30} />
         <Circle cx={r} cy={r} r={r} color="cyan" />
@@ -55,10 +55,10 @@ describe("Test introductionary examples from our documentation", () => {
     processResult(surface, "snapshots/drawings/blur-node.png");
   });
 
-  it("Should use multiple paint definitions for one drawing command", () => {
+  it("Should use multiple paint definitions for one drawing command", async () => {
     const r = width / 4;
     const strokeWidth = 50;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <>
         <Circle cx={width / 2} cy={width / 2} r={r} color="red">
           <Paint color="lightblue" />
@@ -70,7 +70,7 @@ describe("Test introductionary examples from our documentation", () => {
     processResult(surface, "snapshots/drawings/multiple-paints.png");
   });
 
-  it("Should draw DRect", () => {
+  it("Should draw DRect", async () => {
     const { rrect, rect } = importSkia();
     const padding = 25 * PIXEL_RATIO;
     const outer = rrect(rect(0, 0, width, width), padding, padding);
@@ -79,18 +79,18 @@ describe("Test introductionary examples from our documentation", () => {
       padding * 2,
       padding * 2
     );
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <DiffRect inner={inner} outer={outer} color="lightblue" />
     );
     processResult(surface, docPath("shapes/drect.png"));
   });
 
   it("should clear the canvas even if it's empty", async () => {
-    const { surface, draw } = mountCanvas(<CheckEmptyCanvas />);
-    draw();
+    const { surface, draw } = await mountCanvas(<CheckEmptyCanvas />);
+    await draw();
     processResult(surface, "snapshots/green.png");
     await wait(1000);
-    draw();
+    await draw();
     processResult(surface, "snapshots/transparent.png");
   });
 });

package/src/renderer/__tests__/FitBox.spec.tsx

@@ -9,9 +9,9 @@ import { Circle, FitBox, Rect, Image, Group, fitbox } from "../components";
 import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("FitBox", () => {
-  it("Should scale the rectangle in half", () => {
+  it("Should scale the rectangle in half", async () => {
     const { Skia } = importSkia();
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox
         src={Skia.XYWHRect(0, 0, width, height)}
         dst={Skia.XYWHRect(width / 4, height / 4, width / 2, height / 2)}
@@ -21,9 +21,9 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-rect.png");
   });
-  it("Should take the bottom right quarter of the circle and scale to the full canvas", () => {
+  it("Should take the bottom right quarter of the circle and scale to the full canvas", async () => {
     const { Skia } = importSkia();
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <FitBox
         src={Skia.XYWHRect(width / 2, height / 2, width / 2, height / 2)}
         dst={Skia.XYWHRect(0, 0, width, height)}
@@ -38,7 +38,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/lightblue-quarter-circle.png");
   });
-  it("Should scale the image (1)", () => {
+  it("Should scale the image (1)", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -47,7 +47,7 @@ describe("FitBox", () => {
         )
       )
     )!;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group
         transform={fitbox(
           "cover",
@@ -66,7 +66,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/scaled-image.png");
   });
-  it("Should scale the image (2)", () => {
+  it("Should scale the image (2)", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -76,7 +76,7 @@ describe("FitBox", () => {
       )
     )!;
     const screen = rect(256, 128, 256, 512);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group>
         <Image
           image={image}
@@ -95,7 +95,7 @@ describe("FitBox", () => {
     );
     processResult(surface, "snapshots/drawings/scaled-image2.png");
   });
-  it("Should rotate and scale the image", () => {
+  it("Should rotate and scale the image", async () => {
     const { Skia, rect } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -107,7 +107,7 @@ describe("FitBox", () => {
     const screen = rect(256, 128, 256, 512);
     const imageRect = rect(0, 0, image.width(), image.height());
     const transform = fitbox("contain", imageRect, screen, 270);
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Group>
         <Image
           image={image}

package/src/renderer/__tests__/Glyphs.spec.tsx

@@ -25,7 +25,7 @@ describe("Glyphs", () => {
     font = Skia.Font(tf!, 64);
     expect(font !== null).toBe(true);
   });
-  it("Should draw glyphs in lightblue", () => {
+  it("Should draw glyphs in lightblue", async () => {
     const { Skia } = importSkia();
     const ids = font.getGlyphIDs("ab");
     const glyphs = [
@@ -38,7 +38,7 @@ describe("Glyphs", () => {
         ),
       },
     ];
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Glyphs x={0} y={0} font={font} glyphs={glyphs} color="lightblue" />
     );
     processResult(surface, "snapshots/glyphs/simple.png");

package/src/renderer/__tests__/Image.spec.tsx

@@ -9,7 +9,7 @@ import { Fill, ImageShader, Shader } from "../components";
 import { drawOnNode, width, height, importSkia } from "./setup";
 
 describe("Test Image Component", () => {
-  it("Should display the image with a filter", () => {
+  it("Should display the image with a filter", async () => {
     const { Skia } = importSkia();
     const image = Skia.Image.MakeImageFromEncoded(
       Skia.Data.fromBytes(
@@ -26,7 +26,7 @@ half4 main(float2 xy) {
   xy.x += sin(xy.y / r) * 4;
   return image.eval(xy).rbga;
 }`)!;
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Fill>
         <Shader source={filter} uniforms={{ r: 50 }}>
           <ImageShader

package/src/renderer/__tests__/Paths.spec.tsx

@@ -8,7 +8,7 @@ import { drawOnNode, width, importSkia } from "./setup";
 const size = width;
 
 describe("Path Examples", () => {
-  it("Should draw an arc", () => {
+  it("Should draw an arc", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const arcRect = {
@@ -18,11 +18,11 @@ describe("Path Examples", () => {
       height: size,
     };
     path.addArc(arcRect, 45, 270);
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/arc.png");
   });
 
-  it("Should draw an oval", () => {
+  it("Should draw an oval", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     const rct = {
@@ -32,11 +32,11 @@ describe("Path Examples", () => {
       height: size,
     };
     path.addOval(rct);
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/oval.png");
   });
 
-  it("Should draw an rounded rectangle", () => {
+  it("Should draw an rounded rectangle", async () => {
     const { Skia } = importSkia();
     const path = Skia.Path.Make();
     path.addRRect({
@@ -49,11 +49,11 @@ describe("Path Examples", () => {
       rx: size / 4,
       ry: size / 4,
     });
-    const surface = drawOnNode(<Path path={path} color="lightblue" />);
+    const surface = await drawOnNode(<Path path={path} color="lightblue" />);
     processResult(surface, "snapshots/paths/rrect.png");
   });
 
-  it("Should draw a polygon", () => {
+  it("Should draw a polygon", async () => {
     const { Skia, vec } = importSkia();
     const path = Skia.Path.Make();
     const r = size / 4;
@@ -67,7 +67,7 @@ describe("Path Examples", () => {
       true
     );
 
-    const surface = drawOnNode(
+    const surface = await drawOnNode(
       <Path path={path} strokeWidth={4} style="stroke" color="lightblue" />
     );
     processResult(surface, "snapshots/paths/poly.png");