@shopify/react-native-skia 0.1.175 → 0.1.178

package/lib/module/external/reanimated/moduleWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","Reanimated","require","e","HAS_REANIMATED","throwOnMissingReanimated","Error","ReanimatedVersionTested","throwOnIncompatibleReanimatedVersion","reanimatedVersion","version","includes","useSharedValue","value","startMapper","stopMapper","runOnJS","isSharedValue"],"sources":["moduleWrapper.ts"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Reanimated: any;\n\ntry {\n  Reanimated = require(\"react-native-reanimated\");\n} catch (e) {\n  // Ignore\n}\n\nexport const HAS_REANIMATED = !!Reanimated;\n\nfunction throwOnMissingReanimated() {\n  throw new Error(\n    \"Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \\\n    react-naitve-skia's integration layer API.\"\n  );\n}\n\nlet ReanimatedVersionTested = false;\n\nexport function throwOnIncompatibleReanimatedVersion() {\n  if (ReanimatedVersionTested) {\n    // we avoid testing version more than once as it won't change and we throw\n    // an error when version is incompatible\n    return;\n  }\n  ReanimatedVersionTested = true;\n  const reanimatedVersion =\n    // eslint-disable-next-line import/extensions\n    require(\"react-native-reanimated/package.json\").version;\n  // The first compatible version is 3.0.0 but we need to exclude 3.0.0 pre-releases\n  // as they have limited support for the used API.\n  if (\n    !reanimatedVersion ||\n    reanimatedVersion < \"3.0.0\" ||\n    reanimatedVersion.includes(\"3.0.0-\")\n  ) {\n    throw new Error(\n      `Reanimated version ${reanimatedVersion} is not supported, please upgrade to 3.0.0 or newer.`\n    );\n  }\n}\n\nexport const useSharedValue =\n  Reanimated?.useSharedValue ||\n  ((value: number) => useMemo(() => ({ value }), [value]));\n\nexport const startMapper = Reanimated?.startMapper || throwOnMissingReanimated;\nexport const stopMapper = Reanimated?.stopMapper || throwOnMissingReanimated;\nexport const runOnJS = Reanimated?.runOnJS || throwOnMissingReanimated;\nexport const isSharedValue = <T>(\n  value: unknown\n): value is SharedValueType<T> => {\n  if (!Reanimated) {\n    throwOnMissingReanimated();\n  }\n  return !!value && Reanimated.isSharedValue(value);\n};\n"],"mappings":";;AAAA,SAASA,OAAT,QAAwB,OAAxB;AAIA;AACA,IAAIC,UAAJ;;AAEA,IAAI;EACFA,UAAU,GAAGC,OAAO,CAAC,yBAAD,CAApB;AACD,CAFD,CAEE,OAAOC,CAAP,EAAU,CACV;AACD;;AAED,OAAO,MAAMC,cAAc,GAAG,CAAC,CAACH,UAAzB;;AAEP,SAASI,wBAAT,GAAoC;EAClC,MAAM,IAAIC,KAAJ,CACJ;AACJ,+CAFQ,CAAN;AAID;;AAED,IAAIC,uBAAuB,GAAG,KAA9B;AAEA,OAAO,SAASC,oCAAT,GAAgD;EACrD,IAAID,uBAAJ,EAA6B;IAC3B;IACA;IACA;EACD;;EACDA,uBAAuB,GAAG,IAA1B;;EACA,MAAME,iBAAiB,GACrB;EACAP,OAAO,CAAC,sCAAD,CAAP,CAAgDQ,OAFlD,CAPqD,CAUrD;EACA;;;EACA,IACE,CAACD,iBAAD,IACAA,iBAAiB,GAAG,OADpB,IAEAA,iBAAiB,CAACE,QAAlB,CAA2B,QAA3B,CAHF,EAIE;IACA,MAAM,IAAIL,KAAJ,CACH,sBAAqBG,iBAAkB,sDADpC,CAAN;EAGD;AACF;AAED,OAAO,MAAMG,cAAc,GACzB,gBAAAX,UAAU,UAAV,kDAAYW,cAAZ,MACEC,KAAD,IAAmBb,OAAO,CAAC,OAAO;EAAEa;AAAF,CAAP,CAAD,EAAoB,CAACA,KAAD,CAApB,CAD3B,CADK;AAIP,OAAO,MAAMC,WAAW,GAAG,iBAAAb,UAAU,UAAV,oDAAYa,WAAZ,KAA2BT,wBAA/C;AACP,OAAO,MAAMU,UAAU,GAAG,iBAAAd,UAAU,UAAV,oDAAYc,UAAZ,KAA0BV,wBAA7C;AACP,OAAO,MAAMW,OAAO,GAAG,iBAAAf,UAAU,UAAV,oDAAYe,OAAZ,KAAuBX,wBAAvC;AACP,OAAO,MAAMY,aAAa,GACxBJ,KAD2B,IAEK;EAChC,IAAI,CAACZ,UAAL,EAAiB;IACfI,wBAAwB;EACzB;;EACD,OAAO,CAAC,CAACQ,KAAF,IAAWZ,UAAU,CAACgB,aAAX,CAAyBJ,KAAzB,CAAlB;AACD,CAPM"}

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

@@ -0,0 +1,5 @@
+import type { Container } from "../../renderer/Container";
+import type { AnimatedProps } from "../../renderer/processors";
+import type { Node } from "../../dom/types";
+export declare function extractReanimatedProps(props: AnimatedProps<any>): AnimatedProps<any, never>[];
+export declare function bindReanimatedProps(container: Container, node: Node<any>, reanimatedProps: AnimatedProps<any>): void;

package/lib/module/external/reanimated/renderHelpers.js

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable reanimated/js-function-in-worklet */
+import { startMapper, stopMapper, isSharedValue, throwOnIncompatibleReanimatedVersion, HAS_REANIMATED } from "./moduleWrapper";
+
+const _bindings = new WeakMap();
+
+export function extractReanimatedProps(props) {
+  if (!HAS_REANIMATED) {
+    return [props, {}];
+  }
+
+  const reanimatedProps = {};
+  const otherProps = {};
+
+  for (const propName in props) {
+    if (propName === "children") {
+      continue;
+    }
+
+    const propValue = props[propName];
+
+    if (isSharedValue(propValue)) {
+      reanimatedProps[propName] = propValue;
+      otherProps[propName] = propValue.value;
+    } else {
+      otherProps[propName] = propValue;
+    }
+  }
+
+  return [otherProps, reanimatedProps];
+}
+export function bindReanimatedProps(container, node, reanimatedProps) {
+  if (!HAS_REANIMATED) {
+    return;
+  }
+
+  if (__DEV__) {
+    throwOnIncompatibleReanimatedVersion();
+  }
+
+  const sharedValues = Object.values(reanimatedProps);
+
+  const previousMapperId = _bindings.get(node);
+
+  if (previousMapperId !== undefined) {
+    stopMapper(previousMapperId);
+  }
+
+  if (sharedValues.length > 0) {
+    const viewId = container.getNativeId();
+    const {
+      SkiaViewApi
+    } = global;
+    const mapperId = startMapper(() => {
+      "worklet";
+
+      for (const propName in reanimatedProps) {
+        node && node.setProp(propName, reanimatedProps[propName].value);
+      } // On React Native we use the SkiaViewApi to redraw because it can
+      // run on the worklet thread (container.redraw can't)
+      // if SkiaViewApi is undefined, we are on web and container.redraw()
+      // can safely be invoked
+
+
+      if (SkiaViewApi) {
+        SkiaViewApi.requestRedraw(viewId);
+      } else {
+        container.redraw();
+      }
+    }, sharedValues);
+
+    _bindings.set(node, mapperId);
+  }
+}
+//# sourceMappingURL=renderHelpers.js.map

