@shopify/react-native-skia 0.1.185 → 0.1.186

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

@@ -99,4 +99,5 @@ export const Mock: typeof SkiaExports &
   ShaderLib,
   createDrawing: Noop,
   createDeclaration: Noop,
+  makeImageFromView: Noop,
 };

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

package/src/skia/types/SVG/SVG.ts

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

package/src/skia/web/JsiSkImageFactory.ts

@@ -1,6 +1,6 @@
 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, ckEnum } from "./Host";
@@ -12,6 +12,13 @@ export class JsiSkImageFactory extends Host implements ImageFactory {
     super(CanvasKit);
   }
 
+  MakeImageFromViewTag(viewTag: number): Promise<SkImage | null> {
+    const view = viewTag as unknown as HTMLElement;
+    // TODO: Implement screenshot from view in React JS
+    console.log(view);
+    return Promise.resolve(null);
+  }
+
   MakeImageFromEncoded(encoded: SkData) {
     const image = this.CanvasKit.MakeImageFromEncoded(
       JsiSkData.fromValue(encoded)