@shopify/react-native-skia 2.9.1 → 2.10.0

package/lib/typescript/src/external/reanimated/renderHelpers.d.ts

@@ -1 +1,16 @@
 export declare let HAS_REANIMATED_3: boolean;
+/**
+ * True when the worklets-based Reanimated integration is available
+ * (Reanimated 4 with react-native-worklets providing
+ * registerCustomSerializable). Skia objects use the JSI NativeState pattern
+ * and can only be transferred to worklet runtimes through a custom
+ * serializer, so on native the Reanimated integration requires Reanimated 4 —
+ * Reanimated 3 is not supported.
+ */
+export declare let HAS_REANIMATED_4: boolean;
+/**
+ * Major version of the installed react-native-reanimated package, or null if
+ * it is not installed. Used to give actionable diagnostics when the
+ * integration cannot be enabled.
+ */
+export declare let REANIMATED_VERSION_MAJOR: number | null;

package/lib/typescript/src/skia/SkiaWorkletSerialization.d.ts

@@ -0,0 +1 @@
+export declare const registerSkiaWorkletSerialization: () => void;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -79,7 +79,8 @@
   "peerDependencies": {
     "react": ">=19.0",
     "react-native": ">=0.78",
-    "react-native-reanimated": ">=3.19.1"
+    "react-native-reanimated": ">=4.0.0",
+    "react-native-worklets": ">=0.7.0"
   },
   "peerDependenciesMeta": {
     "react-native": {
@@ -87,6 +88,9 @@
     },
     "react-native-reanimated": {
       "optional": true
+    },
+    "react-native-worklets": {
+      "optional": true
     }
   },
   "devDependencies": {

package/react-native-skia.podspec

@@ -155,8 +155,7 @@ Pod::Spec.new do |s|
     'cpp/rnskia/RNDawnWindowContext.h',
     'cpp/rnskia/RNDawnWindowContext.cpp',
     'cpp/rnskia/RNImageProvider.h',
-    'cpp/rnwgpu/**/*.{h,cpp}',
-    'cpp/jsi2/**/*.{h,cpp}'
+    'cpp/rnwgpu/**/*.{h,cpp}'
   ]
   s.exclude_files = graphite_exclusions unless use_graphite
 

package/src/external/reanimated/renderHelpers.ts

@@ -1,5 +1,22 @@
 export let HAS_REANIMATED_3 = false;
 
+/**
+ * True when the worklets-based Reanimated integration is available
+ * (Reanimated 4 with react-native-worklets providing
+ * registerCustomSerializable). Skia objects use the JSI NativeState pattern
+ * and can only be transferred to worklet runtimes through a custom
+ * serializer, so on native the Reanimated integration requires Reanimated 4 —
+ * Reanimated 3 is not supported.
+ */
+export let HAS_REANIMATED_4 = false;
+
+/**
+ * Major version of the installed react-native-reanimated package, or null if
+ * it is not installed. Used to give actionable diagnostics when the
+ * integration cannot be enabled.
+ */
+export let REANIMATED_VERSION_MAJOR: number | null = null;
+
 try {
   // This logic is convoluted but necessary
   // In most systems, `require("react-native-reanimated")` throws an error, all is well.
@@ -14,6 +31,19 @@ try {
   ) {
     HAS_REANIMATED_3 = true;
   }
+  const majorVersion = parseInt(reanimatedVersion.split(".")[0], 10);
+  if (!isNaN(majorVersion)) {
+    REANIMATED_VERSION_MAJOR = majorVersion;
+  }
+  if (majorVersion >= 4) {
+    try {
+      const worklets = require("react-native-worklets");
+      HAS_REANIMATED_4 =
+        typeof worklets.registerCustomSerializable === "function";
+    } catch (e) {
+      // react-native-worklets not installed
+    }
+  }
 } catch (e) {
   // do nothing
 }

package/src/skia/NativeSetup.ts

@@ -1,6 +1,8 @@
 import { Platform } from "../Platform";
 import NativeSkiaModule from "../specs/NativeSkiaModule";
 
