@shopify/react-native-skia 0.1.155 → 0.1.156

package/lib/module/renderer/components/Paint.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","forwardRef","usePaintRef","Paint","props","ref"],"sources":["Paint.tsx"],"sourcesContent":["import React, { useRef, forwardRef } from \"react\";\n\nimport type { SkiaProps } from \"../processors\";\nimport type { DrawingNodeProps } from \"../../dom/types\";\nimport type { PaintNode } from \"../../dom/nodes/PaintNode\";\n\nexport const usePaintRef = () => useRef<PaintNode>(null);\n\nexport const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(\n  (props, ref) => {\n    return <skPaint ref={ref} {...props} />;\n  }\n);\n"],"mappings":";;AAAA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,UAAxB,QAA0C,OAA1C;AAMA,OAAO,MAAMC,WAAW,GAAG,MAAMF,MAAM,CAAY,IAAZ,CAAhC;AAEP,OAAO,MAAMG,KAAK,gBAAGF,UAAU,CAC7B,CAACG,KAAD,EAAQC,GAAR,KAAgB;EACd,oBAAO;IAAS,GAAG,EAAEA;EAAd,GAAuBD,KAAvB,EAAP;AACD,CAH4B,CAAxB"}
+{"version":3,"names":["React","useRef","forwardRef","usePaintRef","console","log","Paint","props","ref"],"sources":["Paint.tsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useRef, forwardRef } from \"react\";\n\nimport type { SkiaProps } from \"../processors\";\nimport type { DrawingNodeProps } from \"../../dom/types\";\nimport type { PaintNode } from \"../../dom/nodes/PaintNode\";\n\nexport const usePaintRef = () => {\n  console.log(`usePaintRef() is now deprecated.\nIf you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.\nIf you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);\n  return useRef<PaintNode>(null);\n};\n\nexport const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(\n  (props, ref) => {\n    return <skPaint ref={ref} {...props} />;\n  }\n);\n"],"mappings":";;AAAA;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,UAAxB,QAA0C,OAA1C;AAMA,OAAO,MAAMC,WAAW,GAAG,MAAM;EAC/BC,OAAO,CAACC,GAAR,CAAa;AACf;AACA,qJAFE;EAGA,OAAOJ,MAAM,CAAY,IAAZ,CAAb;AACD,CALM;AAOP,OAAO,MAAMK,KAAK,gBAAGJ,UAAU,CAC7B,CAACK,KAAD,EAAQC,GAAR,KAAgB;EACd,oBAAO;IAAS,GAAG,EAAEA;EAAd,GAAuBD,KAAvB,EAAP;AACD,CAH4B,CAAxB"}

package/lib/module/views/SkiaPictureView.js

@@ -5,7 +5,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from "react";
 import { requireNativeComponent } from "react-native";
 import { SkiaViewApi } from "./api";