package/lib/module/external/reanimated/renderHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["startMapper","stopMapper","isSharedValue","throwOnIncompatibleReanimatedVersion","HAS_REANIMATED","_bindings","WeakMap","extractReanimatedProps","props","reanimatedProps","otherProps","propName","propValue","value","bindReanimatedProps","container","node","__DEV__","sharedValues","Object","values","previousMapperId","get","undefined","length","viewId","getNativeId","SkiaViewApi","global","mapperId","setProp","requestRedraw","redraw","set"],"sources":["renderHelpers.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable reanimated/js-function-in-worklet */\nimport type { Container } from \"../../renderer/Container\";\nimport type { AnimatedProps } from \"../../renderer/processors\";\nimport type { Node } from \"../../dom/types\";\n\nimport {\n  startMapper,\n  stopMapper,\n  isSharedValue,\n  throwOnIncompatibleReanimatedVersion,\n  HAS_REANIMATED,\n} from \"./moduleWrapper\";\n\nconst _bindings = new WeakMap<Node<unknown>, unknown>();\n\nexport function extractReanimatedProps(props: AnimatedProps<any>) {\n  if (!HAS_REANIMATED) {\n    return [props, {}];\n  }\n  const reanimatedProps = {} as AnimatedProps<any>;\n  const otherProps = {} as AnimatedProps<any>;\n  for (const propName in props) {\n    if (propName === \"children\") {\n      continue;\n    }\n    const propValue = props[propName];\n    if (isSharedValue(propValue)) {\n      reanimatedProps[propName] = propValue;\n      otherProps[propName] = propValue.value;\n    } else {\n      otherProps[propName] = propValue;\n    }\n  }\n  return [otherProps, reanimatedProps];\n}\n\nexport function bindReanimatedProps(\n  container: Container,\n  node: Node<any>,\n  reanimatedProps: AnimatedProps<any>\n) {\n  if (!HAS_REANIMATED) {\n    return;\n  }\n  if (__DEV__) {\n    throwOnIncompatibleReanimatedVersion();\n  }\n  const sharedValues = Object.values(reanimatedProps);\n  const previousMapperId = _bindings.get(node);\n  if (previousMapperId !== undefined) {\n    stopMapper(previousMapperId);\n  }\n  if (sharedValues.length > 0) {\n    const viewId = container.getNativeId();\n    const { SkiaViewApi } = global;\n    const mapperId = startMapper(() => {\n      \"worklet\";\n      for (const propName in reanimatedProps) {\n        node && node.setProp(propName, reanimatedProps[propName].value);\n      }\n      // On React Native we use the SkiaViewApi to redraw because it can\n      // run on the worklet thread (container.redraw can't)\n      // if SkiaViewApi is undefined, we are on web and container.redraw()\n      // can safely be invoked\n      if (SkiaViewApi) {\n        SkiaViewApi.requestRedraw(viewId);\n      } else {\n        container.redraw();\n      }\n    }, sharedValues);\n    _bindings.set(node, mapperId);\n  }\n}\n"],"mappings":"AAAA;;AACA;AAKA,SACEA,WADF,EAEEC,UAFF,EAGEC,aAHF,EAIEC,oCAJF,EAKEC,cALF,QAMO,iBANP;;AAQA,MAAMC,SAAS,GAAG,IAAIC,OAAJ,EAAlB;;AAEA,OAAO,SAASC,sBAAT,CAAgCC,KAAhC,EAA2D;EAChE,IAAI,CAACJ,cAAL,EAAqB;IACnB,OAAO,CAACI,KAAD,EAAQ,EAAR,CAAP;EACD;;EACD,MAAMC,eAAe,GAAG,EAAxB;EACA,MAAMC,UAAU,GAAG,EAAnB;;EACA,KAAK,MAAMC,QAAX,IAAuBH,KAAvB,EAA8B;IAC5B,IAAIG,QAAQ,KAAK,UAAjB,EAA6B;MAC3B;IACD;;IACD,MAAMC,SAAS,GAAGJ,KAAK,CAACG,QAAD,CAAvB;;IACA,IAAIT,aAAa,CAACU,SAAD,CAAjB,EAA8B;MAC5BH,eAAe,CAACE,QAAD,CAAf,GAA4BC,SAA5B;MACAF,UAAU,CAACC,QAAD,CAAV,GAAuBC,SAAS,CAACC,KAAjC;IACD,CAHD,MAGO;MACLH,UAAU,CAACC,QAAD,CAAV,GAAuBC,SAAvB;IACD;EACF;;EACD,OAAO,CAACF,UAAD,EAAaD,eAAb,CAAP;AACD;AAED,OAAO,SAASK,mBAAT,CACLC,SADK,EAELC,IAFK,EAGLP,eAHK,EAIL;EACA,IAAI,CAACL,cAAL,EAAqB;IACnB;EACD;;EACD,IAAIa,OAAJ,EAAa;IACXd,oCAAoC;EACrC;;EACD,MAAMe,YAAY,GAAGC,MAAM,CAACC,MAAP,CAAcX,eAAd,CAArB;;EACA,MAAMY,gBAAgB,GAAGhB,SAAS,CAACiB,GAAV,CAAcN,IAAd,CAAzB;;EACA,IAAIK,gBAAgB,KAAKE,SAAzB,EAAoC;IAClCtB,UAAU,CAACoB,gBAAD,CAAV;EACD;;EACD,IAAIH,YAAY,CAACM,MAAb,GAAsB,CAA1B,EAA6B;IAC3B,MAAMC,MAAM,GAAGV,SAAS,CAACW,WAAV,EAAf;IACA,MAAM;MAAEC;IAAF,IAAkBC,MAAxB;IACA,MAAMC,QAAQ,GAAG7B,WAAW,CAAC,MAAM;MACjC;;MACA,KAAK,MAAMW,QAAX,IAAuBF,eAAvB,EAAwC;QACtCO,IAAI,IAAIA,IAAI,CAACc,OAAL,CAAanB,QAAb,EAAuBF,eAAe,CAACE,QAAD,CAAf,CAA0BE,KAAjD,CAAR;MACD,CAJgC,CAKjC;MACA;MACA;MACA;;;MACA,IAAIc,WAAJ,EAAiB;QACfA,WAAW,CAACI,aAAZ,CAA0BN,MAA1B;MACD,CAFD,MAEO;QACLV,SAAS,CAACiB,MAAV;MACD;IACF,CAd2B,EAczBd,YAdyB,CAA5B;;IAeAb,SAAS,CAAC4B,GAAV,CAAcjB,IAAd,EAAoBa,QAApB;EACD;AACF"}

package/lib/module/external/reanimated/useSharedValueEffect.d.ts

@@ -1,11 +1,8 @@
-declare type SharedValueTypeWrapper<T = number> = {
-    value: T;
-};
+import type { SharedValueType } from "../../renderer/processors/Animations";
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
  * so whenever the shared value changes the SkiaView will redraw.
  * @param cb Callback that will be called whenever the shared value changes.
  * @param values One or more shared values to listen for.
  */
-export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueTypeWrapper<T>, ...values: SharedValueTypeWrapper<T>[]) => void;
-export {};
+export declare const useSharedValueEffect: <T = number>(cb: () => void, value: SharedValueType<T>, ...values: SharedValueType<T>[]) => void;

package/lib/module/external/reanimated/useSharedValueEffect.js

