@shopify/react-native-skia 0.1.128 → 0.1.131

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

@@ -1,76 +1,24 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { isShader } from "../../../skia";
-import type { SkRuntimeEffect } from "../../../skia";
-import type { Vector, AnimatedProps, TransformProps } from "../../processors";
+import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
+import { isShader, processUniforms } from "../../../skia/types";
+import type { AnimatedProps, TransformProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
 import { localMatrix } from "../../processors";
 
-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;
-
-type UniformValue = number | Vector | readonly number[];
-
-type Uniform = UniformValue | readonly UniformValue[];
-
-interface Uniforms {
-  [name: string]: Uniform;
-}
-
-const processValue = (value: UniformValue): number | readonly number[] => {
-  if (isVector(value)) {
-    return [value.x, value.y];
-  }
-  return value;
-};
-
 export interface ShaderProps extends TransformProps {
   source: SkRuntimeEffect;
   uniforms: Uniforms;
-  opaque?: boolean;
   children?: ReactNode | ReactNode[];
 }
 
 const onDeclare = createDeclaration<ShaderProps>(
-  ({ uniforms, source, opaque, ...transform }, children) => {
-    const processedUniforms = new Array(source.getUniformCount())
-      .fill(0)
-      .flatMap((_, i) => {
-        const name = source.getUniformName(i);
-        const value = uniforms[name];
-        if (value === undefined) {
-          throw new Error(`No value specified for uniform ${name}`);
-        }
-        if (Array.isArray(value)) {
-          return value.flatMap(processValue);
-        }
-        return processValue(value as UniformValue);
-      });
-    const names = Object.keys(uniforms);
-    if (names.length > source.getUniformCount()) {
-      const usedUniforms = new Array(source.getUniformCount())
-        .fill(0)
-        .map((_, i) => source.getUniformName(i));
-      const unusedUniform = names
-        .map((name) => {
-          if (usedUniforms.indexOf(name) === -1) {
-            return name;
-          }
-          return null;
-        })
-        .filter((n) => n !== null);
-      console.warn(
-        "Unused uniforms were provided: " + unusedUniform.join(", ")
-      );
-    }
+  ({ uniforms, source, ...transform }, children, { Skia }) => {
     return source.makeShaderWithChildren(
-      processedUniforms,
-      opaque,
+      processUniforms(source, uniforms),
       children.filter(isShader),
-      localMatrix(transform)
+      localMatrix(Skia.Matrix(), transform)
     );
   }
 );

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

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Vector, AnimatedProps } from "../../processors";
-import { Skia } from "../../../skia";
+import type { AnimatedProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
+import type { Vector } from "../../../skia/types";
 
 import type { GradientProps } from "./Gradient";
 import { processGradientProps } from "./Gradient";
@@ -14,9 +14,9 @@ export interface SweepGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<SweepGradientProps>(
-  ({ c, start, end, ...gradientProps }) => {
+  ({ c, start, end, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeSweepGradient(
       c.x,
       c.y,

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

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -14,7 +13,7 @@ export interface TurbulenceProps {
 }
 
 const onDeclare = createDeclaration<TurbulenceProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }) => {
+  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
     return Skia.Shader.MakeTurbulence(
       freqX,
       freqY,

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

@@ -1,8 +1,8 @@
 import React from "react";
 
-import type { Vector, AnimatedProps } from "../../processors";
-import { Skia } from "../../../skia";
+import type { AnimatedProps } from "../../processors";
 import { createDeclaration } from "../../nodes/Declaration";
+import type { Vector } from "../../../skia/types";
 
 import type { GradientProps } from "./Gradient";
 import { processGradientProps } from "./Gradient";
@@ -15,9 +15,9 @@ export interface TwoPointConicalGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<TwoPointConicalGradientProps>(
-  ({ start, startR, end, endR, ...gradientProps }) => {
+  ({ start, startR, end, endR, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeTwoPointConicalGradient(
       start,
       startR,

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

@@ -1,18 +1,29 @@
 import React from "react";
 
-import type { Color, SkRRect } from "../../../skia";
-import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import type {
+  Color,
+  SkRRect,
+  SkJSIInstance,
+  SkRect,
+  Skia,
+} from "../../../skia/types";
+import { ClipOp, BlurStyle } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, CustomPaintProps } from "../../processors";
-import { add, vec, rrect } from "../../processors";
-import { rect, isRRect } from "../../processors/Rects";
 import { createDeclaration } from "../../nodes/Declaration";
-import type { SkJSIInstance } from "../../../skia/JsiInstance";
-import type { SkRect } from "../../../skia/Rect";
+import { processColor } from "../../processors/Color";
+import { isRRect } from "../../../skia/types/RRect";
 
-const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
-  rrect(
-    rect(
+const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) =>
+  Skia.RRectXY(
+    Skia.XYWHRect(
       box.rect.x - dx + tx,
       box.rect.y - dy + ty,
       box.rect.width + 2 * dx,
@@ -22,8 +33,14 @@ const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
     box.ry + dy
   );
 
-const deflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
-  inflate(box, -dx, -dy, tx, ty);
+const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => inflate(Skia, box, -dx, -dy, tx, ty);
 
 interface BoxShadowProps {
   dx?: number;
@@ -54,19 +71,19 @@ interface BoxProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
-  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);
-  const { canvas, paint, opacity } = ctx;
+  const { canvas, paint, opacity, Skia } = ctx;
+  const box = isRRect(defaultBox) ? defaultBox : Skia.RRectXY(defaultBox, 0, 0);
   const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);
   shadows
     .filter((shadow) => !shadow.inner)
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
       const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(color, opacity));
+      lPaint.setColor(processColor(Skia, color, opacity));
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
-      canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);
+      canvas.drawRRect(inflate(Skia, box, spread, spread, dx, dy), lPaint);
     });
   canvas.drawRRect(box, paint);
 
@@ -74,16 +91,16 @@ const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
     .filter((shadow) => shadow.inner)
     .map((shadow) => {
       const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
-      const delta = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));
+      const delta = Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
       canvas.save();
       canvas.clipRRect(box, ClipOp.Intersect, false);
       const lPaint = Skia.Paint();
-      lPaint.setColor(processColor(color, opacity));
+      lPaint.setColor(processColor(Skia, color, opacity));
       lPaint.setMaskFilter(
         Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
       );
-      const inner = deflate(box, spread, spread, dx, dy);
-      const outer = inflate(box, delta.x, delta.y);
+      const inner = deflate(Skia, box, spread, spread, dx, dy);
+      const outer = inflate(Skia, box, delta.x, delta.y);
       canvas.drawDRRect(outer, inner, lPaint);
       canvas.restore();
     });

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

@@ -6,13 +6,12 @@ import type {
   CircleDef,
 } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import { vec } from "../../processors/math/Vector";
 import { processCircle } from "../../processors";
 
 export type CircleProps = CircleDef & CustomPaintProps;
 
-const onDraw = createDrawing<CircleProps>(({ canvas, paint }, def) => {
-  const { c, r } = processCircle(def);
+const onDraw = createDrawing<CircleProps>(({ canvas, paint, Skia }, def) => {
+  const { c, r } = processCircle(Skia, def);
   canvas.drawCircle(c.x, c.y, r, paint);
 });
 
@@ -21,5 +20,5 @@ export const Circle = (props: AnimatedProps<CircleProps>) => {
 };
 
 Circle.defaultProps = {
-  c: vec(0, 0),
+  c: { x: 0, y: 0 },
 };

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

@@ -1,7 +1,7 @@
 import React from "react";
 
 import type { CustomPaintProps } from "../../processors";
-import type { SkRRect } from "../../../skia/RRect";
+import type { SkRRect } from "../../../skia/types";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { createDrawing } from "../../nodes/Drawing";
 

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

@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 import type { Fit } from "../image";
 import { rect2rect, fitRects } from "../image";
-import type { SkRect } from "../../../skia";
+import type { SkRect } from "../../../skia/types";
 import { Group } from "../Group";
 
 interface FitProps {

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

@@ -1,7 +1,8 @@
 import React from "react";
 
-import type { CustomPaintProps, Vector, AnimatedProps } from "../../processors";
+import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
+import type { Vector } from "../../../skia/types";
 
 export interface LineProps extends CustomPaintProps {
   p1: Vector;

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

@@ -10,10 +10,12 @@ import { createDrawing } from "../../nodes";
 
 export type OvalProps = RectDef & CustomPaintProps;
 
-const onDraw = createDrawing<OvalProps>(({ canvas, paint }, rectProps) => {
-  const rect = processRect(rectProps);
-  canvas.drawOval(rect, paint);
-});
+const onDraw = createDrawing<OvalProps>(
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rect = processRect(Skia, rectProps);
+    canvas.drawOval(rect, paint);
+  }
+);
 
 export const Oval = (props: AnimatedProps<OvalProps>) => {
   return <skDrawing onDraw={onDraw} {...props} />;

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

@@ -1,16 +1,11 @@
 import React from "react";
 
-import type {
-  CustomPaintProps,
-  SkEnum,
-  Vector,
-  AnimatedProps,
-} from "../../processors";
+import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { SkPoint, Color } from "../../../skia";
-import { BlendMode } from "../../../skia";
+import type { SkPoint, Color, Vector } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
-import { processColor } from "../../../skia/Color";
+import { processColor } from "../../processors/Color";
 
 export interface CubicBezierHandle {
   pos: Vector;
@@ -31,7 +26,7 @@ export interface PatchProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<PatchProps>(
-  ({ canvas, paint, opacity }, { colors, patch, texture, blendMode }) => {
+  ({ canvas, paint, opacity, Skia }, { colors, patch, texture, blendMode }) => {
     // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
     const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
     const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
@@ -55,7 +50,7 @@ const onDraw = createDrawing<PatchProps>(
         patch[3].c2,
         patch[0].c1,
       ],
-      colors ? colors.map((c) => processColor(c, opacity)) : undefined,
+      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
       texture,
       mode,
       paint

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

@@ -8,7 +8,7 @@ import type {
 } from "../../processors";
 import { createDrawing } from "../../nodes";
 import { processPath, enumKey } from "../../processors";
-import { FillType } from "../../../skia";
+import { FillType } from "../../../skia/types";
 
 interface StrokeOpts {
   width?: number;
@@ -25,14 +25,14 @@ export interface PathProps extends CustomPaintProps {
 }
 
 const onDraw = createDrawing<PathProps>(
-  ({ canvas, paint }, { start, end, stroke, fillType, ...pathProps }) => {
+  ({ canvas, paint, Skia }, { start, end, stroke, fillType, ...pathProps }) => {
     const hasStartOffset = start !== 0;
     const hasEndOffset = end !== 1;
     const hasStrokeOptions = stroke !== undefined;
     const hasFillType = !!fillType;
     const willMutatePath =
       hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
-    const pristinePath = processPath(pathProps.path);
+    const pristinePath = processPath(Skia, pathProps.path);
     const path = willMutatePath ? pristinePath.copy() : pristinePath;
     if (hasFillType) {
       path.setFillType(FillType[enumKey(fillType)]);

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

@@ -1,8 +1,8 @@
 import React from "react";
 
 import type { CustomPaintProps, SkEnum } from "../../processors";
-import type { SkPoint } from "../../../skia";
-import { PointMode } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
+import { PointMode } from "../../../skia/types";
 import { enumKey } from "../../processors/Paint";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import { createDrawing } from "../../nodes/Drawing";

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

@@ -10,10 +10,12 @@ import { processRect } from "../../processors";
 
 export type RectProps = RectDef & CustomPaintProps;
 
-const onDraw = createDrawing<RectProps>(({ canvas, paint }, rectProps) => {
-  const rect = processRect(rectProps);
-  canvas.drawRect(rect, paint);
-});
+const onDraw = createDrawing<RectProps>(
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rect = processRect(Skia, rectProps);
+    canvas.drawRect(rect, paint);
+  }
+);
 
 export const Rect = (props: AnimatedProps<RectProps>) => {
   return <skDrawing onDraw={onDraw} {...props} />;

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

@@ -11,8 +11,8 @@ import { processRRect } from "../../processors";
 export type RoundedRectProps = RRectDef & CustomPaintProps;
 
 const onDraw = createDrawing<RoundedRectProps>(
-  ({ canvas, paint }, rectProps) => {
-    const rrect = processRRect(rectProps);
+  ({ canvas, paint, Skia }, rectProps) => {
+    const rrect = processRRect(Skia, rectProps);
     canvas.drawRRect(rrect, paint);
   }
 );

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

@@ -2,9 +2,10 @@ import React from "react";
 
 import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
-import type { SkPoint } from "../../../skia";
-import { BlendMode, VertexMode, Skia, processColor } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
+import { BlendMode, VertexMode } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
+import { processColor } from "../../processors/Color";
 
 export interface VerticesProps extends CustomPaintProps {
   colors?: string[];
@@ -17,7 +18,7 @@ export interface VerticesProps extends CustomPaintProps {
 
 const onDraw = createDrawing<VerticesProps>(
   (
-    { canvas, paint, opacity },
+    { canvas, paint, opacity, Skia },
     { colors, vertices, textures, blendMode, mode, indices }
   ) => {
     // If the colors are provided, the default blendMode is set to dstOver, if not, the default is set to srcOver
@@ -28,7 +29,7 @@ const onDraw = createDrawing<VerticesProps>(
       vertexMode,
       vertices,
       textures,
-      colors ? colors.map((c) => processColor(c, opacity)) : undefined,
+      colors ? colors.map((c) => processColor(Skia, c, opacity)) : undefined,
       indices
     );
     canvas.drawVertices(vert, blend, paint);

package/src/renderer/components/text/Glyphs.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import type { SkPoint } from "../../../skia";
+import type { SkPoint } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
 import { processFont } from "../../processors/Font";
 
@@ -24,8 +24,11 @@ interface ProcessedGlyphs {
 }
 
 const onDraw = createDrawing<GlyphsProps>(
-  ({ canvas, paint, fontMgr }, { glyphs: rawGlyphs, x, y, ...fontDef }) => {
-    const font = processFont(fontMgr, fontDef);
+  (
+    { canvas, paint, fontMgr, Skia },
+    { glyphs: rawGlyphs, x, y, ...fontDef }
+  ) => {
+    const font = processFont(Skia, fontMgr, fontDef);
     const { glyphs, positions } = rawGlyphs.reduce<ProcessedGlyphs>(
       (acc, glyph) => {
         const { id, pos } = glyph;

package/src/renderer/components/text/Text.tsx

@@ -16,8 +16,8 @@ type TextProps = CustomPaintProps &
   };
 
 const onDraw = createDrawing<TextProps>(
-  ({ canvas, paint, fontMgr }, { text, x, y, ...fontDef }) => {
-    const font = processFont(fontMgr, fontDef);
+  ({ canvas, paint, fontMgr, Skia }, { text, x, y, ...fontDef }) => {
+    const font = processFont(Skia, fontMgr, fontDef);
     canvas.drawText(text, x, y, paint, font);
   }
 );

package/src/renderer/components/text/TextBlob.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes/Drawing";
-import type { SkTextBlob } from "../../../skia/TextBlob";
+import type { SkTextBlob } from "../../../skia/types";
 
 export interface TextBlobProps extends CustomPaintProps {
   blob: SkTextBlob;

package/src/renderer/components/text/TextPath.tsx

@@ -2,9 +2,7 @@ import React from "react";
 
 import type { CustomPaintProps, AnimatedProps } from "../../processors";
 import { createDrawing } from "../../nodes";
-import type { SkPath } from "../../../skia/Path";
-import type { SkRSXform } from "../../../skia/RSXform";
-import { Skia } from "../../../skia/Skia";
+import type { SkPath, SkRSXform } from "../../../skia/types";
 import type { FontDef } from "../../processors/Font";
 import { processFont } from "../../processors/Font";
 
@@ -17,7 +15,7 @@ export type TextPathProps = CustomPaintProps &
 
 const onDraw = createDrawing<TextPathProps>(
   (
-    { canvas, paint, fontMgr },
+    { canvas, paint, fontMgr, Skia },
     { text, initialOffset, path: pathDef, ...fontDef }
   ) => {
     const path =
@@ -27,7 +25,7 @@ const onDraw = createDrawing<TextPathProps>(
     if (path === null) {
       throw new Error("Invalid path: " + pathDef);
     }
-    const font = processFont(fontMgr, fontDef);
+    const font = processFont(Skia, fontMgr, fontDef);
     const ids = font.getGlyphIDs(text);
     const widths = font.getGlyphWidths(ids, paint);
     const rsx: SkRSXform[] = [];

package/src/renderer/index.ts

@@ -1,4 +1,5 @@
-export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
 export * from "./useContextBridge";
+export * from "./DependencyManager";
+export * from "./useCanvas";

package/src/renderer/nodes/Declaration.tsx

@@ -2,10 +2,10 @@ import type { DependencyList } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
 import { isAnimated, materialize } from "../processors";
 import type { DependencyManager } from "../DependencyManager";
+import type { SkJSIInstance } from "../../skia/types";
 
 import { Node } from "./Node";
 

package/src/renderer/nodes/Drawing.tsx

@@ -2,11 +2,11 @@ import type { DependencyList, ReactNode } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import { processPaint } from "../processors";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import { materialize } from "../processors/Animations/Animations";
-import { isPaint } from "../../skia";
+import { isPaint } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
+import { processPaint } from "../processors";
 
 import { Node } from "./Node";
 
@@ -53,6 +53,7 @@ export class DrawingNode<P> extends Node<P> {
     } else {
       const declarations = this.visit(ctx);
       const paint = processPaint(
+        ctx.Skia,
         ctx.paint.copy(),
         ctx.opacity,
         drawingProps,

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,4 @@
-import type { SkJSIInstance } from "../../skia/JsiInstance";
+import type { SkJSIInstance } from "../../skia/types";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
 import type { AnimatedProps } from "../processors";

package/src/renderer/processors/Animations/Animations.ts

@@ -1,12 +1,7 @@
-import type { SkiaReadonlyValue } from "../../../values";
-import type { DrawingContext } from "../../DrawingContext";
+import type { SkiaValue } from "../../../values";
 import { mapKeys } from "../../typeddash";
 
-export type FrameValue<T> = (ctx: DrawingContext) => T;
-
-export const isValue = (
-  value: unknown
-): value is SkiaReadonlyValue<unknown> => {
+export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   if (value === undefined || value === null) {
     return false;
   }
@@ -14,8 +9,7 @@ export const isValue = (
     if (
       typeof value === "object" &&
       "__typename__" in value &&
-      (value as unknown as SkiaReadonlyValue<unknown>).__typename__ ===
-        "RNSkValue"
+      (value as unknown as SkiaValue<unknown>).__typename__ === "RNSkValue"
     ) {
       return true;
     }
@@ -37,12 +31,12 @@ export const materialize = <T>(props: AnimatedProps<T>) => {
   mapKeys(props).forEach((key) => {
     const value = props[key];
     if (isValue(value)) {
-      result[key] = (value as SkiaReadonlyValue<T[typeof key]>).current;
+      result[key] = (value as SkiaValue<T[typeof key]>).current;
     }
   });
   return result as T;
 };
 
 export type AnimatedProps<T> = {
-  [K in keyof T]: T[K] | SkiaReadonlyValue<T[K]>;
+  [K in keyof T]: T[K] | SkiaValue<T[K]>;
 };

package/src/renderer/processors/Circles.ts

@@ -1,5 +1,4 @@
-import type { Vector } from "./math/Vector";
-import { vec } from "./math/Vector";
+import type { Skia, Vector } from "../../skia/types";
 
 interface PointCircleDef {
   c: Vector;
@@ -18,9 +17,10 @@ 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 !== undefined;
-export const processCircle = (def: CircleDef) => {
+
+export const processCircle = (Skia: Skia, def: CircleDef) => {
   if (isCircleScalarDef(def)) {
-    return { c: vec(def.cx, def.cy), r: def.r };
+    return { c: Skia.Point(def.cx, def.cy), r: def.r };
   }
   return def;
 };