@shopify/react-native-skia 1.10.2 → 1.11.1

package/cpp/api/recorder/Shaders.h

@@ -0,0 +1,406 @@
+#pragma once
+
+#include <optional>
+#include <string>
+#include <variant>
+
+#include <include/core/SkSamplingOptions.h>
+
+#include "Command.h"
+#include "Convertor.h"
+#include "DrawingCtx.h"
+#include "ImageFit.h"
+
+namespace RNSkia {
+
+struct PushShaderProps : TransformProps {
+  sk_sp<SkRuntimeEffect> source;
+  Uniforms uniforms;
+};
+
+class PushShaderCmd : public Command {
+private:
+  PushShaderProps props;
+
+public:
+  PushShaderCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                Variables &variables)
+      : Command(CommandType::PushShader, "skShader") {
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+    convertProperty(runtime, object, "source", props.source, variables);
+    convertProperty(runtime, object, "uniforms", props.uniforms, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    auto source = props.source;
+    auto uniforms = props.uniforms;
+    auto m3 = processTransform(props.matrix, props.transform, props.origin);
+    auto uniformsData = processUniforms(source, props.uniforms);
+
+    std::vector<sk_sp<SkShader>> children = ctx->popAllShaders();
+    auto shader = source->makeShader(std::move(uniformsData), children.data(),
+                                     children.size(), &m3);
+
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct PushImageShaderProps : TransformProps {
+  SkTileMode tx;
+  SkTileMode ty;
+  float x = 0;
+  float y = 0;
+  std::optional<float> width;
+  std::optional<float> height;
+  std::optional<SkRect> rect;
+  std::string fit;
+  std::optional<sk_sp<SkImage>> image;
+  std::optional<SkSamplingOptions> sampling;
+};
+
+class PushImageShaderCmd : public Command {
+private:
+  PushImageShaderProps props;
+
+public:
+  PushImageShaderCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                     Variables &variables)
+      : Command(CommandType::PushShader, "skImageShader") {
+    convertProperty(runtime, object, "tx", props.tx, variables);
+    convertProperty(runtime, object, "ty", props.ty, variables);
+    convertProperty(runtime, object, "rect", props.rect, variables);
+    convertProperty(runtime, object, "image", props.image, variables);
+    convertProperty(runtime, object, "sampling", props.sampling, variables);
+
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+
+    convertProperty(runtime, object, "fit", props.fit, variables);
+    convertProperty(runtime, object, "x", props.x, variables);
+    convertProperty(runtime, object, "y", props.y, variables);
+    convertProperty(runtime, object, "width", props.width, variables);
+    convertProperty(runtime, object, "height", props.height, variables);
+    convertProperty(runtime, object, "rect", props.rect, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    auto x = props.x;
+    auto y = props.y;
+    auto width = props.width;
+    auto height = props.height;
+    auto rect = props.rect;
+    if (props.image.has_value()) {
+      auto img = props.image.value();
+      SkMatrix m33;
+      auto hasRect =
+          rect.has_value() || (width.has_value() && height.has_value());
+      if (hasRect) {
+        auto src = SkRect::MakeXYWH(0, 0, img->width(), img->height());
+        auto dst = rect.has_value()
+                       ? rect.value()
+                       : SkRect::MakeXYWH(x, y, width.value(), height.value());
+        auto rects = RNSkiaImage::fitRects(props.fit, src, dst);
+        auto m = RNSkiaImage::rect2rect(rects.src, rects.dst);
+        m33.preConcat(m);
+      }
+      SkMatrix lm;
+      lm.preConcat(m33);
+      auto m3 = processTransform(props.matrix, props.transform, props.origin);
+      lm.preConcat(m3);
+      auto shader = img->makeShader(
+          props.tx, props.ty,
+          props.sampling.value_or(SkSamplingOptions(SkFilterMode::kLinear)),
+          &lm);
+      ctx->shaders.push_back(shader);
+    }
+  }
+};
+
+struct GradientProps : TransformProps {
+  std::vector<SkColor> colors;
+  std::optional<std::vector<float>> positions;
+  std::optional<SkTileMode> mode;
+  std::optional<uint32_t> flags;
+};
+
+struct ColorShaderProps {
+  SkColor color;
+};
+
+class ColorShaderCmd : public Command {
+private:
+  ColorShaderProps props;
+
+public:
+  ColorShaderCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                 Variables &variables)
+      : Command(CommandType::PushShader, "skColorShader") {
+    convertProperty(runtime, object, "color", props.color, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    auto shader = SkShaders::Color(props.color);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct TurbulenceProps {
+  float freqX;
+  float freqY;
+  int octaves;
+  float seed;
+  float tileWidth;
+  float tileHeight;
+};
+
+class TurbulenceCmd : public Command {
+private:
+  TurbulenceProps props;
+
+public:
+  TurbulenceCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                Variables &variables)
+      : Command(CommandType::PushShader, "skTurbulence") {
+    convertProperty(runtime, object, "freqX", props.freqX, variables);
+    convertProperty(runtime, object, "freqY", props.freqY, variables);
+    convertProperty(runtime, object, "octaves", props.octaves, variables);
+    convertProperty(runtime, object, "seed", props.seed, variables);
+    convertProperty(runtime, object, "tileWidth", props.tileWidth, variables);
+    convertProperty(runtime, object, "tileHeight", props.tileHeight, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    auto size = SkISize::Make(props.tileWidth, props.tileHeight);
+    auto shader = SkShaders::MakeTurbulence(props.freqX, props.freqY,
+                                            props.octaves, props.seed, &size);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct FractalNoiseProps {
+  float freqX;
+  float freqY;
+  int octaves;
+  float seed;
+  float tileWidth;
+  float tileHeight;
+};
+
+class FractalNoiseCmd : public Command {
+private:
+  FractalNoiseProps props;
+
+public:
+  FractalNoiseCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                  Variables &variables)
+      : Command(CommandType::PushShader, "skFractalNoise") {
+    convertProperty(runtime, object, "freqX", props.freqX, variables);
+    convertProperty(runtime, object, "freqY", props.freqY, variables);
+    convertProperty(runtime, object, "octaves", props.octaves, variables);
+    convertProperty(runtime, object, "seed", props.seed, variables);
+    convertProperty(runtime, object, "tileWidth", props.tileWidth, variables);
+    convertProperty(runtime, object, "tileHeight", props.tileHeight, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    auto size = SkISize::Make(props.tileWidth, props.tileHeight);
+    auto shader = SkShaders::MakeFractalNoise(props.freqX, props.freqY,
+                                              props.octaves, props.seed, &size);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct LinearGradientProps : GradientProps {
+  SkPoint start;
+  SkPoint end;
+};
+
+class LinearGradientCmd : public Command {
+private:
+  LinearGradientProps props;
+
+public:
+  LinearGradientCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                    Variables &variables)
+      : Command(CommandType::PushShader, "skLinearGradient") {
+    convertProperty(runtime, object, "start", props.start, variables);
+    convertProperty(runtime, object, "end", props.end, variables);
+    convertProperty(runtime, object, "colors", props.colors, variables);
+    convertProperty(runtime, object, "positions", props.positions, variables);
+    convertProperty(runtime, object, "mode", props.mode, variables);
+    convertProperty(runtime, object, "flags", props.flags, variables);
+
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    SkMatrix m3 = processTransform(props.matrix, props.transform, props.origin);
+    const SkPoint pts[2] = {props.start, props.end};
+    auto shader = SkGradientShader::MakeLinear(
+        pts, props.colors.data(),
+        props.positions ? props.positions->data() : nullptr,
+        props.colors.size(), props.mode.value_or(SkTileMode::kClamp),
+        props.flags.value_or(0), &m3);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct RadialGradientProps : GradientProps {
+  SkPoint center;
+  float radius;
+};
+
+class RadialGradientCmd : public Command {
+private:
+  RadialGradientProps props;
+
+public:
+  RadialGradientCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                    Variables &variables)
+      : Command(CommandType::PushShader, "skRadialGradient") {
+    convertProperty(runtime, object, "c", props.center, variables);
+    convertProperty(runtime, object, "r", props.radius, variables);
+    convertProperty(runtime, object, "colors", props.colors, variables);
+    convertProperty(runtime, object, "positions", props.positions, variables);
+    convertProperty(runtime, object, "mode", props.mode, variables);
+    convertProperty(runtime, object, "flags", props.flags, variables);
+
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    SkMatrix m3 = processTransform(props.matrix, props.transform, props.origin);
+    auto shader = SkGradientShader::MakeRadial(
+        props.center, props.radius, props.colors.data(),
+        props.positions ? props.positions->data() : nullptr,
+        props.colors.size(), props.mode.value_or(SkTileMode::kClamp),
+        props.flags.value_or(0), &m3);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct SweepGradientProps : GradientProps {
+  SkPoint center;
+  std::optional<float> start;
+  std::optional<float> end;
+};
+
+class SweepGradientCmd : public Command {
+private:
+  SweepGradientProps props;
+
+public:
+  SweepGradientCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                   Variables &variables)
+      : Command(CommandType::PushShader, "skSweepGradient") {
+    convertProperty(runtime, object, "c", props.center, variables);
+    convertProperty(runtime, object, "start", props.start, variables);
+    convertProperty(runtime, object, "end", props.end, variables);
+    convertProperty(runtime, object, "colors", props.colors, variables);
+    convertProperty(runtime, object, "positions", props.positions, variables);
+    convertProperty(runtime, object, "mode", props.mode, variables);
+    convertProperty(runtime, object, "flags", props.flags, variables);
+
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    SkMatrix m3 = processTransform(props.matrix, props.transform, props.origin);
+    auto shader = SkGradientShader::MakeSweep(
+        props.center.x(), props.center.y(), props.colors.data(),
+        props.positions ? props.positions->data() : nullptr,
+        props.colors.size(), props.mode.value_or(SkTileMode::kClamp),
+        props.start.value_or(0), props.end.value_or(360),
+        props.flags.value_or(0), &m3);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct TwoPointConicalGradientProps : GradientProps {
+  SkPoint start;
+  float startRadius;
+  SkPoint end;
+  float endRadius;
+};
+
+class TwoPointConicalGradientCmd : public Command {
+private:
+  TwoPointConicalGradientProps props;
+
+public:
+  TwoPointConicalGradientCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                             Variables &variables)
+      : Command(CommandType::PushShader, "skTwoPointConicalGradient") {
+    convertProperty(runtime, object, "start", props.start, variables);
+    convertProperty(runtime, object, "startR", props.startRadius, variables);
+    convertProperty(runtime, object, "end", props.end, variables);
+    convertProperty(runtime, object, "endR", props.endRadius, variables);
+    convertProperty(runtime, object, "colors", props.colors, variables);
+    convertProperty(runtime, object, "positions", props.positions, variables);
+    convertProperty(runtime, object, "mode", props.mode, variables);
+    convertProperty(runtime, object, "flags", props.flags, variables);
+
+    convertProperty(runtime, object, "transform", props.transform, variables);
+    convertProperty(runtime, object, "origin", props.origin, variables);
+    convertProperty(runtime, object, "matrix", props.matrix, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    SkMatrix m3 = processTransform(props.matrix, props.transform, props.origin);
+    auto shader = SkGradientShader::MakeTwoPointConical(
+        props.start, props.startRadius, props.end, props.endRadius,
+        props.colors.data(),
+        props.positions ? props.positions->data() : nullptr,
+        props.colors.size(), props.mode.value_or(SkTileMode::kClamp),
+        props.flags.value_or(0), &m3);
+    ctx->shaders.push_back(shader);
+  }
+};
+
+struct BlendShaderProps {
+  SkBlendMode mode;
+};
+
+class BlendShaderCmd : public Command {
+private:
+  BlendShaderProps props;
+
+public:
+  BlendShaderCmd(jsi::Runtime &runtime, const jsi::Object &object,
+                 Variables &variables)
+      : Command(CommandType::PushShader, "skBlendShader") {
+    convertProperty(runtime, object, "mode", props.mode, variables);
+  }
+
+  void pushShader(DrawingCtx *ctx) {
+    // Get all existing shaders from the context
+    std::vector<sk_sp<SkShader>> shaders = ctx->popAllShaders();
+
+    // We need at least 2 shaders to blend
+    if (shaders.size() >= 2) {
+      // Start from the last shader and blend backwards
+      sk_sp<SkShader> blendedShader = shaders.back();
+
+      // Iterate from second-to-last to first shader
+      for (int i = shaders.size() - 2; i >= 0; i--) {
+        blendedShader = SkShaders::Blend(props.mode, shaders[i], blendedShader);
+      }
+
+      ctx->shaders.push_back(blendedShader);
+    } else if (shaders.size() == 1) {
+      // If only one shader, just push it back
+      ctx->shaders.push_back(shaders[0]);
+    }
+  }
+};
+
+} // namespace RNSkia

package/cpp/rnskia/dom/nodes/JsiAtlasNode.h

@@ -29,8 +29,9 @@ protected:
                                  ? *_blendModeProp->getDerivedValue()
                                  : SkBlendMode::kDstOver;
       auto paint = *context->getPaint();
-      auto sampling = _samplingProp->isSet() ? *_samplingProp->getDerivedValue()
-                                             : SkSamplingOptions(SkFilterMode::kLinear);
+      auto sampling = _samplingProp->isSet()
+                          ? *_samplingProp->getDerivedValue()
+                          : SkSamplingOptions(SkFilterMode::kLinear);
       context->getCanvas()->drawAtlas(
           image.get(), transforms->data(), sprites->data(),
           colors == nullptr ? nullptr : colors->data(), sprites->size(),

package/cpp/rnskia/dom/nodes/JsiImageNode.h

@@ -21,8 +21,9 @@ protected:
     if (image == nullptr) {
       return;
     }
-    auto sampling = _samplingProp->isSet() ? *_samplingProp->getDerivedValue()
-                                           : SkSamplingOptions(SkFilterMode::kLinear);
+    auto sampling = _samplingProp->isSet()
+                        ? *_samplingProp->getDerivedValue()
+                        : SkSamplingOptions(SkFilterMode::kLinear);
     context->getCanvas()->drawImageRect(image, rects->src, rects->dst, sampling,
                                         context->getPaint().get(),
                                         SkCanvas::kStrict_SrcRectConstraint);

package/jestSetup.js

@@ -12,6 +12,14 @@ jest.mock("@shopify/react-native-skia", () => {
       View: Noop,
     };
   });
+  jest.mock("@shopify/react-native-skia/lib/commonjs/skia/core/Font", () => {
+    return {
+      useFont: () => null,
+      matchFont: () => null,
+      listFontFamilies: () => [],
+      useFonts: () => null,
+    }
+  });
   return require("@shopify/react-native-skia/lib/commonjs/mock").Mock(
     global.CanvasKit
   );

package/jestSetup.mjs

@@ -18,5 +18,13 @@ jest.mock("@shopify/react-native-skia", () => {
       View: Noop,
     };
   });
+  jest.mock("@shopify/react-native-skia/lib/commonjs/skia/core/Font", () => {
+    return {
+      useFont: () => null,
+      matchFont: () => null,
+      listFontFamilies: () => [],
+      useFonts: () => null,
+    }
+  });
   return Mock(global.CanvasKit);
 });

package/lib/commonjs/renderer/components/image/Image.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SkiaProps } from "../../processors";
 import type { ImageProps } from "../../../dom/types";
-export declare const Image: (props: SkiaProps<ImageProps>) => React.JSX.Element;
+export declare const Image: ({ fit, ...props }: SkiaProps<ImageProps>) => React.JSX.Element;

package/lib/commonjs/renderer/components/image/Image.js

@@ -6,8 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Image = void 0;
 var _react = _interopRequireDefault(require("react"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Image = props => {
-  return /*#__PURE__*/_react.default.createElement("skImage", props);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const Image = ({
+  fit = "contain",
+  ...props
+}) => {
+  return /*#__PURE__*/_react.default.createElement("skImage", _extends({
+    fit: fit
+  }, props));
 };
 exports.Image = Image;
 //# sourceMappingURL=Image.js.map

package/lib/commonjs/renderer/components/image/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","Image","props","createElement","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkiaProps } from \"../../processors\";\nimport type { ImageProps } from \"../../../dom/types\";\n\nexport const Image = (props: SkiaProps<ImageProps>) => {\n  return <skImage {...props} />;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAKnB,MAAMG,KAAK,GAAIC,KAA4B,IAAK;EACrD,oBAAOP,MAAA,CAAAK,OAAA,CAAAG,aAAA,YAAaD,KAAQ,CAAC;AAC/B,CAAC;AAACE,OAAA,CAAAH,KAAA,GAAAA,KAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","Image","fit","props","createElement","exports"],"sources":["Image.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { SkiaProps } from \"../../processors\";\nimport type { ImageProps } from \"../../../dom/types\";\n\nexport const Image = ({ fit = \"contain\", ...props }: SkiaProps<ImageProps>) => {\n  return <skImage fit={fit} {...props} />;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAP,CAAA,MAAAA,CAAA,GAAAQ,SAAA,CAAAC,MAAA,EAAAT,CAAA,UAAAU,CAAA,GAAAF,SAAA,CAAAR,CAAA,YAAAW,CAAA,IAAAD,CAAA,OAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,aAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAKnB,MAAMO,KAAK,GAAGA,CAAC;EAAEC,GAAG,GAAG,SAAS;EAAE,GAAGC;AAA6B,CAAC,KAAK;EAC7E,oBAAOpB,MAAA,CAAAK,OAAA,CAAAgB,aAAA,YAAAf,QAAA;IAASa,GAAG,EAAEA;EAAI,GAAKC,KAAK,CAAG,CAAC;AACzC,CAAC;AAACE,OAAA,CAAAJ,KAAA,GAAAA,KAAA","ignoreList":[]}

package/lib/commonjs/skia/types/Recorder.d.ts

@@ -0,0 +1,52 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { TextProps, AtlasProps, BlurMaskFilterProps, BoxProps, BoxShadowProps, CircleProps, CTMProps, DiffRectProps, GlyphsProps, ImageProps, ImageSVGProps, LineProps, NodeType, OvalProps, PaintProps, ParagraphProps, PatchProps, PathProps, PictureProps, PointsProps, RectProps, RoundedRectProps, TextBlobProps, TextPathProps, VerticesProps } from "../../dom/types";
+import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
+import type { SkCanvas } from "./Canvas";
+export interface BaseRecorder {
+    saveGroup(): void;
+    restoreGroup(): void;
+    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;
+}
+export interface JsiRecorder extends BaseRecorder {
+    play(canvas: SkCanvas): void;
+    applyUpdates(variables: SharedValue<unknown>[]): void;
+}

package/lib/commonjs/skia/types/Recorder.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=Recorder.js.map

package/lib/commonjs/skia/types/Recorder.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["Recorder.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type {\n  TextProps,\n  AtlasProps,\n  BlurMaskFilterProps,\n  BoxProps,\n  BoxShadowProps,\n  CircleProps,\n  CTMProps,\n  DiffRectProps,\n  GlyphsProps,\n  ImageProps,\n  ImageSVGProps,\n  LineProps,\n  NodeType,\n  OvalProps,\n  PaintProps,\n  ParagraphProps,\n  PatchProps,\n  PathProps,\n  PictureProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextBlobProps,\n  TextPathProps,\n  VerticesProps,\n} from \"../../dom/types\";\nimport type { AnimatedProps } from \"../../renderer/processors/Animations/Animations\";\n\nimport type { SkCanvas } from \"./Canvas\";\n\nexport interface BaseRecorder {\n  saveGroup(): void;\n  restoreGroup(): void;\n  savePaint(props: AnimatedProps<PaintProps>): void;\n  restorePaint(): void;\n  restorePaintDeclaration(): void;\n  materializePaint(): void;\n  pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;\n  pushImageFilter(\n    imageFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushColorFilter(\n    colorFilterType: NodeType,\n    props: AnimatedProps<unknown>\n  ): void;\n  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;\n  pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;\n  composePathEffect(): void;\n  composeColorFilter(): void;\n  composeImageFilter(): void;\n  saveCTM(props: AnimatedProps<CTMProps>): void;\n  restoreCTM(): void;\n  drawPaint(): void;\n  saveLayer(): void;\n  saveBackdropFilter(): void;\n  drawBox(\n    boxProps: AnimatedProps<BoxProps>,\n    shadows: {\n      props: BoxShadowProps;\n      animatedProps?: Record<string, SharedValue<unknown>>;\n    }[]\n  ): void;\n  drawImage(props: AnimatedProps<ImageProps>): void;\n  drawCircle(props: AnimatedProps<CircleProps>): void;\n  drawPoints(props: AnimatedProps<PointsProps>): void;\n  drawPath(props: AnimatedProps<PathProps>): void;\n  drawRect(props: AnimatedProps<RectProps>): void;\n  drawRRect(props: AnimatedProps<RoundedRectProps>): void;\n  drawOval(props: AnimatedProps<OvalProps>): void;\n  drawLine(props: AnimatedProps<LineProps>): void;\n  drawPatch(props: AnimatedProps<PatchProps>): void;\n  drawVertices(props: AnimatedProps<VerticesProps>): void;\n  drawDiffRect(props: AnimatedProps<DiffRectProps>): void;\n  drawText(props: AnimatedProps<TextProps>): void;\n  drawTextPath(props: AnimatedProps<TextPathProps>): void;\n  drawTextBlob(props: AnimatedProps<TextBlobProps>): void;\n  drawGlyphs(props: AnimatedProps<GlyphsProps>): void;\n  drawPicture(props: AnimatedProps<PictureProps>): void;\n  drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;\n  drawParagraph(props: AnimatedProps<ParagraphProps>): void;\n  drawAtlas(props: AnimatedProps<AtlasProps>): void;\n}\n\nexport interface JsiRecorder extends BaseRecorder {\n  play(canvas: SkCanvas): void;\n  applyUpdates(variables: SharedValue<unknown>[]): void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/skia/types/Skia.d.ts

@@ -28,6 +28,7 @@ import type { AnimatedImageFactory } from "./AnimatedImage";
 import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
 import type { Video } from "./Video";
 import type { NativeBufferFactory } from "./NativeBuffer";
+import type { JsiRecorder } from "./Recorder";
 export interface SkiaContext {
     getSurface(): SkSurface;
     present(): void;
@@ -80,4 +81,5 @@ export interface Skia {
     Video: (url: string) => Promise<Video> | Video;
     Context(surface: bigint, width: number, height: number): SkiaContext;
     NativeBuffer: NativeBufferFactory;
+    Recorder(): JsiRecorder;
 }

package/lib/commonjs/skia/types/Skia.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Skia.ts"],"sourcesContent":["import type { ImageFilterFactory } from \"./ImageFilter\";\nimport type { PathFactory } from \"./Path\";\nimport type { ColorFilterFactory } from \"./ColorFilter\";\nimport type { SkFont, FontMgrFactory } from \"./Font\";\nimport type { SkTypeface, TypefaceFactory } from \"./Typeface\";\nimport type { ImageFactory } from \"./Image\";\nimport type { MaskFilterFactory } from \"./MaskFilter\";\nimport type { SkPaint } from \"./Paint\";\nimport type { SkHostRect, SkRect } from \"./Rect\";\nimport type { SkRRect } from \"./RRect\";\nimport type {\n  RuntimeEffectFactory,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n} from \"./RuntimeEffect\";\nimport type { ShaderFactory } from \"./Shader\";\nimport type { SkMatrix } from \"./Matrix\";\nimport type { PathEffectFactory } from \"./PathEffect\";\nimport type { SkPoint } from \"./Point\";\nimport type { SkVertices, VertexMode } from \"./Vertices/Vertices\";\nimport type { DataFactory } from \"./Data\";\nimport type { SVGFactory } from \"./SVG\";\nimport type { TextBlobFactory } from \"./TextBlob\";\nimport type { SkSurface, SurfaceFactory } from \"./Surface\";\nimport type { SkRSXform } from \"./RSXform\";\nimport type { SkPath } from \"./Path/Path\";\nimport type { SkContourMeasureIter } from \"./ContourMeasure\";\nimport type { PictureFactory, SkPictureRecorder } from \"./Picture\";\nimport type { Color, SkColor } from \"./Color\";\nimport type { TypefaceFontProviderFactory } from \"./Paragraph/TypefaceFontProviderFactory\";\nimport type { AnimatedImageFactory } from \"./AnimatedImage\";\nimport type { ParagraphBuilderFactory } from \"./Paragraph/ParagraphBuilder\";\nimport type { Video } from \"./Video\";\nimport type { NativeBufferFactory } from \"./NativeBuffer\";\n\nexport interface SkiaContext {\n  getSurface(): SkSurface;\n  present(): void;\n}\n\n/**\n * Declares the interface for the native Skia API\n */\nexport interface Skia {\n  Point: (x: number, y: number) => SkPoint;\n  XYWHRect: (x: number, y: number, width: number, height: number) => SkHostRect;\n  RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;\n  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;\n  RSXformFromRadians: (\n    scale: number,\n    radians: number,\n    tx: number,\n    ty: number,\n    px: number,\n    py: number\n  ) => SkRSXform;\n  Color: (color: Color) => SkColor;\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ) => SkContourMeasureIter;\n  Paint: () => SkPaint;\n  PictureRecorder: () => SkPictureRecorder;\n  Picture: PictureFactory;\n  Path: PathFactory;\n  Matrix: (matrix?: readonly number[]) => SkMatrix;\n  ColorFilter: ColorFilterFactory;\n  Font: (typeface?: SkTypeface, size?: number) => SkFont;\n  Typeface: TypefaceFactory;\n  TypefaceFontProvider: TypefaceFontProviderFactory;\n  FontMgr: FontMgrFactory;\n  MaskFilter: MaskFilterFactory;\n  RuntimeEffect: RuntimeEffectFactory;\n  ImageFilter: ImageFilterFactory;\n  Shader: ShaderFactory;\n  PathEffect: PathEffectFactory;\n  /**\n   * Returns an Vertices based on the given positions and optional parameters.\n   * See SkVertices.h (especially the Builder) for more details.\n   * @param mode\n   * @param positions\n   * @param textureCoordinates\n   * @param colors - either a list of int colors or a flattened color array.\n   * @param indices\n   * @param isVolatile\n   */\n  MakeVertices(\n    mode: VertexMode,\n    positions: SkPoint[],\n    textureCoordinates?: SkPoint[] | null,\n    colors?: SkColor[],\n    indices?: number[] | null,\n    isVolatile?: boolean\n  ): SkVertices;\n  Data: DataFactory;\n  Image: ImageFactory;\n  AnimatedImage: AnimatedImageFactory;\n  SVG: SVGFactory;\n  TextBlob: TextBlobFactory;\n  Surface: SurfaceFactory;\n  ParagraphBuilder: ParagraphBuilderFactory;\n  Video: (url: string) => Promise<Video> | Video;\n  Context(surface: bigint, width: number, height: number): SkiaContext;\n  NativeBuffer: NativeBufferFactory;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Skia.ts"],"sourcesContent":["import type { ImageFilterFactory } from \"./ImageFilter\";\nimport type { PathFactory } from \"./Path\";\nimport type { ColorFilterFactory } from \"./ColorFilter\";\nimport type { SkFont, FontMgrFactory } from \"./Font\";\nimport type { SkTypeface, TypefaceFactory } from \"./Typeface\";\nimport type { ImageFactory } from \"./Image\";\nimport type { MaskFilterFactory } from \"./MaskFilter\";\nimport type { SkPaint } from \"./Paint\";\nimport type { SkHostRect, SkRect } from \"./Rect\";\nimport type { SkRRect } from \"./RRect\";\nimport type {\n  RuntimeEffectFactory,\n  SkRuntimeEffect,\n  SkRuntimeShaderBuilder,\n} from \"./RuntimeEffect\";\nimport type { ShaderFactory } from \"./Shader\";\nimport type { SkMatrix } from \"./Matrix\";\nimport type { PathEffectFactory } from \"./PathEffect\";\nimport type { SkPoint } from \"./Point\";\nimport type { SkVertices, VertexMode } from \"./Vertices/Vertices\";\nimport type { DataFactory } from \"./Data\";\nimport type { SVGFactory } from \"./SVG\";\nimport type { TextBlobFactory } from \"./TextBlob\";\nimport type { SkSurface, SurfaceFactory } from \"./Surface\";\nimport type { SkRSXform } from \"./RSXform\";\nimport type { SkPath } from \"./Path/Path\";\nimport type { SkContourMeasureIter } from \"./ContourMeasure\";\nimport type { PictureFactory, SkPictureRecorder } from \"./Picture\";\nimport type { Color, SkColor } from \"./Color\";\nimport type { TypefaceFontProviderFactory } from \"./Paragraph/TypefaceFontProviderFactory\";\nimport type { AnimatedImageFactory } from \"./AnimatedImage\";\nimport type { ParagraphBuilderFactory } from \"./Paragraph/ParagraphBuilder\";\nimport type { Video } from \"./Video\";\nimport type { NativeBufferFactory } from \"./NativeBuffer\";\nimport type { JsiRecorder } from \"./Recorder\";\n\nexport interface SkiaContext {\n  getSurface(): SkSurface;\n  present(): void;\n}\n\n/**\n * Declares the interface for the native Skia API\n */\nexport interface Skia {\n  Point: (x: number, y: number) => SkPoint;\n  XYWHRect: (x: number, y: number, width: number, height: number) => SkHostRect;\n  RuntimeShaderBuilder: (rt: SkRuntimeEffect) => SkRuntimeShaderBuilder;\n  RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;\n  RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;\n  RSXformFromRadians: (\n    scale: number,\n    radians: number,\n    tx: number,\n    ty: number,\n    px: number,\n    py: number\n  ) => SkRSXform;\n  Color: (color: Color) => SkColor;\n  ContourMeasureIter: (\n    path: SkPath,\n    forceClosed: boolean,\n    resScale: number\n  ) => SkContourMeasureIter;\n  Paint: () => SkPaint;\n  PictureRecorder: () => SkPictureRecorder;\n  Picture: PictureFactory;\n  Path: PathFactory;\n  Matrix: (matrix?: readonly number[]) => SkMatrix;\n  ColorFilter: ColorFilterFactory;\n  Font: (typeface?: SkTypeface, size?: number) => SkFont;\n  Typeface: TypefaceFactory;\n  TypefaceFontProvider: TypefaceFontProviderFactory;\n  FontMgr: FontMgrFactory;\n  MaskFilter: MaskFilterFactory;\n  RuntimeEffect: RuntimeEffectFactory;\n  ImageFilter: ImageFilterFactory;\n  Shader: ShaderFactory;\n  PathEffect: PathEffectFactory;\n  /**\n   * Returns an Vertices based on the given positions and optional parameters.\n   * See SkVertices.h (especially the Builder) for more details.\n   * @param mode\n   * @param positions\n   * @param textureCoordinates\n   * @param colors - either a list of int colors or a flattened color array.\n   * @param indices\n   * @param isVolatile\n   */\n  MakeVertices(\n    mode: VertexMode,\n    positions: SkPoint[],\n    textureCoordinates?: SkPoint[] | null,\n    colors?: SkColor[],\n    indices?: number[] | null,\n    isVolatile?: boolean\n  ): SkVertices;\n  Data: DataFactory;\n  Image: ImageFactory;\n  AnimatedImage: AnimatedImageFactory;\n  SVG: SVGFactory;\n  TextBlob: TextBlobFactory;\n  Surface: SurfaceFactory;\n  ParagraphBuilder: ParagraphBuilderFactory;\n  Video: (url: string) => Promise<Video> | Video;\n  Context(surface: bigint, width: number, height: number): SkiaContext;\n  NativeBuffer: NativeBufferFactory;\n  Recorder(): JsiRecorder;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/skia/types/index.d.ts

@@ -30,4 +30,5 @@ export * from "./Size";
 export * from "./Paragraph";
 export * from "./Matrix4";
 export * from "./NativeBuffer";
+export * from "./Recorder";
 export * from "./Video";

package/lib/commonjs/skia/types/index.js

@@ -355,6 +355,17 @@ Object.keys(_NativeBuffer).forEach(function (key) {
     }
   });
 });
+var _Recorder = require("./Recorder");
+Object.keys(_Recorder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Recorder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Recorder[key];
+    }
+  });
+});
 var _Video = require("./Video");
 Object.keys(_Video).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;