@shopify/react-native-skia 0.1.171 → 0.1.173

package/src/dom/nodes/paint/ImageFilters.ts

@@ -8,6 +8,7 @@ import {
 import type {
   BlendImageFilterProps,
   BlurImageFilterProps,
+  DeclarationContext,
   DisplacementMapImageFilterProps,
   DropShadowImageFilterProps,
   MorphologyImageFilterProps,
@@ -55,37 +56,31 @@ const MakeInnerShadow = (
   );
 };
 
-export abstract class ImageFilterDeclaration<
-  P,
-  Nullable extends null | never = never
-> extends JsiDeclarationNode<P, SkImageFilter, Nullable> {
+export abstract class ImageFilterDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
     super(ctx, DeclarationType.ImageFilter, type, props);
   }
 
-  getOptionalChildInstance(index: number) {
-    const child = this._children[index];
-    if (!child) {
-      return null;
-    }
-    return this.getMandatoryChildInstance(index);
-  }
-
-  getMandatoryChildInstance(index: number) {
-    const child = this._children[index];
-    if (child instanceof JsiDeclarationNode) {
-      if (child.isImageFilter()) {
-        return child.materialize();
-      } else if (child.isShader()) {
-        return this.Skia.ImageFilter.MakeShader(child.materialize(), null);
-      } else if (child.declarationType === DeclarationType.ColorFilter) {
-        return this.Skia.ImageFilter.MakeColorFilter(child.materialize(), null);
-      } else {
-        throw new Error(`Found invalid child ${child.type} in ${this.type}`);
-      }
-    } else {
-      throw new Error(`Found invalid child ${child.type} in ${this.type}`);
+  protected input(ctx: DeclarationContext) {
+    return ctx.imageFilters.pop() ?? null;
+  }
+
+  protected composeAndPush(ctx: DeclarationContext, imgf1: SkImageFilter) {
+    ctx.save();
+    this.decorateChildren(ctx);
+    let imgf2 = ctx.imageFilters.popAllAsOne();
+    const cf = ctx.colorFilters.popAllAsOne();
+    ctx.restore();
+    if (cf) {
+      imgf2 = this.Skia.ImageFilter.MakeCompose(
+        imgf2 ?? null,
+        this.Skia.ImageFilter.MakeColorFilter(cf, null)
+      );
     }
+    const imgf = imgf2
+      ? this.Skia.ImageFilter.MakeCompose(imgf1, imgf2)
+      : imgf1;
+    ctx.imageFilters.push(imgf);
   }
 }
 
@@ -94,13 +89,11 @@ export class OffsetImageFilterNode extends ImageFilterDeclaration<OffsetImageFil
     super(ctx, NodeType.OffsetImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
+    this.decorateChildren(ctx);
     const { x, y } = this.props;
-    return this.Skia.ImageFilter.MakeOffset(
-      x,
-      y,
-      this.getOptionalChildInstance(0)
-    );
+    const imgf = this.Skia.ImageFilter.MakeOffset(x, y, null);
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -109,15 +102,16 @@ export class DisplacementMapImageFilterNode extends ImageFilterDeclaration<Displ
     super(ctx, NodeType.DisplacementMapImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { channelX, channelY, scale } = this.props;
-    return this.Skia.ImageFilter.MakeDisplacementMap(
+    const imgf = this.Skia.ImageFilter.MakeDisplacementMap(
       ColorChannel[enumKey(channelX)],
       ColorChannel[enumKey(channelY)],
       scale,
-      this.getMandatoryChildInstance(0),
-      this.getOptionalChildInstance(1)
+      ctx.imageFilters.pop()!,
+      this.input(ctx)
     );
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -126,15 +120,16 @@ export class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterP
     super(ctx, NodeType.BlurImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { mode, blur } = this.props;
     const sigma = processRadius(this.Skia, blur);
-    return this.Skia.ImageFilter.MakeBlur(
+    const imgf = this.Skia.ImageFilter.MakeBlur(
       sigma.x,
       sigma.y,
       TileMode[enumKey(mode)],
-      this.getOptionalChildInstance(0)
+      this.input(ctx)
     );
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -143,10 +138,9 @@ export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadow
     super(ctx, NodeType.DropShadowImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { dx, dy, blur, shadowOnly, color: cl, inner } = this.props;
     const color = this.Skia.Color(cl);
-    const input = this.getOptionalChildInstance(0);
     let factory;
     if (inner) {
       factory = MakeInnerShadow.bind(null, this.Skia, shadowOnly);
@@ -155,7 +149,8 @@ export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadow
         ? this.Skia.ImageFilter.MakeDropShadowOnly.bind(this.Skia.ImageFilter)
         : this.Skia.ImageFilter.MakeDropShadow.bind(this.Skia.ImageFilter);
     }
-    return factory(dx, dy, blur, blur, color, input);
+    const imgf = factory(dx, dy, blur, blur, color, this.input(ctx));
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -169,14 +164,16 @@ export class MorphologyImageFilterNode extends ImageFilterDeclaration<Morphology
     super(ctx, NodeType.MorphologyImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { operator } = this.props;
     const r = processRadius(this.Skia, this.props.radius);
-    const input = this.getOptionalChildInstance(0);
+    let imgf;
     if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {
-      return this.Skia.ImageFilter.MakeErode(r.x, r.y, input);
+      imgf = this.Skia.ImageFilter.MakeErode(r.x, r.y, this.input(ctx));
+    } else {
+      imgf = this.Skia.ImageFilter.MakeDilate(r.x, r.y, this.input(ctx));
     }
-    return this.Skia.ImageFilter.MakeDilate(r.x, r.y, input);
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -185,11 +182,15 @@ export class BlendImageFilterNode extends ImageFilterDeclaration<BlendImageFilte
     super(ctx, NodeType.BlendImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { mode } = this.props;
-    const a = this.getMandatoryChildInstance(0);
-    const b = this.getMandatoryChildInstance(1);
-    return this.Skia.ImageFilter.MakeBlend(mode, a, b);
+    const a = ctx.imageFilters.pop();
+    const b = ctx.imageFilters.pop();
+    if (!a || !b) {
+      throw new Error("BlendImageFilter requires two image filters");
+    }
+    const imgf = this.Skia.ImageFilter.MakeBlend(mode, a, b);
+    this.composeAndPush(ctx, imgf);
   }
 }
 
@@ -198,13 +199,17 @@ export class RuntimeShaderImageFilterNode extends ImageFilterDeclaration<Runtime
     super(ctx, NodeType.RuntimeShaderImageFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { source, uniforms } = this.props;
     const rtb = this.Skia.RuntimeShaderBuilder(source);
     if (uniforms) {
       processUniforms(source, uniforms, rtb);
     }
-    const input = this.getOptionalChildInstance(0);
-    return this.Skia.ImageFilter.MakeRuntimeShader(rtb, null, input);
+    const imgf = this.Skia.ImageFilter.MakeRuntimeShader(
+      rtb,
+      null,
+      this.input(ctx)
+    );
+    this.composeAndPush(ctx, imgf);
   }
 }

package/src/dom/nodes/paint/MaskFilters.ts

@@ -1,25 +1,23 @@
-import type { SkMaskFilter } from "../../../skia/types";
 import { BlurStyle } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import type { BlurMaskFilterProps } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
 import { enumKey } from "../datatypes";
+import type { DeclarationContext } from "../../types/DeclarationContext";
 
-export class BlurMaskFilterNode extends JsiDeclarationNode<
-  BlurMaskFilterProps,
-  SkMaskFilter
-> {
+export class BlurMaskFilterNode extends JsiDeclarationNode<BlurMaskFilterProps> {
   constructor(ctx: NodeContext, props: BlurMaskFilterProps) {
     super(ctx, DeclarationType.MaskFilter, NodeType.BlurMaskFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { style, blur, respectCTM } = this.props;
-    return this.Skia.MaskFilter.MakeBlur(
+    const mf = this.Skia.MaskFilter.MakeBlur(
       BlurStyle[enumKey(style)],
       blur,
       respectCTM
     );
+    ctx.maskFilters.push(mf);
   }
 }

package/src/dom/nodes/paint/PathEffects.ts

@@ -7,71 +7,27 @@ import type {
   DashPathEffectProps,
   DiscretePathEffectProps,
   Line2DPathEffectProps,
-  Node,
   Path1DPathEffectProps,
   Path2DPathEffectProps,
 } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
 import { enumKey } from "../datatypes/Enum";
 import { processPath } from "../datatypes";
+import type { DeclarationContext } from "../../types/DeclarationContext";
+import { composeDeclarations } from "../../types/DeclarationContext";
 
-abstract class PathEffectDeclaration<
-  P,
-  Nullable extends null | never = never
-> extends JsiDeclarationNode<P, SkPathEffect, Nullable> {
+abstract class PathEffectDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
     super(ctx, DeclarationType.PathEffect, type, props);
   }
 
-  addChild(child: Node<unknown>) {
-    if (!(child instanceof PathEffectDeclaration)) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    super.addChild(child);
-  }
-
-  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
-    if (!(child instanceof PathEffectDeclaration)) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    super.insertChildBefore(child, before);
-  }
-
-  compose(pe: SkPathEffect) {
-    const children = this._children as PathEffectDeclaration<unknown>[];
-    if (this._children.length === 0) {
-      return pe;
-    } else {
-      return this.Skia.PathEffect.MakeCompose(
-        pe,
-        children.reduce<SkPathEffect | null>((acc, child) => {
-          if (acc === null) {
-            return child.materialize();
-          }
-          return this.Skia.PathEffect.MakeCompose(acc, child.materialize());
-        }, null) as SkPathEffect
-      );
-    }
-  }
-  getOptionalChildInstance(index: number) {
-    const child = this._children[index];
-    if (!child) {
-      return null;
-    }
-    return this.getMandatoryChildInstance(index);
-  }
-
-  getMandatoryChildInstance(index: number) {
-    const child = this._children[index];
-    if (child instanceof JsiDeclarationNode) {
-      if (child.isPathEffect()) {
-        return child.materialize();
-      } else {
-        throw new Error(`Found invalid child ${child.type} in ${this.type}`);
-      }
-    } else {
-      throw new Error(`Found invalid child ${child.type} in ${this.type}`);
-    }
+  protected composeAndPush(ctx: DeclarationContext, pe1: SkPathEffect) {
+    ctx.save();
+    this.decorateChildren(ctx);
+    const pe2 = ctx.pathEffects.popAllAsOne();
+    ctx.restore();
+    const pe = pe2 ? this.Skia.PathEffect.MakeCompose(pe1, pe2) : pe1;
+    ctx.pathEffects.push(pe);
   }
 }
 
@@ -80,29 +36,26 @@ export class DiscretePathEffectNode extends PathEffectDeclaration<DiscretePathEf
     super(ctx, NodeType.DiscretePathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { length, deviation, seed } = this.props;
     const pe = this.Skia.PathEffect.MakeDiscrete(length, deviation, seed);
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }
 
-export class Path2DPathEffectNode extends PathEffectDeclaration<
-  Path2DPathEffectProps,
-  null
-> {
+export class Path2DPathEffectNode extends PathEffectDeclaration<Path2DPathEffectProps> {
   constructor(ctx: NodeContext, props: Path2DPathEffectProps) {
     super(ctx, NodeType.Path2DPathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { matrix } = this.props;
     const path = processPath(this.Skia, this.props.path);
     const pe = this.Skia.PathEffect.MakePath2D(matrix, path);
     if (pe === null) {
-      return null;
+      throw new Error("Path2DPathEffectNode: invalid path");
     }
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }
 
@@ -111,28 +64,25 @@ export class DashPathEffectNode extends PathEffectDeclaration<DashPathEffectProp
     super(ctx, NodeType.DashPathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { intervals, phase } = this.props;
     const pe = this.Skia.PathEffect.MakeDash(intervals, phase);
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }
 
-export class CornerPathEffectNode extends PathEffectDeclaration<
-  CornerPathEffectProps,
-  null
-> {
+export class CornerPathEffectNode extends PathEffectDeclaration<CornerPathEffectProps> {
   constructor(ctx: NodeContext, props: CornerPathEffectProps) {
     super(ctx, NodeType.CornerPathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { r } = this.props;
     const pe = this.Skia.PathEffect.MakeCorner(r);
     if (pe === null) {
-      return null;
+      throw new Error("CornerPathEffectNode: couldn't create path effect");
     }
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }
 
@@ -141,41 +91,38 @@ export class SumPathEffectNode extends PathEffectDeclaration<null> {
     super(ctx, NodeType.SumPathEffect, null);
   }
 
-  materialize() {
-    return this.Skia.PathEffect.MakeSum(
-      this.getMandatoryChildInstance(0),
-      this.getMandatoryChildInstance(1)
+  decorate(ctx: DeclarationContext) {
+    this.decorateChildren(ctx);
+    const pes = ctx.pathEffects.popAll();
+    const pe = composeDeclarations(
+      pes,
+      this.Skia.PathEffect.MakeSum.bind(this.Skia.PathEffect)
     );
+    ctx.pathEffects.push(pe);
   }
 }
 
-export class Line2DPathEffectNode extends PathEffectDeclaration<
-  Line2DPathEffectProps,
-  null
-> {
+export class Line2DPathEffectNode extends PathEffectDeclaration<Line2DPathEffectProps> {
   constructor(ctx: NodeContext, props: Line2DPathEffectProps) {
     super(ctx, NodeType.Line2DPathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { width, matrix } = this.props;
     const pe = this.Skia.PathEffect.MakeLine2D(width, matrix);
     if (pe === null) {
-      return null;
+      throw new Error("Line2DPathEffectNode: could not create path effect");
     }
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }
 
-export class Path1DPathEffectNode extends PathEffectDeclaration<
-  Path1DPathEffectProps,
-  null
-> {
+export class Path1DPathEffectNode extends PathEffectDeclaration<Path1DPathEffectProps> {
   constructor(ctx: NodeContext, props: Path1DPathEffectProps) {
     super(ctx, NodeType.Path1DPathEffect, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { advance, phase, style } = this.props;
     const path = processPath(this.Skia, this.props.path);
     const pe = this.Skia.PathEffect.MakePath1D(
@@ -185,8 +132,8 @@ export class Path1DPathEffectNode extends PathEffectDeclaration<
       Path1DEffectStyle[enumKey(style)]
     );
     if (pe === null) {
-      return null;
+      throw new Error("Path1DPathEffectNode: could not create path effect");
     }
-    return this.compose(pe);
+    this.composeAndPush(ctx, pe);
   }
 }

package/src/dom/nodes/paint/Shaders.ts

@@ -4,11 +4,11 @@ import {
   MipmapMode,
   TileMode,
 } from "../../../skia/types";
-import type { SkShader } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import type {
   ColorProps,
+  DeclarationContext,
   FractalNoiseProps,
   ImageShaderProps,
   LinearGradientProps,
@@ -28,10 +28,7 @@ import {
   rect2rect,
 } from "../datatypes";
 
-export abstract class ShaderDeclaration<P> extends JsiDeclarationNode<
-  P,
-  SkShader
-> {
+export abstract class ShaderDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
     super(ctx, DeclarationType.Shader, type, props);
   }
@@ -42,20 +39,17 @@ export class ShaderNode extends ShaderDeclaration<ShaderProps> {
     super(ctx, NodeType.Shader, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
+    this.decorateChildren(ctx);
     const { source, uniforms, ...transform } = this.props;
     const m3 = this.Skia.Matrix();
     processTransformProps(m3, transform);
-    return source.makeShaderWithChildren(
+    const shader = source.makeShaderWithChildren(
       processUniforms(source, uniforms),
-      this.children()
-        .filter(
-          (child): child is JsiDeclarationNode<unknown, SkShader> =>
-            child instanceof JsiDeclarationNode && child.isShader()
-        )
-        .map((child) => child.materialize()),
+      ctx.shaders.popAll(),
       m3
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -64,7 +58,7 @@ export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
     super(ctx, NodeType.ImageShader, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = this.props;
     const rct = getRect(this.Skia, imageShaderProps);
     const m3 = this.Skia.Matrix();
@@ -81,13 +75,14 @@ export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
     const lm = this.Skia.Matrix();
     lm.concat(m3);
     processTransformProps(lm, imageShaderProps);
-    return image.makeShaderOptions(
+    const shader = image.makeShaderOptions(
       TileMode[enumKey(tx)],
       TileMode[enumKey(ty)],
       FilterMode[enumKey(fm)],
       MipmapMode[enumKey(mm)],
       lm
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -96,9 +91,10 @@ export class ColorNode extends ShaderDeclaration<ColorProps> {
     super(ctx, NodeType.ColorShader, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { color } = this.props;
-    return this.Skia.Shader.MakeColor(this.Skia.Color(color));
+    const shader = this.Skia.Shader.MakeColor(this.Skia.Color(color));
+    ctx.shaders.push(shader);
   }
 }
 
@@ -107,9 +103,9 @@ export class TurbulenceNode extends ShaderDeclaration<TurbulenceProps> {
     super(ctx, NodeType.Turbulence, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
-    return this.Skia.Shader.MakeTurbulence(
+    const shader = this.Skia.Shader.MakeTurbulence(
       freqX,
       freqY,
       octaves,
@@ -117,6 +113,7 @@ export class TurbulenceNode extends ShaderDeclaration<TurbulenceProps> {
       tileWidth,
       tileHeight
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -125,9 +122,9 @@ export class FractalNoiseNode extends ShaderDeclaration<FractalNoiseProps> {
     super(ctx, NodeType.FractalNoise, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
-    return this.Skia.Shader.MakeFractalNoise(
+    const shader = this.Skia.Shader.MakeFractalNoise(
       freqX,
       freqY,
       octaves,
@@ -135,6 +132,7 @@ export class FractalNoiseNode extends ShaderDeclaration<FractalNoiseProps> {
       tileWidth,
       tileHeight
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -143,11 +141,11 @@ export class LinearGradientNode extends ShaderDeclaration<LinearGradientProps> {
     super(ctx, NodeType.LinearGradient, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { start, end } = this.props;
     const { colors, positions, mode, localMatrix, flags } =
       processGradientProps(this.Skia, this.props);
-    return this.Skia.Shader.MakeLinearGradient(
+    const shader = this.Skia.Shader.MakeLinearGradient(
       start,
       end,
       colors,
@@ -156,6 +154,7 @@ export class LinearGradientNode extends ShaderDeclaration<LinearGradientProps> {
       localMatrix,
       flags
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -164,11 +163,11 @@ export class RadialGradientNode extends ShaderDeclaration<RadialGradientProps> {
     super(ctx, NodeType.RadialGradient, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { c, r } = this.props;
     const { colors, positions, mode, localMatrix, flags } =
       processGradientProps(this.Skia, this.props);
-    return this.Skia.Shader.MakeRadialGradient(
+    const shader = this.Skia.Shader.MakeRadialGradient(
       c,
       r,
       colors,
@@ -177,6 +176,7 @@ export class RadialGradientNode extends ShaderDeclaration<RadialGradientProps> {
       localMatrix,
       flags
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -185,11 +185,11 @@ export class SweepGradientNode extends ShaderDeclaration<SweepGradientProps> {
     super(ctx, NodeType.SweepGradient, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { c, start, end } = this.props;
     const { colors, positions, mode, localMatrix, flags } =
       processGradientProps(this.Skia, this.props);
-    return this.Skia.Shader.MakeSweepGradient(
+    const shader = this.Skia.Shader.MakeSweepGradient(
       c.x,
       c.y,
       colors,
@@ -200,6 +200,7 @@ export class SweepGradientNode extends ShaderDeclaration<SweepGradientProps> {
       start,
       end
     );
+    ctx.shaders.push(shader);
   }
 }
 
@@ -208,11 +209,11 @@ export class TwoPointConicalGradientNode extends ShaderDeclaration<TwoPointConic
     super(ctx, NodeType.TwoPointConicalGradient, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { startR, endR, start, end } = this.props;
     const { colors, positions, mode, localMatrix, flags } =
       processGradientProps(this.Skia, this.props);
-    return this.Skia.Shader.MakeTwoPointConicalGradient(
+    const shader = this.Skia.Shader.MakeTwoPointConicalGradient(
       start,
       startR,
       end,
@@ -223,5 +224,6 @@ export class TwoPointConicalGradientNode extends ShaderDeclaration<TwoPointConic
       localMatrix,
       flags
     );
+    ctx.shaders.push(shader);
   }
 }