@@ -1,17 +1,5 @@
-var _Reanimated;
-
-import { useEffect, useMemo } from "react"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-let Reanimated;
-
-try {
-  Reanimated = require("react-native-reanimated");
-} catch (e) {// Ignore
-}
-
-const useSharedValueWrapper = ((_Reanimated = Reanimated) === null || _Reanimated === void 0 ? void 0 : _Reanimated.useSharedValue) === undefined ? value => useMemo(() => ({
-  value
-}), [value]) : Reanimated.useSharedValue;
+import { useEffect } from "react";
+import { HAS_REANIMATED, useSharedValue, runOnJS, startMapper, stopMapper } from "./moduleWrapper";
 /**
  * Connects a shared value from reanimated to a SkiaView or Canvas
  * so whenever the shared value changes the SkiaView will redraw.
@@ -24,17 +12,14 @@ export const useSharedValueEffect = function (cb, value) {
     values[_key - 2] = arguments[_key];
   }
 
-  const input = useSharedValueWrapper(0);
+  console.warn(`useSharedValueEffect() is now deprecated, you can use Reanimated values directly.
+Learn more at https://shopify.github.io/react-native-skia/.`);
+  const input = useSharedValue(0);
   useEffect(() => {
-    if (!Reanimated) {
+    if (!HAS_REANIMATED) {
       console.warn("Reanimated was not found and the useSharedValueEffect hook will have no effect.");
     } else {
-      const {
-        runOnJS,
-        startMapper,
-        stopMapper
-      } = Reanimated; // Start a mapper in Reanimated
-
+      // Start a mapper in Reanimated
       const mapperId = startMapper(() => {
         "worklet";
 

package/lib/module/external/reanimated/useSharedValueEffect.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","Reanimated","require","e","useSharedValueWrapper","useSharedValue","undefined","value","useSharedValueEffect","cb","values","input","console","warn","runOnJS","startMapper","stopMapper","mapperId"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect, useMemo } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Reanimated: any;\n\ntry {\n  Reanimated = require(\"react-native-reanimated\");\n} catch (e) {\n  // Ignore\n}\n\ntype SharedValueTypeWrapper<T = number> = {\n  value: T;\n};\n\nconst useSharedValueWrapper =\n  Reanimated?.useSharedValue === undefined\n    ? (value: number) => useMemo(() => ({ value }), [value])\n    : Reanimated.useSharedValue;\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueTypeWrapper<T>,\n  ...values: SharedValueTypeWrapper<T>[]\n) => {\n  const input = useSharedValueWrapper(0);\n\n  useEffect(() => {\n    if (!Reanimated) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      const { runOnJS, startMapper, stopMapper } = Reanimated;\n\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":";;AAAA,SAASA,SAAT,EAAoBC,OAApB,QAAmC,OAAnC,C,CAEA;;AACA,IAAIC,UAAJ;;AAEA,IAAI;EACFA,UAAU,GAAGC,OAAO,CAAC,yBAAD,CAApB;AACD,CAFD,CAEE,OAAOC,CAAP,EAAU,CACV;AACD;;AAMD,MAAMC,qBAAqB,GACzB,gBAAAH,UAAU,UAAV,kDAAYI,cAAZ,MAA+BC,SAA/B,GACKC,KAAD,IAAmBP,OAAO,CAAC,OAAO;EAAEO;AAAF,CAAP,CAAD,EAAoB,CAACA,KAAD,CAApB,CAD9B,GAEIN,UAAU,CAACI,cAHjB;AAKA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMG,oBAAoB,GAAG,UAClCC,EADkC,EAElCF,KAFkC,EAI/B;EAAA,kCADAG,MACA;IADAA,MACA;EAAA;;EACH,MAAMC,KAAK,GAAGP,qBAAqB,CAAC,CAAD,CAAnC;EAEAL,SAAS,CAAC,MAAM;IACd,IAAI,CAACE,UAAL,EAAiB;MACfW,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL,MAAM;QAAEC,OAAF;QAAWC,WAAX;QAAwBC;MAAxB,IAAuCf,UAA7C,CADK,CAGL;;MACA,MAAMgB,QAAQ,GAAGF,WAAW,CAC1B,MAAM;QACJ;;QACAD,OAAO,CAACL,EAAD,CAAP;MACD,CAJyB,EAK1B,CAACF,KAAD,EAAQ,GAAGG,MAAX,CAL0B,EAM1B,CAACC,KAAD,CAN0B,CAA5B,CAJK,CAYL;;MACA,OAAO,MAAM;QACX,IAAIK,UAAU,IAAIC,QAAQ,KAAKX,SAA/B,EAA0C;UACxCU,UAAU,CAACC,QAAD,CAAV;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAxBc,CAyBd;EACD,CA1BQ,EA0BN,CAACN,KAAD,EAAQJ,KAAR,EAAe,GAAGG,MAAlB,CA1BM,CAAT;AA2BD,CAlCM"}
+{"version":3,"names":["useEffect","HAS_REANIMATED","useSharedValue","runOnJS","startMapper","stopMapper","useSharedValueEffect","cb","value","values","console","warn","input","mapperId","undefined"],"sources":["useSharedValueEffect.ts"],"sourcesContent":["import { useEffect } from \"react\";\n\nimport type { SharedValueType } from \"../../renderer/processors/Animations\";\n\nimport {\n  HAS_REANIMATED,\n  useSharedValue,\n  runOnJS,\n  startMapper,\n  stopMapper,\n} from \"./moduleWrapper\";\n\n/**\n * Connects a shared value from reanimated to a SkiaView or Canvas\n * so whenever the shared value changes the SkiaView will redraw.\n * @param cb Callback that will be called whenever the shared value changes.\n * @param values One or more shared values to listen for.\n */\nexport const useSharedValueEffect = <T = number>(\n  cb: () => void,\n  value: SharedValueType<T>,\n  ...values: SharedValueType<T>[]\n) => {\n  console.warn(\n    `useSharedValueEffect() is now deprecated, you can use Reanimated values directly.\nLearn more at https://shopify.github.io/react-native-skia/.`\n  );\n  const input = useSharedValue(0);\n\n  useEffect(() => {\n    if (!HAS_REANIMATED) {\n      console.warn(\n        \"Reanimated was not found and the useSharedValueEffect hook will have no effect.\"\n      );\n    } else {\n      // Start a mapper in Reanimated\n      const mapperId = startMapper(\n        () => {\n          \"worklet\";\n          runOnJS(cb)();\n        },\n        [value, ...values],\n        [input]\n      );\n      // Return unregistering the mapper\n      return () => {\n        if (stopMapper && mapperId !== undefined) {\n          stopMapper(mapperId);\n        }\n      };\n    }\n    return () => {};\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [input, value, ...values]);\n};\n"],"mappings":"AAAA,SAASA,SAAT,QAA0B,OAA1B;AAIA,SACEC,cADF,EAEEC,cAFF,EAGEC,OAHF,EAIEC,WAJF,EAKEC,UALF,QAMO,iBANP;AAQA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,oBAAoB,GAAG,UAClCC,EADkC,EAElCC,KAFkC,EAI/B;EAAA,kCADAC,MACA;IADAA,MACA;EAAA;;EACHC,OAAO,CAACC,IAAR,CACG;AACL,4DAFE;EAIA,MAAMC,KAAK,GAAGV,cAAc,CAAC,CAAD,CAA5B;EAEAF,SAAS,CAAC,MAAM;IACd,IAAI,CAACC,cAAL,EAAqB;MACnBS,OAAO,CAACC,IAAR,CACE,iFADF;IAGD,CAJD,MAIO;MACL;MACA,MAAME,QAAQ,GAAGT,WAAW,CAC1B,MAAM;QACJ;;QACAD,OAAO,CAACI,EAAD,CAAP;MACD,CAJyB,EAK1B,CAACC,KAAD,EAAQ,GAAGC,MAAX,CAL0B,EAM1B,CAACG,KAAD,CAN0B,CAA5B,CAFK,CAUL;;MACA,OAAO,MAAM;QACX,IAAIP,UAAU,IAAIQ,QAAQ,KAAKC,SAA/B,EAA0C;UACxCT,UAAU,CAACQ,QAAD,CAAV;QACD;MACF,CAJD;IAKD;;IACD,OAAO,MAAM,CAAE,CAAf,CAtBc,CAuBd;EACD,CAxBQ,EAwBN,CAACD,KAAD,EAAQJ,KAAR,EAAe,GAAGC,MAAlB,CAxBM,CAAT;AAyBD,CApCM"}

package/lib/module/headless/index.d.ts

@@ -0,0 +1,3 @@
+import type { ReactNode } from "react";
+export * from "../renderer/components";
+export declare const draw: (element: ReactNode, width: number, height: number) => any;

package/lib/module/headless/index.js

@@ -0,0 +1,29 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { JsiSkApi } from "../skia/web";
+import { SkiaRoot } from "../renderer/Reconciler";
+import { JsiDrawingContext } from "../dom/types";
+export * from "../renderer/components"; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+let Skia;
+export const draw = (element, width, height) => {
+  if (!Skia) {
+    Skia = JsiSkApi(CanvasKit);
+  }
+
+  const surface = Skia.Surface.MakeOffscreen(width, height);
+
+  if (surface === null) {
+    throw new Error("Couldn't create surface!");
+  }
+
+  const root = new SkiaRoot(Skia);
+  root.render(element);
+  const canvas = surface.getCanvas();
+  const ctx = new JsiDrawingContext(Skia, canvas);
+  root.dom.render(ctx);
+  surface.flush();
+  const image = surface.makeImageSnapshot();
+  return image;
+};
+//# sourceMappingURL=index.js.map

package/lib/module/headless/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["JsiSkApi","SkiaRoot","JsiDrawingContext","Skia","draw","element","width","height","CanvasKit","surface","Surface","MakeOffscreen","Error","root","render","canvas","getCanvas","ctx","dom","flush","image","makeImageSnapshot"],"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport CanvasKitInit from \"canvaskit-wasm/bin/full/canvaskit\";\nimport type { ReactNode } from \"react\";\n\nimport { JsiSkApi } from \"../skia/web\";\nimport { SkiaRoot } from \"../renderer/Reconciler\";\nimport { JsiDrawingContext } from \"../dom/types\";\n\nexport * from \"../renderer/components\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nlet Skia: any;\n\nexport const draw = (element: ReactNode, width: number, height: number) => {\n  if (!Skia) {\n    Skia = JsiSkApi(CanvasKit);\n  }\n  const surface = Skia.Surface.MakeOffscreen(width, height);\n  if (surface === null) {\n    throw new Error(\"Couldn't create surface!\");\n  }\n  const root = new SkiaRoot(Skia);\n  root.render(element);\n  const canvas = surface.getCanvas();\n  const ctx = new JsiDrawingContext(Skia, canvas);\n  root.dom.render(ctx);\n  surface.flush();\n  const image = surface.makeImageSnapshot();\n  return image;\n};\n"],"mappings":"AAAA;AACA;AAIA,SAASA,QAAT,QAAyB,aAAzB;AACA,SAASC,QAAT,QAAyB,wBAAzB;AACA,SAASC,iBAAT,QAAkC,cAAlC;AAEA,cAAc,wBAAd,C,CAEA;;AACA,IAAIC,IAAJ;AAEA,OAAO,MAAMC,IAAI,GAAG,CAACC,OAAD,EAAqBC,KAArB,EAAoCC,MAApC,KAAuD;EACzE,IAAI,CAACJ,IAAL,EAAW;IACTA,IAAI,GAAGH,QAAQ,CAACQ,SAAD,CAAf;EACD;;EACD,MAAMC,OAAO,GAAGN,IAAI,CAACO,OAAL,CAAaC,aAAb,CAA2BL,KAA3B,EAAkCC,MAAlC,CAAhB;;EACA,IAAIE,OAAO,KAAK,IAAhB,EAAsB;IACpB,MAAM,IAAIG,KAAJ,CAAU,0BAAV,CAAN;EACD;;EACD,MAAMC,IAAI,GAAG,IAAIZ,QAAJ,CAAaE,IAAb,CAAb;EACAU,IAAI,CAACC,MAAL,CAAYT,OAAZ;EACA,MAAMU,MAAM,GAAGN,OAAO,CAACO,SAAR,EAAf;EACA,MAAMC,GAAG,GAAG,IAAIf,iBAAJ,CAAsBC,IAAtB,EAA4BY,MAA5B,CAAZ;EACAF,IAAI,CAACK,GAAL,CAASJ,MAAT,CAAgBG,GAAhB;EACAR,OAAO,CAACU,KAAR;EACA,MAAMC,KAAK,GAAGX,OAAO,CAACY,iBAAR,EAAd;EACA,OAAOD,KAAP;AACD,CAhBM"}

package/lib/module/mock/index.d.ts

@@ -1,6 +1,5 @@
 import type { Skia as SkiaApi } from "../skia/types";
 import type * as SkiaExports from "../skia";
-import type * as ExternalExports from "../external";
 import type * as ValueExports from "../values";
 import type * as AnimationExports from "../animation";
 import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
@@ -9,7 +8,7 @@ export declare const vec: (x?: number, y?: number) => {
     x: number;
     y: number;
 };
-export declare const Mock: typeof SkiaExports & typeof ExternalExports & typeof ValueExports & typeof AnimationExports & {
+export declare const Mock: typeof SkiaExports & typeof ValueExports & typeof AnimationExports & {
     createDrawing: () => any;
     createDeclaration: () => any;
     ShaderLib: typeof ShaderLib;

package/lib/module/mock/index.js

@@ -3,7 +3,6 @@ import * as Values from "../values/web";
 import * as ValuesHooks from "../values/hooks";
 import { Selector } from "../values/selector";
 import * as BaseSkia from "../skia/types";
-import { useSharedValueEffect } from "../external/reanimated/useSharedValueEffect";
 import * as timingFunctions from "../animation/timing";
 import * as springFunctions from "../animation/spring";
 import * as decayFunctions from "../animation/decay";
@@ -83,8 +82,6 @@ export const Mock = {
   bottomRight: Noop,
   center: Noop,
   processTransform2d: Noop,
-  // ExternalExports
-  useSharedValueEffect,
   // ValueExports
   ...Values,
   ...ValuesHooks,

package/lib/module/mock/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Values","ValuesHooks","Selector","BaseSkia","useSharedValueEffect","timingFunctions","springFunctions","decayFunctions","interpolateFn","interpolatePathFn","interpolateVectorFn","ShaderLib","Stub","constructor","Proxy","get","apply","set","Noop","Skia","vec","x","y","Mock","useRawData","useData","useFont","useTypeface","useImage","useSVG","createPicture","rect","width","height","rrect","r","rx","ry","point","add","a","b","sub","neg","dist","Math","hypot","translate","translateX","translateY","bounds","topLeft","topRight","bottomLeft","bottomRight","center","processTransform2d","interpolateColors","_value","_inputRange","_outputRange","Float32Array","of","mixColors","_v","_x","_y","createDrawing","createDeclaration"],"sources":["index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { Color, Skia as SkiaApi, SkRect, Vector } from \"../skia/types\";\nimport * as Values from \"../values/web\";\nimport * as ValuesHooks from \"../values/hooks\";\nimport { Selector } from \"../values/selector\";\nimport * as BaseSkia from \"../skia/types\";\nimport type * as SkiaExports from \"../skia\";\nimport type * as ExternalExports from \"../external\";\nimport type * as ValueExports from \"../values\";\nimport type * as AnimationExports from \"../animation\";\nimport { useSharedValueEffect } from \"../external/reanimated/useSharedValueEffect\";\nimport * as timingFunctions from \"../animation/timing\";\nimport * as springFunctions from \"../animation/spring\";\nimport * as decayFunctions from \"../animation/decay\";\nimport * as interpolateFn from \"../animation/functions/interpolate\";\nimport * as interpolatePathFn from \"../animation/functions/interpolatePaths\";\nimport * as interpolateVectorFn from \"../animation/functions/interpolateVector\";\nimport { ShaderLib } from \"../renderer/components/shaders/ShaderLib\";\n\nclass Stub {\n  constructor() {\n    return new Proxy(() => {}, {\n      get: () => new Stub(),\n      apply: () => new Stub(),\n      set: () => true,\n    });\n  }\n}\n\nconst Noop: () => any = () => {};\n\nexport const Skia: SkiaApi = new Stub() as any;\n\nexport const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });\n\nexport const Mock: typeof SkiaExports &\n  typeof ExternalExports &\n  typeof ValueExports &\n  typeof AnimationExports & {\n    createDrawing: () => any;\n    createDeclaration: () => any;\n    ShaderLib: typeof ShaderLib;\n  } = {\n  // SkiaExports\n  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc\n  Skia,\n  ...BaseSkia,\n  // 2. Hooks\n  useRawData: Noop,\n  useData: Noop,\n  useFont: Noop,\n  useTypeface: Noop,\n  useImage: Noop,\n  useSVG: Noop,\n  createPicture: Noop,\n  // 3. Point/Rect/Transform utilities\n  vec,\n  rect: (x: number, y: number, width: number, height: number) => ({\n    x,\n    y,\n    width,\n    height,\n  }),\n  rrect: (r: SkRect, rx: number, ry: number) => ({\n    rect: r,\n    rx,\n    ry,\n  }),\n  point: vec,\n  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),\n  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),\n  neg: (a: Vector) => vec(-a.x, -a.y),\n  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),\n  translate: ({ x, y }: Vector) =>\n    [{ translateX: x }, { translateY: y }] as const,\n\n  bounds: Noop,\n  topLeft: Noop,\n  topRight: Noop,\n  bottomLeft: Noop,\n  bottomRight: Noop,\n  center: Noop,\n  processTransform2d: Noop,\n  // ExternalExports\n  useSharedValueEffect,\n  // ValueExports\n  ...Values,\n  ...ValuesHooks,\n  Selector,\n  // Animations\n  ...timingFunctions,\n  ...springFunctions,\n  ...decayFunctions,\n  ...interpolateFn,\n  ...interpolatePathFn,\n  ...interpolateVectorFn,\n  interpolateColors: (\n    _value: number,\n    _inputRange: number[],\n    _outputRange: Color[]\n  ) => Float32Array.of(0, 0, 0, 0),\n  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),\n  ShaderLib,\n  createDrawing: Noop,\n  createDeclaration: Noop,\n};\n"],"mappings":"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"}
+{"version":3,"names":["Values","ValuesHooks","Selector","BaseSkia","timingFunctions","springFunctions","decayFunctions","interpolateFn","interpolatePathFn","interpolateVectorFn","ShaderLib","Stub","constructor","Proxy","get","apply","set","Noop","Skia","vec","x","y","Mock","useRawData","useData","useFont","useTypeface","useImage","useSVG","createPicture","rect","width","height","rrect","r","rx","ry","point","add","a","b","sub","neg","dist","Math","hypot","translate","translateX","translateY","bounds","topLeft","topRight","bottomLeft","bottomRight","center","processTransform2d","interpolateColors","_value","_inputRange","_outputRange","Float32Array","of","mixColors","_v","_x","_y","createDrawing","createDeclaration"],"sources":["index.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport type { Color, Skia as SkiaApi, SkRect, Vector } from \"../skia/types\";\nimport * as Values from \"../values/web\";\nimport * as ValuesHooks from \"../values/hooks\";\nimport { Selector } from \"../values/selector\";\nimport * as BaseSkia from \"../skia/types\";\nimport type * as SkiaExports from \"../skia\";\nimport type * as ValueExports from \"../values\";\nimport type * as AnimationExports from \"../animation\";\nimport * as timingFunctions from \"../animation/timing\";\nimport * as springFunctions from \"../animation/spring\";\nimport * as decayFunctions from \"../animation/decay\";\nimport * as interpolateFn from \"../animation/functions/interpolate\";\nimport * as interpolatePathFn from \"../animation/functions/interpolatePaths\";\nimport * as interpolateVectorFn from \"../animation/functions/interpolateVector\";\nimport { ShaderLib } from \"../renderer/components/shaders/ShaderLib\";\n\nclass Stub {\n  constructor() {\n    return new Proxy(() => {}, {\n      get: () => new Stub(),\n      apply: () => new Stub(),\n      set: () => true,\n    });\n  }\n}\n\nconst Noop: () => any = () => {};\n\nexport const Skia: SkiaApi = new Stub() as any;\n\nexport const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });\n\nexport const Mock: typeof SkiaExports &\n  typeof ValueExports &\n  typeof AnimationExports & {\n    createDrawing: () => any;\n    createDeclaration: () => any;\n    ShaderLib: typeof ShaderLib;\n  } = {\n  // SkiaExports\n  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc\n  Skia,\n  ...BaseSkia,\n  // 2. Hooks\n  useRawData: Noop,\n  useData: Noop,\n  useFont: Noop,\n  useTypeface: Noop,\n  useImage: Noop,\n  useSVG: Noop,\n  createPicture: Noop,\n  // 3. Point/Rect/Transform utilities\n  vec,\n  rect: (x: number, y: number, width: number, height: number) => ({\n    x,\n    y,\n    width,\n    height,\n  }),\n  rrect: (r: SkRect, rx: number, ry: number) => ({\n    rect: r,\n    rx,\n    ry,\n  }),\n  point: vec,\n  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),\n  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),\n  neg: (a: Vector) => vec(-a.x, -a.y),\n  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),\n  translate: ({ x, y }: Vector) =>\n    [{ translateX: x }, { translateY: y }] as const,\n\n  bounds: Noop,\n  topLeft: Noop,\n  topRight: Noop,\n  bottomLeft: Noop,\n  bottomRight: Noop,\n  center: Noop,\n  processTransform2d: Noop,\n  // ValueExports\n  ...Values,\n  ...ValuesHooks,\n  Selector,\n  // Animations\n  ...timingFunctions,\n  ...springFunctions,\n  ...decayFunctions,\n  ...interpolateFn,\n  ...interpolatePathFn,\n  ...interpolateVectorFn,\n  interpolateColors: (\n    _value: number,\n    _inputRange: number[],\n    _outputRange: Color[]\n  ) => Float32Array.of(0, 0, 0, 0),\n  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),\n  ShaderLib,\n  createDrawing: Noop,\n  createDeclaration: Noop,\n};\n"],"mappings":"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"}

package/lib/module/renderer/Canvas.js

@@ -22,6 +22,12 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
 
     (_innerRef$current = innerRef.current) === null || _innerRef$current === void 0 ? void 0 : _innerRef$current.redraw();
   }, [innerRef]);
