@shopify/react-native-skia 2.0.0-next.2 → 2.0.0-next.3

package/src/renderer/Canvas.tsx

@@ -17,7 +17,7 @@ import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";
 import type { SkiaBaseViewProps } from "../views";
 
-interface CanvasRef extends FC<CanvasProps> {
+export interface CanvasRef extends FC<CanvasProps> {
   makeImageSnapshot(rect?: SkRect): SkImage;
   makeImageSnapshotAsync(rect?: SkRect): Promise<SkImage>;
   redraw(): void;

package/src/renderer/__tests__/e2e/Box.spec.tsx

@@ -80,4 +80,26 @@ describe("Box", () => {
     );
     checkImage(img, "snapshots/box/box-stroke.png");
   });
+
+  it("should draw a shadow with opacity", async () => {
+    const { rect } = importSkia();
+    const { width } = surface;
+    const size = width / 2;
+    const img = await surface.draw(
+      <>
+        <Fill color="white" />
+        <Box box={rect(size / 2, size / 2, size, size)} color="red">
+          <BoxShadow
+            dx={0}
+            dy={0}
+            blur={5}
+            spread={10}
+            inner
+            color={"rgba(0, 0, 255, 0.5)"}
+          />
+        </Box>
+      </>
+    );
+    checkImage(img, "snapshots/box/box-shadow-opacity.png");
+  });
 });

package/src/renderer/__tests__/e2e/NativeBuffer.spec.tsx

@@ -72,6 +72,7 @@ describe("Native Buffers", () => {
     );
     expect(success).toBe(true);
   });
+
   it("creates a native buffer from an image", async () => {
     if (!shouldNativeBufferTestRun()) {
       return;
@@ -114,6 +115,7 @@ describe("Native Buffers", () => {
     expect(image).not.toBeNull();
     checkImage(image, "snapshots/cyan-buffer.png");
   });
+
   it("creates an image from native color type", async () => {
     const { Skia: Sk } = setupSkia();
     // Skip outside iOS and Android

package/src/sksg/Recorder/Player.ts

@@ -45,8 +45,8 @@ import {
   isDrawCommand,
   isGroup,
   materializeCommand,
-  type Command,
 } from "./Core";
+import type { Command } from "./Core";
 import type { DrawingContext } from "./DrawingContext";
 
 function play(ctx: DrawingContext, _command: Command) {

package/src/sksg/Recorder/commands/Box.ts

@@ -30,7 +30,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
       lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
+      lPaint.setAlphaf(lPaint.getAlphaf() * opacity);
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
@@ -48,7 +48,7 @@ export const drawBox = (ctx: DrawingContext, command: BoxCommand) => {
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
       lPaint.setColor(Skia.Color(color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
+      lPaint.setAlphaf(lPaint.getAlphaf() * opacity);
 
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)

package/src/sksg/Recorder/commands/Drawing.ts

@@ -1,9 +1,6 @@
 import {
-  deflate,
   enumKey,
   fitRects,
-  inflate,
-  NodeType,
   processCircle,
   processColor,
   processPath,
@@ -12,8 +9,6 @@ import {
 } from "../../../dom/nodes";
 import type {
   AtlasProps,
-  BoxProps,
-  BoxShadowProps,
   CircleProps,
   DiffRectProps,
   DrawingNodeProps,
@@ -38,18 +33,13 @@ import { saturate } from "../../../renderer/processors";
 import type { SkPoint, SkRSXform } from "../../../skia/types";
 import {
   BlendMode,
-  BlurStyle,
-  ClipOp,
   FillType,
   FilterMode,
   isCubicSampling,
-  isRRect,
   MipmapMode,
   PointMode,
   VertexMode,
 } from "../../../skia/types";
-import type { Node } from "../../Node";
-import { materialize } from "../../utils";
 import type { DrawingContext } from "../DrawingContext";
 
 export const drawLine = (ctx: DrawingContext, props: LineProps) => {
@@ -64,61 +54,6 @@ export const drawOval = (ctx: DrawingContext, props: OvalProps) => {
   ctx.canvas.drawOval(rect, ctx.paint);
 };
 
-export const drawBox = (
-  ctx: DrawingContext,
-  props: BoxProps,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  children: Node<any>[]
-) => {
-  "worklet";
-  const { paint, Skia, canvas } = ctx;
-  const { box: defaultBox } = props;
-  const opacity = paint.getAlphaf();
-  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
-  const shadows = children
-    .map((node) => {
-      if (node.type === NodeType.BoxShadow) {
-        return materialize(node.props);
-      }
-      return null;
-    })
-    .filter((n): n is BoxShadowProps => n !== null);
-  shadows
-    .filter((shadow) => !shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      canvas.drawRRect(inflate(Skia, box, spread, spread, dx, dy), lPaint);
-    });
-
-  canvas.drawRRect(box, paint);
-
-  shadows
-    .filter((shadow) => shadow.inner)
-    .map((shadow) => {
-      const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const delta = Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
-      canvas.save();
-      canvas.clipRRect(box, ClipOp.Intersect, false);
-      const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(Skia, color));
-      lPaint.setAlphaf(paint.getAlphaf() * opacity);
-
-      lPaint.setMaskFilter(
-        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
-      );
-      const inner = deflate(Skia, box, spread, spread, dx, dy);
-      const outer = inflate(Skia, box, delta.x, delta.y);
-      canvas.drawDRRect(outer, inner, lPaint);
-      canvas.restore();
-    });
-};
-
 export const drawImage = (ctx: DrawingContext, props: ImageProps) => {
   "worklet";
   const { image, sampling } = props;