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

package/lib/typescript/lib/module/sksg/Reconciler.d.ts

@@ -3,47 +3,46 @@ export class SkiaSGRoot {
     Skia: any;
     container: {
         redraw(): void;
-        recording: null;
-        _root: any[];
-        unmounted: boolean;
+        recording: {
+            commands: any;
+            paintPool: never[];
+            animationValues: any;
+        } | undefined;
         Skia: any;
         nativeId: any;
-        root: any[];
         unmount(): void;
+        unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
     } | {
-        mapperId: null;
         redraw(): void;
-        recording: null;
-        _root: any[];
-        unmounted: boolean;
+        recording: {
+            commands: any;
+            paintPool: never[];
+        } | undefined;
+        mapperId: any;
         Skia: any;
         nativeId: any;
-        root: any[];
         unmount(): void;
+        unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
     } | {
-        mapperId: null;
         redraw(): void;
-        _root: any[];
-        recording: null;
-        unmounted: boolean;
+        mapperId: any;
         Skia: any;
         nativeId: any;
-        root: any[];
         unmount(): void;
+        unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
     };
     root: any;
     get sg(): {
         type: any;
         props: {};
-        children: any[];
+        children: any;
         isDeclaration: boolean;
     };
-    updateContainer(element: any): Promise<any>;
-    render(element: any): Promise<void>;
+    render(element: any): void;
     drawOnCanvas(canvas: any): void;
     getPicture(): any;
-    unmount(): Promise<any>;
+    unmount(): void;
 }