+  const getNativeId = useCallback(() => {
+    var _innerRef$current$nat, _innerRef$current2;
+
+    const id = (_innerRef$current$nat = (_innerRef$current2 = innerRef.current) === null || _innerRef$current2 === void 0 ? void 0 : _innerRef$current2.nativeId) !== null && _innerRef$current$nat !== void 0 ? _innerRef$current$nat : -1;
+    return id;
+  }, [innerRef]);
   const registerValues = useCallback(values => {
     if (ref.current !== null) {
       return ref.current.registerValues(values);
@@ -29,7 +35,7 @@ export const Canvas = /*#__PURE__*/forwardRef((_ref, forwardedRef) => {
 
     return () => {};
   }, [ref]);
-  const root = useMemo(() => new SkiaRoot(Skia, registerValues, redraw), [redraw, registerValues]); // Render effect
+  const root = useMemo(() => new SkiaRoot(Skia, registerValues, redraw, getNativeId), [redraw, registerValues, getNativeId]); // Render effect
 
   useEffect(() => {
     root.render(children);

package/lib/module/renderer/Canvas.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","Skia","SkiaRoot","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","current","registerValues","values","root","render","unmount","dom","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\n\nimport { SkiaDomView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw),\n      [redraw, registerValues]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n) as React.FC<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":";;AAAA,OAAOA,KAAP,IACEC,SADF,EAEEC,WAFF,EAGEC,OAHF,EAIEC,UAJF,EAKEC,MALF,QAMO,OANP;AAcA,SAASC,WAAT,QAA4B,UAA5B;AACA,SAASC,IAAT,QAAqB,cAArB;AAIA,SAASC,QAAT,QAAyB,cAAzB;AAEA,OAAO,MAAMC,YAAY,GAAG,MAAMJ,MAAM,CAAc,IAAd,CAAjC;AAQP,OAAO,MAAMK,MAAM,gBAAGN,UAAU,CAC9B,OAEEO,YAFF,KAGK;EAAA,IAFH;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,KAAnB;IAA0BC,IAA1B;IAAgCC,OAAhC;IAAyCC,MAAzC;IAAiD,GAAGC;EAApD,CAEG;EACH,MAAMC,QAAQ,GAAGV,YAAY,EAA7B;EACA,MAAMW,GAAG,GAAGC,eAAe,CAACV,YAAD,EAAeQ,QAAf,CAA3B;EACA,MAAMG,MAAM,GAAGpB,WAAW,CAAC,MAAM;IAAA;;IAC/B,qBAAAiB,QAAQ,CAACI,OAAT,wEAAkBD,MAAlB;EACD,CAFyB,EAEvB,CAACH,QAAD,CAFuB,CAA1B;EAIA,MAAMK,cAAc,GAAGtB,WAAW,CAC/BuB,MAAD,IAAuC;IACrC,IAAIL,GAAG,CAACG,OAAJ,KAAgB,IAApB,EAA0B;MACxB,OAAOH,GAAG,CAACG,OAAJ,CAAYC,cAAZ,CAA2BC,MAA3B,CAAP;IACD;;IACD,OAAO,MAAM,CAAE,CAAf;EACD,CAN+B,EAOhC,CAACL,GAAD,CAPgC,CAAlC;EASA,MAAMM,IAAI,GAAGvB,OAAO,CAClB,MAAM,IAAIK,QAAJ,CAAaD,IAAb,EAAmBiB,cAAnB,EAAmCF,MAAnC,CADY,EAElB,CAACA,MAAD,EAASE,cAAT,CAFkB,CAApB,CAhBG,CAqBH;;EACAvB,SAAS,CAAC,MAAM;IACdyB,IAAI,CAACC,MAAL,CAAYf,QAAZ;EACD,CAFQ,EAEN,CAACA,QAAD,EAAWc,IAAX,EAAiBJ,MAAjB,CAFM,CAAT;EAIArB,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACXyB,IAAI,CAACE,OAAL;IACD,CAFD;EAGD,CAJQ,EAIN,CAACF,IAAD,CAJM,CAAT;EAMA,oBACE,oBAAC,WAAD;IACE,GAAG,EAAEN,GADP;IAEE,KAAK,EAAEP,KAFT;IAGE,IAAI,EAAEa,IAAI,CAACG,GAHb;IAIE,OAAO,EAAEb,OAJX;IAKE,MAAM,EAAEC,MALV;IAME,IAAI,EAAEF,IANR;IAOE,KAAK,EAAED;EAPT,GAQMI,KARN,EADF;AAYD,CAhD6B,CAAzB;AAmDP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMG,eAAe,GAAG,YAEnB;EAAA,kCADAS,IACA;IADAA,IACA;EAAA;;EACH,MAAMC,SAAS,GAAG/B,KAAK,CAACK,MAAN,CAAgB,IAAhB,CAAlB;EACAL,KAAK,CAACC,SAAN,CAAgB,MAAM;IACpB6B,IAAI,CAACE,OAAL,CAAcZ,GAAD,IAAS;MACpB,IAAIA,GAAJ,EAAS;QACP,IAAI,OAAOA,GAAP,KAAe,UAAnB,EAA+B;UAC7BA,GAAG,CAACW,SAAS,CAACR,OAAX,CAAH;QACD,CAFD,MAEO;UACLH,GAAG,CAACG,OAAJ,GAAcQ,SAAS,CAACR,OAAxB;QACD;MACF;IACF,CARD;EASD,CAVD,EAUG,CAACO,IAAD,CAVH;EAWA,OAAOC,SAAP;AACD,CAhBD"}
+{"version":3,"names":["React","useEffect","useCallback","useMemo","forwardRef","useRef","SkiaDomView","Skia","SkiaRoot","useCanvasRef","Canvas","forwardedRef","children","style","debug","mode","onTouch","onSize","props","innerRef","ref","useCombinedRefs","redraw","current","getNativeId","id","nativeId","registerValues","values","root","render","unmount","dom","refs","targetRef","forEach"],"sources":["Canvas.tsx"],"sourcesContent":["import React, {\n  useEffect,\n  useCallback,\n  useMemo,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport type {\n  RefObject,\n  ReactNode,\n  MutableRefObject,\n  ForwardedRef,\n} from \"react\";\n\nimport { SkiaDomView } from \"../views\";\nimport { Skia } from \"../skia/Skia\";\nimport type { TouchHandler, SkiaBaseViewProps } from \"../views\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { SkiaRoot } from \"./Reconciler\";\n\nexport const useCanvasRef = () => useRef<SkiaDomView>(null);\n\nexport interface CanvasProps extends SkiaBaseViewProps {\n  ref?: RefObject<SkiaDomView>;\n  children: ReactNode;\n  onTouch?: TouchHandler;\n}\n\nexport const Canvas = forwardRef<SkiaDomView, CanvasProps>(\n  (\n    { children, style, debug, mode, onTouch, onSize, ...props },\n    forwardedRef\n  ) => {\n    const innerRef = useCanvasRef();\n    const ref = useCombinedRefs(forwardedRef, innerRef);\n    const redraw = useCallback(() => {\n      innerRef.current?.redraw();\n    }, [innerRef]);\n    const getNativeId = useCallback(() => {\n      const id = innerRef.current?.nativeId ?? -1;\n      return id;\n    }, [innerRef]);\n\n    const registerValues = useCallback(\n      (values: Array<SkiaValue<unknown>>) => {\n        if (ref.current !== null) {\n          return ref.current.registerValues(values);\n        }\n        return () => {};\n      },\n      [ref]\n    );\n    const root = useMemo(\n      () => new SkiaRoot(Skia, registerValues, redraw, getNativeId),\n      [redraw, registerValues, getNativeId]\n    );\n\n    // Render effect\n    useEffect(() => {\n      root.render(children);\n    }, [children, root, redraw]);\n\n    useEffect(() => {\n      return () => {\n        root.unmount();\n      };\n    }, [root]);\n\n    return (\n      <SkiaDomView\n        ref={ref}\n        style={style}\n        root={root.dom}\n        onTouch={onTouch}\n        onSize={onSize}\n        mode={mode}\n        debug={debug}\n        {...props}\n      />\n    );\n  }\n) as React.FC<CanvasProps & React.RefAttributes<SkiaDomView>>;\n\n/**\n * Combines a list of refs into a single ref. This can be used to provide\n * both a forwarded ref and an internal ref keeping the same functionality\n * on both of the refs.\n * @param refs Array of refs to combine\n * @returns A single ref that can be used in a ref prop.\n */\nconst useCombinedRefs = <T,>(\n  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>\n) => {\n  const targetRef = React.useRef<T>(null);\n  React.useEffect(() => {\n    refs.forEach((ref) => {\n      if (ref) {\n        if (typeof ref === \"function\") {\n          ref(targetRef.current);\n        } else {\n          ref.current = targetRef.current;\n        }\n      }\n    });\n  }, [refs]);\n  return targetRef;\n};\n"],"mappings":"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"}

package/lib/module/renderer/Container.d.ts

@@ -4,9 +4,10 @@ import type { DependencyManager } from "./DependencyManager";
 export declare class Container {
     depMgr: DependencyManager;
     redraw: () => void;
+    getNativeId: () => number;
     private _root;
     Sk: SkDOM;
-    constructor(Skia: Skia, depMgr: DependencyManager, redraw?: () => void);
+    constructor(Skia: Skia, depMgr: DependencyManager, redraw?: () => void, getNativeId?: () => number);
     draw(ctx: DrawingContext): void;
     get root(): RenderNode<GroupProps>;
 }

package/lib/module/renderer/Container.js

@@ -4,8 +4,10 @@ import { JsiSkDOM } from "../dom/nodes";
 export class Container {
   constructor(Skia, depMgr) {
     let redraw = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
+    let getNativeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => 0;
     this.depMgr = depMgr;
     this.redraw = redraw;
+    this.getNativeId = getNativeId;
 
     _defineProperty(this, "_root", void 0);
 

package/lib/module/renderer/Container.js.map

@@ -1 +1 @@
-{"version":3,"names":["JsiSkDOM","Container","constructor","Skia","depMgr","redraw","Sk","_root","Group","draw","ctx","render","root"],"sources":["Container.tsx"],"sourcesContent":["import { JsiSkDOM } from \"../dom/nodes\";\nimport type {\n  GroupProps,\n  DrawingContext,\n  RenderNode,\n  SkDOM,\n} from \"../dom/types\";\nimport type { Skia } from \"../skia/types\";\n\nimport type { DependencyManager } from \"./DependencyManager\";\n\nexport class Container {\n  private _root: RenderNode<GroupProps>;\n  public Sk: SkDOM;\n  constructor(\n    Skia: Skia,\n    public depMgr: DependencyManager,\n    public redraw: () => void = () => {}\n  ) {\n    this.Sk = new JsiSkDOM({ Skia, depMgr });\n    this._root = this.Sk.Group();\n  }\n\n  draw(ctx: DrawingContext) {\n    this._root.render(ctx);\n  }\n\n  get root() {\n    return this._root;\n  }\n}\n"],"mappings":";;AAAA,SAASA,QAAT,QAAyB,cAAzB;AAWA,OAAO,MAAMC,SAAN,CAAgB;EAGrBC,WAAW,CACTC,IADS,EAEFC,MAFE,EAIT;IAAA,IADOC,MACP,uEAD4B,MAAM,CAAE,CACpC;IAAA,KAFOD,MAEP,GAFOA,MAEP;IAAA,KADOC,MACP,GADOA,MACP;;IAAA;;IAAA;;IACA,KAAKC,EAAL,GAAU,IAAIN,QAAJ,CAAa;MAAEG,IAAF;MAAQC;IAAR,CAAb,CAAV;IACA,KAAKG,KAAL,GAAa,KAAKD,EAAL,CAAQE,KAAR,EAAb;EACD;;EAEDC,IAAI,CAACC,GAAD,EAAsB;IACxB,KAAKH,KAAL,CAAWI,MAAX,CAAkBD,GAAlB;EACD;;EAEO,IAAJE,IAAI,GAAG;IACT,OAAO,KAAKL,KAAZ;EACD;;AAlBoB"}
+{"version":3,"names":["JsiSkDOM","Container","constructor","Skia","depMgr","redraw","getNativeId","Sk","_root","Group","draw","ctx","render","root"],"sources":["Container.tsx"],"sourcesContent":["import { JsiSkDOM } from \"../dom/nodes\";\nimport type {\n  GroupProps,\n  DrawingContext,\n  RenderNode,\n  SkDOM,\n} from \"../dom/types\";\nimport type { Skia } from \"../skia/types\";\n\nimport type { DependencyManager } from \"./DependencyManager\";\n\nexport class Container {\n  private _root: RenderNode<GroupProps>;\n  public Sk: SkDOM;\n  constructor(\n    Skia: Skia,\n    public depMgr: DependencyManager,\n    public redraw: () => void = () => {},\n    public getNativeId: () => number = () => 0\n  ) {\n    this.Sk = new JsiSkDOM({ Skia, depMgr });\n    this._root = this.Sk.Group();\n  }\n\n  draw(ctx: DrawingContext) {\n    this._root.render(ctx);\n  }\n\n  get root() {\n    return this._root;\n  }\n}\n"],"mappings":";;AAAA,SAASA,QAAT,QAAyB,cAAzB;AAWA,OAAO,MAAMC,SAAN,CAAgB;EAGrBC,WAAW,CACTC,IADS,EAEFC,MAFE,EAKT;IAAA,IAFOC,MAEP,uEAF4B,MAAM,CAAE,CAEpC;IAAA,IADOC,WACP,uEADmC,MAAM,CACzC;IAAA,KAHOF,MAGP,GAHOA,MAGP;IAAA,KAFOC,MAEP,GAFOA,MAEP;IAAA,KADOC,WACP,GADOA,WACP;;IAAA;;IAAA;;IACA,KAAKC,EAAL,GAAU,IAAIP,QAAJ,CAAa;MAAEG,IAAF;MAAQC;IAAR,CAAb,CAAV;IACA,KAAKI,KAAL,GAAa,KAAKD,EAAL,CAAQE,KAAR,EAAb;EACD;;EAEDC,IAAI,CAACC,GAAD,EAAsB;IACxB,KAAKH,KAAL,CAAWI,MAAX,CAAkBD,GAAlB;EACD;;EAEO,IAAJE,IAAI,GAAG;IACT,OAAO,KAAKL,KAAZ;EACD;;AAnBoB"}

package/lib/module/renderer/HostConfig.js

@@ -1,5 +1,6 @@
 /*global NodeJS*/
 import { DefaultEventPriority } from "react-reconciler/constants";
+import { bindReanimatedProps, extractReanimatedProps } from "../external/reanimated";
 import { createNode } from "./HostComponents";
 import { isSelector, isValue } from "./processors";
 import { mapKeys, shallowEq } from "./typeddash";
@@ -68,9 +69,9 @@ export const skHostConfig = {
 
   createInstance(type, pristineProps, container, _hostContext, _internalInstanceHandle) {
     debug("createInstance", type);
-    const props = { ...pristineProps
-    };
+    const [props, reanimatedProps] = extractReanimatedProps(pristineProps);
     const node = createNode(container, type, materialize(props));
+    bindReanimatedProps(container, node, reanimatedProps);
     container.depMgr.subscribeNode(node, props);
     return node;
   },
@@ -125,10 +126,10 @@ export const skHostConfig = {
       return;
     }
 
-    const props = { ...nextProps
-    };
+    const [props, reanimatedProps] = extractReanimatedProps(nextProps);
     updatePayload.depMgr.unsubscribeNode(instance);
     instance.setProps(materialize(props));
+    bindReanimatedProps(updatePayload, instance, reanimatedProps);
     updatePayload.depMgr.subscribeNode(instance, props);
   },
 

package/lib/module/renderer/HostConfig.js.map

@@ -1 +1 @@
-{"version":3,"names":["DefaultEventPriority","createNode","isSelector","isValue","mapKeys","shallowEq","DEBUG","debug","console","log","appendNode","parent","child","addChild","removeNode","removeChild","insertBefore","before","insertChildBefore","skHostConfig","now","Date","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","container","root","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","type","pristineProps","props","node","materialize","depMgr","subscribeNode","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","resetAfterCommit","update","redraw","getPublicInstance","prepareUpdate","_instance","oldProps","newProps","rootContainerInstance","propsAreEqual","commitUpdate","instance","updatePayload","prevProps","nextProps","_internalHandle","unsubscribeNode","setProps","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","children","forEach","preparePortalMount","removeChildFromContainer","insertInContainerBefore","getCurrentEventPriority","beforeActiveInstanceBlur","afterActiveInstanceBlur","detachDeletedInstance","result","key","prop","current","selector","value"],"sources":["HostConfig.ts"],"sourcesContent":["/*global NodeJS*/\nimport type { HostConfig } from \"react-reconciler\";\nimport { DefaultEventPriority } from \"react-reconciler/constants\";\n\nimport type { NodeType, Node } from \"../dom/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport type { Container } from \"./Container\";\nimport { createNode } from \"./HostComponents\";\nimport type { AnimatedProps } from \"./processors\";\nimport { isSelector, isValue } from \"./processors\";\nimport { mapKeys, shallowEq } from \"./typeddash\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ntype Instance = Node<unknown>;\n\ntype Props = object;\ntype TextInstance = Node<unknown>;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = Container;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\nconst appendNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  parent.addChild(child);\n};\n\nconst removeNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  return parent.removeChild(child);\n};\n\nconst insertBefore = (\n  parent: Node<unknown>,\n  child: Node<unknown>,\n  before: Node<unknown>\n) => {\n  parent.insertChildBefore(child, before);\n};\n\nexport const skHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  now: Date.now,\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\", container, child);\n    appendNode(container.root, child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Container) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    pristineProps,\n    container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    const props = { ...pristineProps };\n    const node = createNode(container, type, materialize(props));\n    container.depMgr.subscribeNode(node, props);\n    return node;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.depMgr.update();\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    _instance,\n    type,\n    oldProps,\n    newProps,\n    rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual) {\n      return null;\n    }\n    debug(\"update \", type);\n    return rootContainerInstance;\n  },\n\n  commitUpdate(\n    instance,\n    updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps)) {\n      return;\n    }\n    const props = { ...nextProps };\n    updatePayload.depMgr.unsubscribeNode(instance);\n    instance.setProps(materialize(props));\n    updatePayload.depMgr.subscribeNode(instance, props);\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.root.children().forEach((child) => {\n      container.root.removeChild(child);\n    });\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (container, child) => {\n    removeNode(container.root, child);\n  },\n\n  insertInContainerBefore: (container, child, before) => {\n    insertBefore(container.root, child, before);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  getCurrentEventPriority: () => DefaultEventPriority,\n  beforeActiveInstanceBlur: () => {},\n  afterActiveInstanceBlur: () => {},\n  detachDeletedInstance: () => {},\n};\n\nconst materialize = <P>(props: AnimatedProps<P>) => {\n  const result = { ...props } as P;\n  mapKeys(props).forEach((key) => {\n    const prop = props[key];\n    if (isValue(prop)) {\n      result[key] = (prop as SkiaValue<P[typeof key]>).current;\n    } else if (isSelector(prop)) {\n      result[key] = prop.selector(prop.value.current) as P[typeof key];\n    }\n  });\n\n  return result;\n};\n"],"mappings":"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"}
+{"version":3,"names":["DefaultEventPriority","bindReanimatedProps","extractReanimatedProps","createNode","isSelector","isValue","mapKeys","shallowEq","DEBUG","debug","console","log","appendNode","parent","child","addChild","removeNode","removeChild","insertBefore","before","insertChildBefore","skHostConfig","now","Date","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","container","root","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","type","pristineProps","props","reanimatedProps","node","materialize","depMgr","subscribeNode","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","resetAfterCommit","update","redraw","getPublicInstance","prepareUpdate","_instance","oldProps","newProps","rootContainerInstance","propsAreEqual","commitUpdate","instance","updatePayload","prevProps","nextProps","_internalHandle","unsubscribeNode","setProps","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","children","forEach","preparePortalMount","removeChildFromContainer","insertInContainerBefore","getCurrentEventPriority","beforeActiveInstanceBlur","afterActiveInstanceBlur","detachDeletedInstance","result","key","prop","current","selector","value"],"sources":["HostConfig.ts"],"sourcesContent":["/*global NodeJS*/\nimport type { HostConfig } from \"react-reconciler\";\nimport { DefaultEventPriority } from \"react-reconciler/constants\";\n\nimport type { NodeType, Node } from \"../dom/types\";\nimport type { SkiaValue } from \"../values\";\nimport {\n  bindReanimatedProps,\n  extractReanimatedProps,\n} from \"../external/reanimated\";\n\nimport type { Container } from \"./Container\";\nimport { createNode } from \"./HostComponents\";\nimport type { AnimatedProps } from \"./processors\";\nimport { isSelector, isValue } from \"./processors\";\nimport { mapKeys, shallowEq } from \"./typeddash\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ntype Instance = Node<unknown>;\n\ntype Props = object;\ntype TextInstance = Node<unknown>;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = Container;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\nconst appendNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  parent.addChild(child);\n};\n\nconst removeNode = (parent: Node<unknown>, child: Node<unknown>) => {\n  return parent.removeChild(child);\n};\n\nconst insertBefore = (\n  parent: Node<unknown>,\n  child: Node<unknown>,\n  before: Node<unknown>\n) => {\n  parent.insertChildBefore(child, before);\n};\n\nexport const skHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  now: Date.now,\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\", container, child);\n    appendNode(container.root, child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Container) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    pristineProps,\n    container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    const [props, reanimatedProps] = extractReanimatedProps(pristineProps);\n    const node = createNode(container, type, materialize(props));\n    bindReanimatedProps(container, node, reanimatedProps);\n    container.depMgr.subscribeNode(node, props);\n    return node;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.depMgr.update();\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    _instance,\n    type,\n    oldProps,\n    newProps,\n    rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual) {\n      return null;\n    }\n    debug(\"update \", type);\n    return rootContainerInstance;\n  },\n\n  commitUpdate(\n    instance,\n    updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps)) {\n      return;\n    }\n    const [props, reanimatedProps] = extractReanimatedProps(nextProps);\n    updatePayload.depMgr.unsubscribeNode(instance);\n    instance.setProps(materialize(props));\n    bindReanimatedProps(updatePayload, instance, reanimatedProps);\n    updatePayload.depMgr.subscribeNode(instance, props);\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.root.children().forEach((child) => {\n      container.root.removeChild(child);\n    });\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (container, child) => {\n    removeNode(container.root, child);\n  },\n\n  insertInContainerBefore: (container, child, before) => {\n    insertBefore(container.root, child, before);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n  // see https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-expect-error\n  getCurrentEventPriority: () => DefaultEventPriority,\n  beforeActiveInstanceBlur: () => {},\n  afterActiveInstanceBlur: () => {},\n  detachDeletedInstance: () => {},\n};\n\nconst materialize = <P>(props: AnimatedProps<P>) => {\n  const result = { ...props } as P;\n  mapKeys(props).forEach((key) => {\n    const prop = props[key];\n    if (isValue(prop)) {\n      result[key] = (prop as SkiaValue<P[typeof key]>).current;\n    } else if (isSelector(prop)) {\n      result[key] = prop.selector(prop.value.current) as P[typeof key];\n    }\n  });\n\n  return result;\n};\n"],"mappings":"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"}

package/lib/module/renderer/Reconciler.d.ts

@@ -5,7 +5,7 @@ declare type RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;
 export declare class SkiaRoot {
     private root;
     private container;
-    constructor(Skia: Skia, registerValues?: RegisterValues, redraw?: () => void);
+    constructor(Skia: Skia, registerValues?: RegisterValues, redraw?: () => void, getNativeId?: () => number);
     render(element: ReactNode): void;
     unmount(): void;
     get dom(): import("..").RenderNode<import("..").GroupProps>;

package/lib/module/renderer/Reconciler.js

@@ -17,13 +17,14 @@ export class SkiaRoot {
   constructor(Skia) {
     let registerValues = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : () => () => {};
     let redraw = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => {};
+    let getNativeId = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : () => 0;
 
     _defineProperty(this, "root", void 0);
 
     _defineProperty(this, "container", void 0);
 
     const depMgr = createDependencyManager(registerValues);
-    this.container = new Container(Skia, depMgr, redraw);
+    this.container = new Container(Skia, depMgr, redraw, getNativeId);
     this.root = skiaReconciler.createContainer(this.container, 0, null, true, null, "", console.error, null);
   }
 

package/lib/module/renderer/Reconciler.js.map

@@ -1 +1 @@
-{"version":3,"names":["ReactReconciler","DependencyManager","skHostConfig","debug","hostDebug","Container","skiaReconciler","createDependencyManager","registerValues","global","SkiaDomApi","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaRoot","constructor","Skia","redraw","depMgr","container","root","createContainer","console","error","render","element","updateContainer","unmount","remove","dom"],"sources":["Reconciler.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { Skia } from \"../skia/types\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { DependencyManager } from \"./DependencyManager\";\nimport { skHostConfig, debug as hostDebug } from \"./HostConfig\";\nimport { Container } from \"./Container\";\n\nconst skiaReconciler = ReactReconciler(skHostConfig);\n\ntype RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;\n\nconst createDependencyManager = (registerValues: RegisterValues) =>\n  global.SkiaDomApi && global.SkiaDomApi.DependencyManager\n    ? global.SkiaDomApi.DependencyManager(registerValues)\n    : new DependencyManager(registerValues);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(\n    Skia: Skia,\n    registerValues: RegisterValues = () => () => {},\n    redraw: () => void = () => {}\n  ) {\n    const depMgr = createDependencyManager(registerValues);\n    this.container = new Container(Skia, depMgr, redraw);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      true,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  render(element: ReactNode) {\n    skiaReconciler.updateContainer(element, this.root, null, () => {\n      hostDebug(\"updateContainer\");\n    });\n  }\n\n  unmount() {\n    skiaReconciler.updateContainer(null, this.root, null, () => {\n      this.container.depMgr.remove();\n    });\n  }\n\n  get dom() {\n    return this.container.root;\n  }\n}\n"],"mappings":";;AAEA,OAAOA,eAAP,MAA4B,kBAA5B;AAKA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,YAAT,EAAuBC,KAAK,IAAIC,SAAhC,QAAiD,cAAjD;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,MAAMC,cAAc,GAAGN,eAAe,CAACE,YAAD,CAAtC;;AAIA,MAAMK,uBAAuB,GAAIC,cAAD,IAC9BC,MAAM,CAACC,UAAP,IAAqBD,MAAM,CAACC,UAAP,CAAkBT,iBAAvC,GACIQ,MAAM,CAACC,UAAP,CAAkBT,iBAAlB,CAAoCO,cAApC,CADJ,GAEI,IAAIP,iBAAJ,CAAsBO,cAAtB,CAHN;;AAKAF,cAAc,CAACK,kBAAf,CAAkC;EAChCC,UAAU,EAAE,CADoB;EAEhCC,OAAO,EAAE,OAFuB;EAGhCC,mBAAmB,EAAE;AAHW,CAAlC;AAMA,OAAO,MAAMC,QAAN,CAAe;EAIpBC,WAAW,CACTC,IADS,EAIT;IAAA,IAFAT,cAEA,uEAFiC,MAAM,MAAM,CAAE,CAE/C;IAAA,IADAU,MACA,uEADqB,MAAM,CAAE,CAC7B;;IAAA;;IAAA;;IACA,MAAMC,MAAM,GAAGZ,uBAAuB,CAACC,cAAD,CAAtC;IACA,KAAKY,SAAL,GAAiB,IAAIf,SAAJ,CAAcY,IAAd,EAAoBE,MAApB,EAA4BD,MAA5B,CAAjB;IACA,KAAKG,IAAL,GAAYf,cAAc,CAACgB,eAAf,CACV,KAAKF,SADK,EAEV,CAFU,EAGV,IAHU,EAIV,IAJU,EAKV,IALU,EAMV,EANU,EAOVG,OAAO,CAACC,KAPE,EAQV,IARU,CAAZ;EAUD;;EAEDC,MAAM,CAACC,OAAD,EAAqB;IACzBpB,cAAc,CAACqB,eAAf,CAA+BD,OAA/B,EAAwC,KAAKL,IAA7C,EAAmD,IAAnD,EAAyD,MAAM;MAC7DjB,SAAS,CAAC,iBAAD,CAAT;IACD,CAFD;EAGD;;EAEDwB,OAAO,GAAG;IACRtB,cAAc,CAACqB,eAAf,CAA+B,IAA/B,EAAqC,KAAKN,IAA1C,EAAgD,IAAhD,EAAsD,MAAM;MAC1D,KAAKD,SAAL,CAAeD,MAAf,CAAsBU,MAAtB;IACD,CAFD;EAGD;;EAEM,IAAHC,GAAG,GAAG;IACR,OAAO,KAAKV,SAAL,CAAeC,IAAtB;EACD;;AArCmB"}
+{"version":3,"names":["ReactReconciler","DependencyManager","skHostConfig","debug","hostDebug","Container","skiaReconciler","createDependencyManager","registerValues","global","SkiaDomApi","injectIntoDevTools","bundleType","version","rendererPackageName","SkiaRoot","constructor","Skia","redraw","getNativeId","depMgr","container","root","createContainer","console","error","render","element","updateContainer","unmount","remove","dom"],"sources":["Reconciler.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport type { OpaqueRoot } from \"react-reconciler\";\nimport ReactReconciler from \"react-reconciler\";\n\nimport type { Skia } from \"../skia/types\";\nimport type { SkiaValue } from \"../values/types\";\n\nimport { DependencyManager } from \"./DependencyManager\";\nimport { skHostConfig, debug as hostDebug } from \"./HostConfig\";\nimport { Container } from \"./Container\";\n\nconst skiaReconciler = ReactReconciler(skHostConfig);\n\ntype RegisterValues = (values: Array<SkiaValue<unknown>>) => () => void;\n\nconst createDependencyManager = (registerValues: RegisterValues) =>\n  global.SkiaDomApi && global.SkiaDomApi.DependencyManager\n    ? global.SkiaDomApi.DependencyManager(registerValues)\n    : new DependencyManager(registerValues);\n\nskiaReconciler.injectIntoDevTools({\n  bundleType: 1,\n  version: \"0.0.1\",\n  rendererPackageName: \"react-native-skia\",\n});\n\nexport class SkiaRoot {\n  private root: OpaqueRoot;\n  private container: Container;\n\n  constructor(\n    Skia: Skia,\n    registerValues: RegisterValues = () => () => {},\n    redraw: () => void = () => {},\n    getNativeId: () => number = () => 0\n  ) {\n    const depMgr = createDependencyManager(registerValues);\n    this.container = new Container(Skia, depMgr, redraw, getNativeId);\n    this.root = skiaReconciler.createContainer(\n      this.container,\n      0,\n      null,\n      true,\n      null,\n      \"\",\n      console.error,\n      null\n    );\n  }\n\n  render(element: ReactNode) {\n    skiaReconciler.updateContainer(element, this.root, null, () => {\n      hostDebug(\"updateContainer\");\n    });\n  }\n\n  unmount() {\n    skiaReconciler.updateContainer(null, this.root, null, () => {\n      this.container.depMgr.remove();\n    });\n  }\n\n  get dom() {\n    return this.container.root;\n  }\n}\n"],"mappings":";;AAEA,OAAOA,eAAP,MAA4B,kBAA5B;AAKA,SAASC,iBAAT,QAAkC,qBAAlC;AACA,SAASC,YAAT,EAAuBC,KAAK,IAAIC,SAAhC,QAAiD,cAAjD;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,MAAMC,cAAc,GAAGN,eAAe,CAACE,YAAD,CAAtC;;AAIA,MAAMK,uBAAuB,GAAIC,cAAD,IAC9BC,MAAM,CAACC,UAAP,IAAqBD,MAAM,CAACC,UAAP,CAAkBT,iBAAvC,GACIQ,MAAM,CAACC,UAAP,CAAkBT,iBAAlB,CAAoCO,cAApC,CADJ,GAEI,IAAIP,iBAAJ,CAAsBO,cAAtB,CAHN;;AAKAF,cAAc,CAACK,kBAAf,CAAkC;EAChCC,UAAU,EAAE,CADoB;EAEhCC,OAAO,EAAE,OAFuB;EAGhCC,mBAAmB,EAAE;AAHW,CAAlC;AAMA,OAAO,MAAMC,QAAN,CAAe;EAIpBC,WAAW,CACTC,IADS,EAKT;IAAA,IAHAT,cAGA,uEAHiC,MAAM,MAAM,CAAE,CAG/C;IAAA,IAFAU,MAEA,uEAFqB,MAAM,CAAE,CAE7B;IAAA,IADAC,WACA,uEAD4B,MAAM,CAClC;;IAAA;;IAAA;;IACA,MAAMC,MAAM,GAAGb,uBAAuB,CAACC,cAAD,CAAtC;IACA,KAAKa,SAAL,GAAiB,IAAIhB,SAAJ,CAAcY,IAAd,EAAoBG,MAApB,EAA4BF,MAA5B,EAAoCC,WAApC,CAAjB;IACA,KAAKG,IAAL,GAAYhB,cAAc,CAACiB,eAAf,CACV,KAAKF,SADK,EAEV,CAFU,EAGV,IAHU,EAIV,IAJU,EAKV,IALU,EAMV,EANU,EAOVG,OAAO,CAACC,KAPE,EAQV,IARU,CAAZ;EAUD;;EAEDC,MAAM,CAACC,OAAD,EAAqB;IACzBrB,cAAc,CAACsB,eAAf,CAA+BD,OAA/B,EAAwC,KAAKL,IAA7C,EAAmD,IAAnD,EAAyD,MAAM;MAC7DlB,SAAS,CAAC,iBAAD,CAAT;IACD,CAFD;EAGD;;EAEDyB,OAAO,GAAG;IACRvB,cAAc,CAACsB,eAAf,CAA+B,IAA/B,EAAqC,KAAKN,IAA1C,EAAgD,IAAhD,EAAsD,MAAM;MAC1D,KAAKD,SAAL,CAAeD,MAAf,CAAsBU,MAAtB;IACD,CAFD;EAGD;;EAEM,IAAHC,GAAG,GAAG;IACR,OAAO,KAAKV,SAAL,CAAeC,IAAtB;EACD;;AAtCmB"}

package/lib/module/renderer/processors/Animations/Animations.d.ts

@@ -1,11 +1,14 @@
 import type { SkiaSelector, SkiaValue } from "../../../values";
+export declare type SharedValueType<T = number> = {
+    value: T;
+};
 export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
 export declare const isSelector: <T, R>(value: unknown) => value is {
     selector: (v: T) => R;
     value: SkiaValue<T>;
 };
 export declare const isAnimated: <T>(props: AnimatedProps<T, never>) => boolean;
-export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
+export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P> | SharedValueType<T>;
 export declare type AnimatedProps<T, O extends keyof T | never = never> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };

package/lib/module/renderer/processors/Animations/Animations.js.map

@@ -1 +1 @@
-{"version":3,"names":["isValue","value","undefined","__typename__","isSelector","selector","isAnimated","props","Object","values"],"sources":["Animations.ts"],"sourcesContent":["import type { SkiaSelector, SkiaValue } from \"../../../values\";\n\nexport const isValue = (value: unknown): value is SkiaValue<unknown> => {\n  if (value === undefined || value === null) {\n    return false;\n  }\n  try {\n    if (\n      typeof value === \"object\" &&\n      \"__typename__\" in value &&\n      (value as unknown as SkiaValue<unknown>).__typename__ === \"RNSkValue\"\n    ) {\n      return true;\n    }\n  } catch {}\n  return false;\n};\n\nexport const isSelector = <T, R>(\n  value: unknown\n): value is {\n  selector: (v: T) => R;\n  value: SkiaValue<T>;\n} => {\n  if (value) {\n    return (\n      typeof value === \"object\" &&\n      \"selector\" in value &&\n      \"value\" in value &&\n      (value as Record<string, unknown>).selector !== undefined &&\n      (value as Record<string, unknown>).value !== undefined\n    );\n  }\n  return false;\n};\n\nexport const isAnimated = <T>(props: AnimatedProps<T>) => {\n  for (const value of Object.values(props)) {\n    if (isValue(value) || isSelector(value)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;\n\nexport type AnimatedProps<T, O extends keyof T | never = never> = {\n  [K in keyof T]: K extends \"children\"\n    ? T[K]\n    : K extends O\n    ? T[K]\n    : AnimatedProp<T[K]>;\n};\n\nexport type SkiaProps<\n  P = object,\n  O extends keyof P | never = never\n> = AnimatedProps<P, O>;\n\ntype WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {\n  [K in N]?: T[K];\n};\n\nexport type SkiaDefaultProps<\n  T extends object,\n  N extends keyof T\n> = WithOptional<SkiaProps<T>, N>;\n"],"mappings":"AAEA,OAAO,MAAMA,OAAO,GAAIC,KAAD,IAAiD;EACtE,IAAIA,KAAK,KAAKC,SAAV,IAAuBD,KAAK,KAAK,IAArC,EAA2C;IACzC,OAAO,KAAP;EACD;;EACD,IAAI;IACF,IACE,OAAOA,KAAP,KAAiB,QAAjB,IACA,kBAAkBA,KADlB,IAECA,KAAD,CAAyCE,YAAzC,KAA0D,WAH5D,EAIE;MACA,OAAO,IAAP;IACD;EACF,CARD,CAQE,MAAM,CAAE;;EACV,OAAO,KAAP;AACD,CAdM;AAgBP,OAAO,MAAMC,UAAU,GACrBH,KADwB,IAKrB;EACH,IAAIA,KAAJ,EAAW;IACT,OACE,OAAOA,KAAP,KAAiB,QAAjB,IACA,cAAcA,KADd,IAEA,WAAWA,KAFX,IAGCA,KAAD,CAAmCI,QAAnC,KAAgDH,SAHhD,IAICD,KAAD,CAAmCA,KAAnC,KAA6CC,SAL/C;EAOD;;EACD,OAAO,KAAP;AACD,CAhBM;AAkBP,OAAO,MAAMI,UAAU,GAAOC,KAAJ,IAAgC;EACxD,KAAK,MAAMN,KAAX,IAAoBO,MAAM,CAACC,MAAP,CAAcF,KAAd,CAApB,EAA0C;IACxC,IAAIP,OAAO,CAACC,KAAD,CAAP,IAAkBG,UAAU,CAACH,KAAD,CAAhC,EAAyC;MACvC,OAAO,IAAP;IACD;EACF;;EACD,OAAO,KAAP;AACD,CAPM,C,CASP"}
+{"version":3,"names":["isValue","value","undefined","__typename__","isSelector","selector","isAnimated","props","Object","values"],"sources":["Animations.ts"],"sourcesContent":["import type { SkiaSelector, SkiaValue } from \"../../../values\";\n\nexport type SharedValueType<T = number> = {\n  value: T;\n};\n\nexport const isValue = (value: unknown): value is SkiaValue<unknown> => {\n  if (value === undefined || value === null) {\n    return false;\n  }\n  try {\n    if (\n      typeof value === \"object\" &&\n      \"__typename__\" in value &&\n      (value as unknown as SkiaValue<unknown>).__typename__ === \"RNSkValue\"\n    ) {\n      return true;\n    }\n  } catch {}\n  return false;\n};\n\nexport const isSelector = <T, R>(\n  value: unknown\n): value is {\n  selector: (v: T) => R;\n  value: SkiaValue<T>;\n} => {\n  if (value) {\n    return (\n      typeof value === \"object\" &&\n      \"selector\" in value &&\n      \"value\" in value &&\n      (value as Record<string, unknown>).selector !== undefined &&\n      (value as Record<string, unknown>).value !== undefined\n    );\n  }\n  return false;\n};\n\nexport const isAnimated = <T>(props: AnimatedProps<T>) => {\n  for (const value of Object.values(props)) {\n    if (isValue(value) || isSelector(value)) {\n      return true;\n    }\n  }\n  return false;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type AnimatedProp<T, P = any> =\n  | T\n  | SkiaValue<T>\n  | SkiaSelector<T, P>\n  | SharedValueType<T>;\n\nexport type AnimatedProps<T, O extends keyof T | never = never> = {\n  [K in keyof T]: K extends \"children\"\n    ? T[K]\n    : K extends O\n    ? T[K]\n    : AnimatedProp<T[K]>;\n};\n\nexport type SkiaProps<\n  P = object,\n  O extends keyof P | never = never\n> = AnimatedProps<P, O>;\n\ntype WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {\n  [K in N]?: T[K];\n};\n\nexport type SkiaDefaultProps<\n  T extends object,\n  N extends keyof T\n> = WithOptional<SkiaProps<T>, N>;\n"],"mappings":"AAMA,OAAO,MAAMA,OAAO,GAAIC,KAAD,IAAiD;EACtE,IAAIA,KAAK,KAAKC,SAAV,IAAuBD,KAAK,KAAK,IAArC,EAA2C;IACzC,OAAO,KAAP;EACD;;EACD,IAAI;IACF,IACE,OAAOA,KAAP,KAAiB,QAAjB,IACA,kBAAkBA,KADlB,IAECA,KAAD,CAAyCE,YAAzC,KAA0D,WAH5D,EAIE;MACA,OAAO,IAAP;IACD;EACF,CARD,CAQE,MAAM,CAAE;;EACV,OAAO,KAAP;AACD,CAdM;AAgBP,OAAO,MAAMC,UAAU,GACrBH,KADwB,IAKrB;EACH,IAAIA,KAAJ,EAAW;IACT,OACE,OAAOA,KAAP,KAAiB,QAAjB,IACA,cAAcA,KADd,IAEA,WAAWA,KAFX,IAGCA,KAAD,CAAmCI,QAAnC,KAAgDH,SAHhD,IAICD,KAAD,CAAmCA,KAAnC,KAA6CC,SAL/C;EAOD;;EACD,OAAO,KAAP;AACD,CAhBM;AAkBP,OAAO,MAAMI,UAAU,GAAOC,KAAJ,IAAgC;EACxD,KAAK,MAAMN,KAAX,IAAoBO,MAAM,CAACC,MAAP,CAAcF,KAAd,CAApB,EAA0C;IACxC,IAAIP,OAAO,CAACC,KAAD,CAAP,IAAkBG,UAAU,CAACH,KAAD,CAAhC,EAAyC;MACvC,OAAO,IAAP;IACD;EACF;;EACD,OAAO,KAAP;AACD,CAPM,C,CASP"}

package/lib/module/skia/web/JsiSkSurfaceFactory.js

@@ -25,7 +25,14 @@ export class JsiSkSurfaceFactory extends Host {
       surface = this.CanvasKit.MakeSurface(width, height);
     } else {
       const offscreen = new OC(width, height);
-      surface = this.CanvasKit.MakeWebGLCanvasSurface(offscreen);
+      const webglContext = this.CanvasKit.GetWebGLContext(offscreen);
+      const grContext = this.CanvasKit.MakeWebGLContext(webglContext);
+
+      if (!grContext) {
+        throw new Error("Could not make a graphics context");
+      }
+
+      surface = this.CanvasKit.MakeRenderTarget(grContext, width, height);
     }
 
     if (!surface) {