@shopify/react-native-skia 2.1.0 → 2.2.0

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

@@ -9,6 +9,7 @@ import {
   LinearGradient,
   Paint,
   Path,
+  SweepGradient,
 } from "../../components";
 import { checkImage, docPath } from "../../../__tests__/setup";
 import { fitbox } from "../../components/shapes/FitBox";
@@ -210,4 +211,21 @@ describe("Paint", () => {
     );
     checkImage(result, docPath("paint/semi-transparent-circle.png"));
   });
+  it("test paint", async () => {
+    const { vec, Skia } = importSkia();
+    const strokeWidth = 10;
+    const { width, height } = surface;
+    const c = vec(width / 2, height / 2);
+    const r = (width - strokeWidth) / 2;
+    const path = Skia.Path.Make();
+    path.addCircle(c.x, c.y, r);
+    const result = await surface.draw(
+      <Path path={path} color="transparent">
+        <Paint style="stroke" strokeWidth={20} strokeCap="round">
+          <SweepGradient c={c} colors={["#64BC65", "#4488ff"]} />
+        </Paint>
+      </Path>
+    );
+    checkImage(result, docPath("paint/test-paint.png"));
+  });
 });

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

@@ -3,7 +3,7 @@ import React from "react";
 
 import { checkImage, docPath } from "../../../__tests__/setup";
 import { dataAssets, importSkia, surface } from "../setup";
-import { Group, Skottie } from "../../components";
+import { Blur, Group, Paint, Skottie } from "../../components";
 
 const legoLoaderJSON = require("./setup/skottie/lego_loader.json");
 const drinksJSON = require("./setup/skottie/drinks.json");
@@ -30,6 +30,29 @@ describe("Skottie", () => {
     );
     checkImage(img, docPath("skottie/skottie-component-lego.png"));
   });