-let SkiaViewNativeId = 1000;
+import { SkiaViewNativeId } from "./SkiaView";
 const NativeSkiaPictureView = requireNativeComponent("SkiaPictureView");
 export class SkiaPictureView extends React.Component {
   constructor(props) {
@@ -13,7 +13,7 @@ export class SkiaPictureView extends React.Component {
 
     _defineProperty(this, "_nativeId", void 0);
 
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const {
       picture
     } = props;

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

@@ -1 +1 @@
-{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","SkiaPictureView","Component","constructor","props","_nativeId","picture","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaPictureView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { picture } = props;\n    if (picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaPictureViewProps) {\n    const { picture } = this.props;\n    if (picture !== prevProps.picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,qBAAqB,GACzBH,sBAAsB,CAAsB,iBAAtB,CADxB;AAGA,OAAO,MAAMI,eAAN,SAA8BL,KAAK,CAACM,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;IACA,MAAM;MAAEO;IAAF,IAAcF,KAApB;;IACA,IAAIE,OAAJ,EAAa;MACXC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEL;IAAF,IAAc,KAAKF,KAAzB;;IACA,IAAIE,OAAO,KAAKK,SAAS,CAACL,OAA1B,EAAmC;MACjCC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,SAA3C,EAAsDC,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBT,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;AAmE3E,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
+{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaPictureView","SkiaPictureView","Component","constructor","props","_nativeId","current","picture","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaPictureView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport { SkiaViewNativeId } from \"./SkiaView\";\nimport type { NativeSkiaViewProps, SkiaPictureViewProps } from \"./types\";\n\nconst NativeSkiaPictureView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaPictureView\");\n\nexport class SkiaPictureView extends React.Component<SkiaPictureViewProps> {\n  constructor(props: SkiaPictureViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { picture } = props;\n    if (picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaPictureViewProps) {\n    const { picture } = this.props;\n    if (picture !== prevProps.picture) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"picture\", picture);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaPictureView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AACA,SAASC,gBAAT,QAAiC,YAAjC;AAGA,MAAMC,qBAAqB,GACzBH,sBAAsB,CAAsB,iBAAtB,CADxB;AAGA,OAAO,MAAMI,eAAN,SAA8BL,KAAK,CAACM,SAApC,CAAoE;EACzEC,WAAW,CAACC,KAAD,EAA8B;IACvC,MAAMA,KAAN;;IADuC;;IAEvC,KAAKC,SAAL,GAAiBN,gBAAgB,CAACO,OAAjB,EAAjB;IACA,MAAM;MAAEC;IAAF,IAAcH,KAApB;;IACA,IAAIG,OAAJ,EAAa;MACXC,iBAAiB;MACjBV,WAAW,CAACW,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDE,OAAtD;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKL,SAAZ;EACD;;EAEDM,kBAAkB,CAACC,SAAD,EAAkC;IAClD,MAAM;MAAEL;IAAF,IAAc,KAAKH,KAAzB;;IACA,IAAIG,OAAO,KAAKK,SAAS,CAACL,OAA1B,EAAmC;MACjCC,iBAAiB;MACjBV,WAAW,CAACW,cAAZ,CAA2B,KAAKJ,SAAhC,EAA2C,SAA3C,EAAsDE,OAAtD;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOV,WAAW,CAACe,iBAAZ,CAA8B,KAAKR,SAAnC,EAA8CS,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBV,WAAW,CAACkB,aAAZ,CAA0B,KAAKX,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSY,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOV,WAAW,CAACqB,oBAAZ,CAAiC,KAAKd,SAAtC,EAAiDa,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKnB,KAAnD;IACA,oBACE,oBAAC,qBAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEgB,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhEwE;;AAmE3E,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACEV,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACW,cAAZ,KAA+B,IAD/B,IAEAX,WAAW,CAAC0B,aAAZ,KAA8B,IAF9B,IAGA1B,WAAW,CAACqB,oBAAZ,KAAqC,IAHrC,IAIArB,WAAW,CAACkB,aAAZ,KAA8B,IAJ9B,IAKAlB,WAAW,CAACe,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}

package/lib/module/views/SkiaView.js

@@ -5,7 +5,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React from "react";
 import { requireNativeComponent } from "react-native";
 import { SkiaViewApi } from "./api";
-let SkiaViewNativeId = 1000;
+export const SkiaViewNativeId = {
+  current: 1000
+};
 const NativeSkiaView = requireNativeComponent("SkiaDrawView");
 export class SkiaView extends React.Component {
   constructor(props) {
@@ -13,7 +15,7 @@ export class SkiaView extends React.Component {
 
     _defineProperty(this, "_nativeId", void 0);
 
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const {
       onDraw
     } = props;

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

@@ -1 +1 @@
-{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nlet SkiaViewNativeId = 1000;\n\nconst NativeSkiaView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,IAAIC,gBAAgB,GAAG,IAAvB;AAEA,MAAMC,cAAc,GAClBH,sBAAsB,CAAsB,cAAtB,CADxB;AAGA,OAAO,MAAMI,QAAN,SAAuBL,KAAK,CAACM,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBN,gBAAgB,EAAjC;IACA,MAAM;MAAEO;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEL;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBT,WAAW,CAACU,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOT,WAAW,CAACc,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBT,WAAW,CAACiB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOT,WAAW,CAACoB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;AAmEjE,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACET,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACU,cAAZ,KAA+B,IAD/B,IAEAV,WAAW,CAACyB,aAAZ,KAA8B,IAF9B,IAGAzB,WAAW,CAACoB,oBAAZ,KAAqC,IAHrC,IAIApB,WAAW,CAACiB,aAAZ,KAA8B,IAJ9B,IAKAjB,WAAW,CAACc,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}
+{"version":3,"names":["React","requireNativeComponent","SkiaViewApi","SkiaViewNativeId","current","NativeSkiaView","SkiaView","Component","constructor","props","_nativeId","onDraw","assertSkiaViewApi","setJsiProperty","nativeId","componentDidUpdate","prevProps","makeImageSnapshot","rect","redraw","requestRedraw","registerValues","values","registerValuesInView","render","mode","debug","viewProps","callJsiMethod","Error"],"sources":["SkiaView.tsx"],"sourcesContent":["import React from \"react\";\nimport { requireNativeComponent } from \"react-native\";\n\nimport type { SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nimport { SkiaViewApi } from \"./api\";\nimport type { NativeSkiaViewProps, SkiaDrawViewProps } from \"./types\";\n\nexport const SkiaViewNativeId = { current: 1000 };\n\nconst NativeSkiaView =\n  requireNativeComponent<NativeSkiaViewProps>(\"SkiaDrawView\");\n\nexport class SkiaView extends React.Component<SkiaDrawViewProps> {\n  constructor(props: SkiaDrawViewProps) {\n    super(props);\n    this._nativeId = SkiaViewNativeId.current++;\n    const { onDraw } = props;\n    if (onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  private _nativeId: number;\n\n  public get nativeId() {\n    return this._nativeId;\n  }\n\n  componentDidUpdate(prevProps: SkiaDrawViewProps) {\n    const { onDraw } = this.props;\n    if (onDraw !== prevProps.onDraw) {\n      assertSkiaViewApi();\n      SkiaViewApi.setJsiProperty(this._nativeId, \"drawCallback\", onDraw);\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    assertSkiaViewApi();\n    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);\n  }\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  public redraw() {\n    assertSkiaViewApi();\n    SkiaViewApi.requestRedraw(this._nativeId);\n  }\n\n  /**\n   * Registers one or move values as a dependant value of the Skia View. The view will\n   * The view will redraw itself when any of the values change.\n   * @param values Values to register\n   */\n  public registerValues(values: SkiaValue<unknown>[]): () => void {\n    assertSkiaViewApi();\n    return SkiaViewApi.registerValuesInView(this._nativeId, values);\n  }\n\n  render() {\n    const { mode, debug = false, ...viewProps } = this.props;\n    return (\n      <NativeSkiaView\n        collapsable={false}\n        nativeID={`${this._nativeId}`}\n        mode={mode}\n        debug={debug}\n        {...viewProps}\n      />\n    );\n  }\n}\n\nconst assertSkiaViewApi = () => {\n  if (\n    SkiaViewApi === null ||\n    SkiaViewApi.setJsiProperty === null ||\n    SkiaViewApi.callJsiMethod === null ||\n    SkiaViewApi.registerValuesInView === null ||\n    SkiaViewApi.requestRedraw === null ||\n    SkiaViewApi.makeImageSnapshot === null\n  ) {\n    throw Error(\"Skia View Api was not found.\");\n  }\n};\n"],"mappings":";;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,sBAAT,QAAuC,cAAvC;AAKA,SAASC,WAAT,QAA4B,OAA5B;AAGA,OAAO,MAAMC,gBAAgB,GAAG;EAAEC,OAAO,EAAE;AAAX,CAAzB;AAEP,MAAMC,cAAc,GAClBJ,sBAAsB,CAAsB,cAAtB,CADxB;AAGA,OAAO,MAAMK,QAAN,SAAuBN,KAAK,CAACO,SAA7B,CAA0D;EAC/DC,WAAW,CAACC,KAAD,EAA2B;IACpC,MAAMA,KAAN;;IADoC;;IAEpC,KAAKC,SAAL,GAAiBP,gBAAgB,CAACC,OAAjB,EAAjB;IACA,MAAM;MAAEO;IAAF,IAAaF,KAAnB;;IACA,IAAIE,MAAJ,EAAY;MACVC,iBAAiB;MACjBV,WAAW,CAACW,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;;EAIkB,IAARG,QAAQ,GAAG;IACpB,OAAO,KAAKJ,SAAZ;EACD;;EAEDK,kBAAkB,CAACC,SAAD,EAA+B;IAC/C,MAAM;MAAEL;IAAF,IAAa,KAAKF,KAAxB;;IACA,IAAIE,MAAM,KAAKK,SAAS,CAACL,MAAzB,EAAiC;MAC/BC,iBAAiB;MACjBV,WAAW,CAACW,cAAZ,CAA2B,KAAKH,SAAhC,EAA2C,cAA3C,EAA2DC,MAA3D;IACD;EACF;EAED;AACF;AACA;AACA;AACA;;;EACSM,iBAAiB,CAACC,IAAD,EAAgB;IACtCN,iBAAiB;IACjB,OAAOV,WAAW,CAACe,iBAAZ,CAA8B,KAAKP,SAAnC,EAA8CQ,IAA9C,CAAP;EACD;EAED;AACF;AACA;;;EACSC,MAAM,GAAG;IACdP,iBAAiB;IACjBV,WAAW,CAACkB,aAAZ,CAA0B,KAAKV,SAA/B;EACD;EAED;AACF;AACA;AACA;AACA;;;EACSW,cAAc,CAACC,MAAD,EAA2C;IAC9DV,iBAAiB;IACjB,OAAOV,WAAW,CAACqB,oBAAZ,CAAiC,KAAKb,SAAtC,EAAiDY,MAAjD,CAAP;EACD;;EAEDE,MAAM,GAAG;IACP,MAAM;MAAEC,IAAF;MAAQC,KAAK,GAAG,KAAhB;MAAuB,GAAGC;IAA1B,IAAwC,KAAKlB,KAAnD;IACA,oBACE,oBAAC,cAAD;MACE,WAAW,EAAE,KADf;MAEE,QAAQ,EAAG,GAAE,KAAKC,SAAU,EAF9B;MAGE,IAAI,EAAEe,IAHR;MAIE,KAAK,EAAEC;IAJT,GAKMC,SALN,EADF;EASD;;AAhE8D;;AAmEjE,MAAMf,iBAAiB,GAAG,MAAM;EAC9B,IACEV,WAAW,KAAK,IAAhB,IACAA,WAAW,CAACW,cAAZ,KAA+B,IAD/B,IAEAX,WAAW,CAAC0B,aAAZ,KAA8B,IAF9B,IAGA1B,WAAW,CAACqB,oBAAZ,KAAqC,IAHrC,IAIArB,WAAW,CAACkB,aAAZ,KAA8B,IAJ9B,IAKAlB,WAAW,CAACe,iBAAZ,KAAkC,IANpC,EAOE;IACA,MAAMY,KAAK,CAAC,8BAAD,CAAX;EACD;AACF,CAXD"}

package/lib/typescript/src/dom/nodes/JsiSkDOM.d.ts

@@ -9,9 +9,11 @@ import { MorphologyImageFilterNode } from "./paint/ImageFilters";
 import { GroupNode } from "./GroupNode";
 import { PaintNode } from "./PaintNode";
 import type { NodeContext } from "./Node";
+import { LayerNode } from "./LayerNode";
 export declare class JsiSkDOM implements SkDOM {
     private ctx;
     constructor(ctx: NodeContext);
+    Layer(props?: ChildrenProps): LayerNode;
     Group(props?: GroupProps): GroupNode;
     Paint(props: PaintProps): PaintNode;
     Fill(props?: DrawingNodeProps): FillNode;

package/lib/typescript/src/dom/nodes/LayerNode.d.ts

@@ -0,0 +1,8 @@
+import type { DrawingContext } from "../types";
+import type { ChildrenProps } from "../types/Common";
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+export declare class LayerNode extends JsiRenderNode<ChildrenProps> {
+    constructor(ctx: NodeContext, props: ChildrenProps);
+    renderNode(ctx: DrawingContext): void;
+}

package/lib/typescript/src/dom/types/NodeType.d.ts

@@ -1,4 +1,5 @@
 export declare const enum NodeType {
+    Layer = "skLayer",
     Shader = "skShader",
     ImageShader = "skImageShader",
     ColorShader = "skColorShader",

package/lib/typescript/src/dom/types/SkDOM.d.ts

@@ -12,6 +12,7 @@ declare type PathEffectNode<P> = DeclarationNode<P, SkPathEffect>;
 declare type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
 declare type DrawingNode<P extends GroupProps> = RenderNode<P>;
 export interface SkDOM {
+    Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
     Group(props?: GroupProps): RenderNode<GroupProps>;
     Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
     Fill(props?: DrawingNodeProps): DrawingNode<DrawingNodeProps>;

package/lib/typescript/src/renderer/HostComponents.d.ts

@@ -10,6 +10,7 @@ declare global {
     namespace JSX {
         interface IntrinsicElements {
             skGroup: SkiaProps<GroupProps>;
+            skLayer: SkiaProps<ChildrenProps>;
             skPaint: SkiaProps<PaintProps> & {
                 ref: ForwardedRef<PaintNode>;
             };
@@ -69,4 +70,4 @@ declare global {
         }
     }
 }
-export declare const createNode: (container: Container, type: NodeType, props: any) => import("../dom/types").DeclarationNode<PaintProps, import("..").SkPaint, never> | import("../dom/types").DeclarationNode<BlurMaskFilterProps, import("..").SkMaskFilter, never> | import("../dom/types").DeclarationNode<BlendImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<BlurImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<OffsetImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DropShadowImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MorphologyImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DisplacementMapImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<RuntimeShaderImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MatrixColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<BlendColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<null, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<LerpColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<ShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ImageShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ColorProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<TurbulenceProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<LinearGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<RadialGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<SweepGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<CornerPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<DiscretePathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<DashPathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<Path1DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Path2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<null, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Line2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<BlendProps, import("..").SkImageFilter | import("..").SkShader, never> | import("../dom/types").RenderNode<ChildrenProps> | import("../dom/types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;
+export declare const createNode: (container: Container, type: NodeType, props: any) => import("../dom/types").RenderNode<ChildrenProps> | import("../dom/types").DeclarationNode<PaintProps, import("..").SkPaint, never> | import("../dom/types").DeclarationNode<BlurMaskFilterProps, import("..").SkMaskFilter, never> | import("../dom/types").DeclarationNode<BlendImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<BlurImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<OffsetImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DropShadowImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MorphologyImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DisplacementMapImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<RuntimeShaderImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MatrixColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<BlendColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<null, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<LerpColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<ShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ImageShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ColorProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<TurbulenceProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<LinearGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<RadialGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<SweepGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<CornerPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<DiscretePathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<DashPathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<Path1DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Path2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<null, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Line2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<BlendProps, import("..").SkImageFilter | import("..").SkShader, never> | import("../dom/types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;

package/lib/typescript/src/renderer/components/Group.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import type { SkiaProps } from "../processors";
 import type { GroupProps } from "../../dom/types";
-export declare const Group: (props: SkiaProps<GroupProps>) => JSX.Element;
+import type { ChildrenProps } from "../../dom/types/Common";
+export interface PublicGroupProps extends Omit<GroupProps, "layer"> {
+    layer?: GroupProps["layer"] | ChildrenProps["children"];
+}
+export declare const Group: ({ layer, ...props }: SkiaProps<PublicGroupProps>) => JSX.Element;

package/lib/typescript/src/views/SkiaView.d.ts

@@ -2,6 +2,9 @@ import React from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 import type { SkiaDrawViewProps } from "./types";
+export declare const SkiaViewNativeId: {
+    current: number;
+};
 export declare class SkiaView extends React.Component<SkiaDrawViewProps> {
     constructor(props: SkiaDrawViewProps);
     private _nativeId;

package/libs/ios/libskottie.xcframework/Info.plist

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskottie.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskottie.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/libs/ios/libsksg.xcframework/Info.plist

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libsksg.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libsksg.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/libs/ios/libskshaper.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskshaper.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.155",
+  "version": "0.1.156",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -30,6 +30,8 @@
     "libs/ios/libskia.xcframework",
     "libs/ios/libskshaper.xcframework",
     "libs/ios/libsvg.xcframework",
+    "libs/ios/libskottie.xcframework",
+    "libs/ios/libsksg.xcframework",
     "react-native-skia.podspec",
     "scripts/install-npm.js",
     "scripts/setup-canvaskit.js",

package/src/dom/nodes/JsiSkDOM.ts

@@ -121,10 +121,15 @@ import { MorphologyImageFilterNode } from "./paint/ImageFilters";
 import { GroupNode } from "./GroupNode";
 import { PaintNode } from "./PaintNode";
 import type { NodeContext } from "./Node";
+import { LayerNode } from "./LayerNode";
 
 export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
 
+  Layer(props?: ChildrenProps) {
+    return new LayerNode(this.ctx, props ?? {});
+  }
+
   Group(props?: GroupProps) {
     return new GroupNode(this.ctx, props ?? {});
   }

package/src/dom/nodes/LayerNode.ts

@@ -0,0 +1,35 @@
+import type { DeclarationNode, DrawingContext, Node } from "../types";
+import { NodeType } from "../types";
+import type { ChildrenProps } from "../types/Common";
+import type { SkPaint } from "../../skia";
+
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+
+const isLayer = (
+  node: Node<unknown>
+): node is DeclarationNode<unknown, SkPaint> =>
+  node instanceof JsiDeclarationNode && node.isPaint();
+
+export class LayerNode extends JsiRenderNode<ChildrenProps> {
+  constructor(ctx: NodeContext, props: ChildrenProps) {
+    super(ctx, NodeType.Layer, props);
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    const [layer, ...children] = this.children();
+    if (isLayer(layer)) {
+      const paint = layer.materialize() as SkPaint;
+      ctx.canvas.saveLayer(paint);
+    }
+    children.map((child) => {
+      if (child instanceof JsiRenderNode) {
+        child.render(ctx);
+      }
+    });
+    if (isLayer(layer)) {
+      ctx.canvas.restore();
+    }
+  }
+}

package/src/dom/types/NodeType.ts

@@ -1,5 +1,6 @@
 export const enum NodeType {
   // Shaders
+  Layer = "skLayer",
   Shader = "skShader",
   ImageShader = "skImageShader",
   ColorShader = "skColorShader",

package/src/dom/types/SkDOM.ts

@@ -76,6 +76,7 @@ type NullablePathEffectNode<P> = DeclarationNode<P, SkPathEffect, null>;
 type DrawingNode<P extends GroupProps> = RenderNode<P>;
 
 export interface SkDOM {
+  Layer(props?: ChildrenProps): RenderNode<ChildrenProps>;
   Group(props?: GroupProps): RenderNode<GroupProps>;
   Paint(props: PaintProps): DeclarationNode<PaintProps, SkPaint>;
 

package/src/renderer/HostComponents.ts

@@ -66,6 +66,7 @@ declare global {
   namespace JSX {
     interface IntrinsicElements {
       skGroup: SkiaProps<GroupProps>;
+      skLayer: SkiaProps<ChildrenProps>;
       skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
 
       // Drawings
@@ -146,6 +147,8 @@ export const createNode = (
 ) => {
   const { Sk } = container;
   switch (type) {
+    case NodeType.Layer:
+      return Sk.Layer(props);
     case NodeType.Group:
       return Sk.Group(props);
     case NodeType.Paint:

package/src/renderer/components/Group.tsx

@@ -1,8 +1,21 @@
-import React from "react";
+import React, { isValidElement } from "react";
 
 import type { SkiaProps } from "../processors";
 import type { GroupProps } from "../../dom/types";
+import type { ChildrenProps } from "../../dom/types/Common";
 
-export const Group = (props: SkiaProps<GroupProps>) => {
-  return <skGroup {...props} />;
+export interface PublicGroupProps extends Omit<GroupProps, "layer"> {
+  layer?: GroupProps["layer"] | ChildrenProps["children"];
+}
+
+export const Group = ({ layer, ...props }: SkiaProps<PublicGroupProps>) => {
+  if (isValidElement(layer) && typeof layer === "object") {
+    return (
+      <skLayer>
+        {layer}
+        <skGroup {...props} />
+      </skLayer>
+    );
+  }
+  return <skGroup layer={layer as GroupProps["layer"]} {...props} />;
 };

package/src/renderer/components/Paint.tsx

@@ -1,10 +1,16 @@
+/* eslint-disable max-len */
 import React, { useRef, forwardRef } from "react";
 
 import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
 import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => useRef<PaintNode>(null);
+export const usePaintRef = () => {
+  console.log(`usePaintRef() is now deprecated.
+If you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.
+If you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);
+  return useRef<PaintNode>(null);
+};
 
 export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
   (props, ref) => {

package/src/views/SkiaPictureView.tsx

@@ -5,17 +5,16 @@ import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaView";
 import type { NativeSkiaViewProps, SkiaPictureViewProps } from "./types";
 
-let SkiaViewNativeId = 1000;
-
 const NativeSkiaPictureView =
   requireNativeComponent<NativeSkiaViewProps>("SkiaPictureView");
 
 export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const { picture } = props;
     if (picture) {
       assertSkiaViewApi();

package/src/views/SkiaView.tsx

@@ -7,7 +7,7 @@ import type { SkiaValue } from "../values";
 import { SkiaViewApi } from "./api";
 import type { NativeSkiaViewProps, SkiaDrawViewProps } from "./types";
 
-let SkiaViewNativeId = 1000;
+export const SkiaViewNativeId = { current: 1000 };
 
 const NativeSkiaView =
   requireNativeComponent<NativeSkiaViewProps>("SkiaDrawView");
@@ -15,7 +15,7 @@ const NativeSkiaView =
 export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
-    this._nativeId = SkiaViewNativeId++;
+    this._nativeId = SkiaViewNativeId.current++;
     const { onDraw } = props;
     if (onDraw) {
       assertSkiaViewApi();