@shopify/react-native-skia 2.9.1-next.1 → 2.10.0

package/lib/commonjs/views/WebGPUCanvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","useRef","contextId","useState","useImperativeHandle","getContextId","getNativeSurface","RNWebGPU","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","Platform","OS","createElement","View","collapsable","style","flex","exports"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_WebGPUViewNativeComponent","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","useRef","contextId","useState","useEffect","RNWebGPU","destroyContext","useImperativeHandle","getContextId","getNativeSurface","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","Platform","OS","createElement","View","collapsable","style","flex","exports"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n    // Retires a canvas context; called by the Canvas on unmount (the Canvas\n    // owns the native registry entry for its contextId).\n    destroyContext: (contextId: number) => void;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  // Retire the native registry entry for this contextId on unmount. When a\n  // native surface is still attached, this is a no-op and the native view's\n  // own teardown retires the entry instead — which keeps StrictMode's\n  // simulated unmount (which re-runs effects without unmounting native views)\n  // from orphaning a live surface.\n  useEffect(() => {\n    return () => {\n      if (typeof RNWebGPU !== \"undefined\") {\n        RNWebGPU.destroyContext(contextId);\n      }\n    };\n  }, [contextId]);\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/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/module/external/reanimated/renderHelpers.js

@@ -1,4 +1,21 @@
 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 = null;
 try {
   // This logic is convoluted but necessary
   // In most systems, `require("react-native-reanimated")` throws an error, all is well.
@@ -9,6 +26,18 @@ try {
   if (reanimatedVersion && (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))) {
     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/lib/module/external/reanimated/renderHelpers.js.map

@@ -1 +1 @@
-{"version":3,"names":["HAS_REANIMATED_3","reanimatedVersion","require","version","includes","e"],"sources":["renderHelpers.ts"],"sourcesContent":["export let HAS_REANIMATED_3 = false;\n\ntry {\n  // This logic is convoluted but necessary\n  // In most systems, `require(\"react-native-reanimated\")` throws an error, all is well.\n  // In webpack, in some configuration it will return an empty object.\n  // So it will not throw an error and we need to check the version to know if it's there.\n  const reanimatedVersion =\n    require(\"react-native-reanimated/package.json\").version;\n  require(\"react-native-reanimated\");\n  if (\n    reanimatedVersion &&\n    (reanimatedVersion >= \"3.0.0\" || reanimatedVersion.includes(\"3.0.0-\"))\n  ) {\n    HAS_REANIMATED_3 = true;\n  }\n} catch (e) {\n  // do nothing\n}\n"],"mappings":"AAAA,OAAO,IAAIA,gBAAgB,GAAG,KAAK;AAEnC,IAAI;EACF;EACA;EACA;EACA;EACA,MAAMC,iBAAiB,GACrBC,OAAO,CAAC,sCAAsC,CAAC,CAACC,OAAO;EACzDD,OAAO,CAAC,yBAAyB,CAAC;EAClC,IACED,iBAAiB,KAChBA,iBAAiB,IAAI,OAAO,IAAIA,iBAAiB,CAACG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EACtE;IACAJ,gBAAgB,GAAG,IAAI;EACzB;AACF,CAAC,CAAC,OAAOK,CAAC,EAAE;EACV;AAAA","ignoreList":[]}
+{"version":3,"names":["HAS_REANIMATED_3","HAS_REANIMATED_4","REANIMATED_VERSION_MAJOR","reanimatedVersion","require","version","includes","majorVersion","parseInt","split","isNaN","worklets","registerCustomSerializable","e"],"sources":["renderHelpers.ts"],"sourcesContent":["export let HAS_REANIMATED_3 = false;\n\n/**\n * True when the worklets-based Reanimated integration is available\n * (Reanimated 4 with react-native-worklets providing\n * registerCustomSerializable). Skia objects use the JSI NativeState pattern\n * and can only be transferred to worklet runtimes through a custom\n * serializer, so on native the Reanimated integration requires Reanimated 4 —\n * Reanimated 3 is not supported.\n */\nexport let HAS_REANIMATED_4 = false;\n\n/**\n * Major version of the installed react-native-reanimated package, or null if\n * it is not installed. Used to give actionable diagnostics when the\n * integration cannot be enabled.\n */\nexport let REANIMATED_VERSION_MAJOR: number | null = null;\n\ntry {\n  // This logic is convoluted but necessary\n  // In most systems, `require(\"react-native-reanimated\")` throws an error, all is well.\n  // In webpack, in some configuration it will return an empty object.\n  // So it will not throw an error and we need to check the version to know if it's there.\n  const reanimatedVersion =\n    require(\"react-native-reanimated/package.json\").version;\n  require(\"react-native-reanimated\");\n  if (\n    reanimatedVersion &&\n    (reanimatedVersion >= \"3.0.0\" || reanimatedVersion.includes(\"3.0.0-\"))\n  ) {\n    HAS_REANIMATED_3 = true;\n  }\n  const majorVersion = parseInt(reanimatedVersion.split(\".\")[0], 10);\n  if (!isNaN(majorVersion)) {\n    REANIMATED_VERSION_MAJOR = majorVersion;\n  }\n  if (majorVersion >= 4) {\n    try {\n      const worklets = require(\"react-native-worklets\");\n      HAS_REANIMATED_4 =\n        typeof worklets.registerCustomSerializable === \"function\";\n    } catch (e) {\n      // react-native-worklets not installed\n    }\n  }\n} catch (e) {\n  // do nothing\n}\n"],"mappings":"AAAA,OAAO,IAAIA,gBAAgB,GAAG,KAAK;;AAEnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAIC,gBAAgB,GAAG,KAAK;;AAEnC;AACA;AACA;AACA;AACA;AACA,OAAO,IAAIC,wBAAuC,GAAG,IAAI;AAEzD,IAAI;EACF;EACA;EACA;EACA;EACA,MAAMC,iBAAiB,GACrBC,OAAO,CAAC,sCAAsC,CAAC,CAACC,OAAO;EACzDD,OAAO,CAAC,yBAAyB,CAAC;EAClC,IACED,iBAAiB,KAChBA,iBAAiB,IAAI,OAAO,IAAIA,iBAAiB,CAACG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EACtE;IACAN,gBAAgB,GAAG,IAAI;EACzB;EACA,MAAMO,YAAY,GAAGC,QAAQ,CAACL,iBAAiB,CAACM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;EAClE,IAAI,CAACC,KAAK,CAACH,YAAY,CAAC,EAAE;IACxBL,wBAAwB,GAAGK,YAAY;EACzC;EACA,IAAIA,YAAY,IAAI,CAAC,EAAE;IACrB,IAAI;MACF,MAAMI,QAAQ,GAAGP,OAAO,CAAC,uBAAuB,CAAC;MACjDH,gBAAgB,GACd,OAAOU,QAAQ,CAACC,0BAA0B,KAAK,UAAU;IAC7D,CAAC,CAAC,OAAOC,CAAC,EAAE;MACV;IAAA;EAEJ;AACF,CAAC,CAAC,OAAOA,CAAC,EAAE;EACV;AAAA","ignoreList":[]}

package/lib/module/skia/NativeSetup.js

@@ -1,5 +1,6 @@
 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;
@@ -10,5 +11,8 @@ if (Platform.OS !== "web" && global.SkiaApi == null) {
   if (result !== true) {
     throw new Error(`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();
 }
 //# sourceMappingURL=NativeSetup.js.map

package/lib/module/skia/NativeSetup.js.map

@@ -1 +1 @@
-{"version":3,"names":["Platform","NativeSkiaModule","OS","global","SkiaApi","SkiaModule","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import { Platform } from \"../Platform\";\nimport NativeSkiaModule from \"../specs/NativeSkiaModule\";\n\nif (Platform.OS !== \"web\" && global.SkiaApi == null) {\n  // Initialize RN Skia\n  const SkiaModule = NativeSkiaModule;\n  if (SkiaModule == null || typeof SkiaModule.install !== \"function\") {\n    throw new Error(\n      \"Native RNSkia Module cannot be found! Make sure you correctly \" +\n        \"installed native dependencies and rebuilt your app.\"\n    );\n  }\n  const result = SkiaModule.install();\n  if (result !== true) {\n    throw new Error(\n      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`\n    );\n  }\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AACtC,OAAOC,gBAAgB,MAAM,2BAA2B;AAExD,IAAID,QAAQ,CAACE,EAAE,KAAK,KAAK,IAAIC,MAAM,CAACC,OAAO,IAAI,IAAI,EAAE;EACnD;EACA,MAAMC,UAAU,GAAGJ,gBAAgB;EACnC,IAAII,UAAU,IAAI,IAAI,IAAI,OAAOA,UAAU,CAACC,OAAO,KAAK,UAAU,EAAE;IAClE,MAAM,IAAIC,KAAK,CACb,gEAAgE,GAC9D,qDACJ,CAAC;EACH;EACA,MAAMC,MAAM,GAAGH,UAAU,CAACC,OAAO,CAAC,CAAC;EACnC,IAAIE,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,IAAID,KAAK,CACb,wEAAwEC,MAAM,EAChF,CAAC;EACH;AACF","ignoreList":[]}
+{"version":3,"names":["Platform","NativeSkiaModule","registerSkiaWorkletSerialization","OS","global","SkiaApi","SkiaModule","install","Error","result"],"sources":["NativeSetup.ts"],"sourcesContent":["import { Platform } from \"../Platform\";\nimport NativeSkiaModule from \"../specs/NativeSkiaModule\";\n\nimport { registerSkiaWorkletSerialization } from \"./SkiaWorkletSerialization\";\n\nif (Platform.OS !== \"web\" && global.SkiaApi == null) {\n  // Initialize RN Skia\n  const SkiaModule = NativeSkiaModule;\n  if (SkiaModule == null || typeof SkiaModule.install !== \"function\") {\n    throw new Error(\n      \"Native RNSkia Module cannot be found! Make sure you correctly \" +\n        \"installed native dependencies and rebuilt your app.\"\n    );\n  }\n  const result = SkiaModule.install();\n  if (result !== true) {\n    throw new Error(\n      `Native Skia Module failed to correctly install JSI Bindings! Result: ${result}`\n    );\n  }\n  // Skia objects use the JSI NativeState pattern and need a custom\n  // serializer to be transferable to worklet runtimes (Reanimated).\n  registerSkiaWorkletSerialization();\n}\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AACtC,OAAOC,gBAAgB,MAAM,2BAA2B;AAExD,SAASC,gCAAgC,QAAQ,4BAA4B;AAE7E,IAAIF,QAAQ,CAACG,EAAE,KAAK,KAAK,IAAIC,MAAM,CAACC,OAAO,IAAI,IAAI,EAAE;EACnD;EACA,MAAMC,UAAU,GAAGL,gBAAgB;EACnC,IAAIK,UAAU,IAAI,IAAI,IAAI,OAAOA,UAAU,CAACC,OAAO,KAAK,UAAU,EAAE;IAClE,MAAM,IAAIC,KAAK,CACb,gEAAgE,GAC9D,qDACJ,CAAC;EACH;EACA,MAAMC,MAAM,GAAGH,UAAU,CAACC,OAAO,CAAC,CAAC;EACnC,IAAIE,MAAM,KAAK,IAAI,EAAE;IACnB,MAAM,IAAID,KAAK,CACb,wEAAwEC,MAAM,EAChF,CAAC;EACH;EACA;EACA;EACAP,gCAAgC,CAAC,CAAC;AACpC","ignoreList":[]}

package/lib/module/skia/SkiaWorkletSerialization.d.ts

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

package/lib/module/skia/SkiaWorkletSerialization.js

@@ -0,0 +1,59 @@
+/* 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.
+ */
+
+const determine = value => {
+  "worklet";
+
+  return typeof value.__box === "function";
+};
+const pack = value => {
+  "worklet";
+
+  return value.__box();
+};
+const unpack = packed => {
+  "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.
+  }
+};
+//# sourceMappingURL=SkiaWorkletSerialization.js.map

package/lib/module/skia/SkiaWorkletSerialization.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["determine","value","__box","pack","unpack","packed","unbox","registerSkiaWorkletSerialization","worklets","require","registerCustomSerializable","name","console","error","e"],"sources":["SkiaWorkletSerialization.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\n/**\n * Skia and WebGPU API objects are implemented with the JSI NativeState\n * pattern: plain JS objects with a shared prototype and native state\n * attached. Worklets cannot serialize such objects by default (the prototype\n * would be lost when moving them to another runtime), so we register a\n * Custom Serializable that:\n *\n * - determine: detects native objects via the `__box` method installed on\n *   every Skia and WebGPU prototype (plain objects never reach the\n *   custom-serializable path, so this cannot misfire on user data).\n * - pack: boxes the object into a HostObject wrapper that carries the native\n *   state and the class brand. HostObjects are transferred by reference.\n * - unpack: unboxes on the target runtime, re-installing the class prototype\n *   there and re-attaching the same native state.\n *\n * See cpp/jsi/BoxedNativeObject.h for the native side.\n *\n * `react-native-worklets` (Reanimated 4) is required for this to work —\n * without it, Skia and WebGPU objects cannot be captured in worklets or\n * stored in shared values.\n */\n\ninterface BoxedNativeObject {\n  unbox: () => object;\n  __boxedNativeObject: true;\n}\n\nconst determine = (value: object): value is object => {\n  \"worklet\";\n  return typeof (value as any).__box === \"function\";\n};\n\nconst pack = (value: object): BoxedNativeObject => {\n  \"worklet\";\n  return (value as any).__box();\n};\n\nconst unpack = (packed: BoxedNativeObject): object => {\n  \"worklet\";\n  return packed.unbox();\n};\n\nexport const registerSkiaWorkletSerialization = () => {\n  try {\n    const worklets = require(\"react-native-worklets\");\n    if (typeof worklets.registerCustomSerializable === \"function\") {\n      worklets.registerCustomSerializable({\n        name: \"ReactNativeSkia\",\n        determine,\n        pack,\n        unpack,\n      });\n    } else {\n      console.error(\n        \"React Native Skia requires react-native-worklets >= 0.7.0 \" +\n          \"(registerCustomSerializable) to use Skia objects inside worklets. \" +\n          \"Please upgrade react-native-worklets and react-native-reanimated.\"\n      );\n    }\n  } catch (e) {\n    // react-native-worklets is not installed. This is fine for apps that do\n    // not use Reanimated: Skia objects simply cannot be used inside worklets\n    // or shared values in this configuration.\n  }\n};\n"],"mappings":"AAAA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOA,MAAMA,SAAS,GAAIC,KAAa,IAAsB;EACpD,SAAS;;EACT,OAAO,OAAQA,KAAK,CAASC,KAAK,KAAK,UAAU;AACnD,CAAC;AAED,MAAMC,IAAI,GAAIF,KAAa,IAAwB;EACjD,SAAS;;EACT,OAAQA,KAAK,CAASC,KAAK,CAAC,CAAC;AAC/B,CAAC;AAED,MAAME,MAAM,GAAIC,MAAyB,IAAa;EACpD,SAAS;;EACT,OAAOA,MAAM,CAACC,KAAK,CAAC,CAAC;AACvB,CAAC;AAED,OAAO,MAAMC,gCAAgC,GAAGA,CAAA,KAAM;EACpD,IAAI;IACF,MAAMC,QAAQ,GAAGC,OAAO,CAAC,uBAAuB,CAAC;IACjD,IAAI,OAAOD,QAAQ,CAACE,0BAA0B,KAAK,UAAU,EAAE;MAC7DF,QAAQ,CAACE,0BAA0B,CAAC;QAClCC,IAAI,EAAE,iBAAiB;QACvBX,SAAS;QACTG,IAAI;QACJC;MACF,CAAC,CAAC;IACJ,CAAC,MAAM;MACLQ,OAAO,CAACC,KAAK,CACX,4DAA4D,GAC1D,oEAAoE,GACpE,mEACJ,CAAC;IACH;EACF,CAAC,CAAC,OAAOC,CAAC,EAAE;IACV;IACA;IACA;EAAA;AAEJ,CAAC","ignoreList":[]}

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

@@ -2,7 +2,7 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 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 { HAS_REANIMATED_3, HAS_REANIMATED_4, REANIMATED_VERSION_MAJOR } from "../external/reanimated/renderHelpers";
 import { ReanimatedRecorder } from "./Recorder/ReanimatedRecorder";
 import { Container, StaticContainer } from "./StaticContainer";
 import { visit } from "./Recorder/Visitor";
@@ -73,10 +73,29 @@ 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, nativeId) => {
-  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/lib/module/sksg/Container.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["Rea","HAS_REANIMATED_3","ReanimatedRecorder","Container","StaticContainer","visit","SkiaViewApi","globalThis","nativeDrawOnscreen","nativeId","recorder","picture","play","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","Picture","MakePicture","unmount","mapperId","stopMapper","redraw","unmounted","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","createContainer"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkPicture } from \"../skia/types\";\nimport { HAS_REANIMATED_3 } from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\n// create local reference for `strictGlobal` option in Worklets\nconst { SkiaViewApi } = globalThis;\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  picture: SkPicture\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  recorder.play(picture);\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n  private picture: SkPicture;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number\n  ) {\n    super(Skia);\n    this.picture = Skia.Picture.MakePicture(null)!;\n  }\n\n  unmount() {\n    super.unmount();\n    if (this.mapperId !== null) {\n      // The mapper closure retains the recorder and its resources (e.g.\n      // images) on the UI runtime and keeps updating the picture of an\n      // unmounted view — stop it or it leaks for the lifetime of the app.\n      Rea.stopMapper(this.mapperId);\n      this.mapperId = null;\n    }\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n      this.mapperId = null;\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new ReanimatedRecorder(this.Skia);\n    const { nativeId, picture } = this;\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    // Draw first frame\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n    })();\n    // Animate\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n      }, sharedValues);\n    }\n  }\n}\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  if (HAS_REANIMATED_3 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId);\n  } else {\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":";;;AAAA,OAAOA,GAAG,MAAM,wCAAwC;AAExD,SAASC,gBAAgB,QAAQ,sCAAsC;AAGvE,SAASC,kBAAkB,QAAQ,+BAA+B;AAClE,SAASC,SAAS,EAAEC,eAAe,QAAQ,mBAAmB;AAC9D,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAO,qBAAqB;AAC5B,OAAO,cAAc;;AAErB;AACA,MAAM;EAAEC;AAAY,CAAC,GAAGC,UAAU;AAElC,MAAMC,kBAAkB,GAAGA,CACzBC,QAAgB,EAChBC,QAAqB,EACrBC,OAAkB,KACf;EACH,SAAS;;EAET;EACAD,QAAQ,CAACE,IAAI,CAACD,OAAO,CAAC;EACtB;EACA;EACAL,WAAW,CAACO,cAAc,CAACJ,QAAQ,EAAE,SAAS,EAAEE,OAAO,CAAC;AAC1D,CAAC;AAED,MAAMG,yBAAyB,SAASX,SAAS,CAAC;EAIhDY,WAAWA,CACTC,IAAU,EACFP,QAAgB,EACxB;IACA,KAAK,CAACO,IAAI,CAAC;IAAC,KAFJP,QAAgB,GAAhBA,QAAgB;IAAAQ,eAAA,mBALQ,IAAI;IAAAA,eAAA;IAQpC,IAAI,CAACN,OAAO,GAAGK,IAAI,CAACE,OAAO,CAACC,WAAW,CAAC,IAAI,CAAE;EAChD;EAEAC,OAAOA,CAAA,EAAG;IACR,KAAK,CAACA,OAAO,CAAC,CAAC;IACf,IAAI,IAAI,CAACC,QAAQ,KAAK,IAAI,EAAE;MAC1B;MACA;MACA;MACArB,GAAG,CAACsB,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;MAC7B,IAAI,CAACA,QAAQ,GAAG,IAAI;IACtB;EACF;EAEAE,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACF,QAAQ,KAAK,IAAI,EAAE;MAC1BrB,GAAG,CAACsB,UAAU,CAAC,IAAI,CAACD,QAAQ,CAAC;MAC7B,IAAI,CAACA,QAAQ,GAAG,IAAI;IACtB;IACA,IAAI,IAAI,CAACG,SAAS,EAAE;MAClB;IACF;IACA,MAAMd,QAAQ,GAAG,IAAIR,kBAAkB,CAAC,IAAI,CAACc,IAAI,CAAC;IAClD,MAAM;MAAEP,QAAQ;MAAEE;IAAQ,CAAC,GAAG,IAAI;IAClCN,KAAK,CAACK,QAAQ,EAAE,IAAI,CAACe,IAAI,CAAC;IAC1B,MAAMC,YAAY,GAAGhB,QAAQ,CAACiB,eAAe,CAAC,CAAC;IAC/C,MAAMC,cAAc,GAAGlB,QAAQ,CAACmB,WAAW,CAAC,CAAC;IAC7C;IACA7B,GAAG,CAAC8B,OAAO,CAAC,MAAM;MAChB,SAAS;;MACTtB,kBAAkB,CAACC,QAAQ,EAAEmB,cAAc,EAAEjB,OAAO,CAAC;IACvD,CAAC,CAAC,CAAC,CAAC;IACJ;IACA,IAAIe,YAAY,CAACK,MAAM,GAAG,CAAC,EAAE;MAC3B,IAAI,CAACV,QAAQ,GAAGrB,GAAG,CAACgC,WAAW,CAAC,MAAM;QACpC,SAAS;;QACTJ,cAAc,CAACK,YAAY,CAACP,YAAY,CAAC;QACzClB,kBAAkB,CAACC,QAAQ,EAAEmB,cAAc,EAAEjB,OAAO,CAAC;MACvD,CAAC,EAAEe,YAAY,CAAC;IAClB;EACF;AACF;AAEA,OAAO,MAAMQ,eAAe,GAAGA,CAAClB,IAAU,EAAEP,QAAgB,KAAK;EAC/D,IAAIR,gBAAgB,IAAIQ,QAAQ,KAAK,CAAC,CAAC,EAAE;IACvC,OAAO,IAAIK,yBAAyB,CAACE,IAAI,EAAEP,QAAQ,CAAC;EACtD,CAAC,MAAM;IACL,OAAO,IAAIL,eAAe,CAACY,IAAI,EAAEP,QAAQ,CAAC;EAC5C;AACF,CAAC","ignoreList":[]}
+{"version":3,"names":["Rea","HAS_REANIMATED_3","HAS_REANIMATED_4","REANIMATED_VERSION_MAJOR","ReanimatedRecorder","Container","StaticContainer","visit","SkiaViewApi","globalThis","nativeDrawOnscreen","nativeId","recorder","picture","play","setJsiProperty","NativeReanimatedContainer","constructor","Skia","_defineProperty","Picture","MakePicture","unmount","mapperId","stopMapper","redraw","unmounted","root","sharedValues","getSharedValues","sharedRecorder","getRecorder","runOnUI","length","startMapper","applyUpdates","hasWarnedAboutReanimatedSupport","reanimatedSupportError","createContainer","message","__DEV__","Error","console","error"],"sources":["Container.native.ts"],"sourcesContent":["import Rea from \"../external/reanimated/ReanimatedProxy\";\nimport type { Skia, SkPicture } from \"../skia/types\";\nimport {\n  HAS_REANIMATED_3,\n  HAS_REANIMATED_4,\n  REANIMATED_VERSION_MAJOR,\n} from \"../external/reanimated/renderHelpers\";\nimport type { JsiRecorder } from \"../skia/types/Recorder\";\n\nimport { ReanimatedRecorder } from \"./Recorder/ReanimatedRecorder\";\nimport { Container, StaticContainer } from \"./StaticContainer\";\nimport { visit } from \"./Recorder/Visitor\";\n\nimport \"../skia/NativeSetup\";\nimport \"../views/api\";\n\n// create local reference for `strictGlobal` option in Worklets\nconst { SkiaViewApi } = globalThis;\n\nconst nativeDrawOnscreen = (\n  nativeId: number,\n  recorder: JsiRecorder,\n  picture: SkPicture\n) => {\n  \"worklet\";\n\n  //const start = performance.now();\n  recorder.play(picture);\n  //const end = performance.now();\n  //console.log(\"Recording time: \", end - start);\n  SkiaViewApi.setJsiProperty(nativeId, \"picture\", picture);\n};\n\nclass NativeReanimatedContainer extends Container {\n  private mapperId: number | null = null;\n  private picture: SkPicture;\n\n  constructor(\n    Skia: Skia,\n    private nativeId: number\n  ) {\n    super(Skia);\n    this.picture = Skia.Picture.MakePicture(null)!;\n  }\n\n  unmount() {\n    super.unmount();\n    if (this.mapperId !== null) {\n      // The mapper closure retains the recorder and its resources (e.g.\n      // images) on the UI runtime and keeps updating the picture of an\n      // unmounted view — stop it or it leaks for the lifetime of the app.\n      Rea.stopMapper(this.mapperId);\n      this.mapperId = null;\n    }\n  }\n\n  redraw() {\n    if (this.mapperId !== null) {\n      Rea.stopMapper(this.mapperId);\n      this.mapperId = null;\n    }\n    if (this.unmounted) {\n      return;\n    }\n    const recorder = new ReanimatedRecorder(this.Skia);\n    const { nativeId, picture } = this;\n    visit(recorder, this.root);\n    const sharedValues = recorder.getSharedValues();\n    const sharedRecorder = recorder.getRecorder();\n    // Draw first frame\n    Rea.runOnUI(() => {\n      \"worklet\";\n      nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n    })();\n    // Animate\n    if (sharedValues.length > 0) {\n      this.mapperId = Rea.startMapper(() => {\n        \"worklet\";\n        sharedRecorder.applyUpdates(sharedValues);\n        nativeDrawOnscreen(nativeId, sharedRecorder, picture);\n      }, sharedValues);\n    }\n  }\n}\n\nlet hasWarnedAboutReanimatedSupport = false;\n\nconst reanimatedSupportError = () => {\n  if (REANIMATED_VERSION_MAJOR !== null && REANIMATED_VERSION_MAJOR >= 4) {\n    return (\n      \"React Native Skia requires react-native-worklets >= 0.7.0 for its \" +\n      \"Reanimated integration on native platforms. Reanimated 4 is \" +\n      \"installed, but react-native-worklets is missing or too old. \" +\n      \"Please install or upgrade react-native-worklets.\"\n    );\n  }\n  return (\n    \"React Native Skia requires Reanimated 4 (react-native-worklets >= \" +\n    \"0.7.0) for its Reanimated integration on native platforms. \" +\n    \"Reanimated 3 is not supported anymore: Skia objects cannot be used \" +\n    \"inside worklets or shared values with it. \" +\n    \"Please upgrade to react-native-reanimated >= 4.0.0.\"\n  );\n};\n\nexport const createContainer = (Skia: Skia, nativeId: number) => {\n  if (HAS_REANIMATED_4 && nativeId !== -1) {\n    return new NativeReanimatedContainer(Skia, nativeId);\n  } else {\n    if (HAS_REANIMATED_3 && !HAS_REANIMATED_4) {\n      const message = reanimatedSupportError();\n      if (__DEV__) {\n        // Fail loudly in development — a silent fallback to static rendering\n        // would only be noticed as frozen animations.\n        throw new Error(message);\n      }\n      if (!hasWarnedAboutReanimatedSupport) {\n        hasWarnedAboutReanimatedSupport = true;\n        console.error(\n          `${message} Falling back to static rendering (animations will not run).`\n        );\n      }\n    }\n    return new StaticContainer(Skia, nativeId);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/module/views/WebGPUCanvas.d.ts

@@ -6,6 +6,7 @@ declare global {
         fabric: boolean;
         getNativeSurface: (contextId: number) => NativeCanvas;
         MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+        destroyContext: (contextId: number) => void;
     };
 }
 type SurfacePointer = bigint;

package/lib/module/views/WebGPUCanvas.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 React, { useImperativeHandle, useRef, useState } from "react";
+import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
 import { View, Platform } from "react-native";
 import WebGPUNativeView from "../specs/WebGPUViewNativeComponent";
 let CONTEXT_COUNTER = 1;
@@ -13,6 +13,19 @@ export const WebGPUCanvas = ({
 }) => {
   const viewRef = useRef(null);
   const [contextId] = useState(() => generateContextId());
+
+  // Retire the native registry entry for this contextId on unmount. When a
+  // native surface is still attached, this is a no-op and the native view's
+  // own teardown retires the entry instead — which keeps StrictMode's
+  // simulated unmount (which re-runs effects without unmounting native views)
+  // from orphaning a live surface.
+  useEffect(() => {
+    return () => {
+      if (typeof RNWebGPU !== "undefined") {
+        RNWebGPU.destroyContext(contextId);
+      }
+    };
+  }, [contextId]);
   useImperativeHandle(ref, () => ({
     getContextId: () => contextId,
     getNativeSurface: () => {

package/lib/module/views/WebGPUCanvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useImperativeHandle","useRef","useState","View","Platform","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","contextId","getContextId","getNativeSurface","RNWebGPU","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","OS","createElement","_extends","collapsable","style","flex"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEpE,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAE7C,OAAOC,gBAAgB,MAAM,oCAAoC;AAEjE,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AAwCA,OAAO,MAAME,YAAY,GAAGA,CAAC;EAC3BC,WAAW;EACXC,GAAG;EACH,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,OAAO,GAAGX,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACY,SAAS,CAAC,GAAGX,QAAQ,CAAC,MAAMK,iBAAiB,CAAC,CAAC,CAAC;EAEvDP,mBAAmB,CAACU,GAAG,EAAE,OAAO;IAC9BI,YAAY,EAAEA,CAAA,KAAMD,SAAS;IAC7BE,gBAAgB,EAAEA,CAAA,KAAM;MACtB,IAAI,OAAOC,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAIC,KAAK,CACb,uEACF,CAAC;MACH;MACA,OAAOD,QAAQ,CAACD,gBAAgB,CAACF,SAAS,CAAC;IAC7C,CAAC;IACDK,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIF,KAAK,CAAC,iCAAiCE,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACP,OAAO,CAACQ,OAAO,EAAE;QACpB,MAAM,IAAIH,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA,IAAI,OAAOD,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAIC,KAAK,CACb,uEACF,CAAC;MACH;MACA;MACA;MACA,MAAMI,IAAI,GAAGT,OAAO,CAACQ,OAAc;MACnC,MAAME,IAAI,GACR,uBAAuB,IAAID,IAAI,GAC3BA,IAAI,CAACE,qBAAqB,CAAC,CAAC,GAC5BF,IAAI,CAACG,8BAA8B,CAAC,CAAC;MAC3C,OAAOR,QAAQ,CAACS,uBAAuB,CACrCZ,SAAS,EACTS,IAAI,CAACI,KAAK,EACVJ,IAAI,CAACK,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,IAAIvB,QAAQ,CAACwB,EAAE,KAAK,KAAK,EAAE;IACzB,oBAAO7B,KAAA,CAAA8B,aAAA,CAAC1B,IAAI,EAAKQ,KAAQ,CAAC;EAC5B;EAEA,oBACEZ,KAAA,CAAA8B,aAAA,CAAC1B,IAAI,EAAA2B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACrB,GAAG,EAAEE;EAAQ,GAAKD,KAAK,gBAC/CZ,KAAA,CAAA8B,aAAA,CAACxB,gBAAgB;IACf2B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBpB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC","ignoreList":[]}
+{"version":3,"names":["React","useEffect","useImperativeHandle","useRef","useState","View","Platform","WebGPUNativeView","CONTEXT_COUNTER","generateContextId","WebGPUCanvas","transparent","ref","props","viewRef","contextId","RNWebGPU","destroyContext","getContextId","getNativeSurface","Error","getContext","contextName","current","view","size","getBoundingClientRect","unstable_getBoundingClientRect","MakeWebGPUCanvasContext","width","height","OS","createElement","_extends","collapsable","style","flex"],"sources":["WebGPUCanvas.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { ViewProps } from \"react-native\";\nimport { View, Platform } from \"react-native\";\n\nimport WebGPUNativeView from \"../specs/WebGPUViewNativeComponent\";\n\nlet CONTEXT_COUNTER = 1;\nfunction generateContextId() {\n  return CONTEXT_COUNTER++;\n}\n\ndeclare global {\n  var RNWebGPU: {\n    gpu: GPU;\n    fabric: boolean;\n    getNativeSurface: (contextId: number) => NativeCanvas;\n    MakeWebGPUCanvasContext: (\n      contextId: number,\n      width: number,\n      height: number\n    ) => RNCanvasContext;\n    // Retires a canvas context; called by the Canvas on unmount (the Canvas\n    // owns the native registry entry for its contextId).\n    destroyContext: (contextId: number) => void;\n  };\n}\n\ntype SurfacePointer = bigint;\n\nexport interface NativeCanvas {\n  surface: SurfacePointer;\n  width: number;\n  height: number;\n  clientWidth: number;\n  clientHeight: number;\n}\n\nexport type RNCanvasContext = GPUCanvasContext & {\n  present: () => void;\n};\n\nexport interface WebGPUCanvasRef {\n  getContextId: () => number;\n  getContext(contextName: \"webgpu\"): RNCanvasContext | null;\n  getNativeSurface: () => NativeCanvas;\n}\n\ninterface WebGPUCanvasProps extends ViewProps {\n  transparent?: boolean;\n  ref?: React.Ref<WebGPUCanvasRef>;\n}\n\nexport const WebGPUCanvas = ({\n  transparent,\n  ref,\n  ...props\n}: WebGPUCanvasProps) => {\n  const viewRef = useRef(null);\n  const [contextId] = useState(() => generateContextId());\n\n  // Retire the native registry entry for this contextId on unmount. When a\n  // native surface is still attached, this is a no-op and the native view's\n  // own teardown retires the entry instead — which keeps StrictMode's\n  // simulated unmount (which re-runs effects without unmounting native views)\n  // from orphaning a live surface.\n  useEffect(() => {\n    return () => {\n      if (typeof RNWebGPU !== \"undefined\") {\n        RNWebGPU.destroyContext(contextId);\n      }\n    };\n  }, [contextId]);\n\n  useImperativeHandle(ref, () => ({\n    getContextId: () => contextId,\n    getNativeSurface: () => {\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      return RNWebGPU.getNativeSurface(contextId);\n    },\n    getContext(contextName: \"webgpu\"): RNCanvasContext | null {\n      if (contextName !== \"webgpu\") {\n        throw new Error(`[WebGPU] Unsupported context: ${contextName}`);\n      }\n      if (!viewRef.current) {\n        throw new Error(\"[WebGPU] Cannot get context before mount\");\n      }\n      if (typeof RNWebGPU === \"undefined\") {\n        throw new Error(\n          \"[WebGPU] RNWebGPU is not available. Make sure SK_GRAPHITE is enabled.\"\n        );\n      }\n      // getBoundingClientRect became stable in RN 0.83\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      const view = viewRef.current as any;\n      const size =\n        \"getBoundingClientRect\" in view\n          ? view.getBoundingClientRect()\n          : view.unstable_getBoundingClientRect();\n      return RNWebGPU.MakeWebGPUCanvasContext(\n        contextId,\n        size.width,\n        size.height\n      );\n    },\n  }));\n\n  // WebGPU Canvas is not supported on web\n  if (Platform.OS === \"web\") {\n    return <View {...props} />;\n  }\n\n  return (\n    <View collapsable={false} ref={viewRef} {...props}>\n      <WebGPUNativeView\n        style={{ flex: 1 }}\n        contextId={contextId}\n        transparent={!!transparent}\n      />\n    </View>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,mBAAmB,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAE/E,SAASC,IAAI,EAAEC,QAAQ,QAAQ,cAAc;AAE7C,OAAOC,gBAAgB,MAAM,oCAAoC;AAEjE,IAAIC,eAAe,GAAG,CAAC;AACvB,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,OAAOD,eAAe,EAAE;AAC1B;AA2CA,OAAO,MAAME,YAAY,GAAGA,CAAC;EAC3BC,WAAW;EACXC,GAAG;EACH,GAAGC;AACc,CAAC,KAAK;EACvB,MAAMC,OAAO,GAAGX,MAAM,CAAC,IAAI,CAAC;EAC5B,MAAM,CAACY,SAAS,CAAC,GAAGX,QAAQ,CAAC,MAAMK,iBAAiB,CAAC,CAAC,CAAC;;EAEvD;EACA;EACA;EACA;EACA;EACAR,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAI,OAAOe,QAAQ,KAAK,WAAW,EAAE;QACnCA,QAAQ,CAACC,cAAc,CAACF,SAAS,CAAC;MACpC;IACF,CAAC;EACH,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEfb,mBAAmB,CAACU,GAAG,EAAE,OAAO;IAC9BM,YAAY,EAAEA,CAAA,KAAMH,SAAS;IAC7BI,gBAAgB,EAAEA,CAAA,KAAM;MACtB,IAAI,OAAOH,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAII,KAAK,CACb,uEACF,CAAC;MACH;MACA,OAAOJ,QAAQ,CAACG,gBAAgB,CAACJ,SAAS,CAAC;IAC7C,CAAC;IACDM,UAAUA,CAACC,WAAqB,EAA0B;MACxD,IAAIA,WAAW,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAIF,KAAK,CAAC,iCAAiCE,WAAW,EAAE,CAAC;MACjE;MACA,IAAI,CAACR,OAAO,CAACS,OAAO,EAAE;QACpB,MAAM,IAAIH,KAAK,CAAC,0CAA0C,CAAC;MAC7D;MACA,IAAI,OAAOJ,QAAQ,KAAK,WAAW,EAAE;QACnC,MAAM,IAAII,KAAK,CACb,uEACF,CAAC;MACH;MACA;MACA;MACA,MAAMI,IAAI,GAAGV,OAAO,CAACS,OAAc;MACnC,MAAME,IAAI,GACR,uBAAuB,IAAID,IAAI,GAC3BA,IAAI,CAACE,qBAAqB,CAAC,CAAC,GAC5BF,IAAI,CAACG,8BAA8B,CAAC,CAAC;MAC3C,OAAOX,QAAQ,CAACY,uBAAuB,CACrCb,SAAS,EACTU,IAAI,CAACI,KAAK,EACVJ,IAAI,CAACK,MACP,CAAC;IACH;EACF,CAAC,CAAC,CAAC;;EAEH;EACA,IAAIxB,QAAQ,CAACyB,EAAE,KAAK,KAAK,EAAE;IACzB,oBAAO/B,KAAA,CAAAgC,aAAA,CAAC3B,IAAI,EAAKQ,KAAQ,CAAC;EAC5B;EAEA,oBACEb,KAAA,CAAAgC,aAAA,CAAC3B,IAAI,EAAA4B,QAAA;IAACC,WAAW,EAAE,KAAM;IAACtB,GAAG,EAAEE;EAAQ,GAAKD,KAAK,gBAC/Cb,KAAA,CAAAgC,aAAA,CAACzB,gBAAgB;IACf4B,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IACnBrB,SAAS,EAAEA,SAAU;IACrBJ,WAAW,EAAE,CAAC,CAACA;EAAY,CAC5B,CACG,CAAC;AAEX,CAAC","ignoreList":[]}

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

@@ -1,2 +1,4 @@
 export const __esModule: boolean;
 export const HAS_REANIMATED_3: any;
+export const HAS_REANIMATED_4: any;
+export const REANIMATED_VERSION_MAJOR: any;

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

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export function registerSkiaWorkletSerialization(): void;

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

@@ -1 +1,16 @@
 export 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 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 let REANIMATED_VERSION_MAJOR: null;

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

@@ -0,0 +1 @@
+export function registerSkiaWorkletSerialization(): void;

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/lib/typescript/src/views/WebGPUCanvas.d.ts

@@ -6,6 +6,7 @@ declare global {
         fabric: boolean;
         getNativeSurface: (contextId: number) => NativeCanvas;
         MakeWebGPUCanvasContext: (contextId: number, width: number, height: number) => RNCanvasContext;
+        destroyContext: (contextId: number) => void;
     };
 }
 type SurfacePointer = bigint;

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.9.1-next.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": {
@@ -127,7 +131,7 @@
     "rimraf": "3.0.2",
     "semantic-release": "^24.1.0",
     "semantic-release-yarn": "^3.0.2",
-    "tar": "^7.5.16",
+    "tar": "^7.5.19",
     "ts-jest": "29.4.3",
     "tsx": "^4.21.0",
     "typescript": "^5.2.2",
@@ -135,9 +139,10 @@
   },
   "dependencies": {
     "canvaskit-wasm": "0.41.0",
-    "react-native-skia-graphite-android": "150.0.0",
-    "react-native-skia-graphite-apple-ios": "150.0.0",
-    "react-native-skia-graphite-apple-macos": "150.0.0",
+    "react-native-skia-android": "150.0.0",
+    "react-native-skia-apple-ios": "150.0.0",
+    "react-native-skia-apple-macos": "150.0.0",
+    "react-native-skia-apple-tvos": "150.0.0",
     "react-reconciler": "0.31.0"
   },
   "graphiteDependencies": {
@@ -181,6 +186,5 @@
         }
       ]
     ]
-  },
-  "stableVersion": "0.0.0"
+  }
 }

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.
+  }
+};