@shopify/react-native-skia 0.1.190 → 0.1.192

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -8,5 +8,5 @@ export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
     readonly __typename__ = "RNSkValue";
     get current(): T;
     addListener(cb: (value: T) => void): () => void;
-    __invalidate(): void;
+    dispose(): void;
 }

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

@@ -2,6 +2,7 @@ import type { ViewProps } from "react-native";
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
 import type { SkiaMutableValue, SkiaValue } from "../values";
+import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
@@ -70,7 +71,7 @@ export interface SkiaBaseViewProps extends ViewProps {
      * Pass an animated value to the onSize property to get updates when
      * the Skia view is resized.
      */
-    onSize?: SkiaMutableValue<SkSize>;
+    onSize?: SkiaMutableValue<SkSize> | SharedValueType<SkSize>;
 }
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.190",
+  "version": "0.1.192",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -76,6 +76,9 @@
   "peerDependenciesMeta": {
     "react-native-reanimated": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
     }
   },
   "devDependencies": {

package/scripts/install-npm.js

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

package/src/Platform/Platform.web.tsx

@@ -99,7 +99,7 @@ const View = (({ children, onLayout, style: rawStyle }: ViewProps) => {
     return {
       ...style,
       display: "flex",
-      flexDirection: style.flexDirection || "column",
+      flexDirection: style.flexDirection || "inherit",
       flexWrap: style.flexWrap || "nowrap",
       justifyContent: style.justifyContent || "flex-start",
       alignItems: style.alignItems || "stretch",

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

@@ -1,26 +1,37 @@
 import type { DrawingContext, ImageSVGProps } from "../../types";
 import { NodeType } from "../../types";
-import { processRect } from "../datatypes";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
-export class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
+export class ImageSVGNode extends JsiDrawingNode<
+  ImageSVGProps,
+  Pick<ImageSVGProps, "x" | "y" | "width" | "height">
+> {
   constructor(ctx: NodeContext, props: ImageSVGProps) {
     super(ctx, NodeType.ImageSVG, props);
   }
 
   deriveProps() {
-    return null;
+    if (this.props.rect) {
+      return this.props.rect;
+    }
+    const { x, y, width, height } = this.props;
+    return { x, y, width, height };
   }
 
   draw({ canvas }: DrawingContext) {
     const { svg } = this.props;
-    if (!svg) {
+    if (!this.derived) {
+      throw new Error("ImageSVGNode: derived props unresolved");
+    }
+    const { x, y, width, height } = this.derived;
+    if (svg === null) {
       return;
     }
-    const { x, y, width, height } = processRect(this.Skia, this.props);
     canvas.save();
-    canvas.translate(x, y);
+    if (x && y) {
+      canvas.translate(x, y);
+    }
     canvas.drawSvg(svg, width, height);
     canvas.restore();
   }

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

@@ -1,3 +1,4 @@
+import { saturate } from "../../../renderer/processors/math";
 import { FillType } from "../../../skia/types";
 import type { SkPath } from "../../../skia/types";
 import type { DrawingContext, PathProps } from "../../types";
@@ -12,7 +13,15 @@ export class PathNode extends JsiDrawingNode<PathProps, SkPath> {
   }
 
   protected deriveProps() {
-    const { start, end, fillType, stroke, ...pathProps } = this.props;
+    const {
+      start: trimStart,
+      end: trimEnd,
+      fillType,
+      stroke,
+      ...pathProps
+    } = this.props;
+    const start = saturate(trimStart);
+    const end = saturate(trimEnd);
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;

package/src/dom/types/Drawings.ts

@@ -90,9 +90,14 @@ export interface VerticesProps extends DrawingNodeProps {
   indices?: number[];
 }
 
-export type ImageSVGProps = RectDef & {
+export interface ImageSVGProps extends DrawingNodeProps {
   svg: SkSVG | null;
-} & DrawingNodeProps;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rect?: SkRect;
+}
 
 export interface PictureProps extends DrawingNodeProps {
   picture: SkPicture;

package/src/renderer/Canvas.tsx

@@ -17,9 +17,11 @@ import { Skia } from "../skia/Skia";
 import type { TouchHandler, SkiaBaseViewProps } from "../views";
 import type { SkiaValue } from "../values/types";
 import { JsiDrawingContext } from "../dom/types";
+import { useValue } from "../values";
 
 import { SkiaRoot } from "./Reconciler";
 import { NATIVE_DOM } from "./HostComponents";
+import { isValue } from "./processors";
 
 export const useCanvasRef = () => useRef<SkiaDomView>(null);
 
@@ -31,9 +33,27 @@ export interface CanvasProps extends SkiaBaseViewProps {
 
 export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
   (
-    { children, style, debug, mode, onTouch, onSize, ...props },
+    {
+      children,
+      style,
+      debug,
+      mode,
+      onTouch,
+      onSize: onSizeReanimatedOrSkia,
+      ...props
+    },
     forwardedRef
   ) => {
+    const size = useValue({ width: 0, height: 0 });
+    const onSize = isValue(onSizeReanimatedOrSkia)
+      ? onSizeReanimatedOrSkia
+      : size;
+    useEffect(() => {
+      if (!isValue(onSizeReanimatedOrSkia) && onSizeReanimatedOrSkia) {
+        return size.addListener((v) => (onSizeReanimatedOrSkia.value = v));
+      }
+      return undefined;
+    }, [onSizeReanimatedOrSkia, size]);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const redraw = useCallback(() => {

package/src/renderer/processors/math/Math.ts

@@ -24,3 +24,8 @@ export const clamp = (
   "worklet";
   return Math.min(Math.max(lowerBound, value), upperBound);
 };
+
+export const saturate = (value: number) => {
+  "worklet";
+  return clamp(value, 0, 1);
+};

package/src/skia/core/Data.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSourceParam, JsiDisposable } from "../types";
+import type { SkData, DataSourceParam, BaseSkJSIInstance } from "../types";
 import { Platform } from "../../Platform";
 
 const factoryWrapper = <T>(
@@ -37,7 +37,7 @@ const loadData = <T>(
     );
   }
 };
-const useLoading = <T extends JsiDisposable>(
+const useLoading = <T extends BaseSkJSIInstance>(
   source: DataSourceParam,
   loader: () => Promise<T | null>
 ) => {
@@ -61,7 +61,7 @@ const useLoading = <T extends JsiDisposable>(
   return data;
 };
 
-export const useRawData = <T extends JsiDisposable>(
+export const useRawData = <T extends BaseSkJSIInstance>(
   source: DataSourceParam,
   factory: (data: SkData) => T | null,
   onError?: (err: Error) => void

package/src/skia/types/Data/Data.ts

@@ -1,6 +1,6 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export type SkData = SkJSIInstance<"Data"> & JsiDisposable;
+export type SkData = SkJSIInstance<"Data">;
 
 type RNModule = number;
 type ESModule = {

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

@@ -1,5 +1,5 @@
 import type { SkMatrix } from "../Matrix";
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 import type { TileMode } from "../ImageFilter";
 import type { SkShader } from "../Shader";
 
@@ -20,7 +20,7 @@ export enum ImageFormat {
   WEBP = 6,
 }
 
-export interface SkImage extends SkJSIInstance<"Image">, JsiDisposable {
+export interface SkImage extends SkJSIInstance<"Image"> {
   /**
    * Returns the possibly scaled height of the image.
    */

package/src/skia/types/JsiInstance.ts

@@ -1,7 +1,7 @@
-export interface SkJSIInstance<T extends string> {
-  __typename__: T;
+export interface BaseSkJSIInstance {
+  dispose: () => void;
 }
 
-export interface JsiDisposable {
-  dispose: () => void;
+export interface SkJSIInstance<T extends string> extends BaseSkJSIInstance {
+  __typename__: T;
 }

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

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

package/src/skia/types/Typeface/Typeface.ts

@@ -1,3 +1,3 @@
-import type { JsiDisposable, SkJSIInstance } from "../JsiInstance";
+import type { SkJSIInstance } from "../JsiInstance";
 
-export type SkTypeface = SkJSIInstance<"Typeface"> & JsiDisposable;
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/skia/web/Host.ts

@@ -28,6 +28,8 @@ export abstract class BaseHostObject<T, N extends string>
     this.ref = ref;
     this.__typename__ = typename;
   }
+
+  abstract dispose: () => void;
 }
 
 export abstract class HostObject<T, N extends string> extends BaseHostObject<

package/src/skia/web/JsiSkCanvas.ts

@@ -46,6 +46,10 @@ export class JsiSkCanvas
     super(CanvasKit, ref, "Canvas");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   drawRect(rect: SkRect, paint: SkPaint) {
     this.ref.drawRect(
       JsiSkRect.fromValue(this.CanvasKit, rect),

package/src/skia/web/JsiSkColorFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkColorFilter
   constructor(CanvasKit: CanvasKit, ref: ColorFilter) {
     super(CanvasKit, ref, "ColorFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkContourMeasure.ts

@@ -36,4 +36,8 @@ export class JsiSkContourMeasure
   length() {
     return this.ref.length();
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkContourMeasureIter.ts

@@ -20,4 +20,8 @@ export class JsiSkContourMeasureIter
     }
     return new JsiSkContourMeasure(this.CanvasKit, result);
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkData.ts

@@ -11,7 +11,7 @@ export class JsiSkData extends HostObject<Data, "Data"> implements SkData {
     super(CanvasKit, ref, "Data");
   }
 
-  dispose() {
-    // Not implemented in data
-  }
+  dispose = () => {
+    // Not implemented in data - since data is a raw ArrayBuffer
+  };
 }

package/src/skia/web/JsiSkFont.ts

@@ -20,6 +20,10 @@ export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
     super(CanvasKit, ref, "Font");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   getTextWidth(text: string, paint?: SkPaint | undefined) {
     const ids = this.getGlyphIDs(text);
     const widths = this.getGlyphWidths(ids, paint);

package/src/skia/web/JsiSkImage.ts

@@ -110,9 +110,9 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
     return toBase64String(bytes);
   }
 
-  dispose() {
+  dispose = () => {
     this.ref.delete();
-  }
+  };
 
   makeNonTextureImage(): SkImage {
     return new JsiSkImage(

package/src/skia/web/JsiSkImageFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkImageFilter
   constructor(CanvasKit: CanvasKit, ref: ImageFilter) {
     super(CanvasKit, ref, "ImageFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkMaskFilter.ts

@@ -11,4 +11,8 @@ export class JsiSkMaskFilter
   constructor(CanvasKit: CanvasKit, ref: MaskFilter) {
     super(CanvasKit, ref, "MaskFilter");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkMatrix.ts

@@ -12,6 +12,10 @@ export class JsiSkMatrix
     super(CanvasKit, ref, "Matrix");
   }
 
+  dispose = () => {
+    // Do nothing - the matrix is represenetd by a Float32Array
+  };
+
   concat(matrix: SkMatrix) {
     this.ref.set(
       this.CanvasKit.Matrix.multiply(this.ref, JsiSkMatrix.fromValue(matrix))

package/src/skia/web/JsiSkPaint.ts

@@ -26,6 +26,10 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     super(CanvasKit, ref, "Paint");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   copy() {
     return new JsiSkPaint(this.CanvasKit, this.ref.copy());
   }

package/src/skia/web/JsiSkPath.ts

@@ -33,6 +33,10 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     super(CanvasKit, ref, "Path");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   addPath(src: SkPath, matrix?: SkMatrix, extend = false) {
     const args = [
       JsiSkPath.fromValue(src),

package/src/skia/web/JsiSkPathEffect.ts

@@ -11,4 +11,8 @@ export class JsiSkPathEffect
   constructor(CanvasKit: CanvasKit, ref: PathEffect) {
     super(CanvasKit, ref, "PathEffect");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkPicture.ts

@@ -22,6 +22,10 @@ export class JsiSkPicture
     super(CanvasKit, ref, "Picture");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   makeShader(
     tmx: TileMode,
     tmy: TileMode,

package/src/skia/web/JsiSkPictureRecorder.ts

@@ -16,6 +16,10 @@ export class JsiSkPictureRecorder
     super(CanvasKit, ref, "PictureRecorder");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   beginRecording(bounds: SkRect) {
     return new JsiSkCanvas(
       this.CanvasKit,

package/src/skia/web/JsiSkPoint.ts

@@ -19,6 +19,10 @@ export class JsiSkPoint
     super(CanvasKit, ref, "Point");
   }
 
+  dispose = () => {
+    // Float32Array
+  };
+
   get x() {
     return this.ref[0];
   }

package/src/skia/web/JsiSkRRect.ts

@@ -9,6 +9,10 @@ export class JsiSkRRect
   extends BaseHostObject<RRect, "RRect">
   implements SkRRect
 {
+  dispose = () => {
+    // Float32Array
+  };
+
   static fromValue(CanvasKit: CanvasKit, rect: SkRRect) {
     if (rect instanceof JsiSkRect) {
       return rect.ref;

package/src/skia/web/JsiSkRSXform.ts

@@ -13,4 +13,8 @@ export class JsiSkRSXform
   constructor(CanvasKit: CanvasKit, ref: RSXform) {
     super(CanvasKit, ref, "RSXform");
   }
+
+  dispose = () => {
+    // Do nothing in the web implementation
+  };
 }

package/src/skia/web/JsiSkRect.ts

@@ -12,6 +12,10 @@ export class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
     return CanvasKit.XYWHRect(rect.x, rect.y, rect.width, rect.height);
   }
 
+  dispose = () => {
+    // Float32Array
+  };
+
   constructor(CanvasKit: CanvasKit, ref: Rect) {
     super(CanvasKit, ref, "Rect");
   }

package/src/skia/web/JsiSkRuntimeEffect.ts

@@ -15,6 +15,10 @@ export class JsiSkRuntimeEffect
     super(CanvasKit, ref, "RuntimeEffect");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   source() {
     return this.sksl;
   }

package/src/skia/web/JsiSkShader.ts

@@ -11,4 +11,8 @@ export class JsiSkShader
   constructor(CanvasKit: CanvasKit, ref: Shader) {
     super(CanvasKit, ref, "Shader");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkSurface.ts

@@ -15,6 +15,10 @@ export class JsiSkSurface
     super(CanvasKit, ref, "Surface");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   flush() {
     this.ref.flush();
   }

package/src/skia/web/JsiSkTextBlob.ts

@@ -11,4 +11,8 @@ export class JsiSkTextBlob
   constructor(CanvasKit: CanvasKit, ref: TextBlob) {
     super(CanvasKit, ref, "TextBlob");
   }
+
+  dispose = () => {
+    this.ref.delete();
+  };
 }

package/src/skia/web/JsiSkTypeface.ts

@@ -26,7 +26,7 @@ export class JsiSkTypeface
     return false;
   }
 
-  dispose() {
+  dispose = () => {
     this.ref.delete();
-  }
+  };
 }

package/src/skia/web/JsiSkVertices.ts

@@ -13,6 +13,10 @@ export class JsiSkVertices
     super(CanvasKit, ref, "Vertices");
   }
 
+  dispose = () => {
+    this.ref.delete();
+  };
+
   bounds() {
     return new JsiSkRect(this.CanvasKit, this.ref.bounds());
   }

package/src/values/hooks/useComputedValue.ts

@@ -16,6 +16,6 @@ export const useComputedValue = <R>(cb: () => R, values: unknown[]) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     values
   );
-  useEffect(() => () => value.__invalidate(), [value]);
+  useEffect(() => () => value.dispose(), [value]);
   return value;
 };

package/src/values/types.ts

@@ -11,7 +11,7 @@ export interface SkiaValue<T = number> {
   /**
    * Invalidates the value. Has different meaning depending on the type of the value.
    */
-  __invalidate: () => void;
+  dispose: () => void;
   /**
    * Field to make typechecking easier
    */

package/src/values/web/RNSkComputedValue.ts

@@ -42,7 +42,7 @@ export class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     this._unsubscribers = [];
   }
 
-  public __invalidate(): void {
+  public dispose(): void {
     this._unsubscribers.forEach((unsubscribe) => unsubscribe());
     this._unsubscribers = [];
   }

package/src/values/web/RNSkReadonlyValue.ts

@@ -32,7 +32,7 @@ export class RNSkReadonlyValue<T> implements SkiaValue<T> {
     };
   }
 
-  public __invalidate(): void {
+  public dispose(): void {
     this._listeners = [];
   }
 }

package/src/views/SkiaBaseWebView.tsx

@@ -77,11 +77,16 @@ export abstract class SkiaBaseWebView<
   componentWillUnmount() {
     this.unsubscribeAll();
     cancelAnimationFrame(this.requestId);
+    // eslint-disable-next-line max-len
+    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
     // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
-    this._canvasRef.current
-      ?.getContext("webgl2")
-      ?.getExtension("WEBGL_lose_context")
-      ?.loseContext();
+    // We delete the context, only if the context has been intialized
+    if (this._surface) {
+      this._canvasRef.current
+        ?.getContext("webgl2")
+        ?.getExtension("WEBGL_lose_context")
+        ?.loseContext();
+    }
   }
 
   /**