@shopify/react-native-skia 0.1.163 → 0.1.165

package/lib/typescript/src/dom/types/Common.d.ts

@@ -9,13 +9,13 @@ export interface ChildrenProps {
     children?: ReactNode | ReactNode[];
 }
 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 declare type RectDef = RectCtor | {
     rect: SkRect;
@@ -24,7 +24,7 @@ export declare type RRectDef = RRectCtor | {
     rect: SkRRect;
 };
 export interface PointCircleDef {
-    c: Vector;
+    c?: Vector;
     r: number;
 }
 export interface ScalarCircleDef {

package/lib/typescript/src/dom/types/DrawingContext.d.ts

@@ -2,5 +2,4 @@ import type { SkCanvas, SkPaint } from "../../skia/types";
 export interface DrawingContext {
     canvas: SkCanvas;
     paint: SkPaint;
-    opacity: number;
 }

package/lib/typescript/src/dom/types/Drawings.d.ts

@@ -5,7 +5,7 @@ export interface DrawingNodeProps extends GroupProps {
     paint?: SkPaint;
 }
 export declare type ImageProps = DrawingNodeProps & RectDef & {
-    fit: Fit;
+    fit?: Fit;
     image: SkImage;
 };
 export declare type CircleProps = CircleDef & DrawingNodeProps;

package/lib/typescript/src/renderer/DrawingContext.d.ts

@@ -1,10 +1,8 @@
 import type { RefObject } from "react";
 import type { DrawingInfo, SkiaView } from "../views";
-import type { SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
-export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
-    canvas: SkCanvas;
-    paint: SkPaint;
-    opacity: number;
+import type { Skia, Vector } from "../skia/types";
+import type { DrawingContext as DOMDrawingContext } from "../dom/types";
+export interface DrawingContext extends Omit<DrawingInfo, "touches">, DOMDrawingContext {
     center: Vector;
     ref: RefObject<SkiaView>;
     Skia: Skia;

package/lib/typescript/src/renderer/components/Mask.d.ts

@@ -1,15 +1,9 @@
 import type { ReactNode } from "react";
 interface MaskProps {
-    mode: "luminance" | "alpha";
-    clip: boolean;
+    mode?: "luminance" | "alpha";
+    clip?: boolean;
     mask: ReactNode | ReactNode[];
     children: ReactNode | ReactNode[];
 }
-export declare const Mask: {
-    ({ children, mask, mode, clip }: MaskProps): JSX.Element;
-    defaultProps: {
-        mode: string;
-        clip: boolean;
-    };
-};
+export declare const Mask: ({ children, mask, mode, clip, }: MaskProps) => JSX.Element;
 export {};

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/Paint/Paint.d.ts

@@ -22,6 +22,10 @@ export declare enum StrokeJoin {
 }
 export declare const isPaint: (obj: SkJSIInstance<string> | null) => obj is SkPaint;
 export interface SkPaint extends SkJSIInstance<"Paint"> {
+    /**
+     * Retrieves alpha from the color used when stroking and filling.
+     */
+    getAlphaf(): number;
     /**
      * Returns a copy of this paint.
      */

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

@@ -4,7 +4,7 @@ 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 = UniformValue | readonly UniformValue[] | Float32Array;
 export interface Uniforms {
     [name: string]: Uniform;
 }

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

@@ -5,6 +5,7 @@ export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements Sk
     constructor(CanvasKit: CanvasKit, ref: Paint);
     copy(): JsiSkPaint;
     reset(): void;
+    getAlphaf(): number;
     getColor(): Float32Array;
     getStrokeCap(): number;
     getStrokeJoin(): number;

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.163",
+  "version": "0.1.165",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/RenderNode.ts

@@ -141,7 +141,7 @@ export abstract class JsiRenderNode<P extends GroupProps>
       opacity !== undefined ||
       antiAlias !== undefined
     ) {
-      ctx = {};
+      ctx = { opacity: 1 };
       if (color !== undefined) {
         ctx.color = this.Skia.Color(color);
       }
@@ -208,24 +208,19 @@ export abstract class JsiRenderNode<P extends GroupProps>
     const { invertClip, layer, matrix, transform } = this.props;
     const { canvas } = parentCtx;
 
-    const opacity =
-      this.props.opacity !== undefined
-        ? parentCtx.opacity * this.props.opacity
-        : parentCtx.opacity;
-
     if (
       this.paintCache === null ||
       this.paintCache.parent !== parentCtx.paint
     ) {
       const paintCtx = this.getPaintCtx();
       const child = paintCtx
-        ? concatPaint(parentCtx.paint, paintCtx, parentCtx.opacity)
+        ? concatPaint(parentCtx.paint.copy(), paintCtx)
         : parentCtx.paint;
       this.paintCache = { parent: parentCtx.paint, child };
     }
     const paint = this.paintCache.child;
     // TODO: can we only recreate a new context here if needed?
-    const ctx = { ...parentCtx, opacity, paint };
+    const ctx = { ...parentCtx, paint };
     const hasTransform = matrix !== undefined || transform !== undefined;
     const hasClip =
       this.clipRect !== undefined ||
@@ -267,7 +262,7 @@ export abstract class JsiRenderNode<P extends GroupProps>
 }
 
 const concatPaint = (
-  parent: SkPaint,
+  paint: SkPaint,
   {
     color,
     strokeWidth,
@@ -278,23 +273,21 @@ const concatPaint = (
     imageFilter,
     maskFilter,
     pathEffect,
-    opacity: alpha,
+    opacity,
     strokeCap,
     strokeJoin,
     strokeMiter,
     style,
-  }: PaintContext,
-  opacity: number
+  }: PaintContext
 ) => {
-  const paint = parent.copy();
+  if (opacity !== undefined) {
+    paint.setAlphaf(paint.getAlphaf() * opacity);
+  }
   if (color !== undefined) {
+    const currentOpacity = paint.getAlphaf();
     paint.setShader(null);
-    color[3] *= opacity;
     paint.setColor(color);
-  } else {
-    const cl = paint.getColor();
-    cl[3] = opacity;
-    paint.setColor(cl);
+    paint.setAlphaf(currentOpacity * paint.getAlphaf());
   }
   if (strokeWidth !== undefined) {
     paint.setStrokeWidth(strokeWidth);
@@ -320,9 +313,6 @@ const concatPaint = (
   if (pathEffect !== undefined) {
     paint.setPathEffect(pathEffect);
   }
-  if (alpha !== undefined) {
-    paint.setAlphaf(alpha * opacity);
-  }
   if (strokeCap !== undefined) {
     paint.setStrokeCap(strokeCap);
   }

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/datatypes/index.ts

@@ -1,7 +1,6 @@
 export * from "./Enum";
 export * from "./Path";
 export * from "./Fitting";
-export * from "./Color";
 export * from "./Rect";
 export * from "./Radius";
 export * from "./Circle";

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

@@ -5,7 +5,6 @@ import { DeclarationType, NodeType } from "../../types";
 import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-import { processColor } from "../datatypes";
 import { JsiRenderNode } from "../RenderNode";
 
 const inflate = (
@@ -54,8 +53,9 @@ export class BoxNode extends JsiRenderNode<BoxProps> {
     super(ctx, NodeType.Box, props);
   }
 
-  renderNode({ canvas, paint, opacity }: DrawingContext) {
+  renderNode({ canvas, paint }: DrawingContext) {
     const { box: defaultBox } = this.props;
+    const opacity = paint.getAlphaf();
     const box = isRRect(defaultBox)
       ? defaultBox
       : this.Skia.RRectXY(defaultBox, 0, 0);
@@ -72,7 +72,8 @@ export class BoxNode extends JsiRenderNode<BoxProps> {
       .map((shadow) => {
         const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
         const lPaint = this.Skia.Paint();
-        lPaint.setColor(processColor(this.Skia, color, opacity));
+        lPaint.setColor(this.Skia.Color(color));
+        lPaint.setAlphaf(paint.getAlphaf() * opacity);
         lPaint.setMaskFilter(
           this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
         );
@@ -92,7 +93,9 @@ export class BoxNode extends JsiRenderNode<BoxProps> {
         canvas.save();
         canvas.clipRRect(box, ClipOp.Intersect, false);
         const lPaint = this.Skia.Paint();
-        lPaint.setColor(processColor(this.Skia, color, opacity));
+        lPaint.setColor(this.Skia.Color(color));
+        lPaint.setAlphaf(paint.getAlphaf() * opacity);
+
         lPaint.setMaskFilter(
           this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
         );

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,