@shopify/react-native-skia 2.12.0-next.1 → 2.13.0

package/src/renderer/components/Mask.tsx

@@ -20,17 +20,24 @@ export const Mask = ({
 }: MaskProps) => {
   return (
     <Group layer>
+      {children}
+      {/* The children composite against each other in the layer above; the
+          mask is then applied once, when its own layer is restored. A blend
+          mode attached to a <Group> without a layer would instead be applied
+          per draw call, compositing every child after the first against the
+          previous child rather than against the mask (issue #3254).
+          dstIn keeps the children where the mask is opaque and erases them
+          where it is transparent. Without clip, dstATop additionally keeps
+          the mask artwork itself wherever the children leave it uncovered. */}
       <Group
         layer={
-          <Paint blendMode="src">
+          <Paint blendMode={clip ? "dstIn" : "dstATop"}>
             {mode === "luminance" && <LumaColorFilter />}
           </Paint>
         }
       >
         {mask}
-        {clip && <Group layer={<Paint blendMode="dstIn" />}>{children}</Group>}
       </Group>
-      <Group blendMode="srcIn">{children}</Group>
     </Group>
   );
 };

package/src/skia/types/JsiInstance.ts

@@ -1,3 +1,5 @@
+/// <reference lib="esnext.disposable" preserve="true" />
+
 export interface SkJSIInstance<T extends string> extends Disposable {
   __typename__: T;
   dispose(): void;

package/src/skia/types/Matrix4.ts

@@ -190,12 +190,16 @@ export const multiply4 = (a: Matrix4, b: Matrix4): Matrix4 => {
   return result as unknown as Matrix4;
 };
 
-const skewY = (angle: number): Matrix4 => {
+// These matrices are row-major, so the shear factor of skewX - which offsets x
+// in proportion to y - belongs in row 0, column 1, and skewY's in row 1,
+// column 0. React Native's MatrixMath stores the same transforms column-major,
+// and porting its indices verbatim is what swapped the two axes here.
+const skewX = (angle: number): Matrix4 => {
   "worklet";
   return [1, Math.tan(angle), 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 };
 
-const skewX = (angle: number): Matrix4 => {
+const skewY = (angle: number): Matrix4 => {
   "worklet";
   return [1, 0, 0, 0, Math.tan(angle), 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 };

package/src/skia/types/Skia.ts

@@ -21,7 +21,7 @@ import type { SkVertices, VertexMode } from "./Vertices/Vertices";
 import type { DataFactory } from "./Data";
 import type { SVGFactory } from "./SVG";
 import type { TextBlobFactory } from "./TextBlob";
-import type { SkSurface, SurfaceFactory } from "./Surface";
+import type { SurfaceFactory } from "./Surface";
 import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
@@ -35,11 +35,6 @@ import type { NativeBufferFactory } from "./NativeBuffer";
 import type { JsiRecorder } from "./Recorder";
 import type { SkottieFactory } from "./Skottie";
 
-export interface SkiaContext {
-  getSurface(): SkSurface;
-  present(): void;
-}
-
 /**
  * Declares the interface for the native Skia API
  */
@@ -106,7 +101,6 @@ export interface Skia {
   ParagraphBuilder: ParagraphBuilderFactory;
   Skottie: SkottieFactory;
   Video: (url: string) => Promise<Video> | Video;
-  Context(surface: bigint, width: number, height: number): SkiaContext;
   NativeBuffer: NativeBufferFactory;
   Recorder(): JsiRecorder;
   /**

package/src/skia/web/JsiSkCanvas.ts

@@ -205,13 +205,20 @@ export class JsiSkCanvas
     mode?: BlendMode | null,
     paint?: SkPaint
   ) {
-    this.ref.drawPatch(
-      cubics.map(({ x, y }) => [x, y]).flat(),
-      colors,
-      texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
-      mode ? getEnum(this.CanvasKit, "BlendMode", mode) : null,
-      paint ? JsiSkPaint.fromValue(paint) : undefined
-    );
+    const defaultPaint = paint ? null : new this.CanvasKit.Paint();
+    try {
+      this.ref.drawPatch(
+        cubics.map(({ x, y }) => [x, y]).flat(),
+        colors,
+        texs ? texs.flatMap((p) => Array.from(JsiSkPoint.fromValue(p))) : texs,
+        mode !== undefined && mode !== null
+          ? getEnum(this.CanvasKit, "BlendMode", mode)
+          : null,
+        paint ? JsiSkPaint.fromValue(paint) : defaultPaint!
+      );
+    } finally {
+      defaultPaint?.delete();
+    }
   }
 
   restoreToCount(saveCount: number) {
@@ -362,7 +369,9 @@ export class JsiSkCanvas
   drawColor(color: SkColor, blendMode?: BlendMode) {
     this.ref.drawColor(
       color,
-      blendMode ? getEnum(this.CanvasKit, "BlendMode", blendMode) : undefined
+      blendMode !== undefined
+        ? getEnum(this.CanvasKit, "BlendMode", blendMode)
+        : undefined
     );
   }
 
@@ -430,9 +439,10 @@ export class JsiSkCanvas
     } else if (sampling) {
       ckSampling = {
         filter: getEnum(this.CanvasKit, "FilterMode", sampling.filter),
-        mipmap: sampling.mipmap
-          ? getEnum(this.CanvasKit, "MipmapMode", sampling.mipmap)
-          : this.CanvasKit.MipmapMode.None,
+        mipmap:
+          sampling.mipmap !== undefined
+            ? getEnum(this.CanvasKit, "MipmapMode", sampling.mipmap)
+            : this.CanvasKit.MipmapMode.None,
       };
     }
     this.ref.drawAtlas(
@@ -440,7 +450,7 @@ export class JsiSkCanvas
       src,
       dst,
       JsiSkPaint.fromValue(paint),
-      blendMode
+      blendMode !== undefined
         ? getEnum(this.CanvasKit, "BlendMode", blendMode)
         : this.CanvasKit.BlendMode.DstOver,
       cls,

package/src/skia/web/JsiSkImage.ts

@@ -107,12 +107,15 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   encodeToBytes(fmt?: ImageFormat, quality?: number) {
     let result: Uint8Array | null;
-    if (fmt && quality) {
+    if (fmt !== undefined && quality !== undefined) {
+      // CanvasKit's encodeToBytes() applies `quality || 100`, which would
+      // turn a valid quality of 0 into 100. The encoders clamp any quality
+      // below 1 up to 1 anyway, so pass 1 to get the same output as 0.
       result = this.ref.encodeToBytes(
         getEnum(this.CanvasKit, "ImageFormat", fmt),
-        quality
+        Math.max(quality, 1)
       );
-    } else if (fmt) {
+    } else if (fmt !== undefined) {
       result = this.ref.encodeToBytes(
         getEnum(this.CanvasKit, "ImageFormat", fmt)
       );

package/src/skia/web/JsiSkPathBuilder.ts

@@ -188,8 +188,8 @@ export class JsiSkPathBuilder
     return this;
   }
 
-  addCircle(x: number, y: number, r: number, _isCCW?: boolean) {
-    this.ref.addCircle(x, y, r);
+  addCircle(x: number, y: number, r: number, isCCW?: boolean) {
+    this.ref.addCircle(x, y, r, isCCW);
     return this;
   }
 

package/src/skia/web/JsiSkTextStyle.ts

@@ -9,23 +9,27 @@ export class JsiSkTextStyle {
       color: value.color,
       decoration: value.decoration,
       decorationColor: value.decorationColor,
-      decorationStyle: value.decorationStyle
-        ? { value: value.decorationStyle }
-        : undefined,
+      decorationStyle:
+        value.decorationStyle !== undefined
+          ? { value: value.decorationStyle }
+          : undefined,
       decorationThickness: value.decorationThickness,
       fontFamilies: value.fontFamilies,
       fontSize: value.fontSize,
       fontStyle: value.fontStyle
         ? {
-            slant: value.fontStyle.slant
-              ? { value: value.fontStyle.slant }
-              : undefined,
-            weight: value.fontStyle.weight
-              ? { value: value.fontStyle.weight }
-              : undefined,
-            width: value.fontStyle.width
-              ? { value: value.fontStyle.width }
-              : undefined,
+            slant:
+              value.fontStyle.slant !== undefined
+                ? { value: value.fontStyle.slant }
+                : undefined,
+            weight:
+              value.fontStyle.weight !== undefined
+                ? { value: value.fontStyle.weight }
+                : undefined,
+            width:
+              value.fontStyle.width !== undefined
+                ? { value: value.fontStyle.width }
+                : undefined,
           }
         : undefined,
       fontFeatures: value.fontFeatures,
@@ -44,9 +48,10 @@ export class JsiSkTextStyle {
               : undefined,
           }))
         : undefined,
-      textBaseline: value.textBaseline
-        ? { value: value.textBaseline }
-        : undefined,
+      textBaseline:
+        value.textBaseline !== undefined
+          ? { value: value.textBaseline }
+          : undefined,
       wordSpacing: value.wordSpacing,
     };
   }

package/src/skia/web/JsiSkia.ts

@@ -4,7 +4,6 @@ import type {
   JsiRecorder,
   SkContourMeasureIter,
   Skia,
-  SkiaContext,
   SkPath,
   SkRect,
   SkRuntimeEffect,
@@ -137,9 +136,6 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   NativeBuffer: new JsiSkNativeBufferFactory(CanvasKit),
   Skottie: new JsiSkottieFactory(CanvasKit),
   Video: createVideo.bind(null, CanvasKit),
-  Context: (_surface: bigint, _width: number, _height: number) => {
-    return throwNotImplementedOnRNWeb<SkiaContext>();
-  },
   Recorder: () => {
     return throwNotImplementedOnRNWeb<JsiRecorder>();
   },

package/src/skia/web/JsiSkottieAnimation.ts

@@ -164,28 +164,28 @@ export class JsiSkottieAnimation
       if (result.text) {
         textSlot.text = result.text;
       }
-      if (result.textSize) {
+      if (result.textSize !== undefined) {
         textSlot.textSize = result.textSize;
       }
-      if (result.minTextSize) {
+      if (result.minTextSize !== undefined) {
         textSlot.minTextSize = result.minTextSize;
       }
-      if (result.maxTextSize) {
+      if (result.maxTextSize !== undefined) {
         textSlot.maxTextSize = result.maxTextSize;
       }
-      if (result.strokeWidth) {
+      if (result.strokeWidth !== undefined) {
         textSlot.strokeWidth = result.strokeWidth;
       }
-      if (result.lineHeight) {
+      if (result.lineHeight !== undefined) {
         textSlot.lineHeight = result.lineHeight;
       }
-      if (result.lineShift) {
+      if (result.lineShift !== undefined) {
         textSlot.lineShift = result.lineShift;
       }
-      if (result.ascent) {
+      if (result.ascent !== undefined) {
         textSlot.ascent = result.ascent;
       }
-      if (result.maxLines) {
+      if (result.maxLines !== undefined) {
         textSlot.maxLines = result.maxLines;
       }
       // if (result.horizAlign) {

package/src/sksg/Recorder/DrawingContext.ts

@@ -37,7 +37,10 @@ export const createDrawingContext = (
   if (paintPool.length === 0) {
     paintPool.push(Skia.Paint());
   } else {
+    // reset() produces an anti-alias false paint, unlike the Skia.Paint()
+    // factory: restore the default so reused pools render like the first frame.
     paintPool[0].reset();
+    paintPool[0].setAntiAlias(true);
   }
   paints.push(paintPool[0]);
   opacities.push(1);
@@ -56,6 +59,17 @@ export const createDrawingContext = (
     nextPaintIndex++;
   };
 
+  // Pushes an externally owned paint (the `paint` prop) onto the stack. It
+  // pushes a frame-scoped copy, like the C++ DrawingCtx: materializePaint()
+  // mutates the top of the stack, and those mutations must not leak into the
+  // user-owned paint. It must also push an opacity alongside it: restorePaint()
+  // pops both, so pushing only the paint would underflow the opacity stack and
+  // leak the enclosing group's opacity onto everything drawn afterwards.
+  const pushPaint = (paint: SkPaint) => {
+    paints.push(track(paint.copy()));
+    opacities.push(opacities[opacities.length - 1]);
+  };
+
   const getOpacity = () => {
     return opacities[opacities.length - 1];
   };
@@ -144,6 +158,7 @@ export const createDrawingContext = (
 
     // Public methods
     savePaint,
+    pushPaint,
     saveBackdropFilter,
     get paint() {
       return paints[paints.length - 1];

package/src/sksg/Recorder/Player.ts

@@ -123,7 +123,7 @@ const play = (ctx: DrawingContext, _command: Command) => {
     ctx.canvas.saveLayer(paint);
   } else if (isDrawCommand(command, CommandType.SavePaint)) {
     if (command.props.paint) {
-      ctx.paints.push(command.props.paint);
+      ctx.pushPaint(command.props.paint);
     } else {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const { standalone } = command as any;

package/src/sksg/Recorder/Visitor.ts

@@ -104,13 +104,16 @@ const processCTM = ({
   if (layer) {
     ctm.layer = layer;
   }
+  // Only record a CTM command when saveCTM() will actually save the canvas.
+  // saveCTM() saves on transform/matrix, clip or layer; restoreCTM() always
+  // restores, so recording a CTM that saves nothing - `origin` with no
+  // transform, `clip={false}` from a conditional, a bare `invertClip` - pops
+  // an enclosing save that belongs to an ancestor.
   if (
-    clip !== undefined ||
-    invertClip !== undefined ||
-    transform !== undefined ||
-    origin !== undefined ||
-    matrix !== undefined ||
-    layer !== undefined
+    ctm.clip !== undefined ||
+    ctm.transform !== undefined ||
+    ctm.matrix !== undefined ||
+    ctm.layer !== undefined
   ) {
     return ctm;
   }

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

@@ -217,6 +217,16 @@ export const drawPath = (ctx: DrawingContext, props: PathProps) => {
 
   let path = processPath(ctx.Skia, pathProps.path);
 
+  // Trim runs first, so start/end address the path the caller drew. Stroking
+  // first would replace it with its outline and leave the offsets walking that
+  // outline's perimeter instead. The native recorder orders these the same way.
+  if (hasStartOffset || hasEndOffset) {
+    const trimmed = ctx.Skia.Path.Trim(path, start, end, false);
+    if (trimmed) {
+      path = trimmed;
+    }
+  }
+
   // Apply fill type using PathBuilder
   if (hasFillType) {
     const builder = ctx.Skia.PathBuilder.MakeFromPath(path);
@@ -232,14 +242,6 @@ export const drawPath = (ctx: DrawingContext, props: PathProps) => {
     }
   }
 
-  // Apply trim using static Path.Trim
-  if (hasStartOffset || hasEndOffset) {
-    const trimmed = ctx.Skia.Path.Trim(path, start, end, false);
-    if (trimmed) {
-      path = trimmed;
-    }
-  }
-
   ctx.canvas.drawPath(path, ctx.paint);
 };
 
@@ -295,7 +297,8 @@ export const drawImageSVG = (ctx: DrawingContext, props: ImageSVGProps) => {
     return;
   }
   canvas.save();
-  if (x && y) {
+  // An offset of 0 is a valid position, so it must not be read as "unset".
+  if (x !== undefined && y !== undefined) {
     canvas.translate(x, y);
   }
   canvas.drawSvg(svg, width, height);

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

@@ -31,6 +31,14 @@ export enum MorphologyOperator {
 
 const Black = Float32Array.of(0, 0, 0, 1);
 
+// Turns the source graphic into a hard silhouette: alpha is multiplied by 255
+// and clamped, so any pixel the shape covers at all becomes fully opaque, and
+// the colour channels are dropped. 255 is the saturation point of an 8-bit
+// alpha channel, so one unit of coverage is enough to reach 1.
+const AlphaSaturate = [
+  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 255, 0,
+];
+
 const MakeInnerShadow = (
   Skia: Skia,
   shadowOnly: boolean | undefined,
@@ -50,9 +58,20 @@ const MakeInnerShadow = (
     Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
     null
   );
+  // The shadow is generated outside the shape and then clipped back into it, so
+  // "outside" has to be the complement of the shape's silhouette. Taking SrcOut
+  // against the source graphic itself makes it the complement of the source's
+  // *alpha*: inside a translucent shape 1 - alpha is non-zero, so the shadow is
+  // generated across the whole interior and tints it, no matter how small the
+  // blur and the offset are (issue #2990). Saturating alpha first keeps the
+  // shadow tied to the shape's outline instead of to its opacity.
+  const coverage = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeMatrix(AlphaSaturate),
+    null
+  );
   const f1 = Skia.ImageFilter.MakeColorFilter(
     Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
-    null
+    coverage
   );
   const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
   const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);

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

@@ -221,7 +221,7 @@ const declareImageShader = (ctx: DrawingContext, props: ImageShaderProps) => {
     );
   } else {
     shader = ctx.track(
-      image.makeShaderCubic(
+      image.makeShaderOptions(
         TileMode[enumKey(tx)],
         TileMode[enumKey(ty)],
         sampling?.filter ?? FilterMode.Linear,

package/src/specs/SkiaPictureViewNativeComponent.ts

@@ -9,6 +9,11 @@ export interface NativeProps extends ViewProps {
   colorSpace?: string;
   highBitDepth?: boolean;
   androidWarmup?: boolean;
+  androidSurfaceType?: WithDefault<
+    "auto" | "SurfaceView" | "TextureView",
+    "auto"
+  >;
+  androidZOrderOnTop?: WithDefault<boolean, false>;
   pointerEvents?: WithDefault<
     "auto" | "none" | "box-none" | "box-only",
     "auto"

package/src/specs/SkiaPictureViewNativeComponent.web.ts

@@ -7,6 +7,8 @@ export interface NativeProps extends ViewProps {
   debug?: boolean;
   opaque?: boolean;
   nativeID: string;
+  androidSurfaceType?: "auto" | "SurfaceView" | "TextureView";
+  androidZOrderOnTop?: boolean;
 }
 
 const SkiaPictureViewNativeComponent = ({
@@ -14,6 +16,9 @@ const SkiaPictureViewNativeComponent = ({
   debug,
   opaque,
   onLayout,
+  // Android-only, never reaches the DOM
+  androidSurfaceType: _androidSurfaceType,
+  androidZOrderOnTop: _androidZOrderOnTop,
   ...viewProps
 }: NativeProps) => {
   return createElement(SkiaPictureView, {

package/src/views/SkiaPictureView.tsx

@@ -20,15 +20,11 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
-    const { picture, onSize } = props;
+    const { picture } = props;
     if (picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
-    if (onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
     this.tick();
   }
 
@@ -39,15 +35,11 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaPictureViewProps) {
-    const { picture, onSize } = this.props;
+    const { picture } = this.props;
     if (picture !== prevProps.picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
-    if (onSize !== prevProps.onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
     this.tick();
   }