@shopify/react-native-skia 1.3.11 → 1.3.13

package/src/dom/__tests__/Paint.spec.tsx

@@ -0,0 +1,100 @@
+import {
+  importSkia,
+  width,
+  height,
+  PIXEL_RATIO,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { docPath, processResult } from "../../__tests__/setup";
+import { JsiDrawingContext } from "../types/DrawingContext";
+
+describe("Paint", () => {
+  it("should assign a paint directly", () => {
+    const size = width;
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec } = importSkia();
+    const Sk = getSkDOM();
+
+    const r = size / 2;
+
+    const root = Sk.Group();
+
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("lightblue"));
+    const circle = Sk.Circle({ c: vec(r, r), r, paint });
+    root.addChild(circle);
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("paint/assignement.png"));
+  });
+  it("should draw the color fill and strokes properly", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { vec, Skia } = importSkia();
+    const Sk = getSkDOM();
+
+    const strokeWidth = 10 * PIXEL_RATIO;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const color = Skia.Color("red");
+
+    const root = Sk.Group({ color });
+
+    const circle = Sk.Circle({ c, r });
+    circle.addChild(Sk.Paint({ color: Skia.Color("lightblue") }));
+    circle.addChild(
+      Sk.Paint({
+        color: Skia.Color("#adbce6"),
+        style: "stroke",
+        strokeWidth,
+      })
+    );
+    circle.addChild(
+      Sk.Paint({
+        color: Skia.Color("#ade6d8"),
+        style: "stroke",
+        strokeWidth: strokeWidth / 2,
+      })
+    );
+    root.addChild(circle);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("paint/stroke.png"));
+  });
+
+  it("should use the opacity property properly", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { vec, Skia } = importSkia();
+    const Sk = getSkDOM();
+
+    const strokeWidth = 30 * PIXEL_RATIO;
+    const r = width / 2 - strokeWidth / 2;
+    const c = vec(width / 2, height / 2);
+    const root = Sk.Group({ opacity: 0.5 });
+
+    const c1 = Sk.Group({ color: Skia.Color("red") });
+    c1.addChild(Sk.Circle({ c, r }));
+    root.addChild(c1);
+
+    const c2 = Sk.Group({
+      color: Skia.Color("lightblue"),
+      style: "stroke",
+      strokeWidth,
+    });
+    c2.addChild(Sk.Circle({ c, r }));
+    root.addChild(c2);
+
+    const c3 = Sk.Group({
+      color: Skia.Color("mint"),
+      style: "stroke",
+      strokeWidth: strokeWidth / 2,
+    });
+    c3.addChild(Sk.Circle({ c, r }));
+    root.addChild(c3);
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("paint/opacity.png"));
+  });
+});

package/src/dom/__tests__/RenderNodes.spec.tsx

@@ -0,0 +1,44 @@
+import {
+  importSkia,
+  width,
+  height,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { processResult } from "../../__tests__/setup";
+import type { NodeType } from "../types";
+import type { CircleProps } from "../types/Drawings";
+import { JsiDrawingContext } from "../types/DrawingContext";
+
+describe("Drawings", () => {
+  it("Hello World", () => {
+    // If there is a mismatch between the NodeType values and the intrasic element names,
+    // an static error will be thrown here.
+    const foo: JSX.IntrinsicElements[`${NodeType}`] = {};
+    expect(foo).toBeDefined();
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec } = importSkia();
+    const Sk = getSkDOM();
+    const c = vec(width / 2, height / 2);
+    const c1 = Skia.Color("#61bea2");
+    const c2 = Skia.Color("#529ca0");
+    const R = width / 4;
+    //const color = Skia.Color("rgb(36,43,56)");
+    const root = Sk.Group({});
+
+    const circle = Sk.Circle({ c, r: R, color: c1 });
+    root.addChild(circle);
+    let ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/render-nodes/simple.png");
+
+    // These cast won't be necessary once we clean up types such as CircleDef
+    circle.setProp("c" as keyof CircleProps, undefined);
+    circle.setProp("cx" as keyof CircleProps, 0);
+    circle.setProp("cy" as keyof CircleProps, 0);
+    circle.setProp("color", c2);
+    ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/render-nodes/simple2.png");
+  });
+});

package/src/dom/__tests__/Shaders.spec.tsx

