@shopify/react-native-skia 2.2.19 → 2.2.20

package/lib/typescript/src/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -2,6 +2,10 @@ import type { SharedValue } from "react-native-reanimated";
 import type { BaseRecorder, JsiRecorder, Skia } from "../../skia/types";
 import type { PaintProps, NodeType, BlurMaskFilterProps, CTMProps, BoxProps, BoxShadowProps, ImageProps, CircleProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, SkottieProps } from "../../dom/types";
 import type { AnimatedProps } from "../../renderer";
+/**
+ * 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 declare class ReanimatedRecorder implements BaseRecorder {
     private values;
     private recorder;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.2.19",
+  "version": "2.2.20",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -137,6 +137,11 @@
     "jsSrcsDir": "src/specs",
     "android": {
       "javaPackageName": "com.shopify.reactnative.skia"
+    },
+    "ios": {
+      "componentProviders": [
+        "SkiaPictureViewNativeComponent"
+      ]
     }
   },
   "react-native-builder-bob": {

package/src/external/reanimated/textures.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import type { DependencyList, ReactElement } from "react";
 import type { SharedValue } from "react-native-reanimated";
 
@@ -8,21 +8,45 @@ import type {
   SkPicture,
   SkSize,
 } from "../../skia/types";
-import {
-  drawAsImageFromPicture,
-  drawAsPicture,
-} from "../../renderer/Offscreen";
+import { drawAsPicture } from "../../renderer/Offscreen";
 import { Skia, useImage } from "../../skia";
+import { Platform } from "../../Platform";
 
 import Rea from "./ReanimatedProxy";
 
+const createTextureFromImage = (
+  texture: SharedValue<SkImage | null>,
+  image: SkImage
+) => {
+  "worklet";
+  const surface = Skia.Surface.MakeOffscreen(image.width(), image.height());
+  if (!surface) {
+    texture.value = null;
+    return;
+  }
+  const canvas = surface.getCanvas();
+  canvas.drawImage(image, 0, 0);
+  surface.flush();
+  texture.value = surface.makeImageSnapshot();
+  if (Platform.OS === "web") {
+    texture.value = texture.value.makeNonTextureImage();
+  }
+};
+
 const createTexture = (
   texture: SharedValue<SkImage | null>,
   picture: SkPicture,
   size: SkSize
 ) => {
   "worklet";
-  texture.value = drawAsImageFromPicture(picture, size);
+  const surface = Skia.Surface.MakeOffscreen(size.width, size.height)!;
+  const canvas = surface.getCanvas();
+  canvas.drawPicture(picture);
+  surface.flush();
+  texture.value = surface.makeImageSnapshot();
+  if (Platform.OS === "web") {
+    texture.value = texture.value.makeNonTextureImage();
+  }
 };
 
 export const useTexture = (
@@ -61,26 +85,11 @@ export const usePictureAsTexture = (
 
 export const useImageAsTexture = (source: DataSourceParam) => {
   const image = useImage(source);
-  const size = useMemo(() => {
-    if (image) {
-      return { width: image.width(), height: image.height() };
-    }
-    return { width: 0, height: 0 };
-  }, [image]);
-  const picture = useMemo(() => {
-    if (image) {
-      const recorder = Skia.PictureRecorder();
-      const canvas = recorder.beginRecording({
-        x: 0,
-        y: 0,
-        width: size.width,
-        height: size.height,
-      });
-      canvas.drawImage(image, 0, 0);
-      return recorder.finishRecordingAsPicture();
-    } else {
-      return null;
+  const texture = Rea.useSharedValue<SkImage | null>(null);
+  useEffect(() => {
+    if (image !== null) {
+      Rea.runOnUI(createTextureFromImage)(texture, image);
     }
-  }, [size, image]);
-  return usePictureAsTexture(picture, size);
+  }, [image, texture]);
+  return texture;
 };

package/src/renderer/Offscreen.tsx

@@ -5,7 +5,6 @@ import { Skia } from "../skia";
 import { Platform } from "../Platform";
 import { SkiaSGRoot } from "../sksg/Reconciler";
 
-// We call it main thread because on web main is JS thread
 export const isOnMainThread = () => {
   "worklet";
   return (
@@ -36,10 +35,5 @@ export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {
   canvas.drawPicture(picture);
   surface.flush();
   const image = surface.makeImageSnapshot();
-  // If we are not on the main thread or if we are on Web, we need to make the image non-texture.
-  if (!isOnMainThread() || Platform.OS === "web") {
-    return image.makeNonTextureImage();
-  } else {
-    return image;
-  }
+  return image.makeNonTextureImage();
 };

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

@@ -8,14 +8,18 @@ export const useSVG = (
   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"
+  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,
@@ -24,7 +28,7 @@ export const useSVG = (
       )}`
     );
   }
-  const svg = Skia.SVG.MakeFromString(source.default);
+  const svg = Skia.SVG.MakeFromString(src);
   if (svg === null && onError !== undefined) {
     onError(new Error("Failed to create SVG from source."));
   }

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