@shopify/react-native-skia 1.11.3 → 1.11.5

package/cpp/api/recorder/Convertor.h

@@ -31,8 +31,15 @@ struct Radius {
 using ConversionFunction =
     std::function<void(jsi::Runtime &runtime, const jsi::Object &object)>;
 using Variables = std::map<std::string, std::vector<ConversionFunction>>;
+
 using Patch = std::array<SkPoint, 12>;
 
+struct GlyphData {
+  std::vector<SkGlyphID> glyphIds;
+  std::vector<SkPoint> positions;
+};
+
+
 bool isSharedValue(jsi::Runtime &runtime, const jsi::Value &value) {
   return value.isObject() &&
          value.asObject(runtime).hasProperty(runtime,
@@ -378,6 +385,31 @@ SkFont getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
   throw std::runtime_error("Invalid prop value for SkFont received");
 }
 
+template <>
+GlyphData getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
+  GlyphData result;
+  if (value.isObject() && value.asObject(runtime).isArray(runtime)) {
+    auto array = value.asObject(runtime).asArray(runtime);
+    size_t size = array.size(runtime);
+    result.glyphIds.reserve(size);
+    result.positions.reserve(size);
+    
+    for (size_t i = 0; i < size; i++) {
+      auto glyph = array.getValueAtIndex(runtime, i).asObject(runtime);
+      // Get the glyph id
+      result.glyphIds.push_back(
+        static_cast<SkGlyphID>(glyph.getProperty(runtime, "id").asNumber())
+      );
+      // Get the position
+      result.positions.push_back(
+        processPoint(runtime, glyph.getProperty(runtime, "pos"))
+      );
+    }
+    return result;
+  }
+  throw std::runtime_error("Invalid prop value for GlyphData received");
+}
+
 template <>
 SkRSXform getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
   if (value.isObject()) {
@@ -389,6 +421,20 @@ SkRSXform getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
   throw std::runtime_error("Invalid prop value for SkRSXform received");
 }
 
+template <>
+sk_sp<SkSVGDOM> getPropertyValue(jsi::Runtime &runtime, const jsi::Value &value) {
+  if (value.isObject() && value.asObject(runtime).isHostObject(runtime)) {
+    auto ptr = std::dynamic_pointer_cast<JsiSkSVG>(
+        value.asObject(runtime).asHostObject(runtime));
+    if (ptr != nullptr) {
+      return ptr->getObject();
+    }
+  } else if (value.isNull()) {
+    return nullptr;
+  }
+  throw std::runtime_error("Expected SkSvgDom object or null for the svg property.");
+}
+
 template <>
 sk_sp<SkPicture> getPropertyValue(jsi::Runtime &runtime,
                                   const jsi::Value &value) {

package/cpp/api/recorder/Drawings.h

@@ -745,16 +745,11 @@ public:
   }
 };
 
-struct GlyphData {
-  std::vector<SkGlyphID> glyphIds;
-  std::vector<SkPoint> positions;
-};
-
 struct GlyphsCmdProps {
   std::optional<SkFont> font;
   float x;
   float y;
-  //  GlyphData glyphs;
+  GlyphData glyphs;
 };
 
 class GlyphsCmd : public Command {
@@ -768,22 +763,18 @@ public:
     convertProperty(runtime, object, "font", props.font, variables);
     convertProperty(runtime, object, "x", props.x, variables);
     convertProperty(runtime, object, "y", props.y, variables);
-    //  convertProperty(runtime, object, "glyphs", props.glyphs, variables);
+    convertProperty(runtime, object, "glyphs", props.glyphs, variables);
   }
 