package/lib/typescript/lib/module/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -1,6 +1,5 @@
 export class ReanimatedRecorder {
     constructor(Skia: any);
-    values: Set<any>;
     recorder: any;
     processAnimationValues(props: any): void;
     getRecorder(): any;

package/lib/typescript/lib/module/sksg/Recorder/Recorder.d.ts

@@ -1,11 +1,8 @@
 export class Recorder {
-    commands: any[];
-    cursors: any[];
-    animationValues: Set<any>;
     getRecording(): {
-        commands: any[];
+        commands: any;
         paintPool: never[];
-        animationValues: Set<any>;
+        animationValues: any;
     };
     processProps(props: any): {
         props: any;

package/lib/typescript/lib/module/views/SkiaBaseWebView.d.ts

@@ -1,18 +1,15 @@
 export class SkiaBaseWebView extends React.Component<any, any, any> {
     constructor(props: any);
-    _surface: null;
-    _unsubscriptions: any[];
-    _canvas: null;
-    _canvasRef: React.RefObject<any>;
-    _redrawRequests: number;
-    requestId: number;
-    width: number;
-    height: number;
     unsubscribeAll(): void;
+    _unsubscriptions: any[] | undefined;
     onLayoutEvent(evt: any): void;
+    width: any;
+    height: any;
+    _surface: JsiSkSurface | undefined;
+    _canvas: import("../skia/web/JsiSkCanvas").JsiSkCanvas | undefined;
     getSize(): {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
     componentDidMount(): void;
     componentDidUpdate(): void;
@@ -22,7 +19,7 @@ export class SkiaBaseWebView extends React.Component<any, any, any> {
      * @param rect Rect to use as bounds. Optional.
      * @returns An Image object.
      */
-    makeImageSnapshot(rect: any): any;
+    makeImageSnapshot(rect: any): import("..").JsiSkImage | undefined;
     /**
      * Override to render
      */
@@ -30,8 +27,10 @@ export class SkiaBaseWebView extends React.Component<any, any, any> {
      * Sends a redraw request to the native SkiaView.
      */
     tick(): void;
+    _redrawRequests: number | undefined;
+    requestId: number | undefined;
     redraw(): void;
-    onLayout: (evt: any) => void;
     render(): React.CElement<import("react-native").ViewProps, import("react-native").View>;
 }
 import React from "react";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";

package/lib/typescript/lib/module/views/SkiaPictureView.d.ts

@@ -1,11 +1,11 @@
 export class SkiaPictureView extends React.Component<any, any, any> {
     constructor(props: any);
-    requestId: number;
     _nativeId: number;
     get nativeId(): number;
     componentDidUpdate(prevProps: any): void;
     componentWillUnmount(): void;
     tick(): void;
+    requestId: number | undefined;
     /**
      * Creates a snapshot from the canvas in the surface
      * @param rect Rect to use as bounds. Optional.
@@ -16,6 +16,6 @@ export class SkiaPictureView extends React.Component<any, any, any> {
      * Sends a redraw request to the native SkiaView.
      */
     redraw(): void;
-    render(): React.CElement<object, React.Component<object, {}, any> & import("react-native").NativeMethods>;
+    render(): React.CElement<object, React.Component<object, {}, any> & Readonly<import("react-native").NativeMethods>>;
 }
 import React from "react";

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

@@ -1,6 +1,6 @@
 export class SkiaPictureView extends SkiaBaseWebView {
-    picture: null;
     setPicture(picture: any): void;
+    picture: any;
     renderInCanvas(canvas: any): void;
 }
 import { SkiaBaseWebView } from "./SkiaBaseWebView";

package/lib/typescript/src/headless/index.d.ts

@@ -5,4 +5,4 @@ export declare const makeOffscreenSurface: (width: number, height: number) => Sk
 export declare const getSkiaExports: () => {
     Skia: import("../skia/types").Skia;
 };
-export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => Promise<import("../skia").SkImage>;
+export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => import("../skia").SkImage;

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -14,7 +14,7 @@ export interface CanvasProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
-    ref?: React.Ref<CanvasRef>;
+    mode?: "continuous" | "default";
 }
-export declare const Canvas: ({ debug, opaque, children, onSize, onLayout: _onLayout, ref, ...viewProps }: CanvasProps) => React.JSX.Element;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
 export {};

package/lib/typescript/src/renderer/Offscreen.d.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from "react";
 import type { SkPicture, SkRect, SkSize } from "../skia/types";
 export declare const isOnMainThread: () => boolean;
-export declare const drawAsPicture: (element: ReactElement, bounds?: SkRect) => Promise<SkPicture>;
-export declare const drawAsImage: (element: ReactElement, size: SkSize) => Promise<import("../skia").SkImage>;
+export declare const drawAsPicture: (element: ReactElement, bounds?: SkRect) => SkPicture;
+export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
 export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/lib/typescript/src/renderer/__tests__/setup.d.ts

@@ -43,13 +43,13 @@ export declare const center: {
     x: number;
     y: number;
 };
-export declare const drawOnNode: (element: ReactNode) => Promise<SkiaExports.SkSurface>;
-export declare const mountCanvas: (element: ReactNode) => Promise<{
+export declare const drawOnNode: (element: ReactNode) => SkiaExports.SkSurface;
+export declare const mountCanvas: (element: ReactNode) => {
     surface: SkiaExports.SkSurface;
     root: SkiaSGRoot;
-    draw: () => Promise<void>;
-}>;
-export declare const serialize: (element: ReactNode) => Promise<string>;
+    draw: () => void;
+};
+export declare const serialize: (element: ReactNode) => string;
 export type EvalContext = Record<string, any>;
 interface TestingSurface {
     eval<Ctx extends EvalContext = EvalContext, R = any>(fn: (Skia: Skia, ctx: Ctx) => R, ctx?: Ctx): Promise<R>;

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

@@ -5,12 +5,10 @@ import "../views/api";
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;
-    private _root;
+    root: Node[];
     protected recording: Recording | null;
     protected unmounted: boolean;
     constructor(Skia: Skia, nativeId: number);
-    get root(): Node[];
-    set root(value: Node[]);
     unmount(): void;
     drawOnCanvas(canvas: SkCanvas): void;
     abstract redraw(): void;

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

@@ -9,7 +9,7 @@ type TextInstance = Node;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
 type PublicInstance = Instance;
-type HostContext = object;
+type HostContext = null;
 type UpdatePayload = Container;
 type ChildSet = Node[];
 type TimeoutHandle = NodeJS.Timeout;

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

@@ -0,0 +1,19 @@
+import type { HostConfig } from "react-reconciler";
+import type { NodeType } from "../dom/types";
+import type { Container } from "./Container";
+import type { Node } from "./Node";
+export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+type Instance = Node<unknown>;
+type Props = object;
+type TextInstance = Node<unknown>;
+type SuspenseInstance = Instance;
+type HydratableInstance = Instance;
+type PublicInstance = Instance;
+type HostContext = null;
+type UpdatePayload = Container;
+type ChildSet = unknown;
+type TimeoutHandle = NodeJS.Timeout;
+type NoTimeout = -1;
+type SkiaHostConfig = HostConfig<NodeType, Props, Container, Instance, TextInstance, SuspenseInstance, HydratableInstance, PublicInstance, HostContext, UpdatePayload, ChildSet, TimeoutHandle, NoTimeout>;
+export declare const sksgHostConfig: SkiaHostConfig;
+export {};

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

@@ -13,9 +13,8 @@ export declare class SkiaSGRoot {
         children: import("./Node").Node<unknown>[];
         isDeclaration: boolean;
     };
-    private updateContainer;
-    render(element: ReactNode): Promise<void>;
+    render(element: ReactNode): void;
     drawOnCanvas(canvas: SkCanvas): void;
     getPicture(): import("../skia/types").SkPicture;
-    unmount(): Promise<unknown>;
+    unmount(): void;
 }

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.9-next.1",
+  "version": "1.11.10",
   "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": ">=19.0",
-    "react-native": ">=0.78",
-    "react-native-reanimated": ">=3.0.0"
+    "react": ">=18.0",
+    "react-native": ">=0.64",
+    "react-native-reanimated": ">=2.0.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -108,10 +108,10 @@
     "pixelmatch": "5.3.0",
     "pngjs": "6.0.0",
     "prettier": "2.8.7",
-    "react": "19.0.0",
-    "react-native": "0.78.0",
+    "react": "18.3.1",
+    "react-native": "0.75.2",
     "react-native-builder-bob": "0.18.2",
-    "react-native-reanimated": "^3.17.1",
+    "react-native-reanimated": "^3.16.5",
     "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.31.0"
+    "react-reconciler": "0.27.0"
   },
   "eslintIgnore": [
     "node_modules/",
@@ -154,6 +154,5 @@
         }
       ]
     ]
-  },
-  "stableVersion": "0.0.0"
+  }
 }