@@ -0,0 +1,123 @@
+import {
+  importSkia,
+  width,
+  height,
+  loadImage,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { processResult } from "../../__tests__/setup";
+import { fitRects, rect2rect } from "../nodes/datatypes";
+import { JsiDrawingContext } from "../types";
+
+describe("Drawings", () => {
+  it("Should display a simple shader", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const source = Skia.RuntimeEffect.Make(`
+    half4 main(float2 xy) {   
+      return vec4(0.0, 1.0, 1.0, 1.0);
+    }`)!;
+    expect(source).toBeTruthy();
+
+    const root = Sk.Group();
+    const filter = Sk.Shader({
+      source,
+      uniforms: {},
+    });
+    root.addChild(filter);
+    root.addChild(Sk.Fill());
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/cyan.png");
+  });
+
+  it("Should display a nested shader", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const source = Skia.RuntimeEffect.Make(`
+uniform shader image;
+uniform float r;
+
+half4 main(float2 xy) {
+  xy.x += sin(xy.y / r) * 4;
+  return image.eval(xy).rbga;
+}`)!;
+    expect(source).toBeTruthy();
+    const rects = fitRects(
+      "cover",
+      { x: 0, y: 0, width: image.width(), height: image.height() },
+      Skia.XYWHRect(0, 0, width, height)
+    );
+    const transform = rect2rect(rects.src, rects.dst);
+    const imageShader = Sk.ImageShader({
+      image,
+      fit: "none",
+      tx: "decal",
+      ty: "decal",
+      fm: "nearest",
+      mm: "nearest",
+      transform,
+    });
+    const filter = Sk.Shader({
+      source,
+      uniforms: { r: 50 },
+    });
+    filter.addChild(imageShader);
+    const root = Sk.Group();
+    root.addChild(filter);
+    root.addChild(Sk.Fill());
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/nested-shader.png");
+  });
+
+  it("Should have always the correct state", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, processTransform2d } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const source = Skia.RuntimeEffect.Make(`
+uniform shader image;
+uniform float r;
+
+half4 main(float2 xy) {
+  xy.x += sin(xy.y / r) * 4;
+  return image.eval(xy).rbga;
+}`)!;
+    expect(source).toBeTruthy();
+    const rects = fitRects(
+      "cover",
+      { x: 0, y: 0, width: image.width(), height: image.height() },
+      Skia.XYWHRect(0, 0, width, height)
+    );
+    const matrix = processTransform2d(rect2rect(rects.src, rects.dst));
+    const imageShader = Sk.ImageShader({
+      image,
+      fit: "none",
+      tx: "decal",
+      ty: "decal",
+      fm: "nearest",
+      mm: "nearest",
+      matrix,
+    });
+    const filter = Sk.Shader({
+      source,
+      uniforms: { r: 50 },
+    });
+    filter.addChild(imageShader);
+    const root = Sk.Group();
+    root.addChild(filter);
+    root.addChild(Sk.Fill());
+    let ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/nested-shader.png");
+    filter.setProp("uniforms", { r: 25 });
+    ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/nested-shader2.png", true);
+  });
+});

package/src/external/reanimated/buffers.ts

@@ -1,5 +1,5 @@
 import { useEffect, useMemo } from "react";
-import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
+import type { WorkletFunction } from "react-native-reanimated/lib/typescript/commonTypes";
 
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";

package/src/mock/index.ts

