@shopify/react-native-skia 0.1.185 → 0.1.187

package/lib/module/skia/core/Image.js.map

@@ -1 +1 @@
-{"version":3,"names":["Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError"],"sources":["Image.ts"],"sourcesContent":["import { Skia } from \"../Skia\";\nimport type { DataSourceParam } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n"],"mappings":"AAAA,SAASA,IAAT,QAAqB,SAArB;AAGA,SAASC,UAAT,QAA2B,QAA3B;AAEA,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAWC,oBAAX,CAAgCC,IAAhC,CAAqCL,IAAI,CAACG,KAA1C,CAAnB;AAEA;AACA;AACA;;AACA,OAAO,MAAMG,QAAQ,GAAG,CACtBC,MADsB,EAEtBC,OAFsB,KAGnBP,UAAU,CAACM,MAAD,EAASL,UAAT,EAAqBM,OAArB,CAHR"}
+{"version":3,"names":["findNodeHandle","Platform","Skia","useRawData","imgFactory","Image","MakeImageFromEncoded","bind","useImage","source","onError","makeImageFromView","viewRef","callback","OS","Promise","reject","Error","viewTag","current","MakeImageFromViewTag"],"sources":["Image.ts"],"sourcesContent":["import { findNodeHandle, Platform } from \"react-native\";\n\nimport { Skia } from \"../Skia\";\nimport type { DataSourceParam, SkImage } from \"../types\";\n\nimport { useRawData } from \"./Data\";\n\nconst imgFactory = Skia.Image.MakeImageFromEncoded.bind(Skia.Image);\n\n/**\n * Returns a Skia Image object\n * */\nexport const useImage = (\n  source: DataSourceParam,\n  onError?: (err: Error) => void\n) => useRawData(source, imgFactory, onError);\n\n/**\n * Creates an image from a given view reference. NOTE: This method has different implementations\n * on web/native. On web, the callback is called with the view ref and the callback is expected to\n * return a promise that resolves to a Skia Image object. On native, the view ref is used to\n * find the view tag and the Skia Image object is created from the view tag. This means that on web\n * you will need to implement the logic to create the image from the view ref yourself.\n * @param viewRef Ref to the view we're creating an image from\n * @returns A promise that resolves to a Skia Image object or rejects\n * with an error id the view tag is invalid.\n */\nexport const makeImageFromView = <\n  T extends\n    | number\n    | React.Component<unknown, unknown>\n    | React.ComponentClass<unknown>\n>(\n  viewRef: React.RefObject<T>,\n  callback:\n    | null\n    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null\n) => {\n  // In web implementation we just delegate the work to the provided callback\n  if (Platform.OS === \"web\") {\n    if (callback) {\n      return callback(viewRef);\n    } else {\n      Promise.reject(\n        new Error(\n          \"Callback is required on web in the makeImageFromView function.\"\n        )\n      );\n    }\n  }\n  const viewTag = findNodeHandle(viewRef.current);\n  if (viewTag !== null && viewTag !== 0) {\n    return Skia.Image.MakeImageFromViewTag(viewTag);\n  }\n  return Promise.reject(new Error(\"Invalid view tag\"));\n};\n"],"mappings":"AAAA,SAASA,cAAT,EAAyBC,QAAzB,QAAyC,cAAzC;AAEA,SAASC,IAAT,QAAqB,SAArB;AAGA,SAASC,UAAT,QAA2B,QAA3B;AAEA,MAAMC,UAAU,GAAGF,IAAI,CAACG,KAAL,CAAWC,oBAAX,CAAgCC,IAAhC,CAAqCL,IAAI,CAACG,KAA1C,CAAnB;AAEA;AACA;AACA;;AACA,OAAO,MAAMG,QAAQ,GAAG,CACtBC,MADsB,EAEtBC,OAFsB,KAGnBP,UAAU,CAACM,MAAD,EAASL,UAAT,EAAqBM,OAArB,CAHR;AAKP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,MAAMC,iBAAiB,GAAG,UAM/BC,OAN+B,EAU5B;EAAA,IAHHC,QAGG,uEAD8D,IAC9D;;EACH;EACA,IAAIZ,QAAQ,CAACa,EAAT,KAAgB,KAApB,EAA2B;IACzB,IAAID,QAAJ,EAAc;MACZ,OAAOA,QAAQ,CAACD,OAAD,CAAf;IACD,CAFD,MAEO;MACLG,OAAO,CAACC,MAAR,CACE,IAAIC,KAAJ,CACE,gEADF,CADF;IAKD;EACF;;EACD,MAAMC,OAAO,GAAGlB,cAAc,CAACY,OAAO,CAACO,OAAT,CAA9B;;EACA,IAAID,OAAO,KAAK,IAAZ,IAAoBA,OAAO,KAAK,CAApC,EAAuC;IACrC,OAAOhB,IAAI,CAACG,KAAL,CAAWe,oBAAX,CAAgCF,OAAhC,CAAP;EACD;;EACD,OAAOH,OAAO,CAACC,MAAR,CAAe,IAAIC,KAAJ,CAAU,kBAAV,CAAf,CAAP;AACD,CA5BM"}

package/lib/module/skia/types/Image/ImageFactory.d.ts

