@shopify/react-native-skia 2.2.19 → 2.2.21

package/src/skia/core/SVG.web.ts

@@ -1,32 +1,46 @@
+import { useEffect, useState } from "react";
+
 import { Skia } from "../Skia";
-import type { DataSourceParam } from "../types";
+import type { DataSourceParam, SkSVG } from "../types";
 
 export const useSVG = (
   source: DataSourceParam,
   onError?: (err: Error) => void
 ) => {
+  const [svg, setSVG] = useState<SkSVG | null>(null);
   if (source === null || source === undefined) {
     throw new Error(`Invalid svg data source. Got: ${source}`);
   }
-  if (
-    typeof source !== "object" ||
-    source instanceof Uint8Array ||
-    !("uri" in source) ||
-    typeof source.uri !== "string" ||
-    !("default" in source) ||
-    typeof source.default !== "string"
-  ) {
-    throw new Error(
-      `Invalid svg data source. Make sure that the source resolves to a string. Got: ${JSON.stringify(
-        source,
-        null,
-        2
-      )}`
-    );
-  }
-  const svg = Skia.SVG.MakeFromString(source.default);
-  if (svg === null && onError !== undefined) {
-    onError(new Error("Failed to create SVG from source."));
-  }
+  useEffect(() => {
+    (async () => {
+      let src: string;
+      if (typeof source === "string") {
+        src = source;
+      } else if (
+        typeof source === "object" &&
+        "default" in source &&
+        typeof source.default === "string"
+      ) {
+        src = source.default;
+      } else if (typeof source === "object" && "uri" in source) {
+        src = source.uri;
+      } else {
+        throw new Error(
+          `Invalid svg data source. Make sure that the source resolves to a string. Got: ${JSON.stringify(
+            source,
+            null,
+            2
+          )}`
+        );
+      }
+      const result = await fetch(src);
+      const svgStr = await result.text();
+      const newSvg = Skia.SVG.MakeFromString(svgStr);
+      setSVG(newSvg);
+      if (newSvg === null && onError !== undefined) {
+        onError(new Error("Failed to create SVG from source."));
+      }
+    })();
+  }, [onError, source]);
   return svg;
 };

package/src/skia/web/JsiSkCanvas.ts

@@ -305,7 +305,9 @@ export class JsiSkCanvas
     );
   }
 
-  drawSvg(svg: SkSVG, _width?: number, _height?: number) {
+  drawSvg(svg: SkSVG, width?: number, height?: number) {
+    const ctm = this.ref.getLocalToDevice();
+    console.log({ ctm, width, height });
     const image = this.CanvasKit.MakeImageFromCanvasImageSource(
       (svg as JsiSkSVG).ref
     );

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -32,6 +32,10 @@ import type {
 import type { AnimatedProps } from "../../renderer";
 import { isSharedValue } from "../utils";
 
+/**
+ * Currently the recorder only work if the GPU resources (e.g Images) are owned by the main thread.
+ * It will crash otherwise on Ganesh (iOS/Android).
+ */
 export class ReanimatedRecorder implements BaseRecorder {
   private values = new Set<SharedValue<unknown>>();
   private recorder: JsiRecorder;

package/cpp/api/JsiSkThreadSafeDeletion.h

@@ -1,105 +0,0 @@
-#pragma once
-
-#include <functional>
-#include <memory>
-#include <mutex>
-#include <queue>
-#include <thread>
-
-// Define this to disable thread-safe deletion (for testing purposes)
-// #define DISABLE_THREAD_SAFE_DELETION
-
-namespace RNSkia {
-
-/**
- * Utility class for managing thread-safe deletion of Skia objects.
- * Ensures objects are deleted on the thread that created them.
- */
-template <typename T> class ThreadSafeDeletion {
-private:
-  struct DeletionItem {
-    sk_sp<T> object;
-    std::thread::id creationThreadId;
-  };
-
-  static inline std::mutex _queueMutex;
-  static inline std::queue<DeletionItem> _deletionQueue;
-
-  std::thread::id _creationThreadId;
-
-public:
-  ThreadSafeDeletion() : _creationThreadId(std::this_thread::get_id()) {}
-
-  /**
-   * Handles deletion of the object. If we're on the wrong thread,
-   * queues it for later deletion. Otherwise, allows immediate deletion.
-   * The object is always considered handled after this call.
-   */
-  void handleDeletion(sk_sp<T> object) {
-    if (!object) {
-      return;
-    }
-
-#ifdef DISABLE_THREAD_SAFE_DELETION
-    // When disabled, allow immediate deletion
-    // This will likely cause crashes when objects are deleted on wrong thread
-    return;
-#else
-    // Always try to drain the queue when handling deletions
-    drainDeletionQueue();
-
-    // Check if we're on the creation thread
-    if (std::this_thread::get_id() != _creationThreadId) {
-      // Queue for deletion on the correct thread
-      std::lock_guard<std::mutex> lock(_queueMutex);
-      _deletionQueue.push({object, _creationThreadId});
-      return;
-    }
-
-    // We're on the correct thread, allow immediate deletion via destructor
-    return;
-#endif
-  }
-
-  /**
-   * Drains the deletion queue for objects created on the current thread.
-   * Should be called periodically (e.g., when creating new objects).
-   */
-  static void drainDeletionQueue() {
-#ifndef DISABLE_THREAD_SAFE_DELETION
-    auto currentThreadId = std::this_thread::get_id();
-    std::queue<DeletionItem> remainingItems;
-
-    std::lock_guard<std::mutex> lock(_queueMutex);
-
-    // Process all items in the queue
-    while (!_deletionQueue.empty()) {
-      auto item = _deletionQueue.front();
-      _deletionQueue.pop();
-
-      // If this item belongs to the current thread, let it be deleted
-      if (item.creationThreadId == currentThreadId) {
-        // The sk_sp destructor will handle the cleanup
-        // Just let it go out of scope
-      } else {
-        // Keep items that belong to other threads
-        remainingItems.push(item);
-      }
-    }
-
-    // Put back items that couldn't be deleted
-    _deletionQueue = std::move(remainingItems);
-#endif
-  }
-
-  /**
-   * Returns the number of items waiting for deletion.
-   * Useful for debugging and testing.
-   */
-  static size_t getPendingDeletionCount() {
-    std::lock_guard<std::mutex> lock(_queueMutex);
-    return _deletionQueue.size();
-  }
-};
-
-} // namespace RNSkia