@shopify/react-native-skia 0.1.164 → 0.1.166

package/lib/typescript/src/renderer/components/image/Image.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { SkiaProps } from "../../processors";
 import type { ImageProps } from "../../../dom/types";
-export declare const Image: {
-    (props: SkiaProps<ImageProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-        fit: string;
-    };
-};
+export declare const Image: (props: SkiaProps<ImageProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/image/ImageShader.d.ts

@@ -1,14 +1,4 @@
 /// <reference types="react" />
 import type { ImageShaderProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
-export declare const ImageShader: {
-    (props: SkiaProps<ImageShaderProps>): JSX.Element;
-    defaultProps: {
-        readonly tx: "decal";
-        readonly ty: "decal";
-        readonly fm: "nearest";
-        readonly mm: "none";
-        readonly fit: "none";
-        readonly transform: readonly [];
-    };
-};
+import type { SkiaDefaultProps } from "../../processors";
+export declare const ImageShader: ({ tx, ty, fm, mm, fit, transform, ...props }: SkiaDefaultProps<ImageShaderProps, "tx" | "ty" | "fm" | "mm" | "fit" | "transform">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Blur.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { BlurImageFilterProps } from "../../../dom/types";
-export declare const Blur: {
-    (props: SkiaProps<BlurImageFilterProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Blur: ({ mode, ...props }: SkiaDefaultProps<BlurImageFilterProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Morphology.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import type { MorphologyImageFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
-export declare const Morphology: {
-    (props: SkiaProps<MorphologyImageFilterProps>): JSX.Element;
-    defaultProps: {
-        operator: string;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors";
+export declare const Morphology: ({ operator, ...props }: SkiaDefaultProps<MorphologyImageFilterProps, "operator">) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Offset.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { OffsetImageFilterProps } from "../../../dom/types";
-export declare const Offset: {
-    (props: SkiaProps<OffsetImageFilterProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Offset: ({ x, y, ...props }: SkiaDefaultProps<OffsetImageFilterProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/maskFilters/Blur.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { BlurMaskFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const BlurMask: {
-    (props: SkiaProps<BlurMaskFilterProps>): JSX.Element;
-    defaultProps: {
-        style: string;
-        respectCTM: boolean;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const BlurMask: ({ style, respectCTM, ...props }: SkiaDefaultProps<BlurMaskFilterProps, "style" | "respectCTM">) => JSX.Element;

package/lib/typescript/src/renderer/components/pathEffects/Discrete.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { DiscretePathEffectProps } from "../../../dom/types";
-export declare const DiscretePathEffect: {
-    (props: SkiaProps<DiscretePathEffectProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-    };
-};
+export declare const DiscretePathEffect: ({ seed, ...props }: SkiaDefaultProps<DiscretePathEffectProps, "seed">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/FractalNoise.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { FractalNoiseProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const FractalNoise: {
-    (props: SkiaProps<FractalNoiseProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-        tileWidth: number;
-        tileHeight: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const FractalNoise: ({ seed, tileWidth, tileHeight, ...props }: SkiaDefaultProps<FractalNoiseProps, "seed" | "tileHeight" | "tileWidth">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/Shader.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { ShaderProps } from "../../../dom/types";
-export declare const Shader: {
-    (props: SkiaProps<ShaderProps>): JSX.Element;
-    defaultProps: {
-        uniforms: never[];
-    };
-};
+export declare const Shader: ({ uniforms, ...props }: SkiaDefaultProps<ShaderProps, "uniforms">) => JSX.Element;

package/lib/typescript/src/renderer/components/shaders/Turbulence.d.ts

@@ -1,11 +1,4 @@
 /// <reference types="react" />
 import type { TurbulenceProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const Turbulence: {
-    (props: SkiaProps<TurbulenceProps>): JSX.Element;
-    defaultProps: {
-        seed: number;
-        tileWidth: number;
-        tileHeight: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const Turbulence: ({ seed, tileWidth, tileHeight, ...props }: SkiaDefaultProps<TurbulenceProps, "seed" | "tileWidth" | "tileHeight">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Circle.d.ts

@@ -1,12 +1,4 @@
 /// <reference types="react" />
 import type { SkiaProps } from "../../processors";
 import type { CircleProps } from "../../../dom/types";
-export declare const Circle: {
-    (props: SkiaProps<CircleProps>): JSX.Element;
-    defaultProps: {
-        c: {
-            x: number;
-            y: number;
-        };
-    };
-};
+export declare const Circle: (props: SkiaProps<CircleProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/FitBox.d.ts

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { Fit } from "../../../dom/nodes";
 import type { SkRect } from "../../../skia/types";
 interface FitProps {
-    fit: Fit;
+    fit?: Fit;
     src: SkRect;
     dst: SkRect;
     children: ReactNode | ReactNode[];
@@ -16,10 +16,5 @@ export declare const fitbox: (fit: Fit, src: SkRect, dst: SkRect) => readonly [{
 }, {
     readonly scaleY: number;
 }];
-export declare const FitBox: {
-    ({ fit, src, dst, children }: FitProps): JSX.Element;
-    defaultProps: {
-        fit: string;
-    };
-};
+export declare const FitBox: ({ fit, src, dst, children }: FitProps) => JSX.Element;
 export {};

package/lib/typescript/src/renderer/components/shapes/Oval.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { OvalProps } from "../../../dom/types";
 import type { SkiaProps } from "../../processors";
-export declare const Oval: {
-    (props: SkiaProps<OvalProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Oval: (props: SkiaProps<OvalProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Path.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { PathProps } from "../../../dom/types";
-export declare const Path: {
-    (props: SkiaProps<PathProps>): JSX.Element;
-    defaultProps: {
-        start: number;
-        end: number;
-    };
-};
+export declare const Path: ({ start, end, ...props }: SkiaDefaultProps<PathProps, "start" | "end">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Points.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { PointsProps } from "../../../dom/types";
-export declare const Points: {
-    (props: SkiaProps<PointsProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Points: ({ mode, ...props }: SkiaDefaultProps<PointsProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/RoundedRect.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
 import type { RoundedRectProps } from "../../../dom/types";
 import type { SkiaProps } from "../../processors";
-export declare const RoundedRect: {
-    (props: SkiaProps<RoundedRectProps>): JSX.Element;
-    defaultProps: {
-        r: number;
-    };
-};
+export declare const RoundedRect: (props: SkiaProps<RoundedRectProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/shapes/Vertices.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { VerticesProps } from "../../../dom/types";
-export declare const Vertices: {
-    (props: SkiaProps<VerticesProps>): JSX.Element;
-    defaultProps: {
-        mode: string;
-    };
-};
+export declare const Vertices: ({ mode, ...props }: SkiaDefaultProps<VerticesProps, "mode">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/Glyphs.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import type { GlyphsProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors/Animations/Animations";
-export declare const Glyphs: {
-    (props: SkiaProps<GlyphsProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
+export declare const Glyphs: ({ x, y, ...props }: SkiaDefaultProps<GlyphsProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/Text.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextProps } from "../../../dom/types";
-export declare const Text: {
-    (props: SkiaProps<TextProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const Text: ({ x, y, ...props }: SkiaDefaultProps<TextProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/TextBlob.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextBlobProps } from "../../../dom/types";
-export declare const TextBlob: {
-    (props: SkiaProps<TextBlobProps>): JSX.Element;
-    defaultProps: {
-        x: number;
-        y: number;
-    };
-};
+export declare const TextBlob: ({ x, y, ...props }: SkiaDefaultProps<TextBlobProps, "x" | "y">) => JSX.Element;

package/lib/typescript/src/renderer/components/text/TextPath.d.ts

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 import type { TextPathProps } from "../../../dom/types";
-export declare const TextPath: {
-    (props: SkiaProps<TextPathProps>): JSX.Element;
-    defaultProps: {
-        initialOffset: number;
-    };
-};
+export declare const TextPath: ({ initialOffset, ...props }: SkiaDefaultProps<TextPathProps, "initialOffset">) => JSX.Element;

package/lib/typescript/src/renderer/processors/Animations/Animations.d.ts

@@ -10,3 +10,8 @@ export declare type AnimatedProps<T, O extends keyof T | never = never> = {
     [K in keyof T]: K extends "children" ? T[K] : K extends O ? T[K] : AnimatedProp<T[K]>;
 };
 export declare type SkiaProps<P = object, O extends keyof P | never = never> = AnimatedProps<P, O>;
+declare type WithOptional<T extends object, N extends keyof T> = Omit<T, N> & {
+    [K in N]?: T[K];
+};
+export declare type SkiaDefaultProps<T extends object, N extends keyof T> = WithOptional<SkiaProps<T>, N>;
+export {};

package/lib/typescript/src/skia/types/RuntimeEffect/RuntimeEffect.d.ts

@@ -45,4 +45,8 @@ export interface SkRuntimeEffect extends SkJSIInstance<"RuntimeEffect"> {
      * @param index
      */
     getUniformName(index: number): string;
+    /**
+     * Returns the SkSL source of the runtime effect shader.
+     */
+    source(): string;
 }

package/lib/typescript/src/skia/types/Shader/Shader.d.ts

@@ -3,8 +3,7 @@ import type { Vector } from "../Point";
 import type { SkRuntimeEffect, SkRuntimeShaderBuilder } from "../RuntimeEffect";
 export declare const isShader: (obj: SkJSIInstance<string> | null) => obj is SkShader;
 export declare type SkShader = SkJSIInstance<"Shader">;
-export declare type UniformValue = number | Vector | readonly number[];
-export declare type Uniform = UniformValue | readonly UniformValue[];
+export declare type Uniform = number | Vector | Float32Array | Uniform[];
 export interface Uniforms {
     [name: string]: Uniform;
 }

package/lib/typescript/src/skia/web/JsiSkRuntimeEffect.d.ts

@@ -4,7 +4,9 @@ import type { SkRuntimeEffect } from "../types/RuntimeEffect/RuntimeEffect";
 import { HostObject } from "./Host";
 import { JsiSkShader } from "./JsiSkShader";
 export declare class JsiSkRuntimeEffect extends HostObject<RuntimeEffect, "RuntimeEffect"> implements SkRuntimeEffect {
-    constructor(CanvasKit: CanvasKit, ref: RuntimeEffect);
+    private sksl;
+    constructor(CanvasKit: CanvasKit, ref: RuntimeEffect, sksl: string);
+    source(): string;
     makeShader(uniforms: number[], localMatrix?: SkMatrix): JsiSkShader;
     makeShaderWithChildren(uniforms: number[], children?: SkShader[], localMatrix?: SkMatrix): JsiSkShader;
     getUniform(index: number): import("canvaskit-wasm").SkSLUniform;

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.164",
+  "version": "0.1.166",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/datatypes/Circle.ts

@@ -10,5 +10,5 @@ export const processCircle = (Skia: Skia, def: CircleDef) => {
   if (isCircleScalarDef(def)) {
     return { c: Skia.Point(def.cx, def.cy), r: def.r };
   }
-  return def;
+  return { ...def, c: def.c ?? { x: 0, y: 0 } };
 };

package/src/dom/nodes/datatypes/Rect.ts

@@ -16,7 +16,7 @@ const isRectCtor = (def: RectDef): def is RectCtor =>
 
 export const processRect = (Skia: Skia, def: RectDef) => {
   if (isRectCtor(def)) {
-    return Skia.XYWHRect(def.x, def.y, def.width, def.height);
+    return Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height);
   } else {
     return def.rect;
   }
@@ -24,9 +24,9 @@ export const processRect = (Skia: Skia, def: RectDef) => {
 
 export const processRRect = (Skia: Skia, def: RRectDef) => {
   if (isRRectCtor(def)) {
-    const r = processRadius(Skia, def.r);
+    const r = processRadius(Skia, def.r ?? 0);
     return Skia.RRectXY(
-      Skia.XYWHRect(def.x, def.y, def.width, def.height),
+      Skia.XYWHRect(def.x ?? 0, def.y ?? 0, def.width, def.height),
       r.x,
       r.y
     );

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

@@ -40,7 +40,7 @@ export class BoxShadowNode extends JsiDeclarationNode<
   BoxShadowProps
 > {
   constructor(ctx: NodeContext, props: BoxShadowProps) {
-    super(ctx, DeclarationType.Unknown, NodeType.Box, props);
+    super(ctx, DeclarationType.Unknown, NodeType.BoxShadow, props);
   }
 
   materialize() {

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

@@ -14,7 +14,8 @@ export class ImageNode extends JsiDrawingNode<
   }
 
   deriveProps() {
-    const { image, fit } = this.props;
+    const { image } = this.props;
+    const fit = this.props.fit ?? "contain";
     const rect = processRect(this.Skia, this.props);
     const { src, dst } = fitRects(
       fit,

package/src/dom/nodes/paint/ImageFilters.ts

@@ -140,7 +140,7 @@ export class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterP
 
 export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadowImageFilterProps> {
   constructor(ctx: NodeContext, props: DropShadowImageFilterProps) {
-    super(ctx, NodeType.BlurImageFilter, props);
+    super(ctx, NodeType.DropShadowImageFilter, props);
   }
 
   materialize() {

package/src/dom/nodes/paint/Shaders.ts

@@ -67,20 +67,20 @@ export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
   materialize() {
     const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = this.props;
     const rct = getRect(this.Skia, imageShaderProps);
+    const m3 = this.Skia.Matrix();
     if (rct) {
       const rects = fitRects(
         fit,
         { x: 0, y: 0, width: image.width(), height: image.height() },
         rct
       );
-      const m3 = rect2rect(rects.src, rects.dst);
-      imageShaderProps.transform = [
-        ...(imageShaderProps.transform ?? []),
-        ...m3,
-      ];
+      const [x, y, sx, sy] = rect2rect(rects.src, rects.dst);
+      m3.translate(x.translateX, y.translateY);
+      m3.scale(sx.scaleX, sy.scaleY);
     }
     const lm = this.Skia.Matrix();
     processTransformProps(lm, imageShaderProps);
+    lm.concat(m3);
     return image.makeShaderOptions(
       TileMode[enumKey(tx)],
       TileMode[enumKey(ty)],

package/src/dom/types/Common.ts

@@ -37,21 +37,21 @@ export interface ChildrenProps {
 }
 
 export interface RectCtor {
-  x: number;
-  y: number;
+  x?: number;
+  y?: number;
   width: number;
   height: number;
 }
 
 export interface RRectCtor extends RectCtor {
-  r: Radius;
+  r?: Radius;
 }
 
 export type RectDef = RectCtor | { rect: SkRect };
 export type RRectDef = RRectCtor | { rect: SkRRect };
 
 export interface PointCircleDef {
-  c: Vector;
+  c?: Vector;
   r: number;
 }
 

package/src/dom/types/Drawings.ts

@@ -34,7 +34,7 @@ export interface DrawingNodeProps extends GroupProps {
 
 export type ImageProps = DrawingNodeProps &
   RectDef & {
-    fit: Fit;
+    fit?: Fit;
     image: SkImage;
   };
 

package/src/renderer/components/Mask.tsx

@@ -6,13 +6,18 @@ import { LumaColorFilter } from "./colorFilters/LumaColorFilter";
 import { Paint } from "./Paint";
 
 interface MaskProps {
-  mode: "luminance" | "alpha";
-  clip: boolean;
+  mode?: "luminance" | "alpha";
+  clip?: boolean;
   mask: ReactNode | ReactNode[];
   children: ReactNode | ReactNode[];
 }
 
-export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+export const Mask = ({
+  children,
+  mask,
+  mode = "alpha",
+  clip = true,
+}: MaskProps) => {
   return (
     <Group layer>
       <Group
@@ -29,8 +34,3 @@ export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
     </Group>
   );
 };
-
-Mask.defaultProps = {
-  mode: "alpha",
-  clip: true,
-};

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

@@ -6,9 +6,3 @@ import type { ImageProps } from "../../../dom/types";
 export const Image = (props: SkiaProps<ImageProps>) => {
   return <skImage {...props} />;
 };
-
-Image.defaultProps = {
-  x: 0,
-  y: 0,
-  fit: "contain",
-};

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

@@ -1,17 +1,29 @@
 import React from "react";
 
 import type { ImageShaderProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const ImageShader = (props: SkiaProps<ImageShaderProps>) => {
-  return <skImageShader {...props} />;
+export const ImageShader = ({
+  tx = "decal",
+  ty = "decal",
+  fm = "nearest",
+  mm = "none",
+  fit = "none",
+  transform = [],
+  ...props
+}: SkiaDefaultProps<
+  ImageShaderProps,
+  "tx" | "ty" | "fm" | "mm" | "fit" | "transform"
+>) => {
+  return (
+    <skImageShader
+      tx={tx}
+      ty={ty}
+      fm={fm}
+      mm={mm}
+      fit={fit}
+      transform={transform}
+      {...props}
+    />
+  );
 };
-
-ImageShader.defaultProps = {
-  tx: "decal",
-  ty: "decal",
-  fm: "nearest",
-  mm: "none",
-  fit: "none",
-  transform: [],
-} as const;

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

@@ -1,12 +1,11 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { BlurImageFilterProps } from "../../../dom/types";
 
-export const Blur = (props: SkiaProps<BlurImageFilterProps>) => {
-  return <skBlurImageFilter {...props} />;
-};
-
-Blur.defaultProps = {
-  mode: "decal",
+export const Blur = ({
+  mode = "decal",
+  ...props
+}: SkiaDefaultProps<BlurImageFilterProps, "mode">) => {
+  return <skBlurImageFilter mode={mode} {...props} />;
 };

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

@@ -1,12 +1,11 @@
 import React from "react";
 
 import type { MorphologyImageFilterProps } from "../../../dom/types";
-import type { SkiaProps } from "../../processors";
+import type { SkiaDefaultProps } from "../../processors";
 
-export const Morphology = (props: SkiaProps<MorphologyImageFilterProps>) => {
-  return <skMorphologyImageFilter {...props} />;
-};
-
-Morphology.defaultProps = {
-  operator: "dilate",
+export const Morphology = ({
+  operator = "dilate",
+  ...props
+}: SkiaDefaultProps<MorphologyImageFilterProps, "operator">) => {
+  return <skMorphologyImageFilter operator={operator} {...props} />;
 };

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

@@ -1,13 +1,12 @@
 import React from "react";
 
-import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { SkiaDefaultProps } from "../../processors/Animations/Animations";
 import type { OffsetImageFilterProps } from "../../../dom/types";
 
-export const Offset = (props: SkiaProps<OffsetImageFilterProps>) => {
-  return <skOffsetImageFilter {...props} />;
-};
-
-Offset.defaultProps = {
-  x: 0,
-  y: 0,
+export const Offset = ({
+  x = 0,
+  y = 0,
+  ...props
+}: SkiaDefaultProps<OffsetImageFilterProps, "x" | "y">) => {
+  return <skOffsetImageFilter x={x} y={y} {...props} />;
 };