@shopify/react-native-skia 0.1.129 → 0.1.132

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

@@ -1,7 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { AnimatedProps } from "../../processors";
 
@@ -13,9 +12,9 @@ interface ColorMatrixProps {
 }
 
 const onDeclare = createDeclaration<ColorMatrixProps>(
-  ({ matrix }, children) => {
+  ({ matrix }, children, { Skia }) => {
     const cf = Skia.ColorFilter.MakeMatrix(matrix);
-    return composeColorFilter(cf, children);
+    return composeColorFilter(Skia, cf, children);
   }
 );
 

package/src/renderer/components/colorFilters/SRGBToLinearGamma.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";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface SRGBToLinearGammaProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeSRGBToLinearGamma();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const SRGBToLinearGamma = (

package/src/renderer/components/image/BoxFit.ts

@@ -1,6 +1,5 @@
 import { exhaustiveCheck } from "../../typeddash";
-import { Skia } from "../../../skia";
-import type { SkRect } from "../../../skia";
+import type { SkRect } from "../../../skia/types";
 
 // https://api.flutter.dev/flutter/painting/BoxFit-class.html
 export type Fit =
@@ -37,12 +36,7 @@ export const fitRects = (
     { width: rect.width, height: rect.height },
     { width, height }
   );
-  const src = inscribe(sizes.src, {
-    x: 0,
-    y: 0,
-    width: rect.width,
-    height: rect.height,
-  });
+  const src = inscribe(sizes.src, rect);
   const dst = inscribe(sizes.dst, {
     x,
     y,
@@ -58,12 +52,12 @@ const inscribe = (
 ) => {
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
-  return Skia.XYWHRect(
-    rect.x + halfWidthDelta,
-    rect.y + halfHeightDelta,
+  return {
+    x: rect.x + halfWidthDelta,
+    y: rect.y + halfHeightDelta,
     width,
-    height
-  );
+    height,
+  };
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {

package/src/renderer/components/image/Image.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkImage } from "../../../skia";
+import type { SkImage } from "../../../skia/types";
 import type {
   CustomPaintProps,
   RectDef,
@@ -24,8 +24,8 @@ export type BaseImageProps = RectDef &
 export type ImageProps = CustomPaintProps & BaseImageProps;
 
 const onDraw = createDrawing<ImageProps>(
-  ({ canvas, paint }, { fit, image, ...rectProps }) => {
-    const rect = processRect(rectProps);
+  ({ canvas, paint, Skia }, { fit, image, ...rectProps }) => {
+    const rect = processRect(Skia, rectProps);
     const { src, dst } = fitRects(
       fit,
       {

package/src/renderer/components/image/ImageSVG.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkSVG } from "../../../skia";
+import type { SkSVG } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, RectDef } from "../../processors";
 import { processRect } from "../../processors";
@@ -10,8 +10,8 @@ export type ImageSVGProps = RectDef & {
 };
 
 const onDraw = createDrawing<ImageSVGProps>(
-  ({ canvas }, { svg, ...rectProps }) => {
-    const { x, y, width, height } = processRect(rectProps);
+  ({ canvas, Skia }, { svg, ...rectProps }) => {
+    const { x, y, width, height } = processRect(Skia, rectProps);
     canvas.save();
     canvas.translate(x, y);
     canvas.drawSvg(svg, width, height);

package/src/renderer/components/image/ImageShader.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import type { SkRect, SkImage } from "../../../skia";
-import { TileMode, FilterMode, MipmapMode } from "../../../skia";
+import type { SkRect, SkImage, Skia } from "../../../skia/types";
+import { TileMode, FilterMode, MipmapMode } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type {
   TransformProps,
@@ -9,12 +9,13 @@ import type {
   AnimatedProps,
   RectCtor,
 } from "../../processors";
-import { localMatrix, enumKey, rect } from "../../processors";
+import { localMatrix, enumKey } from "../../processors";
 
 import type { Fit } from "./BoxFit";
 import { rect2rect, fitRects } from "./BoxFit";
 
 const getRect = (
+  Skia: Skia,
   props: Omit<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "image">
 ): SkRect | undefined => {
   const { x, y, width, height } = props;
@@ -26,7 +27,7 @@ const getRect = (
     width !== undefined &&
     height !== undefined
   ) {
-    return rect(x, y, width, height);
+    return Skia.XYWHRect(x, y, width, height);
   } else {
     return undefined;
   }
@@ -43,8 +44,8 @@ interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
 }
 
 const onDeclare = createDeclaration<ImageShaderProps>(
-  ({ tx, ty, fm, mm, fit, image, ...imageShaderProps }) => {
-    const rct = getRect(imageShaderProps);
+  ({ tx, ty, fm, mm, fit, image, ...imageShaderProps }, _, { Skia }) => {
+    const rct = getRect(Skia, imageShaderProps);
     if (rct) {
       const rects = fitRects(
         fit,
@@ -62,7 +63,7 @@ const onDeclare = createDeclaration<ImageShaderProps>(
       TileMode[enumKey(ty)],
       FilterMode[enumKey(fm)],
       MipmapMode[enumKey(mm)],
-      localMatrix(imageShaderProps)
+      localMatrix(Skia.Matrix(), imageShaderProps)
     );
   }
 );

package/src/renderer/components/imageFilters/Blur.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, TileMode } from "../../../skia";
+import { TileMode } from "../../../skia/types";
 import type { Radius, SkEnum } from "../../processors";
 import { enumKey } from "../../processors";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
@@ -16,15 +16,17 @@ export interface BlurProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<BlurProps>(({ blur, mode }, children) => {
-  const sigma = processRadius(blur);
-  return Skia.ImageFilter.MakeBlur(
-    sigma.x,
-    sigma.y,
-    TileMode[enumKey(mode)],
-    getInput(children)
-  );
-});
+const onDeclare = createDeclaration<BlurProps>(
+  ({ blur, mode }, children, { Skia }) => {
+    const sigma = processRadius(Skia, blur);
+    return Skia.ImageFilter.MakeBlur(
+      sigma.x,
+      sigma.y,
+      TileMode[enumKey(mode)],
+      getInput(Skia, children)
+    );
+  }
+);
 
 export const Blur = (props: AnimatedProps<BlurProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/imageFilters/DisplacementMap.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, ColorChannel } from "../../../skia";
+import { ColorChannel } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
@@ -16,12 +16,12 @@ export interface DisplacementMapProps {
 }
 
 const onDeclare = createDeclaration<DisplacementMapProps>(
-  ({ channelX, channelY, scale }, children) => {
+  ({ channelX, channelY, scale }, children, { Skia }) => {
     const [in1, in2] = children.filter((c) => !!c);
     const x = ColorChannel[enumKey(channelX)];
     const y = ColorChannel[enumKey(channelY)];
-    const map = getInput([in1]);
-    const input = in2 ? getInput([in2]) : null;
+    const map = getInput(Skia, [in1]);
+    const input = in2 ? getInput(Skia, [in2]) : null;
     if (!map) {
       throw new Error("No DisplacementMap provided");
     }

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,9 +1,10 @@
-import type { SkColor, SkImageFilter } from "../../../skia";
-import { BlendMode, Skia, TileMode } from "../../../skia";
+import type { SkColor, Skia, SkImageFilter } from "../../../skia/types";
+import { BlendMode, TileMode } from "../../../skia/types";
 
-const Black = Skia.Color("black");
+const Black = Float32Array.of(0, 0, 0, 1);
 
 export const MakeInnerShadow = (
+  Skia: Skia,
   shadowOnly: boolean | undefined,
   dx: number,
   dy: number,

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps, Radius } from "../../processors";
 import { processRadius } from "../../processors/Radius";
@@ -14,9 +13,9 @@ export interface MorphologyProps {
 }
 
 const onDeclare = createDeclaration<MorphologyProps>(
-  ({ radius, operator }, children) => {
-    const input = getInput(children);
-    const r = processRadius(radius);
+  ({ radius, operator }, children, { Skia }) => {
+    const input = getInput(Skia, children);
+    const r = processRadius(Skia, radius);
     const factory =
       operator === "dilate"
         ? Skia.ImageFilter.MakeDilate

package/src/renderer/components/imageFilters/Offset.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -13,9 +12,11 @@ export interface OffsetProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<OffsetProps>(({ x, y }, children) => {
-  return Skia.ImageFilter.MakeOffset(x, y, getInput(children));
-});
+const onDeclare = createDeclaration<OffsetProps>(
+  ({ x, y }, children, { Skia }) => {
+    return Skia.ImageFilter.MakeOffset(x, y, getInput(Skia, children));
+  }
+);
 
 export const Offset = (props: AnimatedProps<OffsetProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/imageFilters/RuntimeShader.tsx

@@ -1,20 +1,28 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkRuntimeEffect } from "../../../skia";
+import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
+import { processUniforms } from "../../../skia/types/Shader/Shader";
 
 import { getInput } from "./getInput";
 
 export interface RuntimeShaderProps {
   source: SkRuntimeEffect;
+  uniforms?: Uniforms;
 }
 
 const onDeclare = createDeclaration<RuntimeShaderProps>(
-  ({ source }, children) => {
+  ({ source, uniforms }, children, { Skia }) => {
     const rtb = Skia.RuntimeShaderBuilder(source);
-    return Skia.ImageFilter.MakeRuntimeShader(rtb, null, getInput(children));
+    if (uniforms) {
+      processUniforms(source, uniforms, rtb);
+    }
+    return Skia.ImageFilter.MakeRuntimeShader(
+      rtb,
+      null,
+      getInput(Skia, children)
+    );
   }
 );
 

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { Skia, processColor } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { Color } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { processColor } from "../../processors/Color";
 
 import { getInput } from "./getInput";
 import { MakeInnerShadow } from "./InnerShadow";
@@ -18,12 +18,16 @@ export interface ShadowProps {
 }
 
 const onDeclare = createDeclaration<ShadowProps>(
-  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {
-    const input = getInput(children);
-    const color = processColor(cl, opacity);
+  (
+    { dx, dy, blur, color: cl, shadowOnly, inner },
+    children,
+    { opacity, Skia }
+  ) => {
+    const input = getInput(Skia, children);
+    const color = processColor(Skia, cl, opacity);
     let factory;
     if (inner) {
-      factory = MakeInnerShadow.bind(null, shadowOnly);
+      factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
     } else {
       factory = shadowOnly
         ? Skia.ImageFilter.MakeDropShadowOnly

package/src/renderer/components/imageFilters/getInput.ts

@@ -1,7 +1,8 @@
 import type { DeclarationResult } from "../../nodes";
-import { isImageFilter, isColorFilter, isShader, Skia } from "../../../skia";
+import type { Skia } from "../../../skia/types";
+import { isImageFilter, isColorFilter, isShader } from "../../../skia/types";
 
-export const getInput = (children: DeclarationResult[]) => {
+export const getInput = (Skia: Skia, children: DeclarationResult[]) => {
   const [child] = children.filter((c) => c);
   if (!child) {
     return null;

package/src/renderer/components/maskFilters/Blur.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { BlurStyle, Skia } from "../../../skia";
+import { BlurStyle } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { SkEnum } from "../../processors";
 import { enumKey } from "../../processors";
@@ -13,7 +13,7 @@ export interface BlurMaskProps {
 }
 
 const onDeclare = createDeclaration<BlurMaskProps>(
-  ({ style, blur, respectCTM }) => {
+  ({ style, blur, respectCTM }, _, { Skia }) => {
     return Skia.MaskFilter.MakeBlur(
       BlurStyle[enumKey(style)],
       blur,

package/src/renderer/components/pathEffects/Corner.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -11,7 +11,7 @@ export interface CornerPathEffectProps {
 }
 
 const onDeclare = createDeclaration<CornerPathEffectProps>(
-  ({ r }, children) => {
+  ({ r }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeCorner(r);
     if (child) {

package/src/renderer/components/pathEffects/Dash.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -12,7 +12,7 @@ export interface DashPathEffectProps {
 }
 
 const onDeclare = createDeclaration<DashPathEffectProps>(
-  ({ intervals, phase }, children) => {
+  ({ intervals, phase }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeDash(intervals, phase);
     if (child) {

package/src/renderer/components/pathEffects/Discrete.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -13,7 +13,7 @@ export interface DiscretePathEffectProps {
 }
 
 const onDeclare = createDeclaration<DiscretePathEffectProps>(
-  ({ length, deviation, seed }, children) => {
+  ({ length, deviation, seed }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeDiscrete(length, deviation, seed);
     if (child) {

package/src/renderer/components/pathEffects/Line2D.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia";
+import type { SkMatrix } from "../../../skia/types";
 
 export interface Line2DPathEffectProps {
   children?: ReactNode | ReactNode[];
@@ -13,7 +13,7 @@ export interface Line2DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Line2DPathEffectProps>(
-  ({ width, matrix }, children) => {
+  ({ width, matrix }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakeLine2D(width, matrix);
     if (child) {

package/src/renderer/components/pathEffects/Path1D.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, Path1DEffectStyle, isPathEffect } from "../../../skia";
+import { Path1DEffectStyle, isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 import type { SkEnum } from "../../processors/Paint";
@@ -18,10 +18,10 @@ export interface Path1DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Path1DPathEffectProps>(
-  ({ path, advance, phase, style }, children) => {
+  ({ path, advance, phase, style }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
     const pe = Skia.PathEffect.MakePath1D(
-      processPath(path),
+      processPath(Skia, path),
       advance,
       phase,
       Path1DEffectStyle[enumKey(style)]

package/src/renderer/components/pathEffects/Path2D.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia";
+import type { SkMatrix } from "../../../skia/types";
 import type { PathDef } from "../../processors/Paths";
 import { processPath } from "../../processors/Paths";
 
@@ -15,9 +15,9 @@ export interface Path2DPathEffectProps {
 }
 
 const onDeclare = createDeclaration<Path2DPathEffectProps>(
-  ({ path, matrix }, children) => {
+  ({ path, matrix }, children, { Skia }) => {
     const [child] = children.filter(isPathEffect);
-    const pe = Skia.PathEffect.MakePath2D(matrix, processPath(path));
+    const pe = Skia.PathEffect.MakePath2D(matrix, processPath(Skia, path));
     if (child) {
       if (!pe) {
         return child;

package/src/renderer/components/pathEffects/Sum.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isPathEffect } from "../../../skia";
+import { isPathEffect } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,10 +9,12 @@ export interface SumPathEffectProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<SumPathEffectProps>((_, children) => {
-  const [outer, inner] = children.filter(isPathEffect);
-  return Skia.PathEffect.MakeCompose(outer, inner);
-});
+const onDeclare = createDeclaration<SumPathEffectProps>(
+  (_, children, { Skia }) => {
+    const [outer, inner] = children.filter(isPathEffect);
+    return Skia.PathEffect.MakeCompose(outer, inner);
+  }
+);
 
 export const SumPathEffect = (props: AnimatedProps<SumPathEffectProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

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

@@ -1,17 +1,19 @@
 import React from "react";
 
-import { Skia, processColor } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { processColor } from "../../processors/Color";
 
 export interface ColorShaderProps {
   color: Color;
 }
 
-const onDeclare = createDeclaration<ColorShaderProps>(({ color }) => {
-  return Skia.Shader.MakeColor(processColor(color, 1));
-});
+const onDeclare = createDeclaration<ColorShaderProps>(
+  ({ color }, _, { Skia }) => {
+    return Skia.Shader.MakeColor(processColor(Skia, color, 1));
+  }
+);
 
 export const ColorShader = (props: AnimatedProps<ColorShaderProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/shaders/FractalNoise.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 FractalNoiseProps {
 }
 
 const onDeclare = createDeclaration<FractalNoiseProps>(
-  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }) => {
+  ({ freqX, freqY, octaves, seed, tileWidth, tileHeight }, _, { Skia }) => {
     return Skia.Shader.MakeFractalNoise(
       freqX,
       freqY,

package/src/renderer/components/shaders/Gradient.ts

@@ -1,9 +1,9 @@
-import { Skia, TileMode } from "../../../skia";
+import { TileMode } from "../../../skia/types";
 import type { SkEnum } from "../../processors/Paint";
 import type { TransformProps } from "../../processors/Transform";
 import { enumKey } from "../../processors/Paint";
 import { localMatrix } from "../../processors/Transform";
-import type { Color } from "../../../skia";
+import type { Color, Skia } from "../../../skia/types";
 
 export interface GradientProps extends TransformProps {
   colors: Color[];
@@ -12,16 +12,13 @@ export interface GradientProps extends TransformProps {
   flags?: number;
 }
 
-export const processGradientProps = ({
-  colors,
-  positions,
-  mode,
-  flags,
-  ...transform
-}: GradientProps) => ({
+export const processGradientProps = (
+  Skia: Skia,
+  { colors, positions, mode, flags, ...transform }: GradientProps
+) => ({
   colors: colors.map((color) => Skia.Color(color)),
   positions: positions ?? null,
   mode: TileMode[enumKey(mode ?? "clamp")],
   flags,
-  localMatrix: localMatrix(transform),
+  localMatrix: localMatrix(Skia.Matrix(), transform),
 });

package/src/renderer/components/shaders/LinearGradient.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";
@@ -13,9 +13,9 @@ export interface LinearGradientProps extends GradientProps {
 }
 
 const onDeclare = createDeclaration<LinearGradientProps>(
-  ({ start, end, ...gradientProps }) => {
+  ({ start, end, ...gradientProps }, _, { Skia }) => {
     const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(gradientProps);
+      processGradientProps(Skia, gradientProps);
     return Skia.Shader.MakeLinearGradient(
       start,
       end,