+import { registerSkiaWorkletSerialization } from "./SkiaWorkletSerialization";
+
 if (Platform.OS !== "web" && global.SkiaApi == null) {
   // Initialize RN Skia
   const SkiaModule = NativeSkiaModule;
@@ -16,4 +18,7 @@ if (Platform.OS !== "web" && global.SkiaApi == null) {
       `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`
     );
   }
+  // Skia objects use the JSI NativeState pattern and need a custom
+  // serializer to be transferable to worklet runtimes (Reanimated).
+  registerSkiaWorkletSerialization();
 }

package/src/skia/SkiaWorkletSerialization.ts

@@ -0,0 +1,67 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Skia and WebGPU API objects are implemented with the JSI NativeState
+ * pattern: plain JS objects with a shared prototype and native state
+ * attached. Worklets cannot serialize such objects by default (the prototype
+ * would be lost when moving them to another runtime), so we register a
+ * Custom Serializable that:
+ *
+ * - determine: detects native objects via the `__box` method installed on
+ *   every Skia and WebGPU prototype (plain objects never reach the
+ *   custom-serializable path, so this cannot misfire on user data).
+ * - pack: boxes the object into a HostObject wrapper that carries the native
+ *   state and the class brand. HostObjects are transferred by reference.
+ * - unpack: unboxes on the target runtime, re-installing the class prototype
+ *   there and re-attaching the same native state.
+ *
+ * See cpp/jsi/BoxedNativeObject.h for the native side.
+ *
+ * `react-native-worklets` (Reanimated 4) is required for this to work —
+ * without it, Skia and WebGPU objects cannot be captured in worklets or
+ * stored in shared values.
+ */
+
+interface BoxedNativeObject {
+  unbox: () => object;
+  __boxedNativeObject: true;
+}
+
+const determine = (value: object): value is object => {
+  "worklet";
+  return typeof (value as any).__box === "function";
+};
+
+const pack = (value: object): BoxedNativeObject => {
+  "worklet";
+  return (value as any).__box();
+};
+
+const unpack = (packed: BoxedNativeObject): object => {
+  "worklet";
+  return packed.unbox();
+};
+
+export const registerSkiaWorkletSerialization = () => {
+  try {
+    const worklets = require("react-native-worklets");
+    if (typeof worklets.registerCustomSerializable === "function") {
+      worklets.registerCustomSerializable({
+        name: "ReactNativeSkia",
+        determine,
+        pack,
+        unpack,
+      });
+    } else {
+      console.error(
+        "React Native Skia requires react-native-worklets >= 0.7.0 " +
+          "(registerCustomSerializable) to use Skia objects inside worklets. " +
+          "Please upgrade react-native-worklets and react-native-reanimated."
+      );
+    }
+  } catch (e) {
+    // react-native-worklets is not installed. This is fine for apps that do
+    // not use Reanimated: Skia objects simply cannot be used inside worklets
+    // or shared values in this configuration.
+  }
+};

package/src/sksg/Container.native.ts

@@ -1,6 +1,10 @@
 import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkPicture } from "../skia/types";
-import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
+import {
+  HAS_REANIMATED_3,
+  HAS_REANIMATED_4,
+  REANIMATED_VERSION_MAJOR,
+} from "../external/reanimated/renderHelpers";
 import type { JsiRecorder } from "../skia/types/Recorder";
 
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
@@ -79,10 +83,44 @@ class NativeReanimatedContainer extends Container {
   }
 }
 