@@ -48,6 +48,13 @@ export interface ImageFactory {
      *  image, nullptr is returned.
      */
     MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
+    /**
+     * Returns an image that will be a screenshot of the view represented by
+     * the view tag
+     * @param viewTag - The tag of the view to make an image from.
+     * @returns Returns a valid SkImage, if the view tag is invalid, nullptr is returned.
+     */
+    MakeImageFromViewTag: (viewTag: number) => Promise<SkImage | null>;
     /**
      * Returns an image with the given pixel data and format.
      * Note that we will always make a copy of the pixel data, because of inconsistencies in

package/lib/module/skia/types/Image/ImageFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["AlphaType","ColorType"],"sources":["ImageFactory.ts"],"sourcesContent":["import type { SkData } from \"../Data\";\n\nimport type { SkImage } from \"./Image\";\n\nexport enum AlphaType {\n  Unknown,\n  Opaque,\n  Premul,\n  Unpremul,\n}\n\nexport enum ColorType {\n  Unknown, //!< uninitialized\n  Alpha_8, //!< pixel with alpha in 8-bit byte\n  RGB_565, //!< pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word\n  ARGB_4444, //!< pixel with 4 bits for alpha, red, green, blue; in 16-bit word\n  RGBA_8888, //!< pixel with 8 bits for red, green, blue, alpha; in 32-bit word\n  RGB_888x, //!< pixel with 8 bits each for red, green, blue; in 32-bit word\n  BGRA_8888, //!< pixel with 8 bits for blue, green, red, alpha; in 32-bit word\n  RGBA_1010102, //!< 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word\n  BGRA_1010102, //!< 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word\n  RGB_101010x, //!< pixel with 10 bits each for red, green, blue; in 32-bit word\n  BGR_101010x, //!< pixel with 10 bits each for blue, green, red; in 32-bit word\n  Gray_8, //!< pixel with grayscale level in 8-bit byte\n  RGBA_F16Norm, //!< pixel with half floats in [0,1] for red, green, blue, alpha;\n  //   in 64-bit word\n  RGBA_F16, //!< pixel with half floats for red, green, blue, alpha;\n  //   in 64-bit word\n  RGBA_F32, //!< pixel using C float for red, green, blue, alpha; in 128-bit word\n\n  // The following 6 colortypes are just for reading from - not for rendering to\n  R8G8_unorm, //!< pixel with a uint8_t for red and green\n\n  A16_float, //!< pixel with a half float for alpha\n  R16G16_float, //!< pixel with a half float for red and green\n\n  A16_unorm, //!< pixel with a little endian uint16_t for alpha\n  R16G16_unorm, //!< pixel with a little endian uint16_t for red and green\n  R16G16B16A16_unorm, //!< pixel with a little endian uint16_t for red, green, blue\n  //   and alpha\n  SRGBA_8888,\n}\n\nexport interface ImageInfo {\n  alphaType: AlphaType;\n  // TODO: add support for color space\n  // colorSpace: ColorSpace;\n  colorType: ColorType;\n  height: number;\n  width: number;\n}\n\nexport interface ImageFactory {\n  /**\n   * Return an Image backed by the encoded data, but attempt to defer decoding until the image\n   * is actually used/drawn. This deferral allows the system to cache the result, either on the\n   * CPU or on the GPU, depending on where the image is drawn.\n   * This decoding uses the codecs that have been compiled into CanvasKit. If the bytes are\n   * invalid (or an unrecognized codec), null will be returned. See Image.h for more details.\n   * @param data - Data object with bytes of data\n   * @returns If the encoded format is not supported, or subset is outside of the bounds of the decoded\n   *  image, nullptr is returned.\n   */\n  MakeImageFromEncoded: (encoded: SkData) => SkImage | null;\n\n  /**\n   * Returns an image with the given pixel data and format.\n   * Note that we will always make a copy of the pixel data, because of inconsistencies in\n   * behavior between GPU and CPU (i.e. the pixel data will be turned into a GPU texture and\n   * not modifiable after creation).\n   *\n   * @param info\n   * @param data - bytes representing the pixel data.\n   * @param bytesPerRow\n   */\n  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;\n}\n"],"mappings":"AAIA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAOZ,WAAYC,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}
+{"version":3,"names":["AlphaType","ColorType"],"sources":["ImageFactory.ts"],"sourcesContent":["import type { SkData } from \"../Data\";\n\nimport type { SkImage } from \"./Image\";\n\nexport enum AlphaType {\n  Unknown,\n  Opaque,\n  Premul,\n  Unpremul,\n}\n\nexport enum ColorType {\n  Unknown, //!< uninitialized\n  Alpha_8, //!< pixel with alpha in 8-bit byte\n  RGB_565, //!< pixel with 5 bits red, 6 bits green, 5 bits blue, in 16-bit word\n  ARGB_4444, //!< pixel with 4 bits for alpha, red, green, blue; in 16-bit word\n  RGBA_8888, //!< pixel with 8 bits for red, green, blue, alpha; in 32-bit word\n  RGB_888x, //!< pixel with 8 bits each for red, green, blue; in 32-bit word\n  BGRA_8888, //!< pixel with 8 bits for blue, green, red, alpha; in 32-bit word\n  RGBA_1010102, //!< 10 bits for red, green, blue; 2 bits for alpha; in 32-bit word\n  BGRA_1010102, //!< 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word\n  RGB_101010x, //!< pixel with 10 bits each for red, green, blue; in 32-bit word\n  BGR_101010x, //!< pixel with 10 bits each for blue, green, red; in 32-bit word\n  Gray_8, //!< pixel with grayscale level in 8-bit byte\n  RGBA_F16Norm, //!< pixel with half floats in [0,1] for red, green, blue, alpha;\n  //   in 64-bit word\n  RGBA_F16, //!< pixel with half floats for red, green, blue, alpha;\n  //   in 64-bit word\n  RGBA_F32, //!< pixel using C float for red, green, blue, alpha; in 128-bit word\n\n  // The following 6 colortypes are just for reading from - not for rendering to\n  R8G8_unorm, //!< pixel with a uint8_t for red and green\n\n  A16_float, //!< pixel with a half float for alpha\n  R16G16_float, //!< pixel with a half float for red and green\n\n  A16_unorm, //!< pixel with a little endian uint16_t for alpha\n  R16G16_unorm, //!< pixel with a little endian uint16_t for red and green\n  R16G16B16A16_unorm, //!< pixel with a little endian uint16_t for red, green, blue\n  //   and alpha\n  SRGBA_8888,\n}\n\nexport interface ImageInfo {\n  alphaType: AlphaType;\n  // TODO: add support for color space\n  // colorSpace: ColorSpace;\n  colorType: ColorType;\n  height: number;\n  width: number;\n}\n\nexport interface ImageFactory {\n  /**\n   * Return an Image backed by the encoded data, but attempt to defer decoding until the image\n   * is actually used/drawn. This deferral allows the system to cache the result, either on the\n   * CPU or on the GPU, depending on where the image is drawn.\n   * This decoding uses the codecs that have been compiled into CanvasKit. If the bytes are\n   * invalid (or an unrecognized codec), null will be returned. See Image.h for more details.\n   * @param data - Data object with bytes of data\n   * @returns If the encoded format is not supported, or subset is outside of the bounds of the decoded\n   *  image, nullptr is returned.\n   */\n  MakeImageFromEncoded: (encoded: SkData) => SkImage | null;\n\n  /**\n   * Returns an image that will be a screenshot of the view represented by\n   * the view tag\n   * @param viewTag - The tag of the view to make an image from.\n   * @returns Returns a valid SkImage, if the view tag is invalid, nullptr is returned.\n   */\n  MakeImageFromViewTag: (viewTag: number) => Promise<SkImage | null>;\n\n  /**\n   * Returns an image with the given pixel data and format.\n   * Note that we will always make a copy of the pixel data, because of inconsistencies in\n   * behavior between GPU and CPU (i.e. the pixel data will be turned into a GPU texture and\n   * not modifiable after creation).\n   *\n   * @param info\n   * @param data - bytes representing the pixel data.\n   * @param bytesPerRow\n   */\n  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): SkImage | null;\n}\n"],"mappings":"AAIA,WAAYA,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAOZ,WAAYC,SAAZ;;WAAYA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S"}

