@shopify/react-native-skia 0.1.142 → 0.1.146

package/src/skia/web/JsiSkCanvas.ts

@@ -1,4 +1,4 @@
-import type { Canvas, Image, CanvasKit, Paint } from "canvaskit-wasm";
+import type { Canvas, CanvasKit } from "canvaskit-wasm";
 
 import type {
   BlendMode,
@@ -24,15 +24,19 @@ import type {
   SkVertices,
 } from "../types";
 
-import {
-  ckEnum,
-  HostObject,
-  toValue,
-  toUndefinedableValue,
-  toOptionalValue,
-} from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkRRect } from "./JsiSkRRect";
+import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkVertices } from "./JsiSkVertices";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkFont } from "./JsiSkFont";
+import { JsiSkTextBlob } from "./JsiSkTextBlob";
+import { JsiSkPicture } from "./JsiSkPicture";
+import { JsiSkMatrix } from "./JsiSkMatrix";
+import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkCanvas
   extends HostObject<Canvas, "Canvas">
@@ -45,12 +49,17 @@ export class JsiSkCanvas
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),
-      toValue<Paint>(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawImage(image: SkImage, x: number, y: number, paint?: SkPaint) {
-    this.ref.drawImage(toValue<Image>(image), x, y, toOptionalValue(paint));
+    this.ref.drawImage(
+      JsiSkImage.fromValue(image),
+      x,
+      y,
+      paint ? JsiSkPaint.fromValue(paint) : paint
+    );
   }
 
   drawImageRect(
@@ -61,10 +70,10 @@ export class JsiSkCanvas
     fastSample?: boolean
   ) {
     this.ref.drawImageRect(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
-      toValue<Paint>(paint),
+      JsiSkPaint.fromValue(paint),
       fastSample
     );
   }
@@ -78,12 +87,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageCubic(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -96,12 +105,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageOptions(
-      toValue(img),
+      JsiSkImage.fromValue(img),
       left,
       top,
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -113,11 +122,11 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageNine(
-      toValue(img),
-      toValue(center),
-      toValue(dest),
+      JsiSkImage.fromValue(img),
+      Array.from(JsiSkRect.fromValue(this.CanvasKit, center)),
+      JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(filter),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -130,12 +139,12 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectCubic(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
       B,
       C,
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
@@ -148,29 +157,33 @@ export class JsiSkCanvas
     paint?: SkPaint | null
   ) {
     this.ref.drawImageRectOptions(
-      toValue<Image>(img),
+      JsiSkImage.fromValue(img),
       JsiSkRect.fromValue(this.CanvasKit, src),
       JsiSkRect.fromValue(this.CanvasKit, dest),
       ckEnum(fm),
       ckEnum(mm),
-      toOptionalValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : paint
     );
   }
 
   drawPaint(paint: SkPaint) {
-    this.ref.drawPaint(toValue(paint));
+    this.ref.drawPaint(JsiSkPaint.fromValue(paint));
   }
 
   drawLine(x0: number, y0: number, x1: number, y1: number, paint: SkPaint) {
-    this.ref.drawLine(x0, y0, x1, y1, toValue(paint));
+    this.ref.drawLine(x0, y0, x1, y1, JsiSkPaint.fromValue(paint));
   }
 
   drawCircle(cx: number, cy: number, radius: number, paint: SkPaint) {
-    this.ref.drawCircle(cx, cy, radius, toValue(paint));
+    this.ref.drawCircle(cx, cy, radius, JsiSkPaint.fromValue(paint));
   }
 
   drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
-    this.ref.drawVertices(toValue(verts), ckEnum(mode), toValue(paint));
+    this.ref.drawVertices(
+      JsiSkVertices.fromValue(verts),
+      ckEnum(mode),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPatch(
@@ -183,9 +196,9 @@ export class JsiSkCanvas
     this.ref.drawPatch(
       cubics.map(({ x, y }) => [x, y]).flat(),
       colors,
-      toOptionalValue(texs),
+      texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
       mode ? ckEnum(mode) : null,
-      toUndefinedableValue(paint)
+      paint ? JsiSkPaint.fromValue(paint) : undefined
     );
   }
 
@@ -197,7 +210,7 @@ export class JsiSkCanvas
     this.ref.drawPoints(
       ckEnum(mode),
       points.map(({ x, y }) => [x, y]).flat(),
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -209,39 +222,57 @@ export class JsiSkCanvas
     paint: SkPaint
   ) {
     this.ref.drawArc(
-      toValue(oval),
+      JsiSkRect.fromValue(this.CanvasKit, oval),
       startAngle,
       sweepAngle,
       useCenter,
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawRRect(rrect: SkRRect, paint: SkPaint) {
     this.ref.drawRRect(
       JsiSkRRect.fromValue(this.CanvasKit, rrect),
-      toValue(paint)
+      JsiSkPaint.fromValue(paint)
     );
   }
 
   drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
-    this.ref.drawDRRect(toValue(outer), toValue(inner), toValue(paint));
+    this.ref.drawDRRect(
+      JsiSkRRect.fromValue(this.CanvasKit, outer),
+      JsiSkRRect.fromValue(this.CanvasKit, inner),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawOval(oval: SkRect, paint: SkPaint) {
-    this.ref.drawOval(toValue(oval), toValue(paint));
+    this.ref.drawOval(
+      JsiSkRect.fromValue(this.CanvasKit, oval),
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawPath(path: SkPath, paint: SkPaint) {
-    this.ref.drawPath(toValue(path), toValue(paint));
+    this.ref.drawPath(JsiSkPath.fromValue(path), JsiSkPaint.fromValue(paint));
   }
 
   drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont) {
-    this.ref.drawText(str, x, y, toValue(paint), toValue(font));
+    this.ref.drawText(
+      str,
+      x,
+      y,
+      JsiSkPaint.fromValue(paint),
+      JsiSkFont.fromValue(font)
+    );
   }
 
   drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint) {
-    this.ref.drawTextBlob(toValue(blob), x, y, toValue(paint));
+    this.ref.drawTextBlob(
+      JsiSkTextBlob.fromValue(blob),
+      x,
+      y,
+      JsiSkPaint.fromValue(paint)
+    );
   }
 
   drawGlyphs(
@@ -257,8 +288,8 @@ export class JsiSkCanvas
       positions.map((p) => [p.x, p.y]).flat(),
       x,
       y,
-      toValue(font),
-      toValue(paint)
+      JsiSkFont.fromValue(font),
+      JsiSkPaint.fromValue(paint)
     );
   }
 
@@ -277,9 +308,9 @@ export class JsiSkCanvas
     flags?: SaveLayerFlag
   ) {
     return this.ref.saveLayer(
-      toUndefinedableValue(paint),
-      toOptionalValue(bounds),
-      toOptionalValue(backdrop),
+      paint ? JsiSkPaint.fromValue(paint) : undefined,
+      bounds ? JsiSkRect.fromValue(this.CanvasKit, bounds) : bounds,
+      backdrop ? JsiSkImageFilter.fromValue(backdrop) : backdrop,
       flags
     );
   }
@@ -313,7 +344,7 @@ export class JsiSkCanvas
   }
 
   clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
-    this.ref.clipPath(toValue(path), ckEnum(op), doAntiAlias);
+    this.ref.clipPath(JsiSkPath.fromValue(path), ckEnum(op), doAntiAlias);
   }
 
   clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
@@ -333,10 +364,10 @@ export class JsiSkCanvas
   }
 
   concat(m: SkMatrix) {
-    this.ref.concat(toValue(m));
+    this.ref.concat(JsiSkMatrix.fromValue(m));
   }
 
   drawPicture(skp: SkPicture) {
-    this.ref.drawPicture(toValue(skp));
+    this.ref.drawPicture(JsiSkPicture.fromValue(skp));
   }
 }

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -8,7 +8,7 @@ import type {
   BlendMode,
 } from "../types";
 
-import { ckEnum, Host, toValue, NotImplementedOnRNWeb } from "./Host";
+import { ckEnum, Host } from "./Host";
 import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkColorFilterFactory
@@ -29,21 +29,28 @@ export class JsiSkColorFilterFactory
   MakeBlend(color: SkColor, mode: BlendMode) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeBlend(toValue(color), ckEnum(mode))
+      this.CanvasKit.ColorFilter.MakeBlend(color, ckEnum(mode))
     );
   }
 
   MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeCompose(toValue(outer), toValue(inner))