+let hasWarnedAboutReanimatedSupport = false;
+
+const reanimatedSupportError = () => {
+  if (REANIMATED_VERSION_MAJOR !== null && REANIMATED_VERSION_MAJOR >= 4) {
+    return (
+      "React Native Skia requires react-native-worklets >= 0.7.0 for its " +
+      "Reanimated integration on native platforms. Reanimated 4 is " +
+      "installed, but react-native-worklets is missing or too old. " +
+      "Please install or upgrade react-native-worklets."
+    );
+  }
+  return (
+    "React Native Skia requires Reanimated 4 (react-native-worklets >= " +
+    "0.7.0) for its Reanimated integration on native platforms. " +
+    "Reanimated 3 is not supported anymore: Skia objects cannot be used " +
+    "inside worklets or shared values with it. " +
+    "Please upgrade to react-native-reanimated >= 4.0.0."
+  );
+};
+
 export const createContainer = (Skia: Skia, nativeId: number) => {
-  if (HAS_REANIMATED_3 && nativeId !== -1) {
+  if (HAS_REANIMATED_4 && nativeId !== -1) {
     return new NativeReanimatedContainer(Skia, nativeId);
   } else {
+    if (HAS_REANIMATED_3 && !HAS_REANIMATED_4) {
+      const message = reanimatedSupportError();
+      if (__DEV__) {
+        // Fail loudly in development — a silent fallback to static rendering
+        // would only be noticed as frozen animations.
+        throw new Error(message);
+      }
+      if (!hasWarnedAboutReanimatedSupport) {
+        hasWarnedAboutReanimatedSupport = true;
+        console.error(
+          `${message} Falling back to static rendering (animations will not run).`
+        );
+      }
+    }
     return new StaticContainer(Skia, nativeId);
   }
 };

package/cpp/api/JsiSkHostObjects.h

@@ -1,257 +0,0 @@
-#pragma once
-
-#include <algorithm>
-#include <memory>
-#include <string>
-#include <utility>
-
-#include "jsi/JsiHostObject.h"
-#include "utils/RNSkLog.h"
-#include "rnskia/RNSkPlatformContext.h"
-
-namespace RNSkia {
-
-namespace jsi = facebook::jsi;
-
-// Minimum memory pressure reported for any host object.
-// This accounts for C++ wrapper overhead and ensures dispose() never
-// increases reported memory pressure (which would defeat its purpose).
-static constexpr size_t kMinMemoryPressure = 256;
-
-/**
- * Base class for jsi host objects - these are all implemented as JsiHostObjects
- * and has a pointer to the platform context.
- */
-class JsiSkHostObject : public RNJsi::JsiHostObject {
-public:
-  /**
-   * Default constructor
-   * @param context Platform context
-   */
-  explicit JsiSkHostObject(std::shared_ptr<RNSkPlatformContext> context)
-      : _context(context) {}
-
-  /**
-   * Override this method to return the memory pressure for the wrapped object.
-   * @return The memory pressure in bytes
-   */
-  virtual size_t getMemoryPressure() const = 0;
-
-  /**
-   * Returns the type name of the host object.
-   */
-  virtual std::string getObjectType() const = 0;
-
-protected:
-  /**
-   * @return A pointer to the platform context
-   */
-  std::shared_ptr<RNSkPlatformContext> getContext() { return _context; }
-
-private:
-  std::shared_ptr<RNSkPlatformContext> _context;
-};
-
-#define JSI_API_TYPENAME(A)                                                    \
-  JSI_PROPERTY_GET(__typename__) {                                             \
-    return jsi::String::createFromUtf8(runtime, #A);                           \
-  }
-
-#define EXPORT_JSI_API_TYPENAME(CLASS, TYPENAME)                               \
-  JSI_API_TYPENAME(TYPENAME)                                                   \
-  JSI_EXPORT_PROPERTY_GETTERS(JSI_EXPORT_PROP_GET(CLASS, __typename__))
-
-// Define this macro to enable memory pressure debug logging
-// #define RNSKIA_DEBUG_MEMORY_PRESSURE
-
-#ifdef RNSKIA_DEBUG_MEMORY_PRESSURE
-// Version with debug logging
-#define JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(                           \
-    runtime, hostObjectInstance, context)                                      \
-  [&]() {                                                                      \
-    auto result =                                                              \
-        jsi::Object::createFromHostObject(runtime, hostObjectInstance);        \
-    auto memoryPressure = hostObjectInstance->getMemoryPressure();             \
-    const void *hostObjectId =                                                 \
-        static_cast<const void *>(hostObjectInstance.get());                   \
-    const char *mpUnit = "bytes";                                              \
-    double mpValue = static_cast<double>(memoryPressure);                      \
-    if (memoryPressure >= 1024ULL * 1024ULL) {                                 \
-      mpUnit = "MB";                                                           \
-      mpValue /= (1024.0 * 1024.0);                                            \
-      RNSkLogger::logToConsole(                                                \
-          "Host object %s (id=%p) memory pressure %.2f %s",                    \
-          hostObjectInstance->getObjectType().c_str(), hostObjectId, mpValue,  \
-          mpUnit);                                                             \
-    } else if (memoryPressure >= 1024ULL) {                                    \
-      mpUnit = "KB";                                                           \
-      mpValue /= 1024.0;                                                       \
-      RNSkLogger::logToConsole(                                                \
-          "Host object %s (id=%p) memory pressure %.2f %s",                    \
-          hostObjectInstance->getObjectType().c_str(), hostObjectId, mpValue,  \
-          mpUnit);                                                             \
-    } else {                                                                   \
-      RNSkLogger::logToConsole(                                                \
-          "Host object %s (id=%p) memory pressure %zu %s",                     \
-          hostObjectInstance->getObjectType().c_str(), hostObjectId,           \
-          memoryPressure, mpUnit);                                             \
-    }                                                                          \
-    if (memoryPressure > 0) {                                                  \
-      result.setExternalMemoryPressure(runtime, memoryPressure);               \
-    }                                                                          \
-    return result;                                                             \
-  }()
-#else
-// Version without debug logging (optimized)
-#define JSI_CREATE_HOST_OBJECT_WITH_MEMORY_PRESSURE(                           \
-    runtime, hostObjectInstance, context)                                      \
-  [&]() {                                                                      \
-    auto result =                                                              \
-        jsi::Object::createFromHostObject(runtime, hostObjectInstance);        \
-    auto memoryPressure = hostObjectInstance->getMemoryPressure();             \
-    if (memoryPressure > 0) {                                                  \
-      result.setExternalMemoryPressure(runtime, memoryPressure);               \
-    }                                                                          \
-    return result;                                                             \
-  }()
-#endif
-
-template <typename T> class JsiSkWrappingHostObject : public JsiSkHostObject {
-public:
-  /**
-   * Default constructor
-   * @param context Platform context
-   */
-  JsiSkWrappingHostObject(std::shared_ptr<RNSkPlatformContext> context,
-                          T object)
-      : JsiSkHostObject(std::move(context)), _object(std::move(object)) {}
-
-  /**
-   * Returns the underlying object exposed by this host object. This object
-   * should be wrapped in a shared pointer of some kind.
-   * Throws if the object has been disposed.
-   * @return Underlying object
-   */
-  T getObject() { return validateObject(); }
-  const T getObject() const { return validateObject(); }
-
-  /**
-   * Updates the inner object with a new version of the object.
-   */
-  void setObject(T object) { _object = object; }
-
-  /**
-   * Dispose function that can be exposed to JS by using the JSI_API_TYPENAME
-   * macro.
-   */
-  JSI_HOST_FUNCTION(dispose) {
-    if (!isDisposed()) {
-      thisValue.asObject(runtime).setExternalMemoryPressure(runtime,
-                                                            kMinMemoryPressure);
-    }
-    safeDispose();
-    return jsi::Value::undefined();
-  }
-
-protected:
-  /**
-   * Override to implement disposal of allocated resources like smart pointers.
-   * This method will only be called once for each instance of this class.
-   */
-  virtual void releaseResources() = 0;
-
-  /**
-   * Returns true if the object has been disposed.
-   */
-  bool isDisposed() const {
-    return _isDisposed.load(std::memory_order_acquire);
-  }
-
-  /**
-   * Returns the underlying object without checking if disposed.
-   * Use this in destructors and releaseResources() where we need to access
-   * the object even after dispose() was called.
-   */
-  T getObjectUnchecked() const { return _object; }
-
-private:
-  /**
-   * Validates that _object was not disposed and returns it.
-   */
-  T validateObject() const {
-    if (_isDisposed.load(std::memory_order_acquire)) {
-      throw std::runtime_error("Attempted to access a disposed object.");
-    }
-    return _object;
-  }
-
-  void safeDispose() {
-    bool expected = false;
-    if (_isDisposed.compare_exchange_strong(expected, true,
-                                            std::memory_order_acq_rel)) {
-      releaseResources();
-    }
-  }
-
-  /**
-   * Wrapped object.
-   */
-  T _object;
-
-  /**
-   * Resource disposed flag.
-   */
-  std::atomic<bool> _isDisposed = {false};
-};
-
-template <typename T>
-class JsiSkWrappingSharedPtrHostObject
-    : public JsiSkWrappingHostObject<std::shared_ptr<T>> {
-public:
-  JsiSkWrappingSharedPtrHostObject(std::shared_ptr<RNSkPlatformContext> context,
-                                   std::shared_ptr<T> object)
-      : JsiSkWrappingHostObject<std::shared_ptr<T>>(std::move(context),
-                                                    std::move(object)) {}
-
-  /**
-    Returns the underlying object from a host object of this type
-   */
-  static std::shared_ptr<T> fromValue(jsi::Runtime &runtime,
-                                      const jsi::Value &obj) {
-    return std::static_pointer_cast<JsiSkWrappingSharedPtrHostObject>(
-               obj.asObject(runtime).asHostObject(runtime))
-        ->getObject();
-  }
-
-protected:
-  void releaseResources() override {
-    // Clear internally allocated objects
-    this->setObject(nullptr);
-  }
-};
-
-template <typename T>
-class JsiSkWrappingSkPtrHostObject : public JsiSkWrappingHostObject<sk_sp<T>> {
-public:
-  JsiSkWrappingSkPtrHostObject(std::shared_ptr<RNSkPlatformContext> context,
-                               sk_sp<T> object)
-      : JsiSkWrappingHostObject<sk_sp<T>>(std::move(context),
-                                          std::move(object)) {}
-
-  /**
-    Returns the underlying object from a host object of this type
-   */
-  static sk_sp<T> fromValue(jsi::Runtime &runtime, const jsi::Value &obj) {
-    return std::static_pointer_cast<JsiSkWrappingSkPtrHostObject>(
-               obj.asObject(runtime).asHostObject(runtime))
-        ->getObject();
-  }
-
-protected:
-  void releaseResources() override {
-    // Clear internally allocated objects
-    this->setObject(nullptr);
-  }
-};
-
-} // namespace RNSkia