package/lib/module/skia/types/SVG/SVG.d.ts

@@ -1,2 +1,5 @@
 import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkSVG = SkJSIInstance<"SVG"> & JsiDisposable;
+export interface SkSVG extends SkJSIInstance<"SVG">, JsiDisposable {
+    width(): number;
+    height(): number;
+}

package/lib/module/skia/types/SVG/SVG.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SVG.ts"],"sourcesContent":["import type { JsiDisposable, SkJSIInstance } from \"../JsiInstance\";\n\nexport type SkSVG = SkJSIInstance<\"SVG\"> & JsiDisposable;\n"],"mappings":""}
+{"version":3,"names":[],"sources":["SVG.ts"],"sourcesContent":["import type { JsiDisposable, SkJSIInstance } from \"../JsiInstance\";\n\nexport interface SkSVG extends SkJSIInstance<\"SVG\">, JsiDisposable {\n  width(): number;\n  height(): number;\n}\n"],"mappings":""}

package/lib/module/skia/web/JsiSkImageFactory.d.ts

@@ -1,10 +1,11 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkData, ImageInfo } from "../types";
+import type { SkData, ImageInfo, SkImage } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 import { Host } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 export declare class JsiSkImageFactory extends Host implements ImageFactory {
     constructor(CanvasKit: CanvasKit);
+    MakeImageFromViewTag(viewTag: number): Promise<SkImage | null>;
     MakeImageFromEncoded(encoded: SkData): JsiSkImage | null;
     MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): JsiSkImage | null;
 }

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

@@ -6,6 +6,13 @@ export class JsiSkImageFactory extends Host {
     super(CanvasKit);
   }
 
