npm - @shopify/react-native-skia - Versions diffs - 0.1.239 → 0.1.241 - Mend

@shopify/react-native-skia 0.1.239 → 0.1.241

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/android/cpp/rnskia-android/SkiaOpenGLSurfaceFactory.cpp CHANGED Viewed

@@ -28,12 +28,26 @@ sk_sp<SkSurface> SkiaOpenGLSurfaceFactory::makeOffscreenSurface(int width,
   SkSurfaceProps props(0, kUnknown_SkPixelGeometry);
+  if (!SkiaOpenGLHelper::makeCurrent(
+          &ThreadContextHolder::ThreadSkiaOpenGLContext,
+          ThreadContextHolder::ThreadSkiaOpenGLContext.gl1x1Surface)) {
+    RNSkLogger::logToConsole(
+        "Could not create EGL Surface from native window / surface. Could "
+        "not set new surface as current surface.");
+    return nullptr;
+  }
   // Create texture
   auto texture =
       ThreadContextHolder::ThreadSkiaOpenGLContext.directContext
           ->createBackendTexture(width, height, colorType,
                                  skgpu::Mipmapped::kNo, GrRenderable::kYes);
+  if (!texture.isValid()) {
+    RNSkLogger::logToConsole("couldn't create offscreen texture %dx%d", width,
+                             height);
+  }
   struct ReleaseContext {
     SkiaOpenGLContext *context;
     GrBackendTexture texture;

package/lib/commonjs/Platform/Platform.web.js CHANGED Viewed

@@ -116,10 +116,23 @@ const View = ({
 };
 const Platform = exports.Platform = {
   OS: "web",
-  PixelRatio: window.devicePixelRatio,
+  PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
+  // window is not defined on node
   resolveAsset: source => {
     if ((0, _types.isRNModule)(source)) {
-      throw new Error("Image source is a number - this is not supported on the web");
+      if (typeof source === "number" && typeof require === "function") {
+        const {
+          getAssetByID
+        } = require("react-native/Libraries/Image/AssetRegistry");
+        const {
+          httpServerLocation,
+          name,
+          type
+        } = getAssetByID(source);
+        const uri = `${httpServerLocation}/${name}.${type}`;
+        return uri;
+      }
+      throw new Error("Asset source is a number - this is not supported on the web");
     }
     return source.default;
   },

package/lib/commonjs/Platform/Platform.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","_interopRequireWildcard","require","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","useLayoutEffect","current","observe","unobserve","View","children","style","rawStyle","useMemo","useRef","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","createElement","Platform","exports","OS","PixelRatio","devicePixelRatio","resolveAsset","source","isRNModule","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) \| undefined;\ntype Div = HTMLDivElement & {\n __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver \| null = null;\n\nconst getObserver = () => {\n if (resizeObserver == null) {\n resizeObserver = new window.ResizeObserver(function (entries) {\n entries.forEach((entry) => {\n const node = entry.target as Div;\n const { left, top, width, height } = entry.contentRect;\n const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n if (typeof onLayout === \"function\") {\n // setTimeout 0 is taken from react-native-web (UIManager)\n setTimeout(\n () =>\n onLayout({\n timeStamp: Date.now(),\n nativeEvent: { layout: { x: left, y: top, width, height } },\n currentTarget: 0,\n target: 0,\n bubbles: false,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: 0,\n isDefaultPrevented() {\n throw new Error(\"Method not supported on web.\");\n },\n isPropagationStopped() {\n throw new Error(\"Method not supported on web.\");\n },\n persist() {\n throw new Error(\"Method not supported on web.\");\n },\n preventDefault() {\n throw new Error(\"Method not supported on web.\");\n },\n stopPropagation() {\n throw new Error(\"Method not supported on web.\");\n },\n isTrusted: true,\n type: \"\",\n }),\n 0\n );\n }\n });\n });\n }\n return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n const observer = getObserver();\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node !== null) {\n node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n }\n }, [ref, onLayout]);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node != null && observer != null) {\n if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n observer.observe(node);\n } else {\n observer.unobserve(node);\n }\n }\n return () => {\n if (node != null && observer != null) {\n observer.unobserve(node);\n }\n };\n }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n const ref = useRef<Div>(null);\n useElementLayout(ref, onLayout);\n const cssStyles = useMemo(() => {\n return {\n ...style,\n display: \"flex\",\n flexDirection: style.flexDirection \|\| \"inherit\",\n flexWrap: style.flexWrap \|\| \"nowrap\",\n justifyContent: style.justifyContent \|\| \"flex-start\",\n alignItems: style.alignItems \|\| \"stretch\",\n alignContent: style.alignContent \|\| \"stretch\",\n };\n }, [style]);\n\n return (\n <div ref={ref} style={cssStyles}>\n {children}\n </div>\n );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n OS: \"web\",\n PixelRatio: window.devicePixelRatio,\n resolveAsset: (source: DataModule) => {\n if (isRNModule(source)) {\n throw new Error(\n \"Image source is a number - this is not supported on the web\"\n );\n }\n return source.default;\n },\n findNodeHandle: () => {\n throw new Error(\"findNodeHandle is not supported on the web\");\n },\n View,\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["_react","_interopRequireWildcard","require","_types","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","useLayoutEffect","current","observe","unobserve","View","children","style","rawStyle","useMemo","useRef","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","createElement","Platform","exports","OS","PixelRatio","devicePixelRatio","resolveAsset","source","isRNModule","getAssetByID","httpServerLocation","name","uri","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) \| undefined;\ntype Div = HTMLDivElement & {\n __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver \| null = null;\n\nconst getObserver = () => {\n if (resizeObserver == null) {\n resizeObserver = new window.ResizeObserver(function (entries) {\n entries.forEach((entry) => {\n const node = entry.target as Div;\n const { left, top, width, height } = entry.contentRect;\n const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n if (typeof onLayout === \"function\") {\n // setTimeout 0 is taken from react-native-web (UIManager)\n setTimeout(\n () =>\n onLayout({\n timeStamp: Date.now(),\n nativeEvent: { layout: { x: left, y: top, width, height } },\n currentTarget: 0,\n target: 0,\n bubbles: false,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: 0,\n isDefaultPrevented() {\n throw new Error(\"Method not supported on web.\");\n },\n isPropagationStopped() {\n throw new Error(\"Method not supported on web.\");\n },\n persist() {\n throw new Error(\"Method not supported on web.\");\n },\n preventDefault() {\n throw new Error(\"Method not supported on web.\");\n },\n stopPropagation() {\n throw new Error(\"Method not supported on web.\");\n },\n isTrusted: true,\n type: \"\",\n }),\n 0\n );\n }\n });\n });\n }\n return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n const observer = getObserver();\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node !== null) {\n node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n }\n }, [ref, onLayout]);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node != null && observer != null) {\n if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n observer.observe(node);\n } else {\n observer.unobserve(node);\n }\n }\n return () => {\n if (node != null && observer != null) {\n observer.unobserve(node);\n }\n };\n }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n const ref = useRef<Div>(null);\n useElementLayout(ref, onLayout);\n const cssStyles = useMemo(() => {\n return {\n ...style,\n display: \"flex\",\n flexDirection: style.flexDirection \|\| \"inherit\",\n flexWrap: style.flexWrap \|\| \"nowrap\",\n justifyContent: style.justifyContent \|\| \"flex-start\",\n alignItems: style.alignItems \|\| \"stretch\",\n alignContent: style.alignContent \|\| \"stretch\",\n };\n }, [style]);\n\n return (\n <div ref={ref} style={cssStyles}>\n {children}\n </div>\n );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n OS: \"web\",\n PixelRatio: typeof window !== \"undefined\" ? window.devicePixelRatio : 1, // window is not defined on node\n resolveAsset: (source: DataModule) => {\n if (isRNModule(source)) {\n if (typeof source === \"number\" && typeof require === \"function\") {\n const {\n getAssetByID,\n } = require(\"react-native/Libraries/Image/AssetRegistry\");\n const { httpServerLocation, name, type } = getAssetByID(source);\n const uri = `${httpServerLocation}/${name}.${type}`;\n return uri;\n }\n throw new Error(\n \"Asset source is a number - this is not supported on the web\"\n );\n }\n return source.default;\n },\n findNodeHandle: () => {\n throw new Error(\"findNodeHandle is not supported on the web\");\n },\n View,\n};\n"],"mappings":"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"}

package/lib/commonjs/external/reanimated/buffers.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 type Modifier<T> = (input: T, index: number) => void;
-export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
 export {};

package/lib/commonjs/external/reanimated/buffers.js CHANGED Viewed

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useRectBuffer = exports.useRSXformBuffer = exports.usePointBuffer = exports.useColorBuffer = void 0;
 var _react = require("react");
-var _reactNativeReanimated = require("react-native-reanimated");
 var _skia = require("../../skia");
 var _moduleWrapper = require("./moduleWrapper");
 var _interpolators = require("./interpolators");
@@ -17,7 +16,7 @@ const useBuffer = (size, bufferInitializer, modifier) => {
   const values = (0, _moduleWrapper.useSharedValue)(buffer);
   const mod = modifier;
   const deps = Object.values((_mod$__closure = mod.__closure) !== null && _mod$__closure !== void 0 ? _mod$__closure : {});
-  const mapperId = (0, _reactNativeReanimated.startMapper)(() => {
+  const mapperId = (0, _moduleWrapper.startMapper)(() => {
     "worklet";
     buffer.forEach((val, index) => {
@@ -27,7 +26,7 @@ const useBuffer = (size, bufferInitializer, modifier) => {
   }, deps);
   (0, _react.useEffect)(() => {
     return () => {
-      (0, _reactNativeReanimated.stopMapper)(mapperId);
+      (0, _moduleWrapper.stopMapper)(mapperId);
     };
   }, [mapperId]);
   return values;

package/lib/commonjs/external/reanimated/buffers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","require","~~_reactNativeReanimated","~~_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","useMemo","Array","fill","map","values","useSharedValue","mod","deps","Object","__closure","mapperId","startMapper","forEach","val","index","notifyChange","useEffect","stopMapper","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport ~~{ startMapper, stopMapper } from \"react-native-reanimated\";\nimport~~ type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;~~AACA~~,IAAAC,~~sBAAA~~,GAAAD,OAAA;~~AAIA~~,IAAAE,~~KAAA~~,GAAAF,OAAA;~~AAEA~~,IAAAG,cAAA,GAAAH,OAAA;~~AACA,IAAAI,cAAA,GAAAJ,OAAA;~~AAIA,~~MAAMK~~,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACN,IAAI,CAAC,CAACO,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACP,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMS,MAAM,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EACrC,MAAMO,GAAG,GAAGT,QAA2B;EACvC,MAAMU,IAAI,GAAGC,MAAM,CAACJ,MAAM,EAAAN,cAAA,GAACQ,GAAG,CAACG,SAAS,cAAAX,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMY,QAAQ,GAAG,IAAAC,~~kCAAW~~,EAAC,MAAM;IACjC,SAAS;;IACTZ,MAAM,CAACa,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BjB,QAAQ,CAACgB,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF,IAAAC,2BAAY,EAACX,MAAM,CAAC;EACtB,CAAC,EAAEG,IAAI,CAAC;EAER,IAAAS,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAAC,~~iCAAU~~,EAACP,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAON,MAAM;AACf,CAAC;AAEM,MAAMc,aAAa,GAAGA,CAACvB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEvB,QAAQ,CAAC;;AAE5D;AAAAwB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAAC3B,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE1B,QAAQ,CAAC;;AAE3D;AAAAwB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAAC7B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE5B,QAAQ,CAAC;;AAEnD;AAAAwB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAAC/B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAE9B,QAAQ,CAAC;AAACwB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}
1	+ {"version":3,"names":["_react","require","_skia","_moduleWrapper","_interpolators","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","useMemo","Array","fill","map","values","useSharedValue","mod","deps","Object","__closure","mapperId","startMapper","forEach","val","index","notifyChange","useEffect","stopMapper","useRectBuffer","Skia","XYWHRect","exports","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAIA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,cAAA,GAAAF,OAAA;AACA,IAAAG,cAAA,GAAAH,OAAA;AAIA,MAAMI,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAG,IAAAC,cAAO,EACpB,MAAM,IAAIC,KAAK,CAACN,IAAI,CAAC,CAACO,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACP,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMS,MAAM,GAAG,IAAAC,6BAAc,EAACN,MAAM,CAAC;EACrC,MAAMO,GAAG,GAAGT,QAA2B;EACvC,MAAMU,IAAI,GAAGC,MAAM,CAACJ,MAAM,EAAAN,cAAA,GAACQ,GAAG,CAACG,SAAS,cAAAX,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMY,QAAQ,GAAG,IAAAC,0BAAW,EAAC,MAAM;IACjC,SAAS;;IACTZ,MAAM,CAACa,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7BjB,QAAQ,CAACgB,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACF,IAAAC,2BAAY,EAACX,MAAM,CAAC;EACtB,CAAC,EAAEG,IAAI,CAAC;EAER,IAAAS,gBAAS,EAAC,MAAM;IACd,OAAO,MAAM;MACX,IAAAC,yBAAU,EAACP,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAON,MAAM;AACf,CAAC;AAEM,MAAMc,aAAa,GAAGA,CAACvB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEvB,QAAQ,CAAC;;AAE5D;AAAAwB,OAAA,CAAAH,aAAA,GAAAA,aAAA;AACO,MAAMI,gBAAgB,GAAGA,CAAC3B,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACI,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE1B,QAAQ,CAAC;;AAE3D;AAAAwB,OAAA,CAAAC,gBAAA,GAAAA,gBAAA;AACO,MAAME,cAAc,GAAGA,CAAC7B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACM,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE5B,QAAQ,CAAC;;AAEnD;AAAAwB,OAAA,CAAAG,cAAA,GAAAA,cAAA;AACO,MAAME,cAAc,GAAGA,CAAC/B,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMwB,UAAI,CAACQ,KAAK,CAAC,OAAO,CAAC,EAAE9B,QAAQ,CAAC;AAACwB,OAAA,CAAAK,cAAA,GAAAA,cAAA"}

package/lib/commonjs/external/reanimated/interpolators.js CHANGED Viewed

@@ -7,12 +7,12 @@ exports.useVectorInterpolation = exports.usePathValue = exports.usePathInterpola
 var _react = require("react");
 var _animation = require("../../animation");
 var _skia = require("../../skia");
-var _Platform = require("../../Platform");
+var _Offscreen = require("../../renderer/Offscreen");
 var _moduleWrapper = require("./moduleWrapper");
 const notifyChange = value => {
   "worklet";
-  if (_WORKLET || _Platform.Platform.OS === "web") {
+  if ((0, _Offscreen.isOnMainThread)()) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value._value = value.value;
   }

package/lib/commonjs/external/reanimated/interpolators.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_react","require","_animation","_skia","~~_Platform~~","_moduleWrapper","notifyChange","value","~~_WORKLET~~","~~Platform","OS","~~_value","exports","usePathValue","cb","init","pathInit","useMemo","Skia","Path","Make","path","useSharedValue","useDerivedValue","reset","undefined","addPath","useClock","clock","callback","useCallback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","result","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { ~~Platform~~ } from \"../../~~Platform~~\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (~~_WORKLET \|\| Platform.OS === \"web\"~~) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/*\n @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,OAAA;AAGA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,~~SAAA~~,GAAAH,OAAA;AAEA,IAAAI,cAAA,GAAAJ,OAAA;AAOO,MAAMK,YAAY,GAAIC,KAA2B,IAAK;EAC3D,SAAS;;EACT,~~IAAIC~~,~~QAAQ~~,~~IAAIC~~,~~kBAAQ~~,~~CAACC~~,EAAE~~,KAAK,KAAK,EAAE~~;~~IACrC~~;~~IACCH~~,KAAK,~~CAASI~~,MAAM,~~GAAGJ~~,KAAK,CAACA,KAAK;EACrC;AACF,CAAC;~~AAACK~~,OAAA,~~CAAAN~~,YAAA,GAAAA,YAAA;AAEK,~~MAAMO~~,YAAY,GAAGA,CAACC,EAA0B,EAAEC,IAAa,KAAK;EACzE,MAAMC,QAAQ,GAAG,IAAAC,cAAO,EAAC,MAAMC,UAAI,CAACC,IAAI,CAACC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EACpD,MAAMC,IAAI,GAAG,IAAAC,6BAAc,EAACN,QAAQ,CAAC;EACrC,IAAAO,8BAAe,EAAC,MAAM;IACpBF,IAAI,~~CAACd~~,KAAK,~~CAACiB~~,KAAK,CAAC,CAAC;IAClB,IAAIT,IAAI,KAAKU,SAAS,EAAE;MACtBJ,IAAI,~~CAACd~~,KAAK,~~CAACmB~~,OAAO,CAACX,IAAI,CAAC;IAC1B;IACAD,EAAE,CAACO,IAAI,~~CAACd~~,KAAK,CAAC;IACdD,YAAY,~~CAACe~~,IAAI,CAAC;EACpB,CAAC,CAAC;EACF,OAAOA,IAAI;AACb,CAAC;AAACT,OAAA,CAAAC,YAAA,GAAAA,YAAA;AAEK,MAAMc,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,KAAK,GAAG,IAAAN,6BAAc,EAAC,CAAC,CAAC;EAC/B,MAAMO,QAAQ,GAAG,IAAAC,kBAAW,EACzBC,IAAe,IAAK;IACnB,SAAS;;IACTH,KAAK,~~CAACrB~~,KAAK,~~GAAGwB~~,IAAI,CAACC,mBAAmB;EACxC,CAAC,EACD,CAACJ,KAAK,CACR,CAAC;EACD,IAAAK,+BAAgB,EAACJ,QAAQ,CAAC;EAC1B,OAAOD,KAAK;AACd,CAAC;;AAED;AACA;AACA;AAFAhB,OAAA,CAAAe,QAAA,GAAAA,QAAA;AAWA,MAAMO,eAAe,GAAGA,CACtBC,OAAgB,~~EAChB5B~~,KAA0B,~~EAC1B6B~~,YAA6B,EAC7BC,KAAe,EACfC,MAAW,EACXC,OAA2B,KACxB;EACH;EACA,MAAMxB,IAAI,GAAG,IAAAE,cAAO,EAAC,MAAMkB,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;EACzC,MAAMK,MAAM,GAAG,IAAAlB,6BAAc,EAACP,IAAI,CAAC;EACnC,IAAA0B,kCAAmB,EACjB,~~MAAMlC~~,KAAK,CAACA,KAAK,~~EAChBmC~~,GAAG,IAAK;IACPF,MAAM,~~CAACjC~~,KAAK,~~GAAG6B~~,YAAY,CAACM,GAAG,EAAEL,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAEC,MAAM,~~CAACjC~~,KAAK,CAAC;IACtED,YAAY,~~CAACkC~~,MAAM,CAAC;EACtB,CAAC,EACD,CAACH,KAAK,EAAEC,MAAM,EAAEC,OAAO,CACzB,CAAC;EACD,OAAOC,MAAM;AACf,CAAC;AAEM,MAAMG,oBAAoB,GAAGA,~~CAClCpC~~,KAA0B,~~EAC1B8B~~,KAAe,EACfO,WAAqB,EACrBL,OAA2B,KACxB;EACH;EACA,MAAMM,oBAAoB,GAAGD,WAAW,CACrCE,KAAK,CAAC,CAAC,CAAC,CACRC,KAAK,CAAE1B,IAAI,IAAKuB,WAAW,CAAC,CAAC,CAAC,CAACI,gBAAgB,CAAC3B,IAAI,CAAC,CAAC;EACzD,IAAI,CAACwB,oBAAoB,EAAE;IACzB;IACA;IACA,MAAM,IAAII,KAAK,CACZ;AACP,4FACI,CAAC;EACH;EACA,OAAOf,eAAe,CACpB,MAAMhB,UAAI,CAACC,IAAI,CAACC,IAAI,CAAC,CAAC,~~EACtBb~~,KAAK,~~EACL2C~~,2BAAgB,EAChBb,KAAK,EACLO,WAAW,EACXL,OACF,CAAC;AACH,CAAC;AAAC3B,OAAA,CAAA+B,oBAAA,GAAAA,oBAAA;AAEK,MAAMQ,sBAAsB,GAAGA,~~CACpC5C~~,KAA0B,~~EAC1B8B~~,KAAe,EACfO,WAAsB,EACtBL,OAA2B,KAE3BL,eAAe,CACb,MAAMhB,UAAI,CAACkC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,~~EACtB7C~~,KAAK,~~EACL8C~~,4BAAiB,EACjBhB,KAAK,EACLO,WAAW,EACXL,OACF,CAAC;AAAC3B,OAAA,CAAAuC,sBAAA,GAAAA,sBAAA"}
1	+ {"version":3,"names":["_react","require","_animation","_skia","_Offscreen","_moduleWrapper","notifyChange","value","isOnMainThread","_value","exports","usePathValue","cb","init","pathInit","useMemo","Skia","Path","Make","path","useSharedValue","useDerivedValue","reset","undefined","addPath","useClock","clock","callback","useCallback","info","timeSinceFirstFrame","useFrameCallback","useInterpolator","factory","interpolator","input","output","options","result","useAnimatedReaction","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","interpolatePaths","useVectorInterpolation","Point","interpolateVector"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (isOnMainThread()) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/*\n @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":"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"}

package/lib/commonjs/renderer/Offscreen.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { SkPicture, SkSize } from "../skia/types";
+export declare const isOnMainThread: () => boolean;
 export declare const drawAsPicture: (element: ReactElement) => SkPicture;
 export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
 export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/lib/commonjs/renderer/Offscreen.js CHANGED Viewed

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.drawAsPicture = exports.drawAsImageFromPicture = exports.drawAsImage = void 0;
+exports.isOnMainThread = exports.drawAsPicture = exports.drawAsImageFromPicture = exports.drawAsImage = void 0;
 var _types = require("../dom/types");
 var _skia = require("../skia");
+var _Platform = require("../Platform");
 var _Reconciler = require("./Reconciler");
+// We call it main thread because on web main is JS thread
+const isOnMainThread = () => {
+  "worklet";
+  return typeof _WORKLET !== "undefined" && _WORKLET === true || _Platform.Platform.OS === "web";
+};
+exports.isOnMainThread = isOnMainThread;
 const drawAsPicture = element => {
   const recorder = _skia.Skia.PictureRecorder();
   const canvas = recorder.beginRecording();
@@ -33,7 +41,13 @@ const drawAsImageFromPicture = (picture, size) => {
   canvas.scale(pd, pd);
   canvas.drawPicture(picture);
   surface.flush();
-  return surface.makeImageSnapshot();
+  const image = surface.makeImageSnapshot();
+  // If we are not on the main thread, we need to make the image non-texture.
+  if (!isOnMainThread()) {
+    return image.makeNonTextureImage();
+  } else {
+    return image;
+  }
 };
 exports.drawAsImageFromPicture = drawAsImageFromPicture;
 //# sourceMappingURL=Offscreen.js.map

package/lib/commonjs/renderer/Offscreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_types","require","_skia","_Reconciler","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","~~exports","~~drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","makeImageSnapshot"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n ~~return~~ surface.makeImageSnapshot();\n};\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;~~AAEA~~,IAAAE,~~WAAA~~,GAAAF,OAAA;~~AAEO~~,~~MAAMG~~,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIC,oBAAQ,CAACL,UAAI,EAAE,KAAK,CAAC;EACtCI,IAAI,CAACE,MAAM,CAACR,OAAO,CAAC;EACpB,MAAMS,GAAG,GAAG,IAAIC,wBAAiB,CAACR,UAAI,EAAEE,MAAM,CAAC;EAC/CE,IAAI,CAACK,GAAG,CAACH,MAAM,CAACC,GAAG,CAAC;EACpB,MAAMG,OAAO,GAAGX,QAAQ,CAACY,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;~~AAACE~~,OAAA,~~CAAAf~~,aAAA,GAAAA,aAAA;AAEK,~~MAAMgB~~,WAAW,GAAGA,~~CAACf~~,OAAqB,~~EAAEgB~~,IAAY,KAAK;EAClE,OAAOC,sBAAsB,~~CAAClB~~,aAAa,CAACC,OAAO,CAAC,~~EAAEgB~~,IAAI,CAAC;AAC7D,CAAC;;AAED;~~AAAAF~~,OAAA,~~CAAAC~~,WAAA,GAAAA,WAAA;AACA,MAAMG,EAAE,GAAG,CAAC;AACL,MAAMD,sBAAsB,GAAGA,~~CAACL~~,OAAkB,~~EAAEI~~,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,~~GAAGjB~~,UAAI,~~CAACkB~~,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,~~MAAMd~~,MAAM,~~GAAGe~~,OAAO,CAACK,SAAS,CAAC,CAAC;~~EAClCpB~~,MAAM,~~CAACqB~~,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;~~EACpBd~~,MAAM,~~CAACsB~~,WAAW,~~CAACd~~,OAAO,CAAC;~~EAC3BO~~,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,~~OAAOR~~,OAAO,~~CAACS~~,iBAAiB,CAAC,CAAC;~~AACpC~~,CAAC;~~AAACd~~,OAAA,~~CAAAG~~,sBAAA,GAAAA,sBAAA"}
1	+ {"version":3,"names":["_types","require","_skia","_Platform","_Reconciler","isOnMainThread","_WORKLET","Platform","OS","exports","drawAsPicture","element","recorder","Skia","PictureRecorder","canvas","beginRecording","root","SkiaRoot","render","ctx","JsiDrawingContext","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n \"worklet\";\n return (\n (typeof _WORKLET !== \"undefined\" && _WORKLET === true) \|\|\n Platform.OS === \"web\"\n );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n const image = surface.makeImageSnapshot();\n // If we are not on the main thread, we need to make the image non-texture.\n if (!isOnMainThread()) {\n return image.makeNonTextureImage();\n } else {\n return image;\n }\n};\n"],"mappings":";;;;;;AAEA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAH,OAAA;AAEA;AACO,MAAMI,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDC,kBAAQ,CAACC,EAAE,KAAK,KAAK;AAEzB,CAAC;AAACC,OAAA,CAAAJ,cAAA,GAAAA,cAAA;AAEK,MAAMK,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGC,UAAI,CAACC,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGH,QAAQ,CAACI,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIC,oBAAQ,CAACL,UAAI,EAAE,KAAK,CAAC;EACtCI,IAAI,CAACE,MAAM,CAACR,OAAO,CAAC;EACpB,MAAMS,GAAG,GAAG,IAAIC,wBAAiB,CAACR,UAAI,EAAEE,MAAM,CAAC;EAC/CE,IAAI,CAACK,GAAG,CAACH,MAAM,CAACC,GAAG,CAAC;EACpB,MAAMG,OAAO,GAAGX,QAAQ,CAACY,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAACd,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAEK,MAAMe,WAAW,GAAGA,CAACd,OAAqB,EAAEe,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACjB,aAAa,CAACC,OAAO,CAAC,EAAEe,IAAI,CAAC;AAC7D,CAAC;;AAED;AAAAjB,OAAA,CAAAgB,WAAA,GAAAA,WAAA;AACA,MAAMG,EAAE,GAAG,CAAC;AACL,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGhB,UAAI,CAACiB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMb,MAAM,GAAGc,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCnB,MAAM,CAACoB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBb,MAAM,CAACqB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAClC,cAAc,CAAC,CAAC,EAAE;IACrB,OAAOiC,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC;AAAC7B,OAAA,CAAAkB,sBAAA,GAAAA,sBAAA"}

package/lib/module/Platform/Platform.web.js CHANGED Viewed

@@ -108,10 +108,23 @@ const View = ({
 };
 export const Platform = {
   OS: "web",
-  PixelRatio: window.devicePixelRatio,
+  PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1,
+  // window is not defined on node
   resolveAsset: source => {
     if (isRNModule(source)) {
-      throw new Error("Image source is a number - this is not supported on the web");
+      if (typeof source === "number" && typeof require === "function") {
+        const {
+          getAssetByID
+        } = require("react-native/Libraries/Image/AssetRegistry");
+        const {
+          httpServerLocation,
+          name,
+          type
+        } = getAssetByID(source);
+        const uri = `${httpServerLocation}/${name}.${type}`;
+        return uri;
+      }
+      throw new Error("Asset source is a number - this is not supported on the web");
     }
     return source.default;
   },

package/lib/module/Platform/Platform.web.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","useLayoutEffect","useMemo","useRef","isRNModule","DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","current","observe","unobserve","View","children","style","rawStyle","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","createElement","Platform","OS","PixelRatio","devicePixelRatio","resolveAsset","source","default","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) \| undefined;\ntype Div = HTMLDivElement & {\n __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver \| null = null;\n\nconst getObserver = () => {\n if (resizeObserver == null) {\n resizeObserver = new window.ResizeObserver(function (entries) {\n entries.forEach((entry) => {\n const node = entry.target as Div;\n const { left, top, width, height } = entry.contentRect;\n const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n if (typeof onLayout === \"function\") {\n // setTimeout 0 is taken from react-native-web (UIManager)\n setTimeout(\n () =>\n onLayout({\n timeStamp: Date.now(),\n nativeEvent: { layout: { x: left, y: top, width, height } },\n currentTarget: 0,\n target: 0,\n bubbles: false,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: 0,\n isDefaultPrevented() {\n throw new Error(\"Method not supported on web.\");\n },\n isPropagationStopped() {\n throw new Error(\"Method not supported on web.\");\n },\n persist() {\n throw new Error(\"Method not supported on web.\");\n },\n preventDefault() {\n throw new Error(\"Method not supported on web.\");\n },\n stopPropagation() {\n throw new Error(\"Method not supported on web.\");\n },\n isTrusted: true,\n type: \"\",\n }),\n 0\n );\n }\n });\n });\n }\n return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n const observer = getObserver();\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node !== null) {\n node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n }\n }, [ref, onLayout]);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node != null && observer != null) {\n if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n observer.observe(node);\n } else {\n observer.unobserve(node);\n }\n }\n return () => {\n if (node != null && observer != null) {\n observer.unobserve(node);\n }\n };\n }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n const ref = useRef<Div>(null);\n useElementLayout(ref, onLayout);\n const cssStyles = useMemo(() => {\n return {\n ...style,\n display: \"flex\",\n flexDirection: style.flexDirection \|\| \"inherit\",\n flexWrap: style.flexWrap \|\| \"nowrap\",\n justifyContent: style.justifyContent \|\| \"flex-start\",\n alignItems: style.alignItems \|\| \"stretch\",\n alignContent: style.alignContent \|\| \"stretch\",\n };\n }, [style]);\n\n return (\n <div ref={ref} style={cssStyles}>\n {children}\n </div>\n );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n OS: \"web\",\n PixelRatio: window.devicePixelRatio,\n resolveAsset: (source: DataModule) => {\n if (isRNModule(source)) {\n throw new Error(\n \"~~Image~~ source is a number - this is not supported on the web\"\n );\n }\n return source.default;\n },\n findNodeHandle: () => {\n throw new Error(\"findNodeHandle is not supported on the web\");\n },\n View,\n};\n"],"mappings":"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~~EAAEtD~~,MAAM,CAACuD,gBAAgB;~~EACnCC~~,YAAY,EAAGC,MAAkB,IAAK;IACpC,IAAI7D,UAAU,CAAC6D,MAAM,CAAC,EAAE;MACtB,MAAM,~~IAAI9B~~,KAAK,CACb,6DACF,CAAC;IACH;IACA,OAAO8B,MAAM,~~CAACC~~,OAAO;EACvB,CAAC;EACDC,cAAc,EAAEA,CAAA,KAAM;IACpB,MAAM,~~IAAIhC~~,KAAK,CAAC,4CAA4C,CAAC;EAC/D,CAAC;EACDa;AACF,CAAC"}
1	+ {"version":3,"names":["React","useLayoutEffect","useMemo","useRef","isRNModule","DOM_LAYOUT_HANDLER_NAME","resizeObserver","getObserver","window","ResizeObserver","entries","forEach","entry","node","target","left","top","width","height","contentRect","onLayout","setTimeout","timeStamp","Date","now","nativeEvent","layout","x","y","currentTarget","bubbles","cancelable","defaultPrevented","eventPhase","isDefaultPrevented","Error","isPropagationStopped","persist","preventDefault","stopPropagation","isTrusted","type","useElementLayout","ref","observer","current","observe","unobserve","View","children","style","rawStyle","cssStyles","display","flexDirection","flexWrap","justifyContent","alignItems","alignContent","createElement","Platform","OS","PixelRatio","devicePixelRatio","resolveAsset","source","require","getAssetByID","httpServerLocation","name","uri","default","findNodeHandle"],"sources":["Platform.web.tsx"],"sourcesContent":["import type { RefObject, CSSProperties } from \"react\";\nimport React, { useLayoutEffect, useMemo, useRef } from \"react\";\nimport type { LayoutChangeEvent, ViewComponent, ViewProps } from \"react-native\";\n\nimport type { DataModule } from \"../skia/types\";\nimport { isRNModule } from \"../skia/types\";\n\nimport type { IPlatform } from \"./IPlatform\";\n\n// eslint-disable-next-line max-len\n// https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/modules/useElementLayout/index.js\nconst DOM_LAYOUT_HANDLER_NAME = \"__reactLayoutHandler\";\ntype OnLayout = ((event: LayoutChangeEvent) => void) \| undefined;\ntype Div = HTMLDivElement & {\n __reactLayoutHandler: OnLayout;\n};\n\nlet resizeObserver: ResizeObserver \| null = null;\n\nconst getObserver = () => {\n if (resizeObserver == null) {\n resizeObserver = new window.ResizeObserver(function (entries) {\n entries.forEach((entry) => {\n const node = entry.target as Div;\n const { left, top, width, height } = entry.contentRect;\n const onLayout = node[DOM_LAYOUT_HANDLER_NAME];\n if (typeof onLayout === \"function\") {\n // setTimeout 0 is taken from react-native-web (UIManager)\n setTimeout(\n () =>\n onLayout({\n timeStamp: Date.now(),\n nativeEvent: { layout: { x: left, y: top, width, height } },\n currentTarget: 0,\n target: 0,\n bubbles: false,\n cancelable: false,\n defaultPrevented: false,\n eventPhase: 0,\n isDefaultPrevented() {\n throw new Error(\"Method not supported on web.\");\n },\n isPropagationStopped() {\n throw new Error(\"Method not supported on web.\");\n },\n persist() {\n throw new Error(\"Method not supported on web.\");\n },\n preventDefault() {\n throw new Error(\"Method not supported on web.\");\n },\n stopPropagation() {\n throw new Error(\"Method not supported on web.\");\n },\n isTrusted: true,\n type: \"\",\n }),\n 0\n );\n }\n });\n });\n }\n return resizeObserver;\n};\n\nconst useElementLayout = (ref: RefObject<Div>, onLayout: OnLayout) => {\n const observer = getObserver();\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node !== null) {\n node[DOM_LAYOUT_HANDLER_NAME] = onLayout;\n }\n }, [ref, onLayout]);\n\n useLayoutEffect(() => {\n const node = ref.current;\n if (node != null && observer != null) {\n if (typeof node[DOM_LAYOUT_HANDLER_NAME] === \"function\") {\n observer.observe(node);\n } else {\n observer.unobserve(node);\n }\n }\n return () => {\n if (node != null && observer != null) {\n observer.unobserve(node);\n }\n };\n }, [observer, ref]);\n};\n\nconst View = (({ children, onLayout, style: rawStyle }: ViewProps) => {\n const style = useMemo(() => (rawStyle ?? {}) as CSSProperties, [rawStyle]);\n const ref = useRef<Div>(null);\n useElementLayout(ref, onLayout);\n const cssStyles = useMemo(() => {\n return {\n ...style,\n display: \"flex\",\n flexDirection: style.flexDirection \|\| \"inherit\",\n flexWrap: style.flexWrap \|\| \"nowrap\",\n justifyContent: style.justifyContent \|\| \"flex-start\",\n alignItems: style.alignItems \|\| \"stretch\",\n alignContent: style.alignContent \|\| \"stretch\",\n };\n }, [style]);\n\n return (\n <div ref={ref} style={cssStyles}>\n {children}\n </div>\n );\n}) as unknown as typeof ViewComponent;\n\nexport const Platform: IPlatform = {\n OS: \"web\",\n PixelRatio: typeof window !== \"undefined\" ? window.devicePixelRatio : 1, // window is not defined on node\n resolveAsset: (source: DataModule) => {\n if (isRNModule(source)) {\n if (typeof source === \"number\" && typeof require === \"function\") {\n const {\n getAssetByID,\n } = require(\"react-native/Libraries/Image/AssetRegistry\");\n const { httpServerLocation, name, type } = getAssetByID(source);\n const uri = `${httpServerLocation}/${name}.${type}`;\n return uri;\n }\n throw new Error(\n \"Asset source is a number - this is not supported on the web\"\n );\n }\n return source.default;\n },\n findNodeHandle: () => {\n throw new Error(\"findNodeHandle is not supported on the web\");\n },\n View,\n};\n"],"mappings":"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"}

package/lib/module/external/reanimated/buffers.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 type Modifier<T> = (input: T, index: number) => void;
-export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
 export {};

package/lib/module/external/reanimated/buffers.js CHANGED Viewed

@@ -1,7 +1,6 @@
 import { useEffect, useMemo } from "react";
-import { startMapper, stopMapper } from "react-native-reanimated";
 import { Skia } from "../../skia";
-import { useSharedValue } from "./moduleWrapper";
+import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 const useBuffer = (size, bufferInitializer, modifier) => {
   var _mod$__closure;

package/lib/module/external/reanimated/buffers.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useEffect","useMemo","~~startMapper~~","~~stopMapper~~","~~Skia~~","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","Array","fill","map","values","mod","deps","Object","__closure","mapperId","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport ~~{ startMapper, stopMapper } from \"react-native-reanimated\";\nimport~~ type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;~~AAC1C~~,SAASC,~~WAAW~~,~~EAAEC,UAAU,~~QAAQ,~~yBAAyB~~;~~AAIjE~~,SAASC,~~IAAI~~,~~QAAQ~~,~~YAAY;AAEjC~~,~~SAASC~~,cAAc,QAAQ,iBAAiB;~~AAChD~~,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGX,OAAO,CACpB,MAAM,IAAIY,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,MAAM,GAAGX,cAAc,CAACO,MAAM,CAAC;EACrC,MAAMK,GAAG,GAAGP,QAA2B;EACvC,MAAMQ,IAAI,GAAGC,MAAM,CAACH,MAAM,EAAAL,cAAA,GAACM,GAAG,CAACG,SAAS,cAAAT,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMU,QAAQ,~~GAAGnB~~,WAAW,CAAC,MAAM;IACjC,SAAS;;~~IACTU~~,MAAM,CAACU,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7Bd,QAAQ,CAACa,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFlB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;~~MACXG~~,UAAU,~~CAACkB~~,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMS,aAAa,GAAGA,CAACjB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,~~MAAMJ~~,IAAI,~~CAACsB~~,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEhB,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMiB,gBAAgB,GAAGA,CAACnB,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,~~MAAMJ~~,IAAI,~~CAACwB~~,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMmB,cAAc,GAAGA,CAACrB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,~~MAAMJ~~,IAAI,~~CAAC0B~~,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,~~MAAMJ~~,IAAI,~~CAAC4B~~,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}
1	+ {"version":3,"names":["useEffect","useMemo","Skia","startMapper","stopMapper","useSharedValue","notifyChange","useBuffer","size","bufferInitializer","modifier","_mod$__closure","buffer","Array","fill","map","values","mod","deps","Object","__closure","mapperId","forEach","val","index","useRectBuffer","XYWHRect","useRSXformBuffer","RSXform","usePointBuffer","Point","useColorBuffer","Color"],"sources":["buffers.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\nimport type { WorkletFunction } from \"react-native-reanimated/lib/typescript/reanimated2/commonTypes\";\n\nimport type { SkColor, SkHostRect, SkPoint, SkRSXform } from \"../../skia/types\";\nimport { Skia } from \"../../skia\";\n\nimport { startMapper, stopMapper, useSharedValue } from \"./moduleWrapper\";\nimport { notifyChange } from \"./interpolators\";\n\ntype Modifier<T> = (input: T, index: number) => void;\n\nconst useBuffer = <T>(\n size: number,\n bufferInitializer: () => T,\n modifier: Modifier<T>\n) => {\n const buffer = useMemo(\n () => new Array(size).fill(0).map(bufferInitializer),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [size]\n );\n const values = useSharedValue(buffer);\n const mod = modifier as WorkletFunction;\n const deps = Object.values(mod.__closure ?? {});\n const mapperId = startMapper(() => {\n \"worklet\";\n buffer.forEach((val, index) => {\n modifier(val, index);\n });\n notifyChange(values);\n }, deps);\n\n useEffect(() => {\n return () => {\n stopMapper(mapperId);\n };\n }, [mapperId]);\n\n return values;\n};\n\nexport const useRectBuffer = (size: number, modifier: Modifier<SkHostRect>) =>\n useBuffer(size, () => Skia.XYWHRect(0, 0, 0, 0), modifier);\n\n// Usage for RSXform Buffer\nexport const useRSXformBuffer = (size: number, modifier: Modifier<SkRSXform>) =>\n useBuffer(size, () => Skia.RSXform(1, 0, 0, 0), modifier);\n\n// Usage for Point Buffer\nexport const usePointBuffer = (size: number, modifier: Modifier<SkPoint>) =>\n useBuffer(size, () => Skia.Point(0, 0), modifier);\n\n// Usage for Color Buffer\nexport const useColorBuffer = (size: number, modifier: Modifier<SkColor>) =>\n useBuffer(size, () => Skia.Color(\"black\"), modifier);\n"],"mappings":"AAAA,SAASA,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAI1C,SAASC,IAAI,QAAQ,YAAY;AAEjC,SAASC,WAAW,EAAEC,UAAU,EAAEC,cAAc,QAAQ,iBAAiB;AACzE,SAASC,YAAY,QAAQ,iBAAiB;AAI9C,MAAMC,SAAS,GAAGA,CAChBC,IAAY,EACZC,iBAA0B,EAC1BC,QAAqB,KAClB;EAAA,IAAAC,cAAA;EACH,MAAMC,MAAM,GAAGX,OAAO,CACpB,MAAM,IAAIY,KAAK,CAACL,IAAI,CAAC,CAACM,IAAI,CAAC,CAAC,CAAC,CAACC,GAAG,CAACN,iBAAiB,CAAC;EACpD;EACA,CAACD,IAAI,CACP,CAAC;EACD,MAAMQ,MAAM,GAAGX,cAAc,CAACO,MAAM,CAAC;EACrC,MAAMK,GAAG,GAAGP,QAA2B;EACvC,MAAMQ,IAAI,GAAGC,MAAM,CAACH,MAAM,EAAAL,cAAA,GAACM,GAAG,CAACG,SAAS,cAAAT,cAAA,cAAAA,cAAA,GAAI,CAAC,CAAC,CAAC;EAC/C,MAAMU,QAAQ,GAAGlB,WAAW,CAAC,MAAM;IACjC,SAAS;;IACTS,MAAM,CAACU,OAAO,CAAC,CAACC,GAAG,EAAEC,KAAK,KAAK;MAC7Bd,QAAQ,CAACa,GAAG,EAAEC,KAAK,CAAC;IACtB,CAAC,CAAC;IACFlB,YAAY,CAACU,MAAM,CAAC;EACtB,CAAC,EAAEE,IAAI,CAAC;EAERlB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXI,UAAU,CAACiB,QAAQ,CAAC;IACtB,CAAC;EACH,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,OAAOL,MAAM;AACf,CAAC;AAED,OAAO,MAAMS,aAAa,GAAGA,CAACjB,IAAY,EAAEE,QAA8B,KACxEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAACwB,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAEhB,QAAQ,CAAC;;AAE5D;AACA,OAAO,MAAMiB,gBAAgB,GAAGA,CAACnB,IAAY,EAAEE,QAA6B,KAC1EH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC0B,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAElB,QAAQ,CAAC;;AAE3D;AACA,OAAO,MAAMmB,cAAc,GAAGA,CAACrB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC4B,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAEpB,QAAQ,CAAC;;AAEnD;AACA,OAAO,MAAMqB,cAAc,GAAGA,CAACvB,IAAY,EAAEE,QAA2B,KACtEH,SAAS,CAACC,IAAI,EAAE,MAAMN,IAAI,CAAC8B,KAAK,CAAC,OAAO,CAAC,EAAEtB,QAAQ,CAAC"}

package/lib/module/external/reanimated/interpolators.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { useCallback, useMemo } from "react";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
-import { Platform } from "../../Platform";
+import { isOnMainThread } from "../../renderer/Offscreen";
 import { useAnimatedReaction, useFrameCallback, useSharedValue, useDerivedValue } from "./moduleWrapper";
 export const notifyChange = value => {
   "worklet";
-  if (_WORKLET || Platform.OS === "web") {
+  if (isOnMainThread()) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     value._value = value.value;
   }

package/lib/module/external/reanimated/interpolators.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","~~Platform~~","useAnimatedReaction","useFrameCallback","useSharedValue","useDerivedValue","notifyChange","value","~~_WORKLET","OS","~~_value","usePathValue","cb","init","pathInit","Path","Make","path","reset","undefined","addPath","useClock","clock","callback","info","timeSinceFirstFrame","useInterpolator","factory","interpolator","input","output","options","result","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { ~~Platform~~ } from \"../../~~Platform~~\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (~~_WORKLET \|\| Platform.OS === \"web\"~~) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/*\n @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":"AAKA,SAASA,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAG5C,SAASC,gBAAgB,EAAEC,iBAAiB,QAAQ,iBAAiB;AACrE,SAASC,IAAI,QAAQ,YAAY;AACjC,SAASC,~~QAAQ~~,QAAQ,~~gBAAgB~~;~~AAEzC~~,SACEC,mBAAmB,EACnBC,gBAAgB,EAChBC,cAAc,EACdC,eAAe,QACV,iBAAiB;AAExB,OAAO,MAAMC,YAAY,GAAIC,KAA2B,IAAK;EAC3D,SAAS;;EACT,~~IAAIC~~,~~QAAQ~~,~~IAAIP~~,~~QAAQ~~,~~CAACQ,~~EAAE~~,KAAK,KAAK,EAAE~~;~~IACrC~~;~~IACCF~~,KAAK,~~CAASG~~,MAAM,~~GAAGH~~,KAAK,CAACA,KAAK;EACrC;AACF,CAAC;AAED,OAAO,~~MAAMI~~,YAAY,GAAGA,CAACC,EAA0B,EAAEC,IAAa,KAAK;EACzE,MAAMC,QAAQ,~~GAAGjB~~,OAAO,CAAC,MAAMG,IAAI,~~CAACe~~,IAAI,CAACC,IAAI,CAAC,CAAC,EAAE,EAAE,CAAC;EACpD,MAAMC,IAAI,~~GAAGb~~,cAAc,~~CAACU~~,QAAQ,CAAC;~~EACrCT~~,eAAe,CAAC,MAAM;~~IACpBY~~,IAAI,~~CAACV~~,KAAK,~~CAACW~~,KAAK,CAAC,CAAC;IAClB,IAAIL,IAAI,KAAKM,SAAS,EAAE;MACtBF,IAAI,~~CAACV~~,KAAK,~~CAACa~~,OAAO,CAACP,IAAI,CAAC;IAC1B;IACAD,EAAE,CAACK,IAAI,~~CAACV~~,KAAK,CAAC;IACdD,YAAY,~~CAACW~~,IAAI,CAAC;EACpB,CAAC,CAAC;EACF,OAAOA,IAAI;AACb,CAAC;AAED,OAAO,MAAMI,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,KAAK,~~GAAGlB~~,cAAc,CAAC,CAAC,CAAC;EAC/B,~~MAAMmB~~,QAAQ,~~GAAG3B~~,WAAW,~~CACzB4B~~,IAAe,IAAK;IACnB,SAAS;;IACTF,KAAK,~~CAACf~~,KAAK,~~GAAGiB~~,IAAI,CAACC,mBAAmB;EACxC,CAAC,EACD,CAACH,KAAK,CACR,CAAC;~~EACDnB~~,gBAAgB,~~CAACoB~~,QAAQ,CAAC;EAC1B,OAAOD,KAAK;AACd,CAAC;;AAED;AACA;AACA;;AASA,MAAMI,eAAe,GAAGA,CACtBC,OAAgB,~~EAChBpB~~,KAA0B,~~EAC1BqB~~,YAA6B,EAC7BC,KAAe,EACfC,MAAW,EACXC,OAA2B,KACxB;EACH;EACA,MAAMlB,IAAI,~~GAAGhB~~,OAAO,CAAC,~~MAAM8B~~,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC;EACzC,MAAMK,MAAM,~~GAAG5B~~,cAAc,~~CAACS~~,IAAI,CAAC;~~EACnCX~~,mBAAmB,CACjB,MAAMK,KAAK,CAACA,KAAK,~~EAChB0B~~,GAAG,IAAK;IACPD,MAAM,~~CAACzB~~,KAAK,~~GAAGqB~~,YAAY,CAACK,GAAG,EAAEJ,KAAK,EAAEC,MAAM,EAAEC,OAAO,EAAEC,MAAM,~~CAACzB~~,KAAK,CAAC;IACtED,YAAY,~~CAAC0B~~,MAAM,CAAC;EACtB,CAAC,EACD,CAACH,KAAK,EAAEC,MAAM,EAAEC,OAAO,CACzB,CAAC;EACD,OAAOC,MAAM;AACf,CAAC;AAED,OAAO,MAAME,oBAAoB,GAAGA,~~CAClC3B~~,KAA0B,~~EAC1BsB~~,KAAe,EACfM,WAAqB,EACrBJ,OAA2B,KACxB;EACH;EACA,MAAMK,oBAAoB,GAAGD,WAAW,CACrCE,KAAK,CAAC,CAAC,CAAC,CACRC,KAAK,CAAErB,IAAI,IAAKkB,WAAW,CAAC,CAAC,CAAC,CAACI,gBAAgB,CAACtB,IAAI,CAAC,CAAC;EACzD,IAAI,CAACmB,oBAAoB,EAAE;IACzB;IACA;IACA,MAAM,IAAII,KAAK,CACZ;AACP,4FACI,CAAC;EACH;EACA,OAAOd,eAAe,CACpB,~~MAAM1B~~,IAAI,~~CAACe~~,IAAI,CAACC,IAAI,CAAC,CAAC,~~EACtBT~~,KAAK,EACLT,gBAAgB,~~EAChB+B~~,KAAK,EACLM,WAAW,EACXJ,OACF,CAAC;AACH,CAAC;AAED,OAAO,MAAMU,sBAAsB,GAAGA,~~CACpClC~~,KAA0B,~~EAC1BsB~~,KAAe,EACfM,WAAsB,EACtBJ,OAA2B,KAE3BL,eAAe,CACb,~~MAAM1B~~,IAAI,~~CAAC0C~~,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,~~EACtBnC~~,KAAK,EACLR,iBAAiB,~~EACjB8B~~,KAAK,EACLM,WAAW,EACXJ,OACF,CAAC"}
1	+ {"version":3,"names":["useCallback","useMemo","interpolatePaths","interpolateVector","Skia","isOnMainThread","useAnimatedReaction","useFrameCallback","useSharedValue","useDerivedValue","notifyChange","value","_value","usePathValue","cb","init","pathInit","Path","Make","path","reset","undefined","addPath","useClock","clock","callback","info","timeSinceFirstFrame","useInterpolator","factory","interpolator","input","output","options","result","val","usePathInterpolation","outputRange","allPathsInterpolable","slice","every","isInterpolatable","Error","useVectorInterpolation","Point"],"sources":["interpolators.ts"],"sourcesContent":["import type {\n ExtrapolationType,\n FrameInfo,\n SharedValue,\n} from \"react-native-reanimated\";\nimport { useCallback, useMemo } from \"react\";\n\nimport type { SkPath, SkPoint } from \"../../skia/types\";\nimport { interpolatePaths, interpolateVector } from \"../../animation\";\nimport { Skia } from \"../../skia\";\nimport { isOnMainThread } from \"../../renderer/Offscreen\";\n\nimport {\n useAnimatedReaction,\n useFrameCallback,\n useSharedValue,\n useDerivedValue,\n} from \"./moduleWrapper\";\n\nexport const notifyChange = (value: SharedValue<unknown>) => {\n \"worklet\";\n if (isOnMainThread()) {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n (value as any)._value = value.value;\n }\n};\n\nexport const usePathValue = (cb: (path: SkPath) => void, init?: SkPath) => {\n const pathInit = useMemo(() => Skia.Path.Make(), []);\n const path = useSharedValue(pathInit);\n useDerivedValue(() => {\n path.value.reset();\n if (init !== undefined) {\n path.value.addPath(init);\n }\n cb(path.value);\n notifyChange(path);\n });\n return path;\n};\n\nexport const useClock = () => {\n const clock = useSharedValue(0);\n const callback = useCallback(\n (info: FrameInfo) => {\n \"worklet\";\n clock.value = info.timeSinceFirstFrame;\n },\n [clock]\n );\n useFrameCallback(callback);\n return clock;\n};\n\n/*\n @worklet\n */\ntype Interpolator<T> = (\n value: number,\n input: number[],\n output: T[],\n options: ExtrapolationType,\n result: T\n) => T;\n\nconst useInterpolator = <T>(\n factory: () => T,\n value: SharedValue<number>,\n interpolator: Interpolator<T>,\n input: number[],\n output: T[],\n options?: ExtrapolationType\n) => {\n // eslint-disable-next-line react-hooks/exhaustive-deps\n const init = useMemo(() => factory(), []);\n const result = useSharedValue(init);\n useAnimatedReaction(\n () => value.value,\n (val) => {\n result.value = interpolator(val, input, output, options, result.value);\n notifyChange(result);\n },\n [input, output, options]\n );\n return result;\n};\n\nexport const usePathInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPath[],\n options?: ExtrapolationType\n) => {\n // Check if all paths in outputRange are interpolable\n const allPathsInterpolable = outputRange\n .slice(1)\n .every((path) => outputRange[0].isInterpolatable(path));\n if (!allPathsInterpolable) {\n // Handle the case where not all paths are interpolable\n // For example, throw an error or return early\n throw new Error(\n `Not all paths in the output range are interpolable.\nSee: https://shopify.github.io/react-native-skia/docs/animations/hooks#usepathinterpolation`\n );\n }\n return useInterpolator(\n () => Skia.Path.Make(),\n value,\n interpolatePaths,\n input,\n outputRange,\n options\n );\n};\n\nexport const useVectorInterpolation = (\n value: SharedValue<number>,\n input: number[],\n outputRange: SkPoint[],\n options?: ExtrapolationType\n) =>\n useInterpolator(\n () => Skia.Point(0, 0),\n value,\n interpolateVector,\n input,\n outputRange,\n options\n );\n"],"mappings":"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"}

package/lib/module/renderer/Offscreen.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { SkPicture, SkSize } from "../skia/types";
+export declare const isOnMainThread: () => boolean;
 export declare const drawAsPicture: (element: ReactElement) => SkPicture;
 export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
 export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/lib/module/renderer/Offscreen.js CHANGED Viewed

@@ -1,6 +1,14 @@
 import { JsiDrawingContext } from "../dom/types";
 import { Skia } from "../skia";
+import { Platform } from "../Platform";
 import { SkiaRoot } from "./Reconciler";
+// We call it main thread because on web main is JS thread
+export const isOnMainThread = () => {
+  "worklet";
+  return typeof _WORKLET !== "undefined" && _WORKLET === true || Platform.OS === "web";
+};
 export const drawAsPicture = element => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording();
@@ -25,6 +33,12 @@ export const drawAsImageFromPicture = (picture, size) => {
   canvas.scale(pd, pd);
   canvas.drawPicture(picture);
   surface.flush();
-  return surface.makeImageSnapshot();
+  const image = surface.makeImageSnapshot();
+  // If we are not on the main thread, we need to make the image non-texture.
+  if (!isOnMainThread()) {
+    return image.makeNonTextureImage();
+  } else {
+    return image;
+  }
 };
 //# sourceMappingURL=Offscreen.js.map

package/lib/module/renderer/Offscreen.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["JsiDrawingContext","Skia","SkiaRoot","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","makeImageSnapshot"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n ~~return~~ surface.makeImageSnapshot();\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;~~AAE9B~~,SAASC,QAAQ,QAAQ,cAAc;~~AAEvC~~,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,~~GAAGJ~~,IAAI,~~CAACK~~,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,~~IAAIP~~,QAAQ,~~CAACD~~,IAAI,EAAE,KAAK,CAAC;~~EACtCQ~~,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,~~IAAIX~~,iBAAiB,CAACC,IAAI,~~EAAEM~~,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,~~GAAGlB~~,IAAI,~~CAACmB~~,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,~~OAAOR~~,OAAO,~~CAACS~~,iBAAiB,CAAC,CAAC;~~AACpC~~,CAAC"}
1	+ {"version":3,"names":["JsiDrawingContext","Skia","Platform","SkiaRoot","isOnMainThread","_WORKLET","OS","drawAsPicture","element","recorder","PictureRecorder","canvas","beginRecording","root","render","ctx","dom","picture","finishRecordingAsPicture","drawAsImage","size","drawAsImageFromPicture","pd","surface","Surface","MakeOffscreen","width","height","getCanvas","scale","drawPicture","flush","image","makeImageSnapshot","makeNonTextureImage"],"sources":["Offscreen.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { JsiDrawingContext } from \"../dom/types\";\nimport type { SkPicture, SkSize } from \"../skia/types\";\nimport { Skia } from \"../skia\";\nimport { Platform } from \"../Platform\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\n// We call it main thread because on web main is JS thread\nexport const isOnMainThread = () => {\n \"worklet\";\n return (\n (typeof _WORKLET !== \"undefined\" && _WORKLET === true) \|\|\n Platform.OS === \"web\"\n );\n};\n\nexport const drawAsPicture = (element: ReactElement) => {\n const recorder = Skia.PictureRecorder();\n const canvas = recorder.beginRecording();\n const root = new SkiaRoot(Skia, false);\n root.render(element);\n const ctx = new JsiDrawingContext(Skia, canvas);\n root.dom.render(ctx);\n const picture = recorder.finishRecordingAsPicture();\n return picture;\n};\n\nexport const drawAsImage = (element: ReactElement, size: SkSize) => {\n return drawAsImageFromPicture(drawAsPicture(element), size);\n};\n\n// TODO: We're not sure yet why PixelRatio is not needed here.\nconst pd = 1;\nexport const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {\n \"worklet\";\n const surface = Skia.Surface.MakeOffscreen(\n size.width * pd,\n size.height * pd\n )!;\n const canvas = surface.getCanvas();\n canvas.scale(pd, pd);\n canvas.drawPicture(picture);\n surface.flush();\n const image = surface.makeImageSnapshot();\n // If we are not on the main thread, we need to make the image non-texture.\n if (!isOnMainThread()) {\n return image.makeNonTextureImage();\n } else {\n return image;\n }\n};\n"],"mappings":"AAEA,SAASA,iBAAiB,QAAQ,cAAc;AAEhD,SAASC,IAAI,QAAQ,SAAS;AAC9B,SAASC,QAAQ,QAAQ,aAAa;AAEtC,SAASC,QAAQ,QAAQ,cAAc;;AAEvC;AACA,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAM;EAClC,SAAS;;EACT,OACG,OAAOC,QAAQ,KAAK,WAAW,IAAIA,QAAQ,KAAK,IAAI,IACrDH,QAAQ,CAACI,EAAE,KAAK,KAAK;AAEzB,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIC,OAAqB,IAAK;EACtD,MAAMC,QAAQ,GAAGR,IAAI,CAACS,eAAe,CAAC,CAAC;EACvC,MAAMC,MAAM,GAAGF,QAAQ,CAACG,cAAc,CAAC,CAAC;EACxC,MAAMC,IAAI,GAAG,IAAIV,QAAQ,CAACF,IAAI,EAAE,KAAK,CAAC;EACtCY,IAAI,CAACC,MAAM,CAACN,OAAO,CAAC;EACpB,MAAMO,GAAG,GAAG,IAAIf,iBAAiB,CAACC,IAAI,EAAEU,MAAM,CAAC;EAC/CE,IAAI,CAACG,GAAG,CAACF,MAAM,CAACC,GAAG,CAAC;EACpB,MAAME,OAAO,GAAGR,QAAQ,CAACS,wBAAwB,CAAC,CAAC;EACnD,OAAOD,OAAO;AAChB,CAAC;AAED,OAAO,MAAME,WAAW,GAAGA,CAACX,OAAqB,EAAEY,IAAY,KAAK;EAClE,OAAOC,sBAAsB,CAACd,aAAa,CAACC,OAAO,CAAC,EAAEY,IAAI,CAAC;AAC7D,CAAC;;AAED;AACA,MAAME,EAAE,GAAG,CAAC;AACZ,OAAO,MAAMD,sBAAsB,GAAGA,CAACJ,OAAkB,EAAEG,IAAY,KAAK;EAC1E,SAAS;;EACT,MAAMG,OAAO,GAAGtB,IAAI,CAACuB,OAAO,CAACC,aAAa,CACxCL,IAAI,CAACM,KAAK,GAAGJ,EAAE,EACfF,IAAI,CAACO,MAAM,GAAGL,EAChB,CAAE;EACF,MAAMX,MAAM,GAAGY,OAAO,CAACK,SAAS,CAAC,CAAC;EAClCjB,MAAM,CAACkB,KAAK,CAACP,EAAE,EAAEA,EAAE,CAAC;EACpBX,MAAM,CAACmB,WAAW,CAACb,OAAO,CAAC;EAC3BM,OAAO,CAACQ,KAAK,CAAC,CAAC;EACf,MAAMC,KAAK,GAAGT,OAAO,CAACU,iBAAiB,CAAC,CAAC;EACzC;EACA,IAAI,CAAC7B,cAAc,CAAC,CAAC,EAAE;IACrB,OAAO4B,KAAK,CAACE,mBAAmB,CAAC,CAAC;EACpC,CAAC,MAAM;IACL,OAAOF,KAAK;EACd;AACF,CAAC"}

package/lib/typescript/src/external/reanimated/buffers.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 type Modifier<T> = (input: T, index: number) => void;
-export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated").SharedValue<SkHostRect[]>;
-export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated").SharedValue<SkRSXform[]>;
-export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated").SharedValue<SkPoint[]>;
-export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated").SharedValue<Float32Array[]>;
+export declare const useRectBuffer: (size: number, modifier: Modifier<SkHostRect>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkHostRect[]>;
+export declare const useRSXformBuffer: (size: number, modifier: Modifier<SkRSXform>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkRSXform[]>;
+export declare const usePointBuffer: (size: number, modifier: Modifier<SkPoint>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<SkPoint[]>;
+export declare const useColorBuffer: (size: number, modifier: Modifier<SkColor>) => import("react-native-reanimated/lib/typescript/reanimated2/commonTypes").SharedValue<Float32Array[]>;
 export {};

package/lib/typescript/src/renderer/Offscreen.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { ReactElement } from "react";
 import type { SkPicture, SkSize } from "../skia/types";
+export declare const isOnMainThread: () => boolean;
 export declare const drawAsPicture: (element: ReactElement) => SkPicture;
 export declare const drawAsImage: (element: ReactElement, size: SkSize) => import("../skia").SkImage;
 export declare const drawAsImageFromPicture: (picture: SkPicture, size: SkSize) => import("../skia").SkImage;

package/package.json CHANGED Viewed

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.239",
+  "version": "0.1.241",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/scripts/setup-canvaskit.js CHANGED Viewed

@@ -7,6 +7,7 @@
  * In `@expo/webpack-config` this is `./web` (default for now).
  *
  * This script does the following:
+ * 0. Try to detect if it's an expo project and if the bundler is set to metro
  * 1. Resolve the public path relative to wherever the script is being run.
  * 2. Log out some useful info about the web setup, just in case anything goes wrong.
  * 3. Resolve the installed wasm file `canvaskit-wasm/bin/full/canvaskit.wasm`
@@ -15,14 +16,18 @@
  *
  *
  * Usage:
- * $ `npx <script> web`
+ * $ `npx <script>`
  *
+ * On webpack:
  * -> Copies the file to `<project>/web/static/js/canvaskit.wasm`
+ * on metro:
+ * -> Copies the file to `<project>/public/canvaskit.wasm`
  *
- * Tooling that uses `/public`:
- * $ `npx <script> public`
+ * Tooling that uses a custom static assets folder, like `/assets` for example:
+ * $ `npx <script> assets`
+ *
+ * -> Copies the file to `<project>/assets/canvaskit.wasm`
  *
- * -> Copies the file to `<project>/public/static/js/canvaskit.wasm`
  */
 const fs = require("fs");
 const path = require("path");
@@ -32,6 +37,29 @@ const args = process.argv.slice(2);
 const gray = (text) => `\x1b[90m${text}\x1b[0m`;
 const lime = (text) => `\x1b[32m${text}\x1b[0m`;
+function getWetherItsAnExpoProjectWithMetro() {
+  try {
+    const appJsonPath = path.join(process.cwd(), 'app.json');
+    console.log(
+      `› Reading Expo settings from (if any):\n  ${gray(appJsonPath)}`
+    );
+    const appJson = require(appJsonPath);
+    const isAnExpoProjectWithMetro = appJson.expo && appJson.expo.web && appJson.expo.web.bundler === 'metro';
+    if (isAnExpoProjectWithMetro) {
+      console.log(`  ${gray(`Expo project with metro bundler detected`)}\n`);
+      return true;
+    } else {
+      console.log(`  ${gray(`Metro bundler not detected. Assuming the project is using Webpack.`)}\n`);
+      return false;
+    }
+  } catch (error) {
+    console.log(`  ${gray(`No Expo settings found`)}\n`);
+    return false;
+  }
+}
 function getWasmFilePath() {
   try {
     return require.resolve("canvaskit-wasm/bin/full/canvaskit.wasm");
@@ -43,14 +71,14 @@ function getWasmFilePath() {
   }
 }
-function getOutputFilePath() {
+function getOutputFilePath(isAnExpoProjectWithMetro) {
   // Default to using `web` public path.
-  const publicFolder = path.resolve(args[0] || "web");
-  const publicLocation = "./static/js/canvaskit.wasm";
+  const publicFolder = path.resolve(args[0] || (isAnExpoProjectWithMetro) ? "public" : "web/static/js");
+  const publicLocation = "./canvaskit.wasm";
   const output = path.join(publicFolder, publicLocation);
   console.log(
-    `› Copying 'canvaskit.wasm' file to static folder:\n  ${gray(output)}\n`
+    `› Copying 'canvaskit.wasm' file to public folder:\n  ${gray(output)}\n`
   );
   return output;
 }
@@ -61,9 +89,12 @@ function copyFile(from, to) {
   fs.writeFileSync(to, data);
 }
-// Copy the WASM file to `<static>/static/js/canvaskit.wasm`
 (() => {
-  copyFile(getWasmFilePath(), getOutputFilePath());
+  // Automatically detect if it's an expo project with a metro bundler
+  const isAnExpoProjectWithMetro = getWetherItsAnExpoProjectWithMetro();
+  // Copy the WASM file to `<static>/canvaskit.wasm`
+  copyFile(getWasmFilePath(), getOutputFilePath(isAnExpoProjectWithMetro));
   console.log(lime("› Success! You are almost there:"));
   console.log(

package/src/Platform/Platform.web.tsx CHANGED Viewed

@@ -116,11 +116,19 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
 export const Platform: IPlatform = {
   OS: "web",
-  PixelRatio: window.devicePixelRatio,
+  PixelRatio: typeof window !== "undefined" ? window.devicePixelRatio : 1, // window is not defined on node
   resolveAsset: (source: DataModule) => {
     if (isRNModule(source)) {
+      if (typeof source === "number" && typeof require === "function") {
+        const {
+          getAssetByID,
+        } = require("react-native/Libraries/Image/AssetRegistry");
+        const { httpServerLocation, name, type } = getAssetByID(source);
+        const uri = `${httpServerLocation}/${name}.${type}`;
+        return uri;
+      }
       throw new Error(
-        "Image source is a number - this is not supported on the web"
+        "Asset source is a number - this is not supported on the web"
       );
     }
     return source.default;

package/src/external/reanimated/buffers.ts CHANGED Viewed

@@ -1,11 +1,10 @@
 import { useEffect, useMemo } from "react";
-import { startMapper, stopMapper } from "react-native-reanimated";
 import type { WorkletFunction } from "react-native-reanimated/lib/typescript/reanimated2/commonTypes";
 import type { SkColor, SkHostRect, SkPoint, SkRSXform } from "../../skia/types";
 import { Skia } from "../../skia";
-import { useSharedValue } from "./moduleWrapper";
+import { startMapper, stopMapper, useSharedValue } from "./moduleWrapper";
 import { notifyChange } from "./interpolators";
 type Modifier<T> = (input: T, index: number) => void;

package/src/external/reanimated/interpolators.ts CHANGED Viewed

@@ -8,7 +8,7 @@ import { useCallback, useMemo } from "react";
 import type { SkPath, SkPoint } from "../../skia/types";
 import { interpolatePaths, interpolateVector } from "../../animation";
 import { Skia } from "../../skia";
-import { Platform } from "../../Platform";
+import { isOnMainThread } from "../../renderer/Offscreen";
 import {
   useAnimatedReaction,
@@ -19,7 +19,7 @@ import {
 export const notifyChange = (value: SharedValue<unknown>) => {
   "worklet";
-  if (_WORKLET || Platform.OS === "web") {
+  if (isOnMainThread()) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (value as any)._value = value.value;
   }

package/src/renderer/Offscreen.tsx CHANGED Viewed

@@ -3,9 +3,19 @@ import type { ReactElement } from "react";
 import { JsiDrawingContext } from "../dom/types";
 import type { SkPicture, SkSize } from "../skia/types";
 import { Skia } from "../skia";
+import { Platform } from "../Platform";
 import { SkiaRoot } from "./Reconciler";
+// We call it main thread because on web main is JS thread
+export const isOnMainThread = () => {
+  "worklet";
+  return (
+    (typeof _WORKLET !== "undefined" && _WORKLET === true) ||
+    Platform.OS === "web"
+  );
+};
 export const drawAsPicture = (element: ReactElement) => {
   const recorder = Skia.PictureRecorder();
   const canvas = recorder.beginRecording();
@@ -33,5 +43,11 @@ export const drawAsImageFromPicture = (picture: SkPicture, size: SkSize) => {
   canvas.scale(pd, pd);
   canvas.drawPicture(picture);
   surface.flush();
-  return surface.makeImageSnapshot();
+  const image = surface.makeImageSnapshot();
+  // If we are not on the main thread, we need to make the image non-texture.
+  if (!isOnMainThread()) {
+    return image.makeNonTextureImage();
+  } else {
+    return image;
+  }
 };