@shopify/react-native-skia 1.8.0 → 1.8.2

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

@@ -0,0 +1,50 @@
+import type { SharedValue } from "react-native-reanimated";
+import { NodeType } from "../../dom/types";
+import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PaintProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, BoxProps, BoxShadowProps } from "../../dom/types";
+import type { AnimatedProps } from "../../renderer";
+import type { Command } from "./Core";
+export declare class Recorder {
+    commands: Command[];
+    private processProps;
+    private add;
+    savePaint(props: AnimatedProps<PaintProps>): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
+    pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: AnimatedProps<CTMProps>): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: AnimatedProps<BoxProps>, shadows: {
+        props: BoxShadowProps;
+        animatedProps?: Record<string, SharedValue<unknown>>;
+    }[]): void;
+    drawImage(props: AnimatedProps<ImageProps>): void;
+    drawCircle(props: AnimatedProps<CircleProps>): void;
+    drawPoints(props: AnimatedProps<PointsProps>): void;
+    drawPath(props: AnimatedProps<PathProps>): void;
+    drawRect(props: AnimatedProps<RectProps>): void;
+    drawRRect(props: AnimatedProps<RoundedRectProps>): void;
+    drawOval(props: AnimatedProps<OvalProps>): void;
+    drawLine(props: AnimatedProps<LineProps>): void;
+    drawPatch(props: AnimatedProps<PatchProps>): void;
+    drawVertices(props: AnimatedProps<VerticesProps>): void;
+    drawDiffRect(props: AnimatedProps<DiffRectProps>): void;
+    drawText(props: AnimatedProps<TextProps>): void;
+    drawTextPath(props: AnimatedProps<TextPathProps>): void;
+    drawTextBlob(props: AnimatedProps<TextBlobProps>): void;
+    drawGlyphs(props: AnimatedProps<GlyphsProps>): void;
+    drawPicture(props: AnimatedProps<PictureProps>): void;
+    drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
+    drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+    drawAtlas(props: AnimatedProps<AtlasProps>): void;
+}

package/lib/typescript/src/sksg/Recorder/Recording.d.ts

@@ -0,0 +1,7 @@
+import type { SkPaint } from "../../skia/types";
+import type { Command } from "./Core";
+export interface Recording {
+    commands: Command[];
+    paintPool: SkPaint[];
+}
+export declare const createRecording: (commands: Command[]) => Recording;

package/lib/typescript/src/sksg/Recorder/Visitor.d.ts

@@ -0,0 +1,5 @@
+import type { DrawingNodeProps } from "../../dom/types";
+import type { Node } from "../Node";
+import type { Recorder } from "./Recorder";
+export declare const processPaint: ({ opacity, color, strokeWidth, blendMode, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, paint: paintRef, }: DrawingNodeProps) => DrawingNodeProps | null;
+export declare const visit: (recorder: Recorder, root: Node[]) => void;

package/lib/typescript/src/sksg/Recorder/commands/Box.d.ts

@@ -0,0 +1,13 @@
+import type { BoxProps, BoxShadowProps } from "../../../dom/types";
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+interface BoxCommand extends Command<CommandType.DrawBox> {
+    props: BoxProps;
+    shadows: {
+        props: BoxShadowProps;
+    }[];
+}
+export declare const isBoxCommand: (command: Command) => command is BoxCommand;
+export declare const drawBox: (ctx: DrawingContext, command: BoxCommand) => void;
+export {};

package/lib/typescript/src/sksg/Recorder/commands/CTM.d.ts