@@ -8,7 +8,11 @@ const NoopValue = () => ({ current: 0 });
 const NoopSharedValue = () => ({ value: 0 });
 
 export const Mock = (CanvasKit: CanvasKit) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   global.SkiaApi = JsiSkApi(CanvasKit);
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
   const Skia = global.SkiaApi;
   return {
     Skia,

package/src/renderer/Container.tsx

@@ -10,6 +10,7 @@ import type { Skia } from "../skia/types";
 export class Container {
   private _root: RenderNode<GroupProps>;
   public Sk: SkDOM;
+  public unmounted = false;
   constructor(
     Skia: Skia,
     public redraw: () => void = () => {},

package/src/renderer/HostConfig.ts

@@ -53,9 +53,13 @@ const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
   parent.addChild(child);
 };
 
-const removeNode = (parent: Node<unknown>, child: Node<unknown>) => {
+const removeNode = (parent: Node<unknown>, child: Node<unknown>, unmounted = false) => {
+  // If the drawing is unmounted we don't want to update it.
+  // We can just stop the reanimated mappers
   unbindReanimatedNode(child);
-  return parent.removeChild(child);
+  if (!unmounted) {
+    parent.removeChild(child);
+  }
 };
 
 const insertBefore = (
@@ -224,7 +228,7 @@ export const skHostConfig: SkiaHostConfig = {
   },
 
   removeChildFromContainer: (container, child) => {
-    removeNode(container.root, child);
+    removeNode(container.root, child, container.unmounted);
   },
 
   insertInContainerBefore: (container, child, before) => {

package/src/renderer/Reconciler.tsx

@@ -46,6 +46,7 @@ export class SkiaRoot {
   }
 
   unmount() {
+    this.container.unmounted = true;
     skiaReconciler.updateContainer(null, this.root, null, () => {
       hostDebug("unmountContainer");
     });

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

@@ -0,0 +1,67 @@
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Fill } from "../components";
+import * as SkiaRenderer from "../index";
+
+import type { EmptyProps } from "./setup";
+import { importSkia, mountCanvas, wait } from "./setup";
+
+const CheckData = ({}: EmptyProps) => {
+  const { useFont } = importSkia();
+  const font = useFont(null);
+  if (font === null) {
+    return <Fill color="green" />;
+  }
+  return <Fill color="red" />;
+};
+
+const CheckFont = ({}: EmptyProps) => {
+  const { useFont } = importSkia();
+  const font = useFont("skia/__tests__/assets/Roboto-Medium.ttf");
+  if (!font) {
+    return <Fill color="red" />;
+  }
+  return <Fill color="green" />;
+};
+
+const CheckImage = ({}: EmptyProps) => {
+  const { useImage } = importSkia();
+  const image = useImage("skia/__tests__/assets/zurich.jpg");
+  if (!image) {
+    return <Fill color="red" />;
+  }
+  return <Fill color="green" />;
+};
+
+describe("Data Loading", () => {
+  it("Loads renderer without Skia", async () => {
+    expect(SkiaRenderer).toBeDefined();
+  });
+  it("Should accept null as an argument", async () => {
+    const { surface, draw } = mountCanvas(<CheckData />);
+    draw();
+    processResult(surface, "snapshots/font/green.png");
+    await wait(42);
+    draw();
+    processResult(surface, "snapshots/font/green.png");
+  });
+
+  it("Should load a font file", async () => {
+    const { surface, draw } = mountCanvas(<CheckFont />);
+    draw();
+    processResult(surface, "snapshots/font/red.png");
+    await wait(1500);
+    draw();
+    processResult(surface, "snapshots/font/green.png");
+  });
+
+  it("Should load an image", async () => {
+    const { surface, draw } = mountCanvas(<CheckImage />);
+    draw();
+    processResult(surface, "snapshots/font/red.png");
+    await wait(1500);
+    draw();
+    processResult(surface, "snapshots/font/green.png");
+  });
+});

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

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+
+import { docPath, processResult } from "../../__tests__/setup";
+import { Blur, Circle, DiffRect, Fill, Group, Paint } from "../components";
+
+import {
+  drawOnNode,
+  width,
+  height,
+  importSkia,
+  PIXEL_RATIO,
+  mountCanvas,
+  wait,
+} from "./setup";
+
+const CheckEmptyCanvas = () => {
+  const { Skia } = importSkia();
+  const [color, setColor] = useState("green");
+  useEffect(() => {
+    setTimeout(() => {
+      setColor("transparent");
+    }, 16);
+  }, [Skia]);
+
+  return (
+    <Group>
+      <Fill color={color} />
+    </Group>
+  );
+};
+
+describe("Test introductionary examples from our documentation", () => {
+  it("Should blend colors using multiplication", () => {
+    const r = width * 0.33;
+    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" />
+        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/blend-mode-multiply.png");
+  });
+
+  it("Should use a blur image filter", () => {
+    const r = width * 0.33;
+    const surface = drawOnNode(
+      <Group blendMode="multiply">
+        <Blur blur={30} />
+        <Circle cx={r} cy={r} r={r} color="cyan" />
+        <Circle cx={width - r} cy={r} r={r} color="magenta" />
+        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/blur-node.png");
+  });
+
+  it("Should use multiple paint definitions for one drawing command", () => {
+    const r = width / 4;
+    const strokeWidth = 50;
+    const surface = drawOnNode(
+      <>
+        <Circle cx={width / 2} cy={width / 2} r={r} color="red">
+          <Paint color="lightblue" />
+          <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
+          <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
+        </Circle>
+      </>
+    );
+    processResult(surface, "snapshots/drawings/multiple-paints.png");
+  });
+
+  it("Should draw DRect", () => {
+    const { rrect, rect } = importSkia();
+    const padding = 25 * PIXEL_RATIO;
+    const outer = rrect(rect(0, 0, width, width), padding, padding);
+    const inner = rrect(
+      rect(padding * 2, padding * 2, width - padding * 4, width - padding * 4),
+      padding * 2,
+      padding * 2
+    );
+    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 } = mountCanvas(<CheckEmptyCanvas />);
+    draw();
+    processResult(surface, "snapshots/green.png");
+    await wait(1000);
+    draw();
+    processResult(surface, "snapshots/transparent.png");
+  });
+});

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

@@ -0,0 +1,126 @@
+import fs from "fs";
+import path from "path";
+
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+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", () => {
+    const { Skia } = importSkia();
+    const surface = drawOnNode(
+      <FitBox
+        src={Skia.XYWHRect(0, 0, width, height)}
+        dst={Skia.XYWHRect(width / 4, height / 4, width / 2, height / 2)}
+      >
+        <Rect x={0} y={0} width={width} height={height} color="lightblue" />
+      </FitBox>
+    );
+    processResult(surface, "snapshots/drawings/lightblue-rect.png");
+  });
+  it("Should take the bottom right quarter of the circle and scale to the full canvas", () => {
+    const { Skia } = importSkia();
+    const surface = drawOnNode(
+      <FitBox
+        src={Skia.XYWHRect(width / 2, height / 2, width / 2, height / 2)}
+        dst={Skia.XYWHRect(0, 0, width, height)}
+      >
+        <Circle
+          r={width / 2}
+          cx={width / 2}
+          cy={height / 2}
+          color="lightblue"
+        />
+      </FitBox>
+    );
+    processResult(surface, "snapshots/drawings/lightblue-quarter-circle.png");
+  });
+  it("Should scale the image (1)", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box.png")
+        )
+      )
+    )!;
+    const surface = drawOnNode(
+      <Group
+        transform={fitbox(
+          "cover",
+          rect(0, 0, image.width(), image.height()),
+          rect(0, 0, width, height)
+        )}
+      >
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+        />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/scaled-image.png");
+  });
+  it("Should scale the image (2)", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box.png")
+        )
+      )
+    )!;
+    const screen = rect(256, 128, 256, 512);
+    const surface = drawOnNode(
+      <Group>
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+          transform={fitbox(
+            "cover",
+            rect(0, 0, image.width(), image.height()),
+            screen
+          )}
+        />
+        <Rect rect={screen} color="green" opacity={0.5} />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/scaled-image2.png");
+  });
+  it("Should rotate and scale the image", () => {
+    const { Skia, rect } = importSkia();
+    const image = Skia.Image.MakeImageFromEncoded(
+      Skia.Data.fromBytes(
+        fs.readFileSync(
+          path.resolve(__dirname, "../../skia/__tests__/assets/box2.png")
+        )
+      )
+    )!;
+    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(
+      <Group>
+        <Image
+          image={image}
+          x={0}
+          y={0}
+          width={image.width()}
+          height={image.height()}
+          fit="none"
+          transform={transform}
+        />
+        <Rect rect={screen} color="green" opacity={0.5} />
+      </Group>
+    );
+    processResult(surface, "snapshots/drawings/rotated-scaled-image.png");
+  });
+});

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