-  void draw(DrawingCtx *ctx) {
+ void draw(DrawingCtx *ctx) {
     if (props.font.has_value()) {
-      //      std::vector<uint16_t> glyphIds;
-      //      std::vector<SkPoint> positions;
-      //            for (const auto &[id, pos] : props.glyphs) {
-      //              glyphIds.push_back(id);
-      //              positions.push_back(pos);
-      //            }
-      //      ctx->canvas->drawGlyphs(
-      //          static_cast<int>(props.glyphs.glyphIds.size()),
-      //          props.glyphs.glyphIds.data(), props.glyphs.positions.data(),
-      //          SkPoint::Make(props.x, props.y), props.font.value(),
-      //          ctx->getPaint());
+      ctx->canvas->drawGlyphs(
+          static_cast<int>(props.glyphs.glyphIds.size()),
+          props.glyphs.glyphIds.data(),
+          props.glyphs.positions.data(),
+          SkPoint::Make(props.x, props.y),
+          props.font.value(),
+          ctx->getPaint());
     }
   }
 };
@@ -823,21 +814,8 @@ public:
   ImageSVGCmd(jsi::Runtime &runtime, const jsi::Object &object,
               Variables &variables)
       : Command(CommandType::DrawImageSVG) {
-    // Convert SVG property - expect a host object of JsiSkSVG type
-    auto svgValue = object.getProperty(runtime, "svg");
-    if (svgValue.isObject() &&
-        svgValue.asObject(runtime).isHostObject(runtime)) {
-      auto ptr = std::dynamic_pointer_cast<JsiSkSVG>(
-          svgValue.asObject(runtime).asHostObject(runtime));
-      if (ptr != nullptr) {
-        props.svg = ptr->getObject();
-      } else {
-        throw std::runtime_error(
-            "Expected SkSvgDom object for the svg property.");
-      }
-    }
-
     // Convert other properties
+    convertProperty(runtime, object, "svg", props.svg, variables);
     convertProperty(runtime, object, "x", props.x, variables);
     convertProperty(runtime, object, "y", props.y, variables);
     convertProperty(runtime, object, "width", props.width, variables);

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/renderer/Canvas.web.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { SkSize } from "../skia/types";
@@ -7,4 +8,4 @@ export interface CanvasProps extends ViewProps {
     onSize?: SharedValue<SkSize>;
     mode?: "continuous" | "default";
 }
-export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;

package/lib/commonjs/renderer/Canvas.web.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Canvas = void 0;
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _SkiaViewNativeId = require("../views/SkiaViewNativeId");
 var _Reconciler = require("../sksg/Reconciler");
 var _skia = require("../skia");
 var _SkiaPictureView = require("../views/SkiaPictureView.web");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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); }
 // TODO: no need to go through the JS thread for this
 const useOnSizeEvent = (resultValue, onLayout) => {
@@ -98,7 +100,7 @@ const Canvas = exports.Canvas = /*#__PURE__*/(0, _react.forwardRef)(({
       return nativeId;
     }
   }));