package/src/external/reanimated/textures.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo } from "react";
 import type { ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 
@@ -27,14 +27,13 @@ const createTexture = (
 
 export const useTexture = (element: ReactElement, size: SkSize) => {
   const { width, height } = size;
-  const [picture, setPicture] = useState<SkPicture | null>(null);
-  useEffect(() => {
-    drawAsPicture(element, {
+  const picture = useMemo(() => {
+    return 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 = async (surface: SkSurface, element: ReactNode) => {
+export const drawOffscreen = (surface: SkSurface, element: ReactNode) => {
   const root = new SkiaSGRoot(Skia);
-  await root.render(element);
+  root.render(element);
   const canvas = surface.getCanvas();
   root.drawOnCanvas(canvas);
   root.unmount();

package/src/renderer/Canvas.tsx

@@ -1,8 +1,10 @@
 import type { FC } from "react";
 import React, {
+  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from "react";
@@ -25,7 +27,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 = (
@@ -51,65 +53,87 @@ export interface CanvasProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   onSize?: SharedValue<SkSize>;
-  ref?: React.Ref<CanvasRef>;
+  mode?: "continuous" | "default";
 }
 
-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++;
-  }, []);
+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++;
+    }, []);
 
-  // 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
+    useLayoutEffect(() => {
+      root.render(children);
+    }, [children, root]);
 
-  useEffect(() => {
-    return () => {
-      root.unmount();
-    };
-  }, [root]);
+    useEffect(() => {
+      return () => {
+        root.unmount();
+      };
+    }, [root]);
 
-  // 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}
-    />
-  );
-};
+    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}
+      />
+    );
+  }
+);

package/src/renderer/Offscreen.tsx

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

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

@@ -39,28 +39,29 @@ describe("Data Loading", () => {
     expect(SkiaRenderer).toBeDefined();
   });
   it("Should accept null as an argument", async () => {
-    const { surface, draw } = await mountCanvas(<CheckData />);
-    await draw();
+    const { surface, draw } = mountCanvas(<CheckData />);
+    draw();
     processResult(surface, "snapshots/font/green.png");
-    await draw();
+    await wait(42);
+    draw();
     processResult(surface, "snapshots/font/green.png");
   });
 
   it("Should load a font file", async () => {
-    const { surface, draw } = await mountCanvas(<CheckFont />);
-    await draw();
+    const { surface, draw } = mountCanvas(<CheckFont />);
+    draw();
     processResult(surface, "snapshots/font/red.png");
     await wait(1500);
-    await draw();
+    draw();
     processResult(surface, "snapshots/font/green.png");
   });
 
   it("Should load an image", async () => {
-    const { surface, draw } = await mountCanvas(<CheckImage />);
-    await draw();
+    const { surface, draw } = mountCanvas(<CheckImage />);
+    draw();
     processResult(surface, "snapshots/font/red.png");
     await wait(1500);
-    await draw();
+    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", async () => {
+  it("Should blend colors using multiplication", () => {
     const r = width * 0.33;
-    const surface = await drawOnNode(
+    const surface = 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", async () => {
+  it("Should use a blur image filter", () => {
     const r = width * 0.33;
-    const surface = await drawOnNode(
+    const surface = 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", async () => {
+  it("Should use multiple paint definitions for one drawing command", () => {
     const r = width / 4;
     const strokeWidth = 50;
-    const surface = await drawOnNode(
+    const surface = 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", async () => {
+  it("Should draw DRect", () => {
     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 = await drawOnNode(
+    const surface = 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 } = await mountCanvas(<CheckEmptyCanvas />);
-    await draw();
+    const { surface, draw } = mountCanvas(<CheckEmptyCanvas />);
+    draw();
     processResult(surface, "snapshots/green.png");
     await wait(1000);
-    await draw();
+    draw();
     processResult(surface, "snapshots/transparent.png");
   });
 });