@@ -0,0 +1,3 @@
+import type { CTMProps } from "../../../dom/types";
+import type { DrawingContext } from "../DrawingContext";
+export declare const saveCTM: (ctx: DrawingContext, props: CTMProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/ColorFilters.d.ts

@@ -0,0 +1,6 @@
+import { CommandType } from "../Core";
+import type { Command } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushColorFilter: (command: Command) => command is Command<CommandType.PushColorFilter>;
+export declare const composeColorFilters: (ctx: DrawingContext) => void;
+export declare const pushColorFilter: (ctx: DrawingContext, command: Command<CommandType.PushColorFilter>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Drawing.d.ts

@@ -0,0 +1,24 @@
+import type { AtlasProps, BoxProps, CircleProps, DiffRectProps, DrawingNodeProps, GlyphsProps, ImageProps, ImageSVGProps, LineProps, OvalProps, ParagraphProps, PatchProps, PathProps, PictureProps, PointsProps, RectProps, RoundedRectProps, TextBlobProps, TextPathProps, TextProps, VerticesProps } from "../../../dom/types";
+import type { Node } from "../../Node";
+import type { DrawingContext } from "../DrawingContext";
+export declare const drawLine: (ctx: DrawingContext, props: LineProps) => void;
+export declare const drawOval: (ctx: DrawingContext, props: OvalProps) => void;
+export declare const drawBox: (ctx: DrawingContext, props: BoxProps, children: Node<any>[]) => void;
+export declare const drawImage: (ctx: DrawingContext, props: ImageProps) => void;
+export declare const drawPoints: (ctx: DrawingContext, props: PointsProps) => void;
+export declare const drawVertices: (ctx: DrawingContext, props: VerticesProps) => void;
+export declare const drawDiffRect: (ctx: DrawingContext, props: DiffRectProps) => void;
+export declare const drawTextPath: (ctx: DrawingContext, props: TextPathProps) => void;
+export declare const drawText: (ctx: DrawingContext, props: TextProps) => void;
+export declare const drawPatch: (ctx: DrawingContext, props: PatchProps) => void;
+export declare const drawPath: (ctx: DrawingContext, props: PathProps) => void;
+export declare const drawRect: (ctx: DrawingContext, props: RectProps) => void;
+export declare const drawRRect: (ctx: DrawingContext, props: RoundedRectProps) => void;
+export declare const drawTextBlob: (ctx: DrawingContext, props: TextBlobProps) => void;
+export declare const drawGlyphs: (ctx: DrawingContext, props: GlyphsProps) => void;
+export declare const drawImageSVG: (ctx: DrawingContext, props: ImageSVGProps) => void;
+export declare const drawParagraph: (ctx: DrawingContext, props: ParagraphProps) => void;
+export declare const drawPicture: (ctx: DrawingContext, props: PictureProps) => void;
+export declare const drawAtlas: (ctx: DrawingContext, props: AtlasProps) => void;
+export declare const drawCircle: (ctx: DrawingContext, props: CircleProps) => void;
+export declare const drawFill: (ctx: DrawingContext, _props: DrawingNodeProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/ImageFilters.d.ts

@@ -0,0 +1,12 @@
+import type { BlurMaskFilterProps } from "../../../dom/types";
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare enum MorphologyOperator {
+    Erode = 0,
+    Dilate = 1
+}
+export declare const composeImageFilters: (ctx: DrawingContext) => void;
+export declare const setBlurMaskFilter: (ctx: DrawingContext, props: BlurMaskFilterProps) => void;
+export declare const isPushImageFilter: (command: Command) => command is Command<CommandType.PushImageFilter>;
+export declare const pushImageFilter: (ctx: DrawingContext, command: Command<CommandType.PushImageFilter>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Paint.d.ts

@@ -0,0 +1,4 @@
+import type { PaintProps } from "../../../dom/types";
+import type { SkPaint, Skia } from "../../../skia/types";
+export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => Float32Array;
+export declare const setPaintProperties: (Skia: Skia, paint: SkPaint, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/PathEffects.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushPathEffect: (command: Command) => command is Command<CommandType.PushPathEffect>;
+export declare const composePathEffects: (ctx: DrawingContext) => void;
+export declare const pushPathEffect: (ctx: DrawingContext, command: Command<CommandType.PushPathEffect>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Shaders.d.ts

@@ -0,0 +1,5 @@
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushShader: (command: Command) => command is Command<CommandType.PushShader>;
+export declare const pushShader: (ctx: DrawingContext, command: Command<CommandType.PushShader>) => void;

package/lib/typescript/src/sksg/{nodes/utils.d.ts → utils.d.ts}

@@ -1,3 +1,6 @@
 import type { SharedValue } from "react-native-reanimated";
 export declare const isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;
 export declare const materialize: <T extends object>(props: T) => T;
+type Composer<T> = (outer: T, inner: T) => T;
+export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;
+export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/dom/types/Common.ts

@@ -70,6 +70,12 @@ export interface TransformProps {
   matrix?: InputMatrix;
 }
 
+export interface CTMProps extends TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: SkPaint | boolean;
+}
+
 export interface PaintProps extends ChildrenProps {
   color?: Color;
   strokeWidth?: number;
@@ -83,8 +89,4 @@ export interface PaintProps extends ChildrenProps {
   dither?: boolean;
 }
 
-export interface GroupProps extends PaintProps, TransformProps {
-  clip?: ClipDef;
-  invertClip?: boolean;
-  layer?: SkPaint | boolean;
-}
+export interface GroupProps extends PaintProps, CTMProps {}

package/src/dom/types/ImageFilters.ts

@@ -24,8 +24,9 @@ export interface RuntimeShaderImageFilterProps extends ChildrenProps {
   uniforms?: Uniforms;
 }
 
+// TODO: delete
 export interface BlendImageFilterProps extends ChildrenProps {
-  mode: BlendMode;
+  mode: SkEnum<typeof BlendMode>;
 }
 
 export interface MorphologyImageFilterProps extends ChildrenProps {

package/src/dom/types/Node.ts

@@ -1,6 +1,5 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "../../sksg/DeclarationContext";
 
 export interface Node<P> {
   type: NodeType;
@@ -18,9 +17,6 @@ export interface Node<P> {
 export type Invalidate = () => void;
 
 export interface DeclarationNode<P> extends Node<P> {
-  //declarationType: DeclarationType;
-  decorate(ctx: DeclarationContext): void;
-
   setInvalidate(invalidate: Invalidate): void;
 }
 

package/src/external/reanimated/index.ts

@@ -1,5 +1,4 @@
 export * from "./useAnimatedImageValue";
-export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";

package/src/external/reanimated/renderHelpers.ts

@@ -6,7 +6,6 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-export let HAS_REANIMATED = false;
 export let HAS_REANIMATED_3 = false;
 try {
   // This logic is convoluted but necessary
@@ -16,7 +15,6 @@ try {
   const reanimatedVersion =
     require("react-native-reanimated/package.json").version;
   require("react-native-reanimated");
-  HAS_REANIMATED = !!reanimatedVersion;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
@@ -24,13 +22,13 @@ try {
     HAS_REANIMATED_3 = true;
   }
 } catch (e) {
-  HAS_REANIMATED = false;
+  // do nothing
 }
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
 export const unbindReanimatedNode = (node: Node<unknown>) => {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const previousMapperId = _bindings.get(node);
@@ -40,7 +38,7 @@ export const unbindReanimatedNode = (node: Node<unknown>) => {
 };
 
 export function extractReanimatedProps(props: AnimatedProps<any>) {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return [props, {}];
   }
   const reanimatedProps = {} as AnimatedProps<any>;
@@ -60,50 +58,12 @@ export function extractReanimatedProps(props: AnimatedProps<any>) {
   return [otherProps, reanimatedProps];
 }
 
-function bindReanimatedProps2(
-  container: Container,
-  node: Node<any>,
-  reanimatedProps: AnimatedProps<any>
-) {
-  const sharedValues = Object.values(reanimatedProps);
-  const previousMapperId = _bindings.get(node);
-  if (previousMapperId !== undefined) {
-    Rea.stopMapper(previousMapperId as number);
-  }
-  if (sharedValues.length > 0) {
-    const viewId = container.getNativeId();
-    const { SkiaViewApi } = global;
-    const updateProps = () => {
-      for (const propName in reanimatedProps) {
-        node && node.setProp(propName, reanimatedProps[propName].value);
-      }
-      // On React Native we use the SkiaViewApi to redraw because it can
-      // run on the worklet thread (container.redraw can't)
-      // if SkiaViewApi is undefined, we are on web and container.redraw()
-      // can safely be invoked
-      if (SkiaViewApi) {
-        SkiaViewApi.requestRedraw(viewId);
-      } else {
-        container.redraw();
-      }
-    };
-    const mapperId = Rea.startMapper(() => {
-      "worklet";
-      Rea.runOnJS(updateProps)();
-    }, sharedValues);
-    _bindings.set(node, mapperId);
-  }
-}
-
 export function bindReanimatedProps(
   container: Container,
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
-  if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-    return bindReanimatedProps2(container, node, reanimatedProps);
-  }
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const sharedValues = Object.values(reanimatedProps);

package/src/external/reanimated/useAnimatedImageValue.ts

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import type { FrameInfo, SharedValue } from "react-native-reanimated";
 
 import { useAnimatedImage } from "../../skia/core/AnimatedImage";
@@ -16,14 +15,10 @@ export const useAnimatedImageValue = (
   const isPaused = paused ?? defaultPaused;
   const currentFrame = Rea.useSharedValue<null | SkImage>(null);
   const lastTimestamp = Rea.useSharedValue(-1);
-  const animatedImage = useAnimatedImage(
-    source,
-    (err) => {
-      console.error(err);
-      throw new Error(`Could not load animated image - got '${err.message}'`);
-    },
-    false
-  );
+  const animatedImage = useAnimatedImage(source, (err) => {
+    console.error(err);
+    throw new Error(`Could not load animated image - got '${err.message}'`);
+  });
   const frameDuration =
     animatedImage?.currentFrameDuration() || DEFAULT_FRAME_DURATION;
 
@@ -53,11 +48,5 @@ export const useAnimatedImageValue = (
     // Update the last timestamp
     lastTimestamp.value = timestamp;
   });
-  useEffect(() => {
-    return () => {
-      animatedImage?.dispose();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
   return currentFrame;
 };

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

@@ -14,6 +14,7 @@ import {
 import { docPath, checkImage, processResult } from "../../../__tests__/setup";
 import { setupSkia } from "../../../skia/__tests__/setup";
 import { fitRects } from "../../../dom/nodes";
+import { BlendMode } from "../../../skia/types";
 
 const blackAndWhite = [
   0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
@@ -57,6 +58,20 @@ describe("Color Filters", () => {
     );
     checkImage(img, docPath("color-filters/color-blend.png"));
   });
+  it("should build the reference result for should use composition", async () => {
+    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
+    const paint = Skia.Paint();
+    const outer = Skia.ColorFilter.MakeSRGBToLinearGamma();
+    const inner = Skia.ColorFilter.MakeBlend(
+      Skia.Color("lightblue"),
+      BlendMode.SrcIn
+    );
+    paint.setColorFilter(Skia.ColorFilter.MakeCompose(outer, inner));
+    const r = (surface.width * 3) / 2;
+    canvas.drawCircle(r, r, r, paint);
+    canvas.drawCircle(r * 2, r, r, paint);
+    processResult(ckSurface, docPath("color-filters/composition.png"));
+  });
   it("should use composition", async () => {
     const { width } = surface;
     const r = width / 2;

package/src/renderer/__tests__/e2e/Composition/ColorFilterComposition.spec.tsx

@@ -7,12 +7,20 @@ import {
   height as wHeight,
 } from "../../setup";
 import {
+  BlendColor,
+  Circle,
   ColorMatrix,
+  Group,
   Image,
   Lerp,
   LinearToSRGBGamma,
+  SRGBToLinearGamma,
 } from "../../../components";
-import { checkImage, processResult } from "../../../../__tests__/setup";
+import {
+  checkImage,
+  docPath,
+  processResult,
+} from "../../../../__tests__/setup";
 import { setupSkia } from "../../../../skia/__tests__/setup";
 import { fitRects } from "../../../../dom/nodes";
 
@@ -60,7 +68,6 @@ describe("Color Filter Composition", () => {
       "snapshots/color-filter/color-filter-composition.png"
     );
   });
-  // TODO: a bug should be reported here
   it("should apply a color matrix to an image", async () => {
     const { oslo } = images;
     const { width, height } = surface;
@@ -78,4 +85,18 @@ describe("Color Filter Composition", () => {
     );
     checkImage(image, "snapshots/color-filter/color-filter-composition.png");
   });
+  it("should use composition", async () => {
+    const { width } = surface;
+    const r = width / 2;
+    const img = await surface.draw(
+      <Group>
+        <SRGBToLinearGamma>
+          <BlendColor color="lightblue" mode="srcIn" />
+        </SRGBToLinearGamma>
+        <Circle cx={r} cy={r} r={r} />
+        <Circle cx={2 * r} cy={r} r={r} color="red" />
+      </Group>
+    );
+    checkImage(img, docPath("color-filters/composition.png"));
+  });
 });

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

@@ -6,8 +6,15 @@ import {
   itRunsNodeOnly,
   itRunsE2eOnly,
   CI,
+  processResult,
 } from "../../../__tests__/setup";
-import { fonts, images, surface } from "../setup";
+import {
+  fonts,
+  images,
+  surface,
+  width as wWidth,
+  height as wHeight,
+} from "../setup";
 import {
   Fill,
   Image,
@@ -20,6 +27,51 @@ import {
   DisplacementMap,
   Turbulence,
 } from "../../components";
+import { setupSkia } from "../../../skia/__tests__/setup";
+import {
+  BlendMode,
+  TileMode,
+  type SkColor,
+  type Skia,
+  type SkImageFilter,
+} from "../../../skia/types";
+
+const Black = Float32Array.of(0, 0, 0, 1);
+
+const MakeInnerShadow = (
+  Skia: Skia,
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  "worklet";
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
+  }
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
+};
 
 describe("Test Image Filters", () => {
   itRunsNodeOnly(
@@ -191,6 +243,41 @@ describe("Test Image Filters", () => {
       threshold: 0.05,
     });
   });
+  it("should build reference result outer and inner shadows on text", () => {
+    const { surface: ckSurface, canvas, Skia } = setupSkia(wWidth, wHeight);
+    const path = Skia.Path.MakeFromSVGString(
+      // eslint-disable-next-line max-len
+      "M62.477 2.273V75h-8.522L14.324 17.898h-.71V75H4.807V2.273h8.522l39.773 57.244h.71V2.273h8.665ZM78.963 75V20.454h8.381V75h-8.38Zm4.262-63.636c-1.634 0-3.042-.557-4.226-1.67-1.16-1.112-1.74-2.45-1.74-4.012 0-1.563.58-2.9 1.74-4.013C80.183.556 81.59 0 83.225 0c1.633 0 3.03.556 4.19 1.669 1.184 1.113 1.776 2.45 1.776 4.013 0 1.562-.592 2.9-1.776 4.013-1.16 1.112-2.557 1.669-4.19 1.669ZM124.853 76.136c-5.114 0-9.517-1.207-13.21-3.622-3.693-2.415-6.534-5.74-8.523-9.978-1.989-4.238-2.983-9.08-2.983-14.525 0-5.54 1.018-10.428 3.054-14.666 2.06-4.261 4.924-7.587 8.594-9.979 3.693-2.414 8.002-3.622 12.926-3.622 3.835 0 7.292.71 10.369 2.131 3.078 1.42 5.599 3.41 7.564 5.966 1.965 2.557 3.184 5.54 3.658 8.949h-8.381c-.639-2.486-2.059-4.688-4.261-6.605-2.178-1.942-5.114-2.912-8.807-2.912-3.267 0-6.132.852-8.594 2.556-2.438 1.681-4.344 4.06-5.717 7.138-1.35 3.054-2.024 6.641-2.024 10.76 0 4.214.663 7.884 1.988 11.009 1.35 3.125 3.244 5.551 5.682 7.28 2.462 1.728 5.351 2.592 8.665 2.592 2.178 0 4.155-.379 5.93-1.136a12.23 12.23 0 0 0 4.51-3.267c1.231-1.42 2.107-3.125 2.628-5.114h8.381c-.474 3.22-1.646 6.12-3.516 8.7-1.846 2.557-4.297 4.593-7.351 6.108-3.03 1.492-6.557 2.237-10.582 2.237ZM181.423 76.136c-5.256 0-9.79-1.16-13.601-3.48-3.788-2.344-6.712-5.61-8.772-9.8-2.036-4.215-3.054-9.116-3.054-14.703s1.018-10.511 3.054-14.772c2.06-4.285 4.925-7.623 8.594-10.015 3.693-2.414 8.002-3.622 12.926-3.622 2.841 0 5.647.474 8.417 1.42 2.769.948 5.291 2.487 7.563 4.617 2.273 2.107 4.084 4.9 5.434 8.38 1.349 3.481 2.024 7.766 2.024 12.856v3.551h-42.046v-7.244h33.523c0-3.078-.615-5.824-1.847-8.239-1.207-2.415-2.935-4.32-5.184-5.717-2.226-1.397-4.853-2.095-7.884-2.095-3.338 0-6.226.828-8.664 2.486a16.35 16.35 0 0 0-5.576 6.392c-1.302 2.627-1.953 5.445-1.953 8.451v4.83c0 4.12.71 7.611 2.131 10.476 1.444 2.84 3.444 5.007 6.001 6.498 2.557 1.468 5.528 2.202 8.914 2.202 2.201 0 4.19-.308 5.965-.923 1.8-.64 3.35-1.587 4.652-2.841 1.303-1.279 2.309-2.865 3.019-4.759l8.097 2.273a17.965 17.965 0 0 1-4.297 7.244c-2.013 2.06-4.498 3.67-7.458 4.83-2.959 1.136-6.285 1.704-9.978 1.704ZM32.648 123.273h8.806v51.988c0 4.641-.852 8.582-2.556 11.826-1.705 3.243-4.108 5.705-7.21 7.386-3.1 1.681-6.758 2.521-10.972 2.521-3.977 0-7.517-.722-10.618-2.166-3.101-1.468-5.54-3.551-7.315-6.25-1.776-2.699-2.664-5.907-2.664-9.623h8.665c0 2.059.51 3.858 1.527 5.397 1.042 1.515 2.462 2.699 4.261 3.551 1.8.853 3.848 1.279 6.144 1.279 2.533 0 4.687-.533 6.463-1.598 1.776-1.066 3.125-2.628 4.048-4.688.947-2.083 1.42-4.628 1.42-7.635v-51.988ZM80.126 197.136c-4.924 0-9.244-1.172-12.961-3.515-3.693-2.344-6.582-5.623-8.665-9.837-2.06-4.214-3.09-9.138-3.09-14.773 0-5.681 1.03-10.641 3.09-14.879 2.083-4.238 4.972-7.528 8.665-9.872 3.717-2.344 8.037-3.516 12.961-3.516 4.925 0 9.233 1.172 12.927 3.516 3.716 2.344 6.605 5.634 8.664 9.872 2.084 4.238 3.125 9.198 3.125 14.879 0 5.635-1.041 10.559-3.125 14.773-2.06 4.214-4.948 7.493-8.664 9.837-3.694 2.343-8.002 3.515-12.927 3.515Zm0-7.528c3.741 0 6.819-.959 9.233-2.876 2.415-1.918 4.203-4.439 5.363-7.564 1.16-3.125 1.74-6.511 1.74-10.157 0-3.645-.58-7.043-1.74-10.191-1.16-3.149-2.948-5.694-5.363-7.635-2.414-1.942-5.492-2.912-9.233-2.912-3.74 0-6.818.97-9.233 2.912-2.414 1.941-4.202 4.486-5.362 7.635-1.16 3.148-1.74 6.546-1.74 10.191 0 3.646.58 7.032 1.74 10.157 1.16 3.125 2.948 5.646 5.362 7.564 2.415 1.917 5.493 2.876 9.233 2.876ZM118.772 196v-72.727h8.38v26.846h.711c.615-.947 1.467-2.154 2.556-3.622 1.113-1.491 2.699-2.817 4.759-3.977 2.083-1.184 4.9-1.776 8.452-1.776 4.592 0 8.641 1.149 12.145 3.445 3.503 2.296 6.238 5.552 8.203 9.766 1.965 4.214 2.947 9.185 2.947 14.914 0 5.777-.982 10.784-2.947 15.022-1.965 4.214-4.688 7.481-8.168 9.801-3.48 2.296-7.493 3.444-12.038 3.444-3.504 0-6.31-.58-8.417-1.74-2.107-1.183-3.728-2.521-4.865-4.012-1.136-1.516-2.012-2.77-2.627-3.765h-.995V196h-8.096Zm8.238-27.273c0 4.12.604 7.754 1.811 10.902 1.208 3.125 2.971 5.576 5.292 7.351 2.32 1.752 5.161 2.628 8.522 2.628 3.504 0 6.428-.923 8.772-2.77 2.367-1.87 4.143-4.38 5.326-7.528 1.208-3.173 1.811-6.7 1.811-10.583 0-3.835-.591-7.291-1.775-10.369-1.16-3.101-2.924-5.552-5.291-7.351-2.344-1.823-5.292-2.734-8.843-2.734-3.409 0-6.273.864-8.593 2.592-2.321 1.705-4.072 4.096-5.256 7.173-1.184 3.054-1.776 6.617-1.776 10.689ZM190.824 123.273l-.71 52.272h-8.239l-.71-52.272h9.659Zm-4.829 73.295c-1.752 0-3.256-.627-4.51-1.882-1.255-1.255-1.882-2.758-1.882-4.51 0-1.752.627-3.255 1.882-4.51 1.254-1.255 2.758-1.882 4.51-1.882 1.752 0 3.255.627 4.51 1.882 1.254 1.255 1.882 2.758 1.882 4.51a6.02 6.02 0 0 1-.888 3.196 6.634 6.634 0 0 1-2.308 2.344c-.947.568-2.013.852-3.196.852Z"
+    )!;
+
+    const paint = Skia.Paint();
+    paint.setColor(Skia.Color("#add8e6"));
+    canvas.drawPaint(paint);
+    paint.setColor(Skia.Color("red"));
+    const img1 = MakeInnerShadow(
+      Skia,
+      false,
+      0,
+      4,
+      1,
+      1,
+      Skia.Color("#00FF00"),
+      null
+    );
+    const img2 = Skia.ImageFilter.MakeDropShadow(
+      0,
+      4,
+      0,
+      0,
+      Skia.Color("#0000ff"),
+      null
+    );
+    paint.setImageFilter(Skia.ImageFilter.MakeCompose(img1, img2));
+    canvas.scale(3, 3);
+    canvas.drawPath(path, paint);
+    canvas.restore();
+    processResult(ckSurface, "snapshots/image-filter/test-shadow.png");
+  });
   it("should show outer and inner shadows on text", async () => {
     const path =
       // eslint-disable-next-line max-len
@@ -205,7 +292,9 @@ describe("Test Image Filters", () => {
         </Path>
       </>
     );
-    checkImage(img, "snapshots/image-filter/test-shadow.png");
+    checkImage(img, "snapshots/image-filter/test-shadow.png", {
+      maxPixelDiff: 1500,
+    });
   });
   itRunsE2eOnly("use the displacement map as documented", async () => {
     const { oslo } = images;

package/src/renderer/__tests__/setup.tsx

@@ -14,7 +14,7 @@ import { isPath } from "../../skia/types";
 import { E2E } from "../../__tests__/setup";
 import { LoadSkiaWeb } from "../../web/LoadSkiaWeb";
 import { SkiaSGRoot } from "../../sksg/Reconciler";
-import type { Node } from "../../sksg/nodes";
+import type { Node } from "../../sksg/Node";
 
 import { SkiaObject } from "./e2e/setup";
 

package/src/skia/core/AnimatedImage.ts

@@ -12,6 +12,5 @@ const animatedImgFactory = Skia.AnimatedImage.MakeAnimatedImageFromEncoded.bind(
  * */
 export const useAnimatedImage = (
   source: DataSourceParam,
-  onError?: (err: Error) => void,
-  managed = true
-) => useRawData(source, animatedImgFactory, onError, managed);
+  onError?: (err: Error) => void
+) => useRawData(source, animatedImgFactory, onError);

package/src/skia/core/Data.ts

@@ -40,8 +40,7 @@ export const loadData = <T>(
 
 const useLoading = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
-  loader: () => Promise<T | null>,
-  manage = true
+  loader: () => Promise<T | null>
 ) => {
   const mounted = useRef(false);
   const [data, setData] = useState<T | null>(null);
@@ -55,9 +54,6 @@ const useLoading = <T extends SkJSIInstance<string>>(
       }
     });
     return () => {
-      if (manage) {
-        dataRef.current?.dispose();
-      }
       mounted.current = false;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -84,7 +80,6 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
     });
 
     return () => {
-      dataRef.current?.forEach((instance) => instance?.dispose());
       mounted.current = false;
     };
 
@@ -97,9 +92,8 @@ export const useCollectionLoading = <T extends SkJSIInstance<string>>(
 export const useRawData = <T extends SkJSIInstance<string>>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
-  onError?: (err: Error) => void,
-  manage = true
-) => useLoading(source, () => loadData<T>(source, factory, onError), manage);
+  onError?: (err: Error) => void
+) => useLoading(source, () => loadData<T>(source, factory, onError));
 
 const identity = (data: SkData) => data;
 

package/src/skia/types/Paint/Paint.ts

@@ -45,6 +45,8 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    */
   reset(): void;
 
+  assign(paint: SkPaint): void;
+
   /**
    * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
    * (sRGB gamut, and encoded with the sRGB transfer function).

package/src/skia/web/JsiSkPaint.ts

@@ -34,6 +34,10 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     return new JsiSkPaint(this.CanvasKit, this.ref.copy());
   }
 
+  assign(paint: JsiSkPaint) {
+    this.ref = paint.ref.copy();
+  }
+
   reset() {
     this.ref = new this.CanvasKit.Paint();
   }