@shopify/react-native-skia 1.3.12 → 1.4.0

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

@@ -0,0 +1,95 @@
+import {
+  importSkia,
+  width,
+  height,
+  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/DrawingContext";
+
+describe("Drawings", () => {
+  it("Hello World", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, vec } = importSkia();
+    const Sk = getSkDOM();
+
+    const r = width * 0.33;
+    // Root
+    const root = Sk.Group({
+      blendMode: "multiply",
+    });
+    // C1
+    const c1 = Sk.Group({ color: Skia.Color("cyan") });
+    c1.addChild(Sk.Circle({ c: vec(r, r), r }));
+    root.addChild(c1);
+    // C2
+    const c2 = Sk.Group({ color: Skia.Color("magenta") });
+    c2.addChild(Sk.Circle({ c: vec(width - r, r), r }));
+    root.addChild(c2);
+    // C3
+    const c3 = Sk.Group({ color: Skia.Color("yellow") });
+    c3.addChild(Sk.Circle({ c: vec(width / 2, height - r), r }));
+    root.addChild(c3);
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/drawings/blend-mode-multiply.png");
+  });
+
+  it("Should draw a path", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, processTransform2d } = importSkia();
+    const Sk = getSkDOM();
+    const size = width;
+    const path = Skia.Path.MakeFromSVGString(
+      // eslint-disable-next-line max-len
+      "M512.213 204.005C500.312 185.697 406.758 105.581 332.94 105.581C259.122 105.581 219.088 132 204.638 149.85C157.952 207.52 141.933 264.275 156.579 320.115C175.803 387.854 228.896 449.644 315.859 505.483C415.638 562.238 479.716 626.774 508.093 699.091C518.163 731.13 519.536 762.711 512.213 793.835C504.889 824.959 490.243 853.336 468.273 878.967C449.965 903.683 425.707 921.534 395.499 932.518C365.291 942.588 328.675 950.369 285.651 955.861C182.21 964.1 97.9935 948.538 33 909.176M595.972 733.419C710.397 564.985 795.529 424.47 851.369 311.876C865.1 279.837 875.169 255.579 881.577 239.102C887.985 221.709 894.393 198.824 900.801 170.447C907.208 142.069 909.497 115.98 907.666 92.1797C904.92 68.3793 893.02 51.9021 871.965 40.0019C850.911 28.1016 835.5 31.3101 811.549 44.1212C772.187 65.1754 745.64 101.334 731.909 152.596C723.67 174.566 715.432 200.197 707.193 229.49C699.87 258.783 694.378 281.21 690.716 296.772C687.97 312.334 682.935 340.711 675.612 381.904C668.289 422.182 663.712 445.982 661.881 453.306C643.573 567.731 621.603 733.876 595.972 951.742C624.349 852.878 656.846 774.154 693.462 715.568C706.278 689.937 717.263 669.798 726.417 655.152C735.571 640.505 748.844 624.486 766.237 607.093C784.545 589.701 803.768 576.885 823.907 568.646C892.562 543.015 941.994 545.304 972.202 575.512C990.51 594.735 999.664 618.078 999.664 645.54C1000.58 673.002 990.052 694.514 968.083 710.076C925.059 733.876 859.608 741.657 771.729 733.419C786.375 737.996 797.36 742.115 804.683 745.776C812.922 748.523 822.992 753.1 834.892 759.508C847.707 765.915 857.319 773.696 863.727 782.85C871.05 792.004 875.627 802.531 877.458 814.432C878.373 819.009 879.746 827.705 881.577 840.521C884.323 853.336 886.612 862.948 888.443 869.356C890.273 875.763 892.562 884.002 895.308 894.072C898.97 904.141 903.089 912.837 907.666 920.16C913.159 926.568 919.566 932.976 926.89 939.384C949.775 961.354 987.764 958.607 1040.86 931.145C1056.42 923.822 1070.61 914.668 1083.42 903.683C1097.15 892.698 1109.97 879.425 1121.87 863.863C1134.69 847.386 1144.76 834.113 1152.08 824.043C1159.4 813.058 1169.47 797.039 1182.29 775.985C1195.1 754.931 1204.26 740.742 1209.75 733.419C1239.04 674.833 1268.33 616.247 1297.63 557.661C1252.77 670.256 1223.94 756.304 1211.12 815.805C1205.63 833.197 1203.34 853.336 1204.26 876.221C1205.17 899.106 1212.04 917.414 1224.85 931.145C1234.01 942.13 1245.45 949.453 1259.18 953.115C1273.83 956.777 1287.56 956.319 1300.37 951.742C1356.21 935.265 1401.53 903.226 1436.31 855.625C1456.45 828.163 1483.45 787.427 1517.32 733.419M1360.79 390.143C1347.97 390.143 1340.19 384.193 1337.45 372.293C1335.62 359.477 1336.99 348.492 1341.57 339.338C1345.24 332 1357.13 333.846 1369.03 333.846C1380.93 333.846 1390.5 340.5 1391 348.95M1925.13 697.718C1902.25 633.64 1874.33 593.82 1841.38 578.258C1810.25 559.95 1775.47 551.254 1737.02 552.169C1698.57 552.169 1664.25 562.238 1634.04 582.377C1605.66 598.855 1581.4 620.824 1561.26 648.286C1541.12 674.833 1527.39 704.126 1520.07 736.165C1513.66 767.288 1514.58 798.87 1522.82 830.909C1531.97 862.032 1547.53 888.579 1569.5 910.549C1604.29 939.842 1646.4 954.488 1695.83 954.488C1745.26 954.488 1787.82 939.842 1823.53 910.549C1838.17 895.902 1848.7 885.375 1855.11 878.967C1861.51 872.56 1868.84 863.406 1877.08 851.505C1886.23 839.605 1893.55 827.247 1899.05 814.432M1958.09 556.288C1933.37 657.898 1916.9 746.234 1908.66 821.297C1900.42 878.967 1911.4 918.787 1941.61 940.757C1964.5 959.065 2000.2 956.319 2048.71 932.518C2090.82 912.38 2131.1 873.017 2169.55 814.432"
+    )!;
+    expect(path).toBeDefined();
+    const PADDING = width / 16;
+    const src = Skia.XYWHRect(0, 0, 2139, 928);
+    const dst = Skia.XYWHRect(
+      PADDING,
+      PADDING,
+      size - PADDING * 2,
+      size - PADDING * 2
+    );
+    const rects = fitRects("contain", src, dst);
+    const matrix = processTransform2d(rect2rect(rects.src, rects.dst));
+    const root = Sk.Group({
+      matrix,
+      style: "stroke",
+      strokeWidth: 116,
+      strokeJoin: "round",
+      strokeCap: "round",
+    });
+    const colors = [
+      "#3FCEBC",
+      "#3CBCEB",
+      "#5F96E7",
+      "#816FE3",
+      "#9F5EE2",
+      "#DE589F",
+      "#FF645E",
+      "#FDA859",
+      "#FAEC54",
+      "#9EE671",
+      "#41E08D",
+    ].map((cl) => Skia.Color(cl));
+    root.addChild(
+      Sk.LinearGradient({
+        start: path.getPoint(0),
+        end: path.getLastPt(),
+        colors,
+        mode: "clamp",
+      })
+    );
+    const pathNode = Sk.Path({ path, start: 0, end: 1 });
+    root.addChild(pathNode);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, "snapshots/paths/skia.png");
+  });
+});

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

