@shopify/react-native-skia 0.1.121 → 0.1.124

package/lib/typescript/src/skia/Skia.d.ts

@@ -10,8 +10,6 @@ import type { SkRect } from "./Rect";
 import type { SkRRect } from "./RRect";
 import type { RuntimeEffectFactory } from "./RuntimeEffect";
 import type { ShaderFactory } from "./Shader";
-import type { SkColor } from "./Color";
-import { processColor } from "./Color";
 import type { SkMatrix } from "./Matrix";
 import type { PathEffectFactory } from "./PathEffect";
 import type { SkPoint } from "./Point";
@@ -26,6 +24,7 @@ import type { SkRSXform } from "./RSXform";
 import type { SkPath } from "./Path/Path";
 import type { SkContourMeasureIter } from "./ContourMeasure";
 import type { PictureFactory, SkPictureRecorder } from "./Picture";
+import type { Color, SkColor } from "./Color";
 /**
  * Declares the interface for the native Skia API
  */
@@ -34,6 +33,8 @@ export interface Skia {
     XYWHRect: (x: number, y: number, width: number, height: number) => SkRect;
     RRectXY: (rect: SkRect, rx: number, ry: number) => SkRRect;
     RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
+    Color: (color: Color) => SkColor;
+    parseColorString: (color: string) => SkColor | undefined;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;
     Paint: () => SkPaint;
     PictureRecorder: () => SkPictureRecorder;
@@ -97,7 +98,8 @@ export declare const Skia: {
     Path: PathFactory;
     ColorFilter: ColorFilterFactory;
     ContourMeasureIter: (path: SkPath, forceClosed: boolean, resScale: number) => SkContourMeasureIter;
-    Color: (color: Parameters<typeof processColor>[0]) => number;
+    Color: (cl: Color) => number;
+    parseColorString: (color: string) => SkColor | undefined;
     RSXform: (scos: number, ssin: number, tx: number, ty: number) => SkRSXform;
     MakeSurface: (width: number, height: number) => import("./Surface").ISurface | null;
     MakeImageFromEncoded: (encoded: import("./Data").Data) => import("./Image").SkImage | null;

package/lib/typescript/src/values/animation/types.d.ts

@@ -1,11 +1,11 @@
 export interface SpringConfig {
-    mass: number;
-    stiffness: number;
-    damping: number;
-    velocity: number;
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    velocity?: number;
 }
 export interface TimingConfig {
-    duration: number;
+    duration?: number;
     easing?: (t: number) => number;
 }
 export interface AnimationParams {

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.121",
+  "version": "0.1.124",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/scripts/install-npm.js

@@ -9,7 +9,7 @@ const createSymlink = (p) => {
   const dstDir = path.resolve(`./android/cpp/${p}`);
 
   if (!fs.existsSync(dstDir) || !fs.lstatSync(dstDir).isSymbolicLink()) {
-    fs.symlinkSync(srcDir, dstDir, "dir");
+    fs.symlinkSync(srcDir, dstDir, "junction");
   }
 };
 

package/src/renderer/Canvas.tsx

@@ -23,6 +23,7 @@ import { Skia } from "../skia";
 import type { FontMgr } from "../skia/FontMgr/FontMgr";
 import { useValue } from "../values/hooks/useValue";
 import type { SkiaReadonlyValue } from "../values/types";
+import { SkiaPaint } from "../skia/Paint/Paint";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -35,12 +36,19 @@ const CanvasContext = React.createContext<SkiaReadonlyValue<{
   height: number;
 }> | null>(null);
 
-export const useCanvasSize = () => {
-  const canvas = useContext(CanvasContext);
-  if (!canvas) {
+export const useCanvas = () => {
+  const size = useContext(CanvasContext);
+  if (!size) {
     throw new Error("Canvas context is not available");
   }
-  return canvas;
+  return { size };
+};
+
+export const useCanvasSize = () => {
+  console.warn(
+    "useCanvasSize is deprecated, use the size member of useCanvas() instead."
+  );
+  return useCanvas().size;
 };
 
 export const skiaReconciler = ReactReconciler(skHostConfig);
@@ -112,8 +120,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.current = { width, height };
         }
-        const paint = Skia.Paint();
-        paint.setAntiAlias(true);
+        const paint = SkiaPaint();
         const ctx = {
           width,
           height,

package/src/renderer/components/Paint.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
 import type { SkPaint } from "../../skia";
-import { Skia } from "../../skia";
+import { SkiaPaint } from "../../skia";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
@@ -15,7 +15,7 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
 
 export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
   (props, ref) => {
-    const paint = useMemo(() => Skia.Paint(), []);
+    const paint = useMemo(() => SkiaPaint(), []);
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>

package/src/renderer/components/colorFilters/Lerp.tsx

@@ -15,7 +15,7 @@ export interface LerpProps {
 
 const onDeclare = createDeclaration<LerpProps>(({ t }, children) => {
   const [src, dst] = children.filter(isColorFilter);
-  const cf = Skia.ColorFilter.MakeLerp(t, dst, src);
+  const cf = Skia.ColorFilter.MakeLerp(t, src, dst);
   return composeColorFilter(
     cf,
     children.filter((c) => c !== src && c !== dst)

package/src/renderer/components/shaders/Shader.tsx

@@ -7,8 +7,8 @@ import type { Vector, AnimatedProps, TransformProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
 import { localMatrix } from "../../processors";
 
-// We need to use any here because hasOwnProperty doesn't work on JSI instances
 const isVector = (obj: unknown): obj is Vector =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (obj as any).x !== undefined && (obj as any).y !== undefined;
 

package/src/renderer/components/shapes/Path.tsx

@@ -4,9 +4,11 @@ import type {
   CustomPaintProps,
   AnimatedProps,
   PathDef,
+  SkEnum,
 } from "../../processors";
 import { createDrawing } from "../../nodes";
-import { processPath } from "../../processors";
+import { processPath, enumKey } from "../../processors";
+import { FillType } from "../../../skia";
 
 interface StrokeOpts {
   width?: number;
@@ -19,16 +21,22 @@ export interface PathProps extends CustomPaintProps {
   start: number;
   end: number;
   stroke?: StrokeOpts;
+  fillType?: SkEnum<typeof FillType>;
 }
 
 const onDraw = createDrawing<PathProps>(
-  ({ canvas, paint }, { start, end, stroke, ...pathProps }) => {
+  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {
     const hasStartOffset = start !== 0;
-    const hasEndOffset = start !== 1;
+    const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;
-    const willMutatePath = hasStartOffset || hasEndOffset || hasStrokeOptions;
+    const hasFillType = !!fillType;
+    const willMutatePath =
+      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
     const pristinePath = processPath(pathProps.path);
     const path = willMutatePath ? pristinePath.copy() : pristinePath;
+    if (hasFillType) {
+      path.setFillType(FillType[enumKey(fillType)]);
+    }
     if (hasStrokeOptions) {
       path.stroke(stroke);
     }

package/src/renderer/nodes/Node.ts

@@ -40,7 +40,9 @@ export abstract class Node<P = unknown> {
   visit(ctx: DrawingContext, children?: Node[]) {
     const returnedValues: Exclude<DeclarationResult, null>[] = [];
     (children ?? this.children).forEach((child) => {
-      if (!child.memoized) {
+      if (child.memoized && child.memoizable) {
+        returnedValues.push(child.memoized);
+      } else {
         const ret = child.draw(ctx);
         if (ret) {
           returnedValues.push(ret);
@@ -48,8 +50,6 @@ export abstract class Node<P = unknown> {
             child.memoized = ret;
           }
         }
-      } else {
-        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/src/renderer/processors/Circles.ts

@@ -15,8 +15,9 @@ interface ScalarCircleDef {
 export type CircleDef = PointCircleDef | ScalarCircleDef;
 
 const isCircleScalarDef = (def: CircleDef): def is ScalarCircleDef =>
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (def as any).cx;
+  (def as any).cx !== undefined;
 export const processCircle = (def: CircleDef) => {
   if (isCircleScalarDef(def)) {
     return { c: vec(def.cx, def.cy), r: def.r };

package/src/renderer/processors/Font.ts

@@ -5,7 +5,7 @@ import type { FontMgr } from "../../skia/FontMgr/FontMgr";
 export type FontDef = { font: SkFont } | { familyName: string; size: number };
 
 export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
-  // We use any here for safety (JSI instances don't have hasProperty working properly);
+  // We have an issue to check property existence on JSI backed instances
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (fontDef as any).font !== undefined;
 

package/src/renderer/processors/Paint.ts

@@ -32,6 +32,7 @@ export interface CustomPaintProps extends ChildrenProps {
   strokeCap?: SkEnum<typeof StrokeCap>;
   strokeMiter?: number;
   opacity?: number;
+  antiAlias?: boolean;
 }
 
 export const enumKey = <K extends string>(k: K) =>
@@ -50,6 +51,7 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
+    antiAlias,
   }: CustomPaintProps,
   children: DeclarationResult[]
 ) => {
@@ -85,6 +87,9 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
+  if (antiAlias !== undefined) {
+    paint.setAntiAlias(antiAlias);
+  }
   children.forEach((child) => {
     if (isShader(child)) {
       paint.setShader(child);

package/src/renderer/processors/Rects.ts

@@ -1,5 +1,3 @@
-// Here we use any because hasOwnProperty doesn't work on JSI instances not does the (key in obj) syntax
-// And using Object.keys for such use-case is incredibly slow
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { SkRect, SkRRect } from "../../skia";
 
@@ -47,10 +45,13 @@ export const center = (r: SkRect | SkRRect) =>
     ? vec(r.rect.x + r.rect.width / 2, r.rect.y + r.rect.height / 2)
     : vec(r.x + r.width / 2, r.y + r.height / 2);
 
+// We have an issue to check property existence on JSI backed instances
 const isRRectCtor = (def: RRectDef): def is RRectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 const isRectCtor = (def: RectDef): def is RectCtor =>
   (def as any).rect === undefined;
+// We have an issue to check property existence on JSI backed instances
 export const isRRect = (def: SkRect | SkRRect): def is SkRRect =>
   (def as any).rect !== undefined;
 

package/src/skia/Color.ts

@@ -1,8 +1,8 @@
-import { Platform, processColor as processColorRN } from "react-native";
+import { Skia } from "./Skia";
 
 // This is the JSI color. Currently a number. This may change.
 export type SkColor = number;
-
+// Input colors can be string or number
 export type Color = string | number;
 
 export const alphaf = (c: number) => ((c >> 24) & 255) / 255;
@@ -14,25 +14,8 @@ export const rgbaColor = (r: number, g: number, b: number, af: number) => {
   return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
 };
 
-export const processColorAsInt = (color?: number | string): SkColor => {
-  let processedColor = processColorRN(color);
-  if (typeof processedColor !== "number") {
-    throw new Error(`Couldn't process color: ${color}`);
-  }
-  // On android we need to move the alpha byte to the start of the structure
-  if (Platform.OS === "android") {
-    processedColor = processedColor >>> 0;
-    const a = (processedColor >> 24) & 0xff;
-    const r = (processedColor >> 16) & 0xff;
-    const g = (processedColor >> 8) & 0xff;
-    const b = processedColor & 0xff;
-    processedColor = ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
-  }
-  return processedColor;
-};
-
 const processColorAsArray = (cl: Color) => {
-  const icl = typeof cl === "string" ? processColorAsInt(cl) : cl;
+  const icl = typeof cl === "string" ? Skia.Color(cl) : cl;
   const r = red(icl);
   const g = green(icl);
   const b = blue(icl);

package/src/skia/Image/Image.ts

@@ -1,5 +1,5 @@
 import type { TileMode } from "../ImageFilter";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
 import type { SkJSIInstance } from "../JsiInstance";
 
@@ -46,7 +46,7 @@ export interface SkImage extends SkJSIInstance<"Image"> {
     fm: FilterMode,
     mm: MipmapMode,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns this image as a shader with the specified tiling. It will use cubic sampling.
@@ -62,7 +62,7 @@ export interface SkImage extends SkJSIInstance<"Image"> {
     B: number,
     C: number,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /** Encodes Image pixels, returning result as UInt8Array. Returns existing
      encoded data if present; otherwise, SkImage is encoded with

package/src/skia/ImageFilter/ImageFilterFactory.ts

@@ -1,6 +1,6 @@
 import type { SkColor } from "../Color";
 import type { SkColorFilter } from "../ColorFilter/ColorFilter";
-import type { IShader } from "../Shader/Shader";
+import type { SkShader } from "../Shader/Shader";
 import type { SkRect } from "../Rect";
 import type { BlendMode } from "../Paint/BlendMode";
 
@@ -48,7 +48,7 @@ export interface ImageFilterFactory {
    * @param shader - The Shader to be transformed
    * @param input - if null, it will use the dynamic source image
    */
-  MakeShader(shader: IShader, input: SkImageFilter | null): SkImageFilter;
+  MakeShader(shader: SkShader, input: SkImageFilter | null): SkImageFilter;
   /**
    * Create a filter that blurs its input by the separate X and Y sigmas. The provided tile mode
    * is used when the blur kernel goes outside the input image.

package/src/skia/Paint/Paint.ts

@@ -1,10 +1,11 @@
 import type { SkImageFilter } from "../ImageFilter";
 import type { IMaskFilter } from "../MaskFilter";
 import type { SkColorFilter } from "../ColorFilter";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkColor } from "../Color";
 import type { IPathEffect } from "../PathEffect";
 import type { SkJSIInstance } from "../JsiInstance";
+import { Skia } from "../Skia";
 
 import type { BlendMode } from "./BlendMode";
 
@@ -25,6 +26,12 @@ export enum StrokeJoin {
   Round,
 }
 
+export const SkiaPaint = () => {
+  const paint = Skia.Paint();
+  paint.setAntiAlias(true);
+  return paint;
+};
+
 export const isPaint = (obj: SkJSIInstance<string> | null): obj is SkPaint =>
   obj !== null && obj.__typename__ === "Paint";
 
@@ -119,7 +126,7 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    * Sets the current shader, replacing the existing one if there was one.
    * @param shader
    */
-  setShader(shader: IShader | null): void;
+  setShader(shader: SkShader | null): void;
 
   /**
    * Sets the geometry drawn at the beginning and end of strokes.

package/src/skia/Paint/usePaint.ts

@@ -1,8 +1,7 @@
 import type { DependencyList } from "react";
 import { useMemo } from "react";
 
-import { Skia } from "../Skia";
-
+import { SkiaPaint } from "./Paint";
 import type { SkPaint } from "./Paint";
 
 /**
@@ -13,8 +12,7 @@ export const usePaint = (
   deps?: DependencyList
 ) =>
   useMemo(() => {
-    const p = Skia.Paint();
-    p.setAntiAlias(true);
+    const p = SkiaPaint();
     if (initializer) {
       initializer(p);
     }

package/src/skia/Path/Path.ts

@@ -38,6 +38,17 @@ export enum PathOp {
   ReverseDifference,
 }
 
+export enum PathVerb {
+  Move,
+  Line,
+  Quad,
+  Conic,
+  Cubic,
+  Close,
+}
+
+export type PathCommand = number[];
+
 export const isPath = (obj: SkJSIInstance<string> | null): obj is SkPath =>
   obj !== null && obj.__typename__ === "Path";
 
@@ -535,4 +546,9 @@ export interface SkPath extends SkJSIInstance<"Path"> {
    *
    * */
   isInterpolatable(compare: SkPath): boolean;
+
+  /**
+   * Serializes the contents of this path as a series of commands.
+   */
+  toCmds(): PathCommand[];
 }

package/src/skia/Path/PathFactory.ts

@@ -1,4 +1,4 @@
-import type { SkPath, PathOp } from "./Path";
+import type { SkPath, PathOp, PathCommand } from "./Path";
 
 export interface PathFactory {
   Make(): SkPath;
@@ -17,4 +17,11 @@ export interface PathFactory {
    * @param op
    */
   MakeFromOp(one: SkPath, two: SkPath, op: PathOp): SkPath | null;
+
+  /**
+   * Creates a new path from the given list of path commands. If this fails, null will be
+   * returned instead.
+   * @param cmds
+   */
+  MakeFromCmds(cmds: PathCommand[]): SkPath | null;
 }

package/src/skia/Picture/Picture.ts

@@ -2,7 +2,7 @@ import type { InputColorMatrix } from "../ColorFilter";
 import type { FilterMode } from "../Image";
 import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 
 export interface SkPicture {
   /**
@@ -24,7 +24,7 @@ export interface SkPicture {
     mode: FilterMode,
     localMatrix?: InputColorMatrix,
     tileRect?: SkRect
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns the serialized format of this SkPicture. The format may change at anytime and

package/src/skia/RuntimeEffect/RuntimeEffect.ts

@@ -1,4 +1,4 @@
-import type { IShader } from "../Shader";
+import type { SkShader } from "../Shader";
 import type { SkJSIInstance } from "../JsiInstance";
 import type { SkMatrix } from "../Matrix";
 
@@ -21,7 +21,7 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
     uniforms: number[],
     isOpaque?: boolean,
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader executed using the given uniform data and the children as inputs.
@@ -33,9 +33,9 @@ export interface IRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
   makeShaderWithChildren(
     uniforms: number[],
     isOpaque?: boolean,
-    children?: IShader[],
+    children?: SkShader[],
     localMatrix?: SkMatrix
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns the nth uniform from the effect.

package/src/skia/Shader/Shader.ts

@@ -1,6 +1,6 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export const isShader = (obj: SkJSIInstance<string> | null): obj is IShader =>
+export const isShader = (obj: SkJSIInstance<string> | null): obj is SkShader =>
   obj !== null && obj.__typename__ === "Shader";
 
-export type IShader = SkJSIInstance<"Shader">;
+export type SkShader = SkJSIInstance<"Shader">;

package/src/skia/Shader/ShaderFactory.ts

@@ -4,7 +4,7 @@ import type { SkMatrix } from "../Matrix";
 import type { SkColor } from "../Color";
 import type { BlendMode } from "../Paint/BlendMode";
 
-import type { IShader } from "./Shader";
+import type { SkShader } from "./Shader";
 
 export interface ShaderFactory {
   /**
@@ -31,7 +31,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     // colorSpace: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a radial gradient given the center and radius.
@@ -54,7 +54,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     // colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a conical gradient given two circles.
@@ -80,7 +80,7 @@ export interface ShaderFactory {
     localMatrix?: SkMatrix,
     flags?: number
     //  colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that generates a sweep gradient given a center.
@@ -107,7 +107,7 @@ export interface ShaderFactory {
     startAngleInDegrees?: number,
     endAngleInDegrees?: number
     //  colorSpace?: ColorSpace
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader with Perlin Turbulence.
@@ -128,7 +128,7 @@ export interface ShaderFactory {
     seed: number,
     tileW: number,
     tileH: number
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader with Perlin Fractal Noise.
@@ -149,7 +149,7 @@ export interface ShaderFactory {
     seed: number,
     tileW: number,
     tileH: number
-  ): IShader;
+  ): SkShader;
 
   /**
    * Returns a shader that combines the given shaders with a BlendMode.
@@ -157,7 +157,7 @@ export interface ShaderFactory {
    * @param one
    * @param two
    */
-  MakeBlend(mode: BlendMode, one: IShader, two: IShader): IShader;
+  MakeBlend(mode: BlendMode, one: SkShader, two: SkShader): SkShader;
 
   /**
    * Returns a shader with a given color and colorspace.
@@ -165,5 +165,5 @@ export interface ShaderFactory {
    */
   MakeColor(
     color: SkColor //,space: ColorSpace
-  ): IShader;
+  ): SkShader;
 }