+  MakeImageFromViewTag(viewTag) {
+    const view = viewTag; // TODO: Implement screenshot from view in React JS
+
+    console.log(view);
+    return Promise.resolve(null);
+  }
+
   MakeImageFromEncoded(encoded) {
     const image = this.CanvasKit.MakeImageFromEncoded(JsiSkData.fromValue(encoded));
 

package/lib/module/skia/web/JsiSkImageFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":["Host","ckEnum","JsiSkImage","JsiSkData","JsiSkImageFactory","constructor","CanvasKit","MakeImageFromEncoded","encoded","image","fromValue","MakeImage","info","data","bytesPerRow","alphaType","colorSpace","ColorSpace","SRGB","colorType","height","width"],"sources":["JsiSkImageFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData, ImageInfo } from \"../types\";\nimport type { ImageFactory } from \"../types/Image/ImageFactory\";\n\nimport { Host, ckEnum } from \"./Host\";\nimport { JsiSkImage } from \"./JsiSkImage\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkImageFactory extends Host implements ImageFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  MakeImageFromEncoded(encoded: SkData) {\n    const image = this.CanvasKit.MakeImageFromEncoded(\n      JsiSkData.fromValue(encoded)\n    );\n    if (image === null) {\n      return null;\n    }\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n\n  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {\n    // see toSkImageInfo() from canvaskit\n    const image = this.CanvasKit.MakeImage(\n      {\n        alphaType: ckEnum(info.alphaType),\n        colorSpace: this.CanvasKit.ColorSpace.SRGB,\n        colorType: ckEnum(info.colorType),\n        height: info.height,\n        width: info.width,\n      },\n      JsiSkData.fromValue(data),\n      bytesPerRow\n    );\n    if (image === null) {\n      return null;\n    }\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n}\n"],"mappings":"AAKA,SAASA,IAAT,EAAeC,MAAf,QAA6B,QAA7B;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,iBAAN,SAAgCJ,IAAhC,CAA6D;EAClEK,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,oBAAoB,CAACC,OAAD,EAAkB;IACpC,MAAMC,KAAK,GAAG,KAAKH,SAAL,CAAeC,oBAAf,CACZJ,SAAS,CAACO,SAAV,CAAoBF,OAApB,CADY,CAAd;;IAGA,IAAIC,KAAK,KAAK,IAAd,EAAoB;MAClB,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,UAAJ,CAAe,KAAKI,SAApB,EAA+BG,KAA/B,CAAP;EACD;;EAEDE,SAAS,CAACC,IAAD,EAAkBC,IAAlB,EAAgCC,WAAhC,EAAqD;IAC5D;IACA,MAAML,KAAK,GAAG,KAAKH,SAAL,CAAeK,SAAf,CACZ;MACEI,SAAS,EAAEd,MAAM,CAACW,IAAI,CAACG,SAAN,CADnB;MAEEC,UAAU,EAAE,KAAKV,SAAL,CAAeW,UAAf,CAA0BC,IAFxC;MAGEC,SAAS,EAAElB,MAAM,CAACW,IAAI,CAACO,SAAN,CAHnB;MAIEC,MAAM,EAAER,IAAI,CAACQ,MAJf;MAKEC,KAAK,EAAET,IAAI,CAACS;IALd,CADY,EAQZlB,SAAS,CAACO,SAAV,CAAoBG,IAApB,CARY,EASZC,WATY,CAAd;;IAWA,IAAIL,KAAK,KAAK,IAAd,EAAoB;MAClB,OAAO,IAAP;IACD;;IACD,OAAO,IAAIP,UAAJ,CAAe,KAAKI,SAApB,EAA+BG,KAA/B,CAAP;EACD;;AAhCiE"}
+{"version":3,"names":["Host","ckEnum","JsiSkImage","JsiSkData","JsiSkImageFactory","constructor","CanvasKit","MakeImageFromViewTag","viewTag","view","console","log","Promise","resolve","MakeImageFromEncoded","encoded","image","fromValue","MakeImage","info","data","bytesPerRow","alphaType","colorSpace","ColorSpace","SRGB","colorType","height","width"],"sources":["JsiSkImageFactory.ts"],"sourcesContent":["import type { CanvasKit } from \"canvaskit-wasm\";\n\nimport type { SkData, ImageInfo, SkImage } from \"../types\";\nimport type { ImageFactory } from \"../types/Image/ImageFactory\";\n\nimport { Host, ckEnum } from \"./Host\";\nimport { JsiSkImage } from \"./JsiSkImage\";\nimport { JsiSkData } from \"./JsiSkData\";\n\nexport class JsiSkImageFactory extends Host implements ImageFactory {\n  constructor(CanvasKit: CanvasKit) {\n    super(CanvasKit);\n  }\n\n  MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {\n    const view = viewTag as unknown as HTMLElement;\n    // TODO: Implement screenshot from view in React JS\n    console.log(view);\n    return Promise.resolve(null);\n  }\n\n  MakeImageFromEncoded(encoded: SkData) {\n    const image = this.CanvasKit.MakeImageFromEncoded(\n      JsiSkData.fromValue(encoded)\n    );\n    if (image === null) {\n      return null;\n    }\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n\n  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {\n    // see toSkImageInfo() from canvaskit\n    const image = this.CanvasKit.MakeImage(\n      {\n        alphaType: ckEnum(info.alphaType),\n        colorSpace: this.CanvasKit.ColorSpace.SRGB,\n        colorType: ckEnum(info.colorType),\n        height: info.height,\n        width: info.width,\n      },\n      JsiSkData.fromValue(data),\n      bytesPerRow\n    );\n    if (image === null) {\n      return null;\n    }\n    return new JsiSkImage(this.CanvasKit, image);\n  }\n}\n"],"mappings":"AAKA,SAASA,IAAT,EAAeC,MAAf,QAA6B,QAA7B;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,SAAT,QAA0B,aAA1B;AAEA,OAAO,MAAMC,iBAAN,SAAgCJ,IAAhC,CAA6D;EAClEK,WAAW,CAACC,SAAD,EAAuB;IAChC,MAAMA,SAAN;EACD;;EAEDC,oBAAoB,CAACC,OAAD,EAA2C;IAC7D,MAAMC,IAAI,GAAGD,OAAb,CAD6D,CAE7D;;IACAE,OAAO,CAACC,GAAR,CAAYF,IAAZ;IACA,OAAOG,OAAO,CAACC,OAAR,CAAgB,IAAhB,CAAP;EACD;;EAEDC,oBAAoB,CAACC,OAAD,EAAkB;IACpC,MAAMC,KAAK,GAAG,KAAKV,SAAL,CAAeQ,oBAAf,CACZX,SAAS,CAACc,SAAV,CAAoBF,OAApB,CADY,CAAd;;IAGA,IAAIC,KAAK,KAAK,IAAd,EAAoB;MAClB,OAAO,IAAP;IACD;;IACD,OAAO,IAAId,UAAJ,CAAe,KAAKI,SAApB,EAA+BU,KAA/B,CAAP;EACD;;EAEDE,SAAS,CAACC,IAAD,EAAkBC,IAAlB,EAAgCC,WAAhC,EAAqD;IAC5D;IACA,MAAML,KAAK,GAAG,KAAKV,SAAL,CAAeY,SAAf,CACZ;MACEI,SAAS,EAAErB,MAAM,CAACkB,IAAI,CAACG,SAAN,CADnB;MAEEC,UAAU,EAAE,KAAKjB,SAAL,CAAekB,UAAf,CAA0BC,IAFxC;MAGEC,SAAS,EAAEzB,MAAM,CAACkB,IAAI,CAACO,SAAN,CAHnB;MAIEC,MAAM,EAAER,IAAI,CAACQ,MAJf;MAKEC,KAAK,EAAET,IAAI,CAACS;IALd,CADY,EAQZzB,SAAS,CAACc,SAAV,CAAoBG,IAApB,CARY,EASZC,WATY,CAAd;;IAWA,IAAIL,KAAK,KAAK,IAAd,EAAoB;MAClB,OAAO,IAAP;IACD;;IACD,OAAO,IAAId,UAAJ,CAAe,KAAKI,SAApB,EAA+BU,KAA/B,CAAP;EACD;;AAvCiE"}

