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

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

@@ -1,4 +1,4 @@
 export function isOnMainThread(): boolean;
-export function drawAsPicture(element: any, bounds: any): import("../../..").SkPicture;
-export function drawAsImage(element: any, size: any): import("../../..").SkImage;
+export function drawAsPicture(element: any, bounds: any): Promise<import("../../..").SkPicture>;
+export function drawAsImage(element: any, size: any): Promise<import("../../..").SkImage>;
 export function drawAsImageFromPicture(picture: any, size: any): import("../../..").SkImage;

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

@@ -2,6 +2,9 @@ export class Container {
     constructor(Skia: any, nativeId: any);
     Skia: any;
     nativeId: any;
+    set root(value: any);
+    get root(): any;
+    _root: any;
     unmount(): void;
     unmounted: boolean | undefined;
     drawOnCanvas(canvas: any): void;

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

@@ -7,8 +7,8 @@ export namespace sksgHostConfig {
     let scheduleTimeout: typeof setTimeout;
     let cancelTimeout: typeof clearTimeout;
     let noTimeout: number;
-    function getRootHostContext(_rootContainerInstance: any): null;
-    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): null;
+    function getRootHostContext(_rootContainerInstance: any): {};
+    function getChildHostContext(_parentHostContext: any, _type: any, _rootContainerInstance: any): {};
     function shouldSetTextContent(_type: any, _props: any): boolean;
     function createTextInstance(_text: any, _rootContainerInstance: any, _hostContext: any, _internalInstanceHandle: any): never;
     function createInstance(type: any, propsWithChildren: any, _container: any, _hostContext: any, _internalInstanceHandle: any): {
@@ -20,13 +20,13 @@ export namespace sksgHostConfig {
     function finalizeInitialChildren(parentInstance: any, _type: any, _props: any, _rootContainerInstance: any, _hostContext: any): boolean;
     function commitMount(): void;
     function prepareForCommit(_container: any): null;
-    function resetAfterCommit(container: any): void;
+    function resetAfterCommit(_container: any): void;
     function getPublicInstance(node: any): any;
     function commitTextUpdate(_textInstance: any, _oldText: any, _newText: any): void;
     function clearContainer(_container: any): void;
     function prepareUpdate(_instance: any, _type: any, oldProps: any, newProps: any, container: any, _hostContext: any): any;
     function preparePortalMount(): void;
-    function cloneInstance(instance: any, _updatePayload: any, _type: any, _oldProps: any, newProps: any, _internalInstanceHandle: any, keepChildren: any, _recyclableInstance: any): {
+    function cloneInstance(instance: any, _type: any, _oldProps: any, newProps: any, _updatePayload: any, _internalInstanceHandle: any, keepChildren: any, _recyclableInstance: any): {
         type: any;
         props: any;
         children: any[];
@@ -44,4 +44,20 @@ export namespace sksgHostConfig {
     function getInstanceFromNode(_node: any): never;
     function prepareScopeUpdate(_scopeInstance: any, _instance: any): never;
     function getInstanceFromScope(_scopeInstance: any): never;
+    function shouldAttemptEagerTransition(): boolean;
+    function trackSchedulerEvent(): void;
+    function resolveEventType(): null;
+    function resolveEventTimeStamp(): number;
+    function requestPostPaintCallback(): void;
+    function maySuspendCommit(): boolean;
+    function preloadInstance(): boolean;
+    function startSuspendingCommit(): void;
+    function suspendInstance(): void;
+    function waitForCommitToBeReady(): null;
+    let NotPendingTransition: null;
+    let HostTransitionContext: import("react").Context<null>;
+    function setCurrentUpdatePriority(newPriority: any): void;
+    function getCurrentUpdatePriority(): number;
+    function resolveUpdatePriority(): number;
+    function resetFormInstance(): void;
 }

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

@@ -10,6 +10,8 @@ export class SkiaSGRoot {
         } | undefined;
         Skia: any;
         nativeId: any;
+        root: any;
+        _root: any;
         unmount(): void;
         unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
@@ -22,6 +24,8 @@ export class SkiaSGRoot {
         mapperId: any;
         Skia: any;
         nativeId: any;
+        root: any;
+        _root: any;
         unmount(): void;
         unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
@@ -30,6 +34,8 @@ export class SkiaSGRoot {
         mapperId: any;
         Skia: any;
         nativeId: any;
+        root: any;
+        _root: any;
         unmount(): void;
         unmounted: boolean | undefined;
         drawOnCanvas(canvas: any): void;
@@ -41,8 +47,9 @@ export class SkiaSGRoot {
         children: any;
         isDeclaration: boolean;
     };
-    render(element: any): void;
+    updateContainer(element: any): Promise<any>;
+    render(element: any): Promise<void>;
     drawOnCanvas(canvas: any): void;
     getPicture(): any;
-    unmount(): void;
+    unmount(): Promise<any>;
 }

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

@@ -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> & Readonly<import("react-native").NativeMethods>>;
+    render(): React.CElement<object, React.Component<object, {}, any> & import("react-native").NativeMethods>;
 }
 import React from "react";

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) => import("../skia").SkImage;
+export declare const drawOffscreen: (surface: SkSurface, element: ReactNode) => Promise<import("../skia").SkImage>;

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

@@ -9,12 +9,12 @@ interface CanvasRef extends FC<CanvasProps> {
     redraw(): void;
     getNativeId(): number;
 }
-export declare const useCanvasRef: () => React.RefObject<CanvasRef>;
+export declare const useCanvasRef: () => React.RefObject<CanvasRef | null>;
 export interface CanvasProps extends ViewProps {
     debug?: boolean;
     opaque?: boolean;
     onSize?: SharedValue<SkSize>;
-    mode?: "continuous" | "default";
+    ref?: React.Ref<CanvasRef>;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;
+export declare const Canvas: ({ debug, opaque, children, onSize, onLayout: _onLayout, ref, ...viewProps }: CanvasProps) => React.JSX.Element;
 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) => SkPicture;
-export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
+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 drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

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

@@ -43,13 +43,14 @@ export declare const center: {
     x: number;
     y: number;
 };
-export declare const drawOnNode: (element: ReactNode) => SkiaExports.SkSurface;
-export declare const mountCanvas: (element: ReactNode) => {
+export declare const drawOnNode: (element: ReactNode) => Promise<SkiaExports.SkSurface>;
+export declare const mountCanvas: (element: ReactNode) => Promise<{
     surface: SkiaExports.SkSurface;
     root: SkiaSGRoot;
-    draw: () => void;
-};
-export declare const serialize: (element: ReactNode) => string;
+    render: () => Promise<void>;
+    draw: () => Promise<void>;
+}>;
+export declare const serialize: (element: ReactNode) => Promise<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,10 +5,12 @@ import "../views/api";
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;
-    root: Node[];
+    private _root;
     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/Elements.d.ts

@@ -1,6 +1,6 @@
 import type { FractalNoiseProps, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps, AtlasProps, ChildrenProps, MorphologyImageFilterProps, BlendProps } from "../dom/types";
 import type { SkiaProps } from "../renderer";
-declare global {
+declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
             skGroup: SkiaProps<GroupProps>;

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

@@ -2,14 +2,14 @@ import type { HostConfig } from "react-reconciler";
 import type { NodeType } from "../dom/types";
 import type { Node } from "./Node";
 import type { Container } from "./Container";
-export declare const debug: (message?: any, ...optionalParams: any[]) => void;
+export declare const debug: (...args: Parameters<typeof console.log>) => void;
 type Instance = Node;
 type Props = object;
 type TextInstance = Node;
 type SuspenseInstance = Instance;
 type HydratableInstance = Instance;
 type PublicInstance = Instance;
-type HostContext = null;
+type HostContext = object;
 type UpdatePayload = Container;
 type ChildSet = Node[];
 type TimeoutHandle = NodeJS.Timeout;

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

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

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.9",
+  "version": "2.0.0-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": {
@@ -96,7 +96,7 @@
     "@types/jest": "29.5.6",
     "@types/pixelmatch": "5.2.4",
     "@types/pngjs": "6.0.1",
-    "@types/react": "^18.2.6",
+    "@types/react": "^19.0.0",
     "@types/react-reconciler": "0.28.9",
     "@types/ws": "8.5.3",
     "eslint": "8",
@@ -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/Platform/Platform.web.tsx

@@ -98,7 +98,8 @@ const useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {
 const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
   const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);
   const ref = useRef<Div>(null);
-  useElementLayout(ref, onLayout);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useElementLayout(ref as any, onLayout);
   const cssStyles = useMemo(() => {
     return {
       alignItems: "stretch" as const,

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,9 +1,9 @@
 import type { FC } from "react";
 import React, {
-  forwardRef,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useLayoutEffect,
   useMemo,
   useRef,
 } from "react";
@@ -26,7 +26,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 +52,64 @@ 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]);
+  useLayoutEffect(() => {
+    root.render(children);
+  }, [root, children]);
 
-    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");
   });
 });