@shopify/react-native-skia 2.0.6 → 2.1.0

package/src/sksg/Elements.tsx

@@ -51,6 +51,7 @@ import type {
   ChildrenProps,
   MorphologyImageFilterProps,
   BlendProps,
+  SkottieProps,
 } from "../dom/types";
 import type { SkiaProps } from "../renderer";
 
@@ -80,6 +81,7 @@ declare module "react" {
       skTextBlob: SkiaProps<TextBlobProps>;
       skGlyphs: SkiaProps<GlyphsProps>;
       skDiffRect: SkiaProps<DiffRectProps>;
+      skSkottie: SkiaProps<SkottieProps>;
       skPicture: SkiaProps<PictureProps>;
       skImageSVG: SkiaProps<ImageSVGProps>;
 

package/src/sksg/Recorder/Core.ts

@@ -21,6 +21,7 @@ import type {
   ParagraphProps,
   AtlasProps,
   DrawingNodeProps,
+  SkottieProps,
 } from "../../dom/types";
 
 // export enum CommandType {
@@ -106,6 +107,7 @@ export enum CommandType {
   DrawImageSVG,
   DrawParagraph,
   DrawAtlas,
+  DrawSkottie,
 }
 
 export type Command<T extends CommandType = CommandType> = {
@@ -165,6 +167,7 @@ interface Props {
   [CommandType.DrawImageSVG]: ImageSVGProps;
   [CommandType.DrawParagraph]: ParagraphProps;
   [CommandType.DrawAtlas]: AtlasProps;
+  [CommandType.DrawSkottie]: SkottieProps;
 }
 
 interface DrawCommand<T extends CommandType> extends Command<T> {

package/src/sksg/Recorder/Player.ts

@@ -18,6 +18,7 @@ import {
   drawDiffRect,
   drawVertices,
   drawPatch,
+  drawSkottie,
 } from "./commands/Drawing";
 import { drawBox, isBoxCommand } from "./commands/Box";
 import {
@@ -157,6 +158,8 @@ function play(ctx: DrawingContext, _command: Command) {
         drawParagraph(ctx, command.props);
       } else if (isDrawCommand(command, CommandType.DrawAtlas)) {
         drawAtlas(ctx, command.props);
+      } else if (isDrawCommand(command, CommandType.DrawSkottie)) {
+        drawSkottie(ctx, command.props);
       } else {
         console.warn(`Unknown command: ${command.type}`);
       }

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -27,6 +27,7 @@ import type {
   ImageSVGProps,
   ParagraphProps,
   AtlasProps,
+  SkottieProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
@@ -268,4 +269,9 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.processAnimationValues(props);
     this.recorder.drawAtlas(props);
   }
+
+  drawSkottie(props: AnimatedProps<SkottieProps>): void {
+    this.processAnimationValues(props);
+    this.recorder.drawSkottie(props);
+  }
 }

package/src/sksg/Recorder/Recorder.ts

@@ -26,6 +26,7 @@ import type {
   AtlasProps,
   BoxProps,
   BoxShadowProps,
+  SkottieProps,
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
@@ -290,4 +291,8 @@ export class Recorder implements BaseRecorder {
   drawAtlas(props: AnimatedProps<AtlasProps>) {
     this.add({ type: CommandType.DrawAtlas, props });
   }
+
+  drawSkottie(props: AnimatedProps<SkottieProps>) {
+    this.add({ type: CommandType.DrawSkottie, props });
+  }
 }

package/src/sksg/Recorder/Visitor.ts

@@ -310,6 +310,9 @@ const visitNode = (recorder: BaseRecorder, node: Node<any>) => {
     case NodeType.Paragraph:
       recorder.drawParagraph(props);
       break;
+    case NodeType.Skottie:
+      recorder.drawSkottie(props);
+      break;
     case NodeType.Atlas:
       recorder.drawAtlas(props);
       break;

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

@@ -11,7 +11,6 @@ import type {
   AtlasProps,
   CircleProps,
   DiffRectProps,
-  DrawingNodeProps,
   GlyphsProps,
   ImageProps,
   ImageSVGProps,
@@ -24,6 +23,7 @@ import type {
   PointsProps,
   RectProps,
   RoundedRectProps,
+  SkottieProps,
   TextBlobProps,
   TextPathProps,
   TextProps,
@@ -328,7 +328,11 @@ export const drawCircle = (ctx: DrawingContext, props: CircleProps) => {
   ctx.canvas.drawCircle(c.x, c.y, r, ctx.paint);
 };
 
-export const drawFill = (ctx: DrawingContext, _props: DrawingNodeProps) => {
+export const drawSkottie = (ctx: DrawingContext, props: SkottieProps) => {
   "worklet";
-  ctx.canvas.drawPaint(ctx.paint);
+  const { animation, frame } = props;
+  if (animation) {
+    props.animation.seekFrame(frame);
+    props.animation.render(ctx.canvas);
+  }
 };

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

@@ -151,7 +151,7 @@ const declareDisplacementMapImageFilter = (
   if (!shader) {
     throw new Error("DisplacementMap expects a shader as child");
   }
-  const map = ctx.Skia.ImageFilter.MakeShader(shader, null);
+  const map = ctx.Skia.ImageFilter.MakeShader(shader);
   const imgf = ctx.Skia.ImageFilter.MakeDisplacementMap(
     ColorChannel[enumKey(channelX)],
     ColorChannel[enumKey(channelY)],

package/cpp/skia/include/pathops/SkPathOps.h

@@ -1,17 +0,0 @@
-/*
- * Copyright 2025 Google Inc.
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-// Uncomment this to find any clients who still use the old path
-// ... so we can update them
-//#error
-
-#ifndef SkPathOpsRedirect_DEFINED
-#define SkPathOpsRedirect_DEFINED
-
-#include "modules/pathops/include/SkPathOps.h"
-
-#endif