+  it("Should render Skottie component with raster effect", async () => {
+    const { Skia } = importSkia();
+    const source = JSON.stringify(legoLoaderJSON);
+    const legoAnimation = Skia.Skottie.Make(source);
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    legoAnimation.source = source;
+    // END OF INTERNAL TESTING ONLY
+    const img = await surface.draw(
+      <Group
+        transform={[{ scale: 0.5 }]}
+        layer={
+          <Paint>
+            <Blur blur={10} />
+          </Paint>
+        }
+      >
+        <Skottie animation={legoAnimation} frame={41} />
+      </Group>
+    );
+    checkImage(img, docPath("skottie/skottie-component-lego-blur.png"));
+  });
   it("Should render Skottie component with drinks animation", async () => {
     const { Skia } = importSkia();
     const source = JSON.stringify(drinksJSON);

package/src/renderer/__tests__/setup.tsx

@@ -174,6 +174,7 @@ export const importSkia = (): typeof SkiaExports => {
   const skia = require("../../skia");
   const renderer = require("../../renderer");
   const offscreen = require("../Offscreen");
+  const nodes = require("../../dom/nodes");
   // TODO: to remove
   const animation = require("../../animation");
   return {
@@ -181,6 +182,7 @@ export const importSkia = (): typeof SkiaExports => {
     ...renderer,
     ...animation,
     ...offscreen,
+    ...nodes,
   };
 };
 
@@ -322,6 +324,14 @@ const serializeSkOjects = (obj: any): any => {
         source: obj.source,
         assets: obj.assets,
       };
+    } else if (obj.__typename__ === "ImageFilter") {
+      if (!obj.source) {
+        throw new Error("ImageFilter must have a source");
+      }
+      return {
+        __typename__: "Function",
+        source: obj.source,
+      };
     }
   } else if (obj && typeof obj === "object") {
     const result = Object.keys(obj).reduce((acc, key) => {

package/src/renderer/components/ImageFilter.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { ImageFilterProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+
+export const ImageFilter = (props: SkiaProps<ImageFilterProps>) => {
+  return <skImageFilter {...props} />;
+};

package/src/renderer/components/index.ts

@@ -15,5 +15,6 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Skottie";
+export * from "./ImageFilter";
 
 export * from "./paragraph";

package/src/skia/types/Matrix4.ts

@@ -354,6 +354,22 @@ export const convertToColumnMajor = (rowMajorMatrix: Matrix4) => {
   return colMajorMatrix as unknown as Matrix4;
 };
 
+/**
+ * @worklet
+ */
+export const convertToColumnMajor3 = (rowMajorMatrix: Matrix3 | number[]) => {
+  "worklet";
+
+  const colMajorMatrix = new Array<number>(9);
+  const size = 3;
+  for (let row = 0; row < size; row++) {
+    for (let col = 0; col < size; col++) {
+      colMajorMatrix[col * size + row] = rowMajorMatrix[row * size + col];
+    }
+  }
+  return colMajorMatrix as unknown as Matrix3;
+};
+
 /**
  * @worklet
  */

package/src/sksg/Elements.tsx

@@ -52,6 +52,7 @@ import type {
   MorphologyImageFilterProps,
   BlendProps,
   SkottieProps,
+  ImageFilterProps,
 } from "../dom/types";
 import type { SkiaProps } from "../renderer";
 
@@ -89,6 +90,7 @@ declare module "react" {
       skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
 
       // ImageFilters
+      skImageFilter: SkiaProps<ImageFilterProps>;
       skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
       skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
       skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;

package/src/sksg/Node.ts

@@ -34,6 +34,7 @@ export const isPathEffect = (type: NodeType) => {
 export const isImageFilter = (type: NodeType) => {
   "worklet";
   return (
+    type === NodeType.ImageFilter ||
     type === NodeType.OffsetImageFilter ||
     type === NodeType.DisplacementMapImageFilter ||
     type === NodeType.BlurImageFilter ||

package/src/sksg/Recorder/Player.ts

@@ -67,14 +67,14 @@ function play(ctx: DrawingContext, _command: Command) {
     if (command.props.paint) {
       ctx.paints.push(command.props.paint);
     } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const { standalone } = command as any;
       ctx.savePaint();
-      setPaintProperties(
-        ctx.Skia,
-        ctx,
-        command.props,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (command as any).standalone
-      );
+      if (standalone) {
+        const freshPaint = ctx.Skia.Paint();
+        ctx.paint.assign(freshPaint);
+      }
+      setPaintProperties(ctx.Skia, ctx, command.props, standalone);
     }
   } else if (isCommand(command, CommandType.RestorePaint)) {
     ctx.restorePaint();

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

@@ -5,6 +5,7 @@ import type {
   BlurMaskFilterProps,
   DisplacementMapImageFilterProps,
   DropShadowImageFilterProps,
+  ImageFilterProps,
   MorphologyImageFilterProps,
   OffsetImageFilterProps,
   RuntimeShaderImageFilterProps,
@@ -176,6 +177,12 @@ const declareRuntimeShaderImageFilter = (
   ctx.imageFilters.push(imgf);
 };
 
+const declareImageFilter = (ctx: DrawingContext, props: ImageFilterProps) => {
+  "worklet";
+  const { filter } = props;
+  ctx.imageFilters.push(filter);
+};
+
 export const composeImageFilters = (ctx: DrawingContext) => {
   "worklet";
   if (ctx.imageFilters.length > 1) {
@@ -207,6 +214,7 @@ export const isPushImageFilter = (
 };
 
 type Props = {
+  [NodeType.ImageFilter]: ImageFilterProps;
   [NodeType.OffsetImageFilter]: OffsetImageFilterProps;
   [NodeType.DisplacementMapImageFilter]: DisplacementMapImageFilterProps;
   [NodeType.BlurImageFilter]: BlurImageFilterProps;
@@ -235,7 +243,9 @@ export const pushImageFilter = (
   command: Command<CommandType.PushImageFilter>
 ) => {
   "worklet";
-  if (isImageFilter(command, NodeType.BlurImageFilter)) {
+  if (isImageFilter(command, NodeType.ImageFilter)) {
+    declareImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.BlurImageFilter)) {
     declareBlurImageFilter(ctx, command.props);
   } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {
     declareMorphologyImageFilter(ctx, command.props);

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -4,6 +4,7 @@ import type { ViewProps } from "react-native";
 export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
+  colorSpace?: string;
 }
 
 // eslint-disable-next-line import/no-default-export