@shopify/react-native-skia 1.11.3 → 1.11.4

package/cpp/api/recorder/JsiRecorder.h

@@ -50,11 +50,15 @@ public:
   }
 
   JSI_HOST_FUNCTION(play) {
-    auto jsiCanvas =
-        arguments[0].asObject(runtime).asHostObject<JsiSkCanvas>(runtime);
-    DrawingCtx ctx(jsiCanvas->getCanvas());
+    SkPictureRecorder pictureRecorder;
+    SkISize size = SkISize::Make(2'000'000, 2'000'000);
+    SkRect rect = SkRect::Make(size);
+    auto canvas = pictureRecorder.beginRecording(rect, nullptr);
+    DrawingCtx ctx(canvas);
     getObject()->play(&ctx);
-    return jsi::Value::undefined();
+    auto picture = pictureRecorder.finishRecordingAsPicture();
+    return jsi::Object::createFromHostObject(
+        runtime, std::make_shared<JsiSkPicture>(getContext(), picture));
   }
 
   JSI_HOST_FUNCTION(applyUpdates) {

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

@@ -1,7 +1,7 @@
 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";
+import type { SkPicture } from "./Picture";
 export interface BaseRecorder {
     saveGroup(): void;
     restoreGroup(): void;
@@ -47,6 +47,6 @@ export interface BaseRecorder {
     drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 export interface JsiRecorder extends BaseRecorder {
-    play(canvas: SkCanvas): void;
+    play(): SkPicture;
     applyUpdates(variables: SharedValue<unknown>[]): void;
 }

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

@@ -1 +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":[]}
+{"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 { SkPicture } from \"./Picture\";\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(): SkPicture;\n  applyUpdates(variables: SharedValue<unknown>[]): void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/sksg/Container.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.createContainer = exports.Container = void 0;
 var _ReanimatedProxy = _interopRequireDefault(require("../external/reanimated/ReanimatedProxy"));
 var _renderHelpers = require("../external/reanimated/renderHelpers");
-var _Platform = require("../Platform");
 var _Recorder = require("./Recorder/Recorder");
 var _Visitor = require("./Recorder/Visitor");
 var _Player = require("./Recorder/Player");
@@ -32,20 +31,14 @@ const drawOnscreen = (Skia, nativeId, recording) => {
   rec.dispose();
   picture.dispose();
 };
-const nativeDrawOnscreen = (Skia, nativeId, recorder) => {
+const nativeDrawOnscreen = (nativeId, recorder) => {
   "worklet";
 
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
   //const start = performance.now();
-
-  recorder.play(canvas);
-  const picture = rec.finishRecordingAsPicture();
+  const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 class Container {
   constructor(Skia, nativeId) {
@@ -151,18 +144,18 @@ class NativeReanimatedContainer extends Container {
         "worklet";
 
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
     _ReanimatedProxy.default.runOnUI(() => {
       "worklet";
 
-      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder);
     })();
   }
 }
 const createContainer = (Skia, nativeId) => {
-  const native = _Platform.Platform.OS !== "web";
+  const native = global.SkiaViewApi !== undefined;
   if (_renderHelpers.HAS_REANIMATED_3 && nativeId !== -1) {
     if (native) {
       return new NativeReanimatedContainer(Skia, nativeId);

package/lib/commonjs/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Platform","_Recorder","_Visitor","_Player","_DrawingContext","_ReanimatedRecorder","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","nativeDrawOnscreen","recorder","play","Container","constructor","unmount","unmounted","drawOnCanvas","Error","exports","StaticContainer","redraw","Recorder","visit","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","Rea","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","ReanimatedRecorder","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","native","Platform","OS","HAS_REANIMATED_3"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\nimport { Platform } from \"../Platform\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nconst nativeDrawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recorder: JsiRecorder\n) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  recorder.play(canvas);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);\n    })();\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const native = Platform.OS !== \"web\";\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (native) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_ReanimatedProxy","_interopRequireDefault","require","_renderHelpers","_Recorder","_Visitor","_Player","_DrawingContext","_ReanimatedRecorder","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","createDrawingContext","paintPool","replay","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","nativeDrawOnscreen","recorder","play","Container","constructor","unmount","unmounted","drawOnCanvas","Error","exports","StaticContainer","redraw","Recorder","visit","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","Rea","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","ReanimatedRecorder","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","native","global","undefined","HAS_REANIMATED_3"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const native = global.SkiaViewApi !== undefined;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (native) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,cAAA,GAAAD,OAAA;AAKA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,eAAA,GAAAL,OAAA;AACA,IAAAM,mBAAA,GAAAN,OAAA;AAAmE,SAAAD,uBAAAQ,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAEnE,MAAMgB,YAAY,GAAGA,CAACC,IAAU,EAAEC,QAAgB,EAAEC,SAAoB,KAAK;EAC3E,SAAS;;EAET,MAAMC,GAAG,GAAGH,IAAI,CAACI,eAAe,CAAC,CAAC;EAClC,MAAMC,MAAM,GAAGF,GAAG,CAACG,cAAc,CAAC,CAAC;EACnC;;EAEA,MAAMC,GAAG,GAAG,IAAAC,oCAAoB,EAACR,IAAI,EAAEE,SAAS,CAACO,SAAS,EAAEJ,MAAM,CAAC;EACnE,IAAAK,cAAM,EAACH,GAAG,EAAEL,SAAS,CAACS,QAAQ,CAAC;EAC/B,MAAMC,OAAO,GAAGT,GAAG,CAACU,wBAAwB,CAAC,CAAC;EAC9C;EACA;EACAC,WAAW,CAACC,cAAc,CAACd,QAAQ,EAAE,SAAS,EAAEW,OAAO,CAAC;EACxDT,GAAG,CAACa,OAAO,CAAC,CAAC;EACbJ,OAAO,CAACI,OAAO,CAAC,CAAC;AACnB,CAAC;AAED,MAAMC,kBAAkB,GAAGA,CAAChB,QAAgB,EAAEiB,QAAqB,KAAK;EACtE,SAAS;;EAET;EAEA,MAAMN,OAAO,GAAGM,QAAQ,CAACC,IAAI,CAAC,CAAC;EAC/B;EACA;EACAL,WAAW,CAACC,cAAc,CAACd,QAAQ,EAAE,SAAS,EAAEW,OAAO,CAAC;AAC1D,CAAC;AAEM,MAAeQ,SAAS,CAAC;EAK9BC,WAAWA,CAAWrB,IAAU,EAAYC,QAAgB,EAAE;IAAA,KAAxCD,IAAU,GAAVA,IAAU;IAAA,KAAYC,QAAgB,GAAhBA,QAAgB;IAAApB,eAAA,eAJtC,EAAE;IAAAA,eAAA,oBACgB,IAAI;IAAAA,eAAA,oBACtB,KAAK;EAEoC;EAE/DyC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACC,SAAS,GAAG,IAAI;EACvB;EAEAC,YAAYA,CAACnB,MAAgB,EAAE;IAC7B,IAAI,CAAC,IAAI,CAACH,SAAS,EAAE;MACnB,MAAM,IAAIuB,KAAK,CAAC,sBAAsB,CAAC;IACzC;IACA,MAAMlB,GAAG,GAAG,IAAAC,oCAAoB,EAC9B,IAAI,CAACR,IAAI,EACT,IAAI,CAACE,SAAS,CAACO,SAAS,EACxBJ,MACF,CAAC;IACD,IAAAK,cAAM,EAACH,GAAG,EAAE,IAAI,CAACL,SAAS,CAACS,QAAQ,CAAC;EACtC;AAGF;AAACe,OAAA,CAAAN,SAAA,GAAAA,SAAA;AAED,MAAMO,eAAe,SAASP,SAAS,CAAC;EACtCC,WAAWA,CAACrB,IAAU,EAAEC,QAAgB,EAAE;IACxC,KAAK,CAACD,IAAI,EAAEC,QAAQ,CAAC;EACvB;EAEA2B,MAAMA,CAAA,EAAG;IACP,MAAMV,QAAQ,GAAG,IAAIW,kBAAQ,CAAC,CAAC;IAC/B,IAAAC,cAAK,EAACZ,QAAQ,EAAE,IAAI,CAACa,IAAI,CAAC;IAC1B,IAAI,CAAC7B,SAAS,GAAGgB,QAAQ,CAACc,YAAY,CAAC,CAAC;IACxC,MAAMC,UAAU,GAAG,IAAI,CAAChC,QAAQ,KAAK,CAAC,CAAC;IACvC,IAAIgC,UAAU,EAAE;MACd,MAAM9B,GAAG,GAAG,IAAI,CAACH,IAAI,CAACI,eAAe,CAAC,CAAC;MACvC,MAAMC,MAAM,GAAGF,GAAG,CAACG,cAAc,CAAC,CAAC;MACnC,IAAI,CAACkB,YAAY,CAACnB,MAAM,CAAC;MACzB,MAAMO,OAAO,GAAGT,GAAG,CAACU,wBAAwB,CAAC,CAAC;MAC9CC,WAAW,CAACC,cAAc,CAAC,IAAI,CAACd,QAAQ,EAAE,SAAS,EAAEW,OAAO,CAAC;IAC/D;EACF;AACF;AAEA,MAAMsB,mBAAmB,SAASd,SAAS,CAAC;EAG1CC,WAAWA,CAACrB,IAAU,EAAEC,QAAgB,EAAE;IACxC,KAAK,CAACD,IAAI,EAAEC,QAAQ,CAAC;IAACpB,eAAA,mBAHU,IAAI;EAItC;EAEA+C,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACO,QAAQ,KAAK,IAAI,EAAE;MAC1BC,wBAAG,CAACC,UAAU,CAAC,IAAI,CAACF,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACZ,SAAS,EAAE;MAClB;IACF;IACA,MAAML,QAAQ,GAAG,IAAIW,kBAAQ,CAAC,CAAC;IAC/B,IAAAC,cAAK,EAACZ,QAAQ,EAAE,IAAI,CAACa,IAAI,CAAC;IAC1B,MAAMO,MAAM,GAAGpB,QAAQ,CAACc,YAAY,CAAC,CAAC;IACtC,MAAM;MAAEO;IAAgB,CAAC,GAAGD,MAAM;IAClC,IAAI,CAACpC,SAAS,GAAG;MACfS,QAAQ,EAAE2B,MAAM,CAAC3B,QAAQ;MACzBF,SAAS,EAAE6B,MAAM,CAAC7B;IACpB,CAAC;IACD,MAAM;MAAER,QAAQ;MAAED,IAAI;MAAEE;IAAU,CAAC,GAAG,IAAI;IAC1C,IAAIqC,eAAe,CAACC,IAAI,GAAG,CAAC,EAAE;MAC5B,IAAI,CAACL,QAAQ,GAAGC,wBAAG,CAACK,WAAW,CAAC,MAAM;QACpC,SAAS;;QACT1C,YAAY,CAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAU,CAAC;MAC1C,CAAC,EAAEwC,KAAK,CAACC,IAAI,CAACJ,eAAe,CAAC,CAAC;IACjC;IACAH,wBAAG,CAACQ,OAAO,CAAC,MAAM;MAChB,SAAS;;MACT7C,YAAY,CAACC,IAAI,EAAEC,QAAQ,EAAEC,SAAU,CAAC;IAC1C,CAAC,CAAC,CAAC,CAAC;EACN;AACF;AAEA,MAAM2C,yBAAyB,SAASzB,SAAS,CAAC;EAGhDC,WAAWA,CAACrB,IAAU,EAAEC,QAAgB,EAAE;IACxC,KAAK,CAACD,IAAI,EAAEC,QAAQ,CAAC;IAACpB,eAAA,mBAHU,IAAI;EAItC;EAEA+C,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACO,QAAQ,KAAK,IAAI,EAAE;MAC1BC,wBAAG,CAACC,UAAU,CAAC,IAAI,CAACF,QAAQ,CAAC;IAC/B;IACA,IAAI,IAAI,CAACZ,SAAS,EAAE;MAClB;IACF;IACA,MAAM;MAAEtB,QAAQ;MAAED;IAAK,CAAC,GAAG,IAAI;IAC/B,MAAMkB,QAAQ,GAAG,IAAI4B,sCAAkB,CAAC9C,IAAI,CAAC;IAC7C,IAAA8B,cAAK,EAACZ,QAAQ,EAAE,IAAI,CAACa,IAAI,CAAC;IAC1B,MAAMgB,YAAY,GAAG7B,QAAQ,CAAC8B,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAG/B,QAAQ,CAACgC,WAAW,CAAC,CAAC;IAC7C,IAAIH,YAAY,CAACI,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAAChB,QAAQ,GAAGC,wBAAG,CAACK,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTQ,cAAc,CAACG,YAAY,CAACL,YAAY,CAAC;QACzC9B,kBAAkB,CAAChB,QAAQ,EAAEgD,cAAc,CAAC;MAC9C,CAAC,EAAEF,YAAY,CAAC;IAClB;IACAX,wBAAG,CAACQ,OAAO,CAAC,MAAM;MAChB,SAAS;;MACT3B,kBAAkB,CAAChB,QAAQ,EAAEgD,cAAc,CAAC;IAC9C,CAAC,CAAC,CAAC,CAAC;EACN;AACF;AAEO,MAAMI,eAAe,GAAGA,CAACrD,IAAU,EAAEC,QAAgB,KAAK;EAC/D,MAAMqD,MAAM,GAAGC,MAAM,CAACzC,WAAW,KAAK0C,SAAS;EAC/C,IAAIC,+BAAgB,IAAIxD,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,IAAIqD,MAAM,EAAE;MACV,OAAO,IAAIT,yBAAyB,CAAC7C,IAAI,EAAEC,QAAQ,CAAC;IACtD,CAAC,MAAM;MACL,OAAO,IAAIiC,mBAAmB,CAAClC,IAAI,EAAEC,QAAQ,CAAC;IAChD;EACF,CAAC,MAAM;IACL,OAAO,IAAI0B,eAAe,CAAC3B,IAAI,EAAEC,QAAQ,CAAC;EAC5C;AACF,CAAC;AAACyB,OAAA,CAAA2B,eAAA,GAAAA,eAAA","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 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";
+import type { SkPicture } from "./Picture";
 export interface BaseRecorder {
     saveGroup(): void;
     restoreGroup(): void;
@@ -47,6 +47,6 @@ export interface BaseRecorder {
     drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 export interface JsiRecorder extends BaseRecorder {
-    play(canvas: SkCanvas): void;
+    play(): SkPicture;
     applyUpdates(variables: SharedValue<unknown>[]): void;
 }

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

@@ -1 +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":[]}
+{"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 { SkPicture } from \"./Picture\";\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(): SkPicture;\n  applyUpdates(variables: SharedValue<unknown>[]): void;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/module/sksg/Container.js

@@ -3,7 +3,6 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import Rea from "../external/reanimated/ReanimatedProxy";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
-import { Platform } from "../Platform";
 import { Recorder } from "./Recorder/Recorder";
 import { visit } from "./Recorder/Visitor";
 import { replay } from "./Recorder/Player";
@@ -25,20 +24,14 @@ const drawOnscreen = (Skia, nativeId, recording) => {
   rec.dispose();
   picture.dispose();
 };
-const nativeDrawOnscreen = (Skia, nativeId, recorder) => {
+const nativeDrawOnscreen = (nativeId, recorder) => {
   "worklet";
 
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
   //const start = performance.now();
-
-  recorder.play(canvas);
-  const picture = rec.finishRecordingAsPicture();
+  const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 export class Container {
   constructor(Skia, nativeId) {
@@ -143,18 +136,18 @@ class NativeReanimatedContainer extends Container {
         "worklet";
 
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
     Rea.runOnUI(() => {
       "worklet";
 
-      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder);
     })();
   }
 }
 export const createContainer = (Skia, nativeId) => {
-  const native = Platform.OS !== "web";
+  const native = global.SkiaViewApi !== undefined;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
     if (native) {
       return new NativeReanimatedContainer(Skia, nativeId);

package/lib/module/sksg/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","Platform","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","unmount","unmounted","drawOnCanvas","Error","StaticContainer","redraw","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","native","OS"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\nimport { Platform } from \"../Platform\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nconst nativeDrawOnscreen = (\n  Skia: Skia,\n  nativeId: number,\n  recorder: JsiRecorder\n) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  recorder.play(canvas);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);\n    })();\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const native = Platform.OS !== \"web\";\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (native) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","Recorder","visit","replay","createDrawingContext","ReanimatedRecorder","drawOnscreen","Skia","nativeId","recording","rec","PictureRecorder","canvas","beginRecording","ctx","paintPool","commands","picture","finishRecordingAsPicture","SkiaViewApi","setJsiProperty","dispose","nativeDrawOnscreen","recorder","play","Container","constructor","_defineProperty","unmount","unmounted","drawOnCanvas","Error","StaticContainer","redraw","root","getRecording","isOnScreen","ReanimatedContainer","mapperId","stopMapper","record","animationValues","size","startMapper","Array","from","runOnUI","NativeReanimatedContainer","sharedValues","getSharedValues","sharedRecorder","getRecorder","length","applyUpdates","createContainer","native","global","undefined"],"sources":["Container.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkCanvas } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\n\nconst drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {\n  \"worklet\";\n\n  const rec = Skia.PictureRecorder();\n  const canvas = rec.beginRecording();\n  //const start = performance.now();\n\n  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);\n  replay(ctx, recording.commands);\n  const picture = rec.finishRecordingAsPicture();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n  rec.dispose();\n  picture.dispose();\n};\n\nconst nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {\n  \"worklet\";\n\n  //const start = performance.now();\n\n  const picture = recorder.play();\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nexport abstract class Container {\n  public root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia, protected nativeId: number) {}\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nclass StaticContainer extends Container {\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n\nclass ReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    const record = recorder.getRecording();\n    const { animationValues } = record;\n    this.recording = {\n      commands: record.commands,\n      paintPool: record.paintPool,\n    };\n    const { nativeId, Skia, recording } = this;\n    if (animationValues.size > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        drawOnscreen(Skia, nativeId, recording!);\n      }, Array.from(animationValues));\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      drawOnscreen(Skia, nativeId, recording!);\n    })();\n  }\n}\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n\n  constructor(Skia: Skia, nativeId: number) {\n    super(Skia, nativeId);\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const { nativeId, Skia } = this;\n    const recorder = new ReanimatedRecorder(Skia);\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder);\n      }, sharedValues);\n    }\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder);\n    })();\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  const native = global.SkiaViewApi !== undefined;\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    if (native) {\n      return new NativeReanimatedContainer(Skia, nativeId);\n    } else {\n      return new ReanimatedContainer(Skia, nativeId);\n    }\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/skia/types/Recorder.d.ts

@@ -1,7 +1,7 @@
 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";
+import type { SkPicture } from "./Picture";
 export interface BaseRecorder {
     saveGroup(): void;
     restoreGroup(): void;
@@ -47,6 +47,6 @@ export interface BaseRecorder {
     drawAtlas(props: AnimatedProps<AtlasProps>): void;
 }
 export interface JsiRecorder extends BaseRecorder {
-    play(canvas: SkCanvas): void;
+    play(): SkPicture;
     applyUpdates(variables: SharedValue<unknown>[]): void;
 }

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/skia/types/Recorder.ts

@@ -29,7 +29,7 @@ import type {
 } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer/processors/Animations/Animations";
 
-import type { SkCanvas } from "./Canvas";
+import type { SkPicture } from "./Picture";
 
 export interface BaseRecorder {
   saveGroup(): void;
@@ -86,6 +86,6 @@ export interface BaseRecorder {
 }
 
 export interface JsiRecorder extends BaseRecorder {
-  play(canvas: SkCanvas): void;
+  play(): SkPicture;
   applyUpdates(variables: SharedValue<unknown>[]): void;
 }

package/src/sksg/Container.ts

@@ -2,7 +2,6 @@ import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkCanvas } from "../skia/types";
 import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
-import { Platform } from "../Platform";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -29,24 +28,15 @@ const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   picture.dispose();
 };
 
-const nativeDrawOnscreen = (
-  Skia: Skia,
-  nativeId: number,
-  recorder: JsiRecorder
-) => {
+const nativeDrawOnscreen = (nativeId: number, recorder: JsiRecorder) => {
   "worklet";
 
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
   //const start = performance.now();
 
-  recorder.play(canvas);
-  const picture = rec.finishRecordingAsPicture();
+  const picture = recorder.play();
   //const end = performance.now();
   //console.log("Recording time: ", end - start);
   SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-  rec.dispose();
-  picture.dispose();
 };
 
 export abstract class Container {
@@ -154,18 +144,18 @@ class NativeReanimatedContainer extends Container {
       this.mapperId = Rea.startMapper(() => {
         "worklet";
         sharedRecorder.applyUpdates(sharedValues);
-        nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+        nativeDrawOnscreen(nativeId, sharedRecorder);
       }, sharedValues);
     }
     Rea.runOnUI(() => {
       "worklet";
-      nativeDrawOnscreen(Skia, nativeId, sharedRecorder);
+      nativeDrawOnscreen(nativeId, sharedRecorder);
     })();
   }
 }
 
 export const createContainer = (Skia: Skia, nativeId: number) => {
-  const native = Platform.OS !== "web";
+  const native = global.SkiaViewApi !== undefined;
   if (HAS_REANIMATED_3 && nativeId !== -1) {
     if (native) {
       return new NativeReanimatedContainer(Skia, nativeId);