-  return /*#__PURE__*/React.createElement(_SkiaPictureView.SkiaPictureView, _extends({
+  return /*#__PURE__*/_react.default.createElement(_SkiaPictureView.SkiaPictureView, _extends({
     ref: viewRef,
     collapsable: false,
     nativeID: `${nativeId}`,

package/lib/commonjs/renderer/Canvas.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_SkiaViewNativeId","_Reconciler","_skia","_SkiaPictureView","_extends","Object","assign","bind","n","e","arguments","length","t","r","hasOwnProperty","call","apply","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","exports","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","useRef","rafId","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","React","createElement","SkiaPictureView","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const viewRef = useRef<SkiaPictureView>(null);\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n      if (viewRef.current) {\n        viewRef.current.setPicture(root.getPicture());\n      }\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (viewRef.current) {\n          viewRef.current.setPicture(root.getPicture());\n        }\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        viewRef.current?.redraw();\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <SkiaPictureView\n        ref={viewRef}\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_SkiaViewNativeId","_Reconciler","_skia","_SkiaPictureView","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","useOnSizeEvent","resultValue","onLayout","useCallback","event","width","height","nativeEvent","layout","value","Canvas","exports","forwardRef","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","useRef","rafId","nativeId","useMemo","SkiaViewNativeId","current","root","SkiaSGRoot","Skia","useEffect","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","useImperativeHandle","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","createElement","SkiaPictureView","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const viewRef = useRef<SkiaPictureView>(null);\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n      if (viewRef.current) {\n        viewRef.current.setPicture(root.getPicture());\n      }\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (viewRef.current) {\n          viewRef.current.setPicture(root.getPicture());\n        }\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        viewRef.current?.redraw();\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <SkiaPictureView\n        ref={viewRef}\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}

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.d.ts

@@ -1,6 +1,10 @@
 import type { Skia, SkCanvas } from "../skia/types";
+import type { ISkiaViewApi } from "../views/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
+declare global {
+    var SkiaViewApi: ISkiaViewApi;
+}
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;

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\";\nimport type { ISkiaViewApi } from \"../views/types\";\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\ndeclare global {\n  var SkiaViewApi: ISkiaViewApi;\n}\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/module/renderer/Canvas.web.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { SkSize } from "../skia/types";
@@ -7,4 +8,4 @@ export interface CanvasProps extends ViewProps {
     onSize?: SharedValue<SkSize>;
     mode?: "continuous" | "default";
 }
-export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;

package/lib/module/renderer/Canvas.web.js

@@ -1,5 +1,5 @@
 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); }
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { SkiaViewNativeId } from "../views/SkiaViewNativeId";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 import { Skia } from "../skia";

package/lib/module/renderer/Canvas.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaSGRoot","Skia","SkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","rafId","nativeId","current","root","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","React","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const viewRef = useRef<SkiaPictureView>(null);\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n      if (viewRef.current) {\n        viewRef.current.setPicture(root.getPicture());\n      }\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (viewRef.current) {\n          viewRef.current.setPicture(root.getPicture());\n        }\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        viewRef.current?.redraw();\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <SkiaPictureView\n        ref={viewRef}\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","SkiaViewNativeId","SkiaSGRoot","Skia","SkiaPictureView","useOnSizeEvent","resultValue","onLayout","event","width","height","nativeEvent","layout","value","Canvas","mode","debug","opaque","children","onSize","_onLayout","viewProps","ref","viewRef","rafId","nativeId","current","root","render","setPicture","getPicture","unmount","requestRedraw","requestAnimationFrame","cancelAnimationFrame","makeImageSnapshot","rect","SkiaViewApi","makeImageSnapshotAsync","redraw","_viewRef$current","getNativeId","createElement","_extends","collapsable","nativeID"],"sources":["Canvas.web.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { LayoutChangeEvent, ViewProps } from \"react-native\";\nimport type { SharedValue } from \"react-native-reanimated\";\n\nimport { SkiaViewNativeId } from \"../views/SkiaViewNativeId\";\nimport type { SkRect, SkSize } from \"../skia/types\";\nimport { SkiaSGRoot } from \"../sksg/Reconciler\";\nimport { Skia } from \"../skia\";\nimport type { SkiaBaseViewProps } from \"../views\";\nimport { SkiaPictureView } from \"../views/SkiaPictureView.web\";\n\n// TODO: no need to go through the JS thread for this\nconst useOnSizeEvent = (\n  resultValue: SkiaBaseViewProps[\"onSize\"],\n  onLayout?: (event: LayoutChangeEvent) => void\n) => {\n  return useCallback(\n    (event: LayoutChangeEvent) => {\n      if (onLayout) {\n        onLayout(event);\n      }\n      const { width, height } = event.nativeEvent.layout;\n\n      if (resultValue) {\n        resultValue.value = { width, height };\n      }\n    },\n    [onLayout, resultValue]\n  );\n};\n\nexport interface CanvasProps extends ViewProps {\n  debug?: boolean;\n  opaque?: boolean;\n  onSize?: SharedValue<SkSize>;\n  mode?: \"continuous\" | \"default\";\n}\n\nexport const Canvas = forwardRef(\n  (\n    {\n      mode,\n      debug,\n      opaque,\n      children,\n      onSize,\n      onLayout: _onLayout,\n      ...viewProps\n    }: CanvasProps,\n    ref\n  ) => {\n    const viewRef = useRef<SkiaPictureView>(null);\n    const rafId = useRef<number | null>(null);\n    const onLayout = useOnSizeEvent(onSize, _onLayout);\n    // Native ID\n    const nativeId = useMemo(() => {\n      return SkiaViewNativeId.current++;\n    }, []);\n\n    // Root\n    const root = useMemo(() => new SkiaSGRoot(Skia), []);\n\n    // Render effects\n    useEffect(() => {\n      root.render(children);\n      if (viewRef.current) {\n        viewRef.current.setPicture(root.getPicture());\n      }\n    }, [children, root]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    const requestRedraw = useCallback(() => {\n      rafId.current = requestAnimationFrame(() => {\n        root.render(children);\n        if (viewRef.current) {\n          viewRef.current.setPicture(root.getPicture());\n        }\n        if (mode === \"continuous\") {\n          requestRedraw();\n        }\n      });\n    }, [children, mode, root]);\n\n    useEffect(() => {\n      if (mode === \"continuous\") {\n        requestRedraw();\n      }\n      return () => {\n        if (rafId.current !== null) {\n          cancelAnimationFrame(rafId.current);\n        }\n      };\n    }, [mode, requestRedraw]);\n\n    // Component methods\n    useImperativeHandle(ref, () => ({\n      makeImageSnapshot: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshot(nativeId, rect);\n      },\n      makeImageSnapshotAsync: (rect?: SkRect) => {\n        return SkiaViewApi.makeImageSnapshotAsync(nativeId, rect);\n      },\n      redraw: () => {\n        viewRef.current?.redraw();\n      },\n      getNativeId: () => {\n        return nativeId;\n      },\n    }));\n    return (\n      <SkiaPictureView\n        ref={viewRef}\n        collapsable={false}\n        nativeID={`${nativeId}`}\n        debug={debug}\n        opaque={opaque}\n        onLayout={onLayout}\n        {...viewProps}\n      />\n    );\n  }\n);\n"],"mappings":"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","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.d.ts

@@ -1,6 +1,10 @@
 import type { Skia, SkCanvas } from "../skia/types";
+import type { ISkiaViewApi } from "../views/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
+declare global {
+    var SkiaViewApi: ISkiaViewApi;
+}
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;

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\";\nimport type { ISkiaViewApi } from \"../views/types\";\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\ndeclare global {\n  var SkiaViewApi: ISkiaViewApi;\n}\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/lib/commonjs/renderer/Canvas.web.d.ts

@@ -1,3 +1,2 @@
 export const __esModule: boolean;
-export const Canvas: _react.ForwardRefExoticComponent<_react.RefAttributes<any>>;
-import _react = require("react");
+export const Canvas: any;

package/lib/typescript/lib/module/renderer/Canvas.web.d.ts

@@ -1 +1,2 @@
-export const Canvas: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
+export const Canvas: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/lib/typescript/src/renderer/Canvas.web.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ViewProps } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
 import type { SkSize } from "../skia/types";
@@ -7,4 +8,4 @@ export interface CanvasProps extends ViewProps {
     onSize?: SharedValue<SkSize>;
     mode?: "continuous" | "default";
 }
-export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;
+export declare const Canvas: React.ForwardRefExoticComponent<CanvasProps & React.RefAttributes<unknown>>;

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/lib/typescript/src/sksg/Container.d.ts

@@ -1,6 +1,10 @@
 import type { Skia, SkCanvas } from "../skia/types";
+import type { ISkiaViewApi } from "../views/types";
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
+declare global {
+    var SkiaViewApi: ISkiaViewApi;
+}
 export declare abstract class Container {
     protected Skia: Skia;
     protected nativeId: number;

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.5",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/renderer/Canvas.web.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
   forwardRef,
   useCallback,
   useEffect,

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,7 @@ 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 { ISkiaViewApi } from "../views/types";
 
 import type { Node } from "./Node";
 import type { Recording } from "./Recorder/Recorder";
@@ -12,6 +12,10 @@ import { replay } from "./Recorder/Player";
 import { createDrawingContext } from "./Recorder/DrawingContext";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 
+declare global {
+  var SkiaViewApi: ISkiaViewApi;
+}
+
 const drawOnscreen = (Skia: Skia, nativeId: number, recording: Recording) => {
   "worklet";
 
@@ -29,24 +33,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 +149,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);