@@ -0,0 +1,46 @@
+import fs from "fs";
+import path from "path";
+
+import React from "react";
+
+import type { SkFont } from "../../skia/types";
+import { processResult } from "../../__tests__/setup";
+import { Glyphs } from "../components";
+
+import { drawOnNode, importSkia } from "./setup";
+
+let font: SkFont;
+const fontSize = 64;
+
+describe("Glyphs", () => {
+  beforeAll(() => {
+    const { Skia } = importSkia();
+    const data = Skia.Data.fromBytes(
+      fs.readFileSync(
+        path.resolve(__dirname, "../../skia/__tests__/assets/Roboto-Medium.ttf")
+      )
+    );
+    const tf = Skia.Typeface.MakeFreeTypeFaceFromData(data);
+    expect(tf !== null).toBe(true);
+    font = Skia.Font(tf!, 64);
+    expect(font !== null).toBe(true);
+  });
+  it("Should draw glyphs in lightblue", () => {
+    const { Skia } = importSkia();
+    const ids = font.getGlyphIDs("ab");
+    const glyphs = [
+      { id: ids[0], pos: Skia.Point(0, fontSize) },
+      {
+        id: ids[1],
+        pos: Skia.Point(
+          font.getGlyphWidths([ids[0]]).reduce((a, b) => a + b),
+          fontSize
+        ),
+      },
+    ];
+    const surface = drawOnNode(
+      <Glyphs x={0} y={0} font={font} glyphs={glyphs} color="lightblue" />
+    );
+    processResult(surface, "snapshots/glyphs/simple.png");
+  });
+});