+      this.CanvasKit.ColorFilter.MakeCompose(
+        JsiSkColorFilter.fromValue(outer),
+        JsiSkColorFilter.fromValue(inner)
+      )
     );
   }
 
   MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
     return new JsiSkColorFilter(
       this.CanvasKit,
-      this.CanvasKit.ColorFilter.MakeLerp(t, toValue(dst), toValue(src))
+      this.CanvasKit.ColorFilter.MakeLerp(
+        t,
+        JsiSkColorFilter.fromValue(dst),
+        JsiSkColorFilter.fromValue(src)
+      )
     );
   }
 
@@ -62,6 +69,9 @@ export class JsiSkColorFilterFactory
   }
 
   MakeLumaColorFilter(): SkColorFilter {
-    throw new NotImplementedOnRNWeb();
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLuma()
+    );
   }
 }

package/src/skia/web/JsiSkFont.ts

@@ -9,7 +9,9 @@ import type {
   SkTypeface,
 } from "../types";
 
-import { HostObject, toValue, ckEnum } from "./Host";
+import { HostObject, ckEnum } from "./Host";
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
 import { JsiSkTypeface } from "./JsiSkTypeface";
 
@@ -43,7 +45,12 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
 
   // TODO: Fix return value in the C++ implementation, it return float32
   getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