package/cpp/jsi/JsiHostObject.cpp

@@ -1,137 +0,0 @@
-#include "JsiHostObject.h"
-#include <functional>
-#include <vector>
-
-namespace RNJsi {
-
-void JsiHostObject::set(jsi::Runtime &rt, const jsi::PropNameID &name,
-                        const jsi::Value &value) {
-
-  auto nameStr = name.utf8(rt);
-
-  /** Check the static setters map */
-  const JsiPropertySettersMap &setters = getExportedPropertySettersMap();
-  auto setter = setters.find(nameStr);
-  if (setter != setters.end()) {
-    auto dispatcher = std::bind(setter->second, this, std::placeholders::_1,
-                                std::placeholders::_2);
-    return dispatcher(rt, value);
-  }
-
-  if (_propMap.count(nameStr) > 0) {
-    auto prop = _propMap.at(nameStr);
-    (prop.set)(rt, value);
-  }
-}
-
-jsi::Value JsiHostObject::get(jsi::Runtime &runtime,
-                              const jsi::PropNameID &name) {
-  auto nameStr = name.utf8(runtime);
-
-  // Happy path - cached host functions are cheapest to look up
-  const JsiFunctionMap &funcs = getExportedFunctionMap();
-  auto func = funcs.find(nameStr);
-
-  // Check function cache
-  if (func != funcs.end()) {
-    std::map<std::string, jsi::Function> &runtimeCache =
-        _hostFunctionCache.get(runtime);
-    auto cachedFunc = runtimeCache.find(nameStr);
-    if (cachedFunc != runtimeCache.end()) {
-      return cachedFunc->second.asFunction(runtime);
-    }
-  }
-
-  // Check the static getters map
-  const JsiPropertyGettersMap &getters = getExportedPropertyGettersMap();
-  auto getter = getters.find(nameStr);
-  if (getter != getters.end()) {
-    auto dispatcher = std::bind(getter->second, this, std::placeholders::_1);
-    return dispatcher(runtime);
-  }
-
-  // Check the static function map
-  if (func != funcs.end()) {
-
-    // Create dispatcher
-    auto dispatcher =
-        std::bind(func->second, reinterpret_cast<JsiHostObject *>(this),
-                  std::placeholders::_1, std::placeholders::_2,
-                  std::placeholders::_3, std::placeholders::_4);
-
-    // Add to cache - it is important to cache the results from the
-    // createFromHostFunction function which takes some time.
-    return _hostFunctionCache.get(runtime)
-        .emplace(nameStr, jsi::Function::createFromHostFunction(runtime, name,
-                                                                0, dispatcher))
-        .first->second.asFunction(runtime);
-  }
-
-  if (_funcMap.count(nameStr) > 0) {
-    return jsi::Function::createFromHostFunction(runtime, name, 0,
-                                                 _funcMap.at(nameStr));
-  }
-
-  if (_propMap.count(nameStr) > 0) {
-    auto prop = _propMap.at(nameStr);
-    return (prop.get)(runtime);
-  }
-
-  // Check for dispose symbol as last resort
-  static const auto disposeSymbol = jsi::PropNameID::forSymbol(
-      runtime,
-     runtime.global()
-          .getPropertyAsObject(runtime, "Symbol")
-          .getPropertyAsFunction(runtime, "for")
-          .call(runtime, "Symbol.dispose")
-          .getSymbol(runtime));
-  if (jsi::PropNameID::compare(runtime, disposeSymbol, name)) {
-    // Recursively call get with "dispose" string
-    auto disposeName = jsi::PropNameID::forAscii(runtime, "dispose");
-    return get(runtime, disposeName);
-  }
-
-  return jsi::Value::undefined();
-}
-
-std::vector<jsi::PropNameID>
-JsiHostObject::getPropertyNames(jsi::Runtime &runtime) {
-  // statically exported functions
-  const auto &funcs = getExportedFunctionMap();
-
-  // Statically exported property getters
-  const auto &getters = getExportedPropertyGettersMap();
-
-  // Statically exported property setters
-  const auto &setters = getExportedPropertySettersMap();
-
-  std::vector<jsi::PropNameID> propNames;
-  propNames.reserve(funcs.size() + getters.size() + setters.size() +
-                    _funcMap.size() + _propMap.size());
-
-  for (auto it = funcs.cbegin(); it != funcs.cend(); ++it) {
-    propNames.push_back(jsi::PropNameID::forAscii(runtime, it->first));
-  }
-
-  for (auto it = getters.cbegin(); it != getters.cend(); ++it) {
-    propNames.push_back(jsi::PropNameID::forUtf8(runtime, it->first));
-  }
-
-  for (auto it = getters.cbegin(); it != getters.cend(); ++it) {
-    if (getters.count(it->first) == 0) {
-      propNames.push_back(jsi::PropNameID::forUtf8(runtime, it->first));
-    }
-  }
-
-  // functions
-  for (auto it = _funcMap.cbegin(); it != _funcMap.cend(); ++it) {
-    propNames.push_back(jsi::PropNameID::forAscii(runtime, it->first));
-  }
-  // props
-  for (auto it = _propMap.cbegin(); it != _propMap.cend(); ++it) {
-    propNames.push_back(jsi::PropNameID::forAscii(runtime, it->first));
-  }
-  return propNames;
-}
-
-} // namespace RNJsi