@@ -0,0 +1,132 @@
+import { fitbox } from "../../renderer";
+import {
+  importSkia,
+  width,
+  height,
+  loadImage,
+  PIXEL_RATIO,
+  getSkDOM,
+} from "../../renderer/__tests__/setup";
+import { setupSkia } from "../../skia/__tests__/setup";
+import { docPath, processResult } from "../../__tests__/setup";
+import { JsiDrawingContext } from "../types/DrawingContext";
+
+const size = width;
+const padding = 48;
+const r = 24;
+
+describe("Group", () => {
+  it("should clip rect", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, rect } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const clipRect = rect(
+      padding,
+      padding,
+      size - padding * 2,
+      size - padding * 2
+    );
+    // Root
+    const root = Sk.Group({
+      color: Skia.Color("lightblue"),
+    });
+    root.addChild(Sk.Fill());
+    const clipNode = Sk.Group({ clip: clipRect });
+    clipNode.addChild(
+      Sk.Image({ image, fit: "cover", x: 0, y: 0, width: size, height: size })
+    );
+    root.addChild(clipNode);
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("group/clip-rect.png"));
+  });
+  it("should clip rounded rect", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, rect, rrect } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const clipRRect = rrect(
+      rect(padding, padding, size - padding * 2, size - padding * 2),
+      r,
+      r
+    );
+    const root = Sk.Group({ clip: clipRRect });
+    root.addChild(
+      Sk.Image({ image, fit: "cover", x: 0, y: 0, width: size, height: size })
+    );
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("group/clip-rrect.png"));
+  });
+  it("Should use a path as a clip", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, processTransform2d } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const clipPath = Skia.Path.MakeFromSVGString(
+      "M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
+    )!;
+    expect(clipPath).toBeTruthy();
+    clipPath.transform(processTransform2d([{ scale: 3 }]));
+
+    const root = Sk.Group({ clip: clipPath });
+
+    root.addChild(
+      Sk.Image({ image, fit: "cover", x: 0, y: 0, width: size, height: size })
+    );
+
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("group/clip-path.png"));
+  });
+  it("Should invert a clip", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, processTransform2d } = importSkia();
+    const Sk = getSkDOM();
+    const image = loadImage("skia/__tests__/assets/oslo.jpg");
+    const clipPath = Skia.Path.MakeFromSVGString(
+      "M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
+    )!;
+    expect(clipPath).toBeTruthy();
+    clipPath.transform(processTransform2d([{ scale: 3 }]));
+
+    const root = Sk.Group({ clip: clipPath, invertClip: true });
+    root.addChild(
+      Sk.Image({ image, fit: "cover", x: 0, y: 0, width: size, height: size })
+    );
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("group/invert-clip.png"));
+  });
+  it("Drawing elements inherits group properties", () => {
+    const { surface, canvas } = setupSkia(width, height);
+    const { Skia, rect } = importSkia();
+    const Sk = getSkDOM();
+
+    const svgPath =
+      // eslint-disable-next-line max-len
+      "M481.586 193.457C470.446 176.319 382.871 101.323 313.771 101.323C244.671 101.323 207.195 126.054 193.668 142.763C149.967 196.747 134.971 249.875 148.681 302.146C166.676 365.556 216.376 423.397 297.781 475.668C391.183 528.795 451.166 589.207 477.73 656.902C487.156 686.893 488.441 716.456 481.586 745.591C474.731 774.725 461.021 801.289 440.455 825.282C423.317 848.419 400.609 865.128 372.332 875.411C344.054 884.837 309.778 892.12 269.504 897.262C172.674 904.974 93.8398 890.407 33 853.56M559.992 689.035C667.105 531.366 746.796 399.832 799.067 294.434C811.92 264.442 821.346 241.735 827.344 226.31C833.343 210.029 839.341 188.607 845.339 162.043C851.338 135.479 853.48 111.058 851.766 88.7783C849.195 66.4989 838.056 51.0748 818.347 39.9351C798.638 28.7954 784.212 31.7989 761.792 43.7911C724.945 63.4998 700.095 97.3473 687.242 145.334C679.53 165.899 671.817 189.892 664.105 217.313C657.25 244.734 652.109 265.728 648.681 280.295C646.111 294.862 641.398 321.426 634.542 359.987C627.687 397.69 623.403 419.969 621.689 426.825C604.551 533.937 583.985 689.464 559.992 893.406C586.556 800.861 616.976 727.167 651.252 672.326C663.248 648.333 673.531 629.481 682.1 615.771C690.669 602.06 703.094 587.065 719.375 570.784C736.513 554.502 754.508 542.506 773.36 534.794C837.627 510.801 883.9 512.943 912.177 541.221C929.315 559.215 937.884 581.066 937.884 606.773C938.741 632.48 928.887 652.617 908.321 667.185C868.047 689.464 806.779 696.748 724.517 689.035C738.227 693.32 748.51 697.176 755.365 700.604C763.077 703.174 772.503 707.459 783.643 713.457C795.639 719.455 804.637 726.739 810.635 735.308C817.49 743.877 821.775 753.731 823.488 764.871C824.345 769.155 825.631 777.296 827.344 789.293C829.915 801.289 832.057 810.287 833.771 816.285C835.485 822.283 837.627 829.995 840.198 839.421C843.626 848.847 847.482 856.987 851.766 863.843C856.907 869.841 862.906 875.839 869.761 881.838C891.183 902.403 926.745 899.832 976.445 874.125C991.012 867.27 1004.29 858.701 1016.29 848.418C1029.14 838.136 1041.14 825.711 1052.28 811.143C1064.28 795.719 1073.7 783.294 1080.56 773.868C1087.41 763.586 1096.84 748.59 1108.84 728.881C1120.83 709.173 1129.4 695.891 1134.54 689.035C1161.96 634.194 1189.38 579.352 1216.8 524.511C1174.82 629.909 1147.82 710.458 1135.83 766.156C1130.69 782.437 1128.54 801.289 1129.4 822.712C1130.26 844.134 1136.68 861.272 1148.68 874.125C1157.25 884.408 1167.96 891.263 1180.81 894.691C1194.53 898.119 1207.38 897.69 1219.38 893.406C1271.65 877.981 1314.06 847.99 1346.62 803.431C1365.48 777.724 1390.75 739.592 1422.46 689.035M1275.93 367.699C1263.93 367.699 1256.65 362.129 1254.08 350.989C1252.37 338.993 1253.65 328.71 1257.94 320.141C1261.37 313.272 1272.5 314.999 1283.64 314.999C1294.78 314.999 1303.74 321.228 1304.21 329.138M1804.21 655.616C1782.79 595.634 1756.65 558.358 1725.8 543.791C1696.67 526.653 1664.11 518.513 1628.12 519.37C1592.13 519.37 1559.99 528.796 1531.71 547.647C1505.15 563.071 1482.44 583.637 1463.59 609.344C1444.74 634.194 1431.89 661.615 1425.03 691.606C1419.03 720.741 1419.89 750.304 1427.6 780.295C1436.17 809.43 1450.74 834.28 1471.3 854.845C1503.87 882.266 1543.28 895.976 1589.56 895.976C1635.83 895.976 1675.67 882.266 1709.09 854.845C1722.8 841.135 1732.66 831.281 1738.66 825.282C1744.65 819.284 1751.51 810.715 1759.22 799.575C1767.79 788.436 1774.65 776.868 1779.79 764.871M1835.06 523.226C1811.92 618.341 1796.5 701.032 1788.78 771.298C1781.07 825.282 1791.35 862.557 1819.63 883.123C1841.05 900.261 1874.47 897.69 1919.89 875.411C1959.31 856.559 1997.01 819.712 2033 764.871";
+    const path = Skia.Path.MakeFromSVGString(svgPath)!;
+    expect(path).toBeTruthy();
+    const src = path.computeTightBounds();
+    const strokeWidth = 30 * PIXEL_RATIO;
+    const dst = rect(0, 0, width, height);
+    const transform = fitbox("contain", src, dst);
+    const root = Sk.Group({ transform });
+    root.addChild(
+      Sk.Path({
+        path,
+        strokeCap: "round",
+        strokeJoin: "round",
+        style: "stroke",
+        strokeWidth,
+        start: 0,
+        end: 1,
+      })
+    );
+    const ctx = new JsiDrawingContext(Skia, canvas);
+    root.render(ctx);
+    processResult(surface, docPath("group/scale-path.png"));
+  });
+});

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/renderer/HostConfig.ts

@@ -53,7 +53,11 @@ const appendNode = (parent: Node<unknown>, child: Node<unknown>) => {
   parent.addChild(child);
 };
 
-const removeNode = (parent: Node<unknown>, child: Node<unknown>, unmounted = false) => {
+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);

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");
+  });
+});