package/lib/typescript/globalJestSetup.d.ts

@@ -0,0 +1,2 @@
+declare function _exports(): Promise<void>;
+export = _exports;

package/lib/typescript/src/dom/nodes/drawings/Text.d.ts

@@ -8,9 +8,9 @@ export declare class TextNode extends JsiDrawingNode<TextProps, null> {
     protected deriveProps(): null;
     draw({ canvas, paint }: DrawingContext): void;
 }
-export declare class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
+export declare class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob | null> {
     constructor(ctx: NodeContext, props: TextPathProps);
-    deriveProps(): SkTextBlob;
+    deriveProps(): SkTextBlob | null;
     draw({ canvas, paint }: DrawingContext): void;
 }
 export declare class TextBlobNode extends JsiDrawingNode<TextBlobProps, null> {

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

@@ -6,7 +6,7 @@ export interface DrawingNodeProps extends GroupProps {
 }
 export declare type ImageProps = DrawingNodeProps & RectDef & {
     fit?: Fit;
-    image: SkImage;
+    image: SkImage | null;
 };
 export declare type CircleProps = CircleDef & DrawingNodeProps;
 export interface PathProps extends DrawingNodeProps {
@@ -51,7 +51,7 @@ export interface VerticesProps extends DrawingNodeProps {
     indices?: number[];
 }
 export declare type ImageSVGProps = RectDef & {
-    svg: SkSVG;
+    svg: SkSVG | null;
 } & DrawingNodeProps;
 export interface PictureProps extends DrawingNodeProps {
     picture: SkPicture;
@@ -65,13 +65,13 @@ export interface DiffRectProps extends DrawingNodeProps {
     outer: SkRRect;
 }
 export interface TextProps extends DrawingNodeProps {
-    font: SkFont;
+    font: SkFont | null;
     text: string;
     x: number;
     y: number;
 }
 export interface TextPathProps extends DrawingNodeProps {
-    font: SkFont;
+    font: SkFont | null;
     text: string;
     path: PathDef;
     initialOffset: number;
@@ -86,7 +86,7 @@ export interface Glyph {
     pos: SkPoint;
 }
 export interface GlyphsProps extends DrawingNodeProps {
-    font: SkFont;
+    font: SkFont | null;
     x: number;
     y: number;
     glyphs: Glyph[];

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

@@ -11,7 +11,7 @@ export interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
     mm: SkEnum<typeof MipmapMode>;
     fit: Fit;
     rect?: SkRect;
-    image: SkImage;
+    image: SkImage | null;
 }
 export interface ColorProps {
     color: Color;

package/lib/typescript/src/mock/index.d.ts

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

package/lib/typescript/src/skia/core/Image.d.ts

@@ -1,5 +1,17 @@
-import type { DataSourceParam } from "../types";
+/// <reference types="react" />
+import type { DataSourceParam, SkImage } from "../types";
 /**
  * Returns a Skia Image object
  * */
-export declare const useImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkImage | null;
+export declare const useImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkImage | null;
+/**
+ * Creates an image from a given view reference. NOTE: This method has different implementations
+ * on web/native. On web, the callback is called with the view ref and the callback is expected to
+ * return a promise that resolves to a Skia Image object. On native, the view ref is used to
+ * find the view tag and the Skia Image object is created from the view tag. This means that on web
+ * you will need to implement the logic to create the image from the view ref yourself.
+ * @param viewRef Ref to the view we're creating an image from
+ * @returns A promise that resolves to a Skia Image object or rejects
+ * with an error id the view tag is invalid.
+ */
+export declare const makeImageFromView: <T extends number | import("react").Component<unknown, unknown, any> | import("react").ComponentClass<unknown, any>>(viewRef: import("react").RefObject<T>, callback?: ((viewRef: import("react").RefObject<T>) => Promise<SkImage | null>) | null) => Promise<SkImage | null>;

package/lib/typescript/src/skia/types/Image/ImageFactory.d.ts

@@ -48,6 +48,13 @@ export interface ImageFactory {
      *  image, nullptr is returned.
      */
     MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
+    /**
+     * Returns an image that will be a screenshot of the view represented by
+     * the view tag
+     * @param viewTag - The tag of the view to make an image from.
+     * @returns Returns a valid SkImage, if the view tag is invalid, nullptr is returned.
+     */
+    MakeImageFromViewTag: (viewTag: number) => Promise<SkImage | null>;
     /**
      * Returns an image with the given pixel data and format.
      * Note that we will always make a copy of the pixel data, because of inconsistencies in

package/lib/typescript/src/skia/types/SVG/SVG.d.ts

@@ -1,2 +1,5 @@
 import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
-export declare type SkSVG = SkJSIInstance<"SVG"> & JsiDisposable;
+export interface SkSVG extends SkJSIInstance<"SVG">, JsiDisposable {
+    width(): number;
+    height(): number;
+}

package/lib/typescript/src/skia/web/JsiSkImageFactory.d.ts

@@ -1,10 +1,11 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkData, ImageInfo } from "../types";
+import type { SkData, ImageInfo, SkImage } from "../types";
 import type { ImageFactory } from "../types/Image/ImageFactory";
 import { Host } from "./Host";
 import { JsiSkImage } from "./JsiSkImage";
 export declare class JsiSkImageFactory extends Host implements ImageFactory {
     constructor(CanvasKit: CanvasKit);
+    MakeImageFromViewTag(viewTag: number): Promise<SkImage | null>;
     MakeImageFromEncoded(encoded: SkData): JsiSkImage | null;
     MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number): JsiSkImage | null;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.185",
+  "version": "0.1.187",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -25,6 +25,7 @@
     "libs/android/**",
     "index.js",
     "jestSetup.js",
+    "globalJestSetup.js",
     "cpp/**/*.{h,cpp}",
     "ios",
     "libs/ios/libskia.xcframework",
@@ -88,7 +89,7 @@
     "jest": "28.1.3",
     "merge-dirs": "^0.2.1",
     "react": "18.1.0",
-    "react-native": "0.71.0",
+    "react-native": "0.71.7",
     "react-native-builder-bob": "^0.18.2",
     "ts-jest": "^28.0.7",
     "typescript": "4.8.3"

package/scripts/install-npm.js

@@ -8,9 +8,10 @@ const createSymlink = (p) => {
   const srcDir = path.resolve(`./cpp/${p}`);
   const dstDir = path.resolve(`./android/cpp/${p}`);
 
-  if (!fs.existsSync(dstDir) || !fs.lstatSync(dstDir).isSymbolicLink()) {
-    fs.symlinkSync(srcDir, dstDir, "junction");
+  if (fs.existsSync(dstDir)) {
+    fs.unlinkSync(dstDir);
   }
+  fs.symlinkSync(srcDir, dstDir, "junction");
 };
 
 // Copy common cpp files from the package root to the android folder

package/src/dom/nodes/drawings/ImageNode.ts

@@ -15,6 +15,12 @@ export class ImageNode extends JsiDrawingNode<
 
   deriveProps() {
     const { image } = this.props;
+    if (!image) {
+      return {
+        src: { x: 0, y: 0, width: 0, height: 0 },
+        dst: { x: 0, y: 0, width: 0, height: 0 },
+      };
+    }
     const fit = this.props.fit ?? "contain";
     const rect = processRect(this.Skia, this.props);
     const { src, dst } = fitRects(
@@ -36,6 +42,8 @@ export class ImageNode extends JsiDrawingNode<
       throw new Error("ImageNode: src and dst are undefined");
     }
     const { src, dst } = this.derived;
-    canvas.drawImageRect(image, src, dst, paint);
+    if (image) {
+      canvas.drawImageRect(image, src, dst, paint);
+    }
   }
 }

package/src/dom/nodes/drawings/ImageSVG.ts

@@ -15,6 +15,9 @@ export class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
 
   draw({ canvas }: DrawingContext) {
     const { svg } = this.props;
+    if (!svg) {
+      return;
+    }
     const { x, y, width, height } = processRect(this.Skia, this.props);
     canvas.save();
     canvas.translate(x, y);

package/src/dom/nodes/drawings/Text.ts

@@ -22,11 +22,16 @@ export class TextNode extends JsiDrawingNode<TextProps, null> {
 
   draw({ canvas, paint }: DrawingContext) {
     const { text, x, y, font } = this.props;
-    canvas.drawText(text, x, y, paint, font);
+    if (font) {
+      canvas.drawText(text, x, y, paint, font);
+    }
   }
 }
 
-export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
+export class TextPathNode extends JsiDrawingNode<
+  TextPathProps,
+  SkTextBlob | null
+> {
   constructor(ctx: NodeContext, props: TextPathProps) {
     super(ctx, NodeType.TextPath, props);
   }
@@ -34,6 +39,9 @@ export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
   deriveProps() {
     const path = processPath(this.Skia, this.props.path);
     const { font, initialOffset } = this.props;
+    if (!font) {
+      return null;
+    }
     let { text } = this.props;
     const ids = font.getGlyphIDs(text);
     const widths = font.getGlyphWidths(ids);
@@ -117,6 +125,8 @@ export class GlyphsNode extends JsiDrawingNode<GlyphsProps, ProcessedGlyphs> {
     }
     const { glyphs, positions } = this.derived;
     const { x, y, font } = this.props;
-    canvas.drawGlyphs(glyphs, positions, x, y, font, paint);
+    if (font) {
+      canvas.drawGlyphs(glyphs, positions, x, y, font, paint);
+    }
   }
 }

package/src/dom/nodes/paint/Shaders.ts

@@ -60,6 +60,10 @@ export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
 
   decorate(ctx: DeclarationContext) {
     const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = this.props;
+    if (!image) {
+      return;
+    }
+
     const rct = getRect(this.Skia, imageShaderProps);
     const m3 = this.Skia.Matrix();
     if (rct) {

package/src/dom/types/Drawings.ts

@@ -35,7 +35,7 @@ export interface DrawingNodeProps extends GroupProps {
 export type ImageProps = DrawingNodeProps &
   RectDef & {
     fit?: Fit;
-    image: SkImage;
+    image: SkImage | null;
   };
 
 export type CircleProps = CircleDef & DrawingNodeProps;
@@ -91,7 +91,7 @@ export interface VerticesProps extends DrawingNodeProps {
 }
 
 export type ImageSVGProps = RectDef & {
-  svg: SkSVG;
+  svg: SkSVG | null;
 } & DrawingNodeProps;
 
 export interface PictureProps extends DrawingNodeProps {
@@ -109,14 +109,14 @@ export interface DiffRectProps extends DrawingNodeProps {
 }
 
 export interface TextProps extends DrawingNodeProps {
-  font: SkFont;
+  font: SkFont | null;
   text: string;
   x: number;
   y: number;
 }
 
 export interface TextPathProps extends DrawingNodeProps {
-  font: SkFont;
+  font: SkFont | null;
   text: string;
   path: PathDef;
   initialOffset: number;
@@ -134,7 +134,7 @@ export interface Glyph {
 }
 
 export interface GlyphsProps extends DrawingNodeProps {
-  font: SkFont;
+  font: SkFont | null;
   x: number;
   y: number;
   glyphs: Glyph[];

package/src/dom/types/Shaders.ts

@@ -30,7 +30,7 @@ export interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
   mm: SkEnum<typeof MipmapMode>;
   fit: Fit;
   rect?: SkRect;
-  image: SkImage;
+  image: SkImage | null;
 }
 
 export interface ColorProps {

package/src/mock/index.ts

@@ -1,102 +1,39 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CanvasKit } from "canvaskit-wasm";
 
-import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
-import * as Values from "../values/web";
-import * as ValuesHooks from "../values/hooks";
-import { Selector } from "../values/selector";
-import * as BaseSkia from "../skia/types";
-import type * as SkiaExports from "../skia";
-import type * as ValueExports from "../values";
-import type * as AnimationExports from "../animation";
-import * as timingFunctions from "../animation/timing";
-import * as springFunctions from "../animation/spring";
-import * as decayFunctions from "../animation/decay";
-import * as interpolateFn from "../animation/functions/interpolate";
-import * as interpolatePathFn from "../animation/functions/interpolatePaths";
-import * as interpolateVectorFn from "../animation/functions/interpolateVector";
-import { ShaderLib } from "../renderer/components/shaders/ShaderLib";
+import { JsiSkApi } from "../skia/web";
+import { ValueApi } from "../values/web";
 
-class Stub {
-  constructor() {
-    return new Proxy(() => {}, {
-      get: () => new Stub(),
-      apply: () => new Stub(),
-      set: () => true,
-    });
-  }
-}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Noop: () => any = () => undefined;
+const NoopValue = () => ({ current: 0 });
 
-const Noop: () => any = () => {};
-
-export const Skia: SkiaApi = new Stub() as any;
-
-export const vec = (x?: number, y?: number) => ({ x: x ?? 0, y: y ?? x ?? 0 });
-
-export const Mock: typeof SkiaExports &
-  typeof ValueExports &
-  typeof AnimationExports & {
-    createDrawing: () => any;
-    createDeclaration: () => any;
-    ShaderLib: typeof ShaderLib;
-  } = {
-  // SkiaExports
-  // 1. Skia API. BaseSkia contains the enums, and functions like isPaint etc
-  Skia,
-  ...BaseSkia,
-  // 2. Hooks
-  useRawData: Noop,
-  useData: Noop,
-  useFont: Noop,
-  useTypeface: Noop,
-  useImage: Noop,
-  useSVG: Noop,
-  createPicture: Noop,
-  // 3. Point/Rect/Transform utilities
-  vec,
-  rect: (x: number, y: number, width: number, height: number) => ({
-    x,
-    y,
-    width,
-    height,
-  }),
-  rrect: (r: SkRect, rx: number, ry: number) => ({
-    rect: r,
-    rx,
-    ry,
-  }),
-  point: vec,
-  add: (a: Vector, b: Vector) => vec(a.x + b.x, a.y + b.y),
-  sub: (a: Vector, b: Vector) => vec(a.x - b.x, a.y - b.y),
-  neg: (a: Vector) => vec(-a.x, -a.y),
-  dist: (a: Vector, b: Vector) => Math.hypot(a.x - b.x, a.y - b.y),
-  translate: ({ x, y }: Vector) =>
-    [{ translateX: x }, { translateY: y }] as const,
-
-  bounds: Noop,
-  topLeft: Noop,
-  topRight: Noop,
-  bottomLeft: Noop,
-  bottomRight: Noop,
-  center: Noop,
-  processTransform2d: Noop,
-  // ValueExports
-  ...Values,
-  ...ValuesHooks,
-  Selector,
-  // Animations
-  ...timingFunctions,
-  ...springFunctions,
-  ...decayFunctions,
-  ...interpolateFn,
-  ...interpolatePathFn,
-  ...interpolateVectorFn,
-  interpolateColors: (
-    _value: number,
-    _inputRange: number[],
-    _outputRange: Color[]
-  ) => Float32Array.of(0, 0, 0, 0),
-  mixColors: (_v: number, _x: Color, _y: Color) => Float32Array.of(0, 0, 0, 0),
-  ShaderLib,
-  createDrawing: Noop,
-  createDeclaration: Noop,
+export const Mock = (CanvasKit: CanvasKit) => {
+  global.SkiaApi = JsiSkApi(CanvasKit);
+  global.SkiaValueApi = ValueApi;
+  const Skia = global.SkiaApi;
+  return {
+    Skia,
+    ...require("../renderer/components"),
+    ...require("../skia"),
+    ...require("../values"),
+    ...require("../animation"),
+    ...require("../dom/types"),
+    ...require("../dom/nodes"),
+    // We could use the real Canvas if we mock the SkiaView component for node
+    Canvas: Noop,
+    useValue: NoopValue,
+    useComputedValue: NoopValue,
+    useTouchHandler: Noop,
+    useTiming: NoopValue,
+    useLoop: NoopValue,
+    useSpring: NoopValue,
+    useClockValue: NoopValue,
+    useValueEffect: Noop,
+    useRawData: Noop,
+    useData: Noop,
+    useFont: () => Skia.Font(undefined, 0),
+    useTypeface: () => null,
+    useImage: () => null,
+    useSVG: () => null,
+  };
 };

package/src/skia/core/Image.ts

@@ -1,5 +1,7 @@
+import { findNodeHandle, Platform } from "react-native";
+
 import { Skia } from "../Skia";
-import type { DataSourceParam } from "../types";
+import type { DataSourceParam, SkImage } from "../types";
 
 import { useRawData } from "./Data";
 
@@ -12,3 +14,43 @@ export const useImage = (
   source: DataSourceParam,
   onError?: (err: Error) => void
 ) => useRawData(source, imgFactory, onError);
+
+/**
+ * Creates an image from a given view reference. NOTE: This method has different implementations
+ * on web/native. On web, the callback is called with the view ref and the callback is expected to
+ * return a promise that resolves to a Skia Image object. On native, the view ref is used to
+ * find the view tag and the Skia Image object is created from the view tag. This means that on web
+ * you will need to implement the logic to create the image from the view ref yourself.
+ * @param viewRef Ref to the view we're creating an image from
+ * @returns A promise that resolves to a Skia Image object or rejects
+ * with an error id the view tag is invalid.
+ */
+export const makeImageFromView = <
+  T extends
+    | number
+    | React.Component<unknown, unknown>
+    | React.ComponentClass<unknown>
+>(
+  viewRef: React.RefObject<T>,
+  callback:
+    | null
+    | ((viewRef: React.RefObject<T>) => Promise<SkImage | null>) = null
+) => {
+  // In web implementation we just delegate the work to the provided callback
+  if (Platform.OS === "web") {
+    if (callback) {
+      return callback(viewRef);
+    } else {
+      Promise.reject(
+        new Error(
+          "Callback is required on web in the makeImageFromView function."
+        )
+      );
+    }
+  }
+  const viewTag = findNodeHandle(viewRef.current);
+  if (viewTag !== null && viewTag !== 0) {
+    return Skia.Image.MakeImageFromViewTag(viewTag);
+  }
+  return Promise.reject(new Error("Invalid view tag"));
+};

package/src/skia/types/Image/ImageFactory.ts

@@ -63,6 +63,14 @@ export interface ImageFactory {
    */
   MakeImageFromEncoded: (encoded: SkData) => SkImage | null;
 
+  /**
+   * Returns an image that will be a screenshot of the view represented by
+   * the view tag
+   * @param viewTag - The tag of the view to make an image from.
+   * @returns Returns a valid SkImage, if the view tag is invalid, nullptr is returned.
+   */
+  MakeImageFromViewTag: (viewTag: number) => Promise<SkImage | null>;
+
   /**
    * Returns an image with the given pixel data and format.
    * Note that we will always make a copy of the pixel data, because of inconsistencies in