-    return [...this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null)];
+    return [
+      ...this.ref.getGlyphWidths(
+        glyphs,
+        paint ? JsiSkPaint.fromValue(paint) : null
+      ),
+    ];
   }
 
   getGlyphIntercepts(
@@ -55,7 +62,7 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     return [
       ...this.ref.getGlyphIntercepts(
         glyphs,
-        positions.map((p) => toValue(p)),
+        positions.map((p) => Array.from(JsiSkPoint.fromValue(p))).flat(),
         top,
         bottom
       ),
@@ -120,6 +127,6 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
   }
 
   setTypeface(face: SkTypeface | null) {
-    this.ref.setTypeface(face ? toValue(face) : null);
+    this.ref.setTypeface(face ? JsiSkTypeface.fromValue(face) : null);
   }
 }

package/src/skia/web/JsiSkImage.ts

@@ -11,7 +11,8 @@ import type {
   TileMode,
 } from "../types";
 
-import { ckEnum, HostObject, toValue } from "./Host";
+import { ckEnum, HostObject } from "./Host";
+import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
@@ -41,7 +42,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         ckEnum(fm),
         ckEnum(mm),
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }
@@ -60,7 +61,7 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
         ckEnum(ty),
         B,
         C,
-        localMatrix ? toValue(localMatrix) : undefined
+        localMatrix ? JsiSkMatrix.fromValue(localMatrix) : undefined
       )
     );
   }

package/src/skia/web/JsiSkImageFactory.ts

@@ -3,8 +3,9 @@ import type { CanvasKit } from "canvaskit-wasm";
 import type { SkData, ImageInfo } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 
-import { Host, toValue, ckEnum } from "./Host";
+import { Host, ckEnum } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
+import { JsiSkData } from "./JsiSkData";
 
 export class JsiSkImageFactory extends Host implements ImageFactory {
   constructor(CanvasKit: CanvasKit) {
@@ -12,7 +13,9 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
   }
 
   MakeImageFromEncoded(encoded: SkData) {
-    const image = this.CanvasKit.MakeImageFromEncoded(toValue(encoded));
+    const image = this.CanvasKit.MakeImageFromEncoded(
+      JsiSkData.fromValue(encoded)
+    );
     if (image === null) {
       return null;
     }
@@ -29,7 +32,7 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
         height: info.height,
         width: info.width,
       },
-      toValue(data),
+      JsiSkData.fromValue(data),
       bytesPerRow
     );
     if (image === null) {

package/src/skia/web/JsiSkImageFilterFactory.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit } from "canvaskit-wasm";
+import type { CanvasKit, ImageFilter } from "canvaskit-wasm";
 
 import type {
   ColorChannel,
@@ -13,8 +13,9 @@ import type {
   TileMode,
 } from "../types";
 
-import { Host, NotImplementedOnRNWeb, ckEnum, toValue } from "./Host";
+import { Host, NotImplementedOnRNWeb, ckEnum } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
 
 export class JsiSkImageFilterFactory
   extends Host
@@ -24,26 +25,37 @@ export class JsiSkImageFilterFactory
     super(CanvasKit);
   }
 
-  MakeOffset(
-    _dx: number,
-    _dy: number,
-    _input: SkImageFilter | null
-  ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  MakeOffset(dx: number, dy: number, input: SkImageFilter | null) {
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    const filter = this.CanvasKit.ImageFilter.MakeOffset(dx, dy, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDisplacementMap(
-    _channelX: ColorChannel,
-    _channelY: ColorChannel,
-    _scale: number,
-    _in1: SkImageFilter,
-    _input: SkImageFilter | null
+    channelX: ColorChannel,
+    channelY: ColorChannel,
+    scale: number,
+    in1: SkImageFilter,
+    input: SkImageFilter | null
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    const filter = this.CanvasKit.ImageFilter.MakeDisplacementMap(
+      ckEnum(channelX),
+      ckEnum(channelY),
+      scale,
+      JsiSkImageFilter.fromValue(in1),
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
-  MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+  MakeShader(shader: SkShader, _input: SkImageFilter | null): SkImageFilter {
+    const filter = this.CanvasKit.ImageFilter.MakeShader(
+      JsiSkImageFilter.fromValue(shader)
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeBlur(
@@ -58,7 +70,7 @@ export class JsiSkImageFilterFactory
         sigmaX,
         sigmaY,
         ckEnum(mode),
-        input === null ? null : toValue(input)
+        input === null ? null : JsiSkImageFilter.fromValue(input)
       )
     );
   }
@@ -67,8 +79,8 @@ export class JsiSkImageFilterFactory
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeColorFilter(
-        toValue(cf),
-        input === null ? null : toValue(input)
+        JsiSkColorFilter.fromValue(cf),
+        input === null ? null : JsiSkImageFilter.fromValue(input)
       )
     );
   }
@@ -77,61 +89,121 @@ export class JsiSkImageFilterFactory
     return new JsiSkImageFilter(
       this.CanvasKit,
       this.CanvasKit.ImageFilter.MakeCompose(
-        outer === null ? null : toValue(outer),
-        inner === null ? null : toValue(inner)
+        outer === null ? null : JsiSkImageFilter.fromValue(outer),
+        inner === null ? null : JsiSkImageFilter.fromValue(inner)
       )
     );
   }
 
   MakeDropShadow(
-    _dx: number,
-    _dy: number,
-    _sigmaX: number,
-    _sigmaY: number,
-    _color: SkColor,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDropShadow(
+      dx,
+      dy,
+      sigmaX,
+      sigmaY,
+      color,
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDropShadowOnly(
-    _dx: number,
-    _dy: number,
-    _sigmaX: number,
-    _sigmaY: number,
-    _color: SkColor,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    dx: number,
+    dy: number,
+    sigmaX: number,
+    sigmaY: number,
+    color: SkColor,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDropShadowOnly(
+      dx,
+      dy,
+      sigmaX,
+      sigmaY,
+      color,
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeErode(
-    _rx: number,
-    _ry: number,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeErode(rx, ry, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeDilate(
-    _rx: number,
-    _ry: number,
-    _input: SkImageFilter | null,
-    _cropRect?: SkRect
+    rx: number,
+    ry: number,
+    input: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      input === null ? null : JsiSkImageFilter.fromValue<ImageFilter>(input);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeDilate(rx, ry, inputFilter);
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeBlend(
-    _mode: BlendMode,
-    _background: SkImageFilter,
-    _foreground: SkImageFilter | null,
-    _cropRect?: SkRect
+    mode: BlendMode,
+    background: SkImageFilter,
+    foreground: SkImageFilter | null,
+    cropRect?: SkRect
   ): SkImageFilter {
-    throw new NotImplementedOnRNWeb();
+    const inputFilter =
+      foreground === null
+        ? null
+        : JsiSkImageFilter.fromValue<ImageFilter>(foreground);
+    if (cropRect) {
+      throw new NotImplementedOnRNWeb(
+        "The cropRect argument is not yet supported on React Native Web."
+      );
+    }
+    const filter = this.CanvasKit.ImageFilter.MakeBlend(
+      ckEnum(mode),
+      JsiSkImageFilter.fromValue(background),
+      inputFilter
+    );
+    return new JsiSkImageFilter(this.CanvasKit, filter);
   }
 
   MakeRuntimeShader(