@shopify/react-native-skia 0.1.146 → 0.1.148

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

@@ -1,13 +1,4 @@
-import type { ReactNode } from "react";
-import { Path1DEffectStyle } from "../../../skia/types";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkEnum } from "../../processors/Paint";
-import type { PathDef } from "../../processors/Paths";
-export interface Path1DPathEffectProps {
-    path: PathDef;
-    children?: ReactNode | ReactNode[];
-    advance: number;
-    phase: number;
-    style: SkEnum<typeof Path1DEffectStyle>;
-}
-export declare const Path1DPathEffect: (props: AnimatedProps<Path1DPathEffectProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { Path1DPathEffectProps } from "../../../dom/types";
+export declare const Path1DPathEffect: (props: SkiaProps<Path1DPathEffectProps>) => JSX.Element;

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

@@ -1,10 +1,4 @@
-import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkMatrix } from "../../../skia/types";
-import type { PathDef } from "../../processors/Paths";
-export interface Path2DPathEffectProps {
-    children?: ReactNode | ReactNode[];
-    matrix: SkMatrix;
-    path: PathDef;
-}
-export declare const Path2DPathEffect: (props: AnimatedProps<Path2DPathEffectProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { Path2DPathEffectProps } from "../../../dom/types";
+export declare const Path2DPathEffect: (props: SkiaProps<Path2DPathEffectProps>) => JSX.Element;

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

@@ -1,6 +1,3 @@
-import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface SumPathEffectProps {
-    children?: ReactNode | ReactNode[];
-}
-export declare const SumPathEffect: (props: AnimatedProps<SumPathEffectProps>) => JSX.Element;
+/// <reference types="react" />
+import type { ChildrenProps } from "../../../dom/types";
+export declare const SumPathEffect: (props: ChildrenProps) => JSX.Element;

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

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia/types";
-export interface ColorShaderProps {
-    color: Color;
-}
-export declare const ColorShader: (props: AnimatedProps<ColorShaderProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors";
+import type { ColorProps } from "../../../dom/types";
+export declare const ColorShader: (props: SkiaProps<ColorProps>) => JSX.Element;

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

@@ -1,15 +1,8 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface FractalNoiseProps {
-    freqX: number;
-    freqY: number;
-    octaves: number;
-    seed: number;
-    tileWidth: number;
-    tileHeight: number;
-}
+import type { FractalNoiseProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 export declare const FractalNoise: {
-    (props: AnimatedProps<FractalNoiseProps>): JSX.Element;
+    (props: SkiaProps<FractalNoiseProps>): JSX.Element;
     defaultProps: {
         seed: number;
         tileWidth: number;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Vector } from "../../../skia/types";
-import type { GradientProps } from "./Gradient";
-export interface LinearGradientProps extends GradientProps {
-    start: Vector;
-    end: Vector;
-}
-export declare const LinearGradient: (props: AnimatedProps<LinearGradientProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors";
+import type { LinearGradientProps } from "../../../dom/types";
+export declare const LinearGradient: (props: SkiaProps<LinearGradientProps>) => JSX.Element;

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Vector } from "../../../skia/types";
-import type { GradientProps } from "./Gradient";
-export interface RadialGradientProps extends GradientProps {
-    c: Vector;
-    r: number;
-}
-export declare const RadialGradient: (props: AnimatedProps<RadialGradientProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors";
+import type { RadialGradientProps } from "../../../dom/types";
+export declare const RadialGradient: (props: SkiaProps<RadialGradientProps>) => JSX.Element;

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

@@ -1,13 +1,8 @@
-import type { ReactNode } from "react";
-import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
-import type { AnimatedProps, TransformProps } from "../../processors";
-export interface ShaderProps extends TransformProps {
-    source: SkRuntimeEffect;
-    uniforms: Uniforms;
-    children?: ReactNode | ReactNode[];
-}
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors";
+import type { ShaderProps } from "../../../dom/types";
 export declare const Shader: {
-    (props: AnimatedProps<ShaderProps>): JSX.Element;
+    (props: SkiaProps<ShaderProps>): JSX.Element;
     defaultProps: {
         uniforms: never[];
     };

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

@@ -1,10 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Vector } from "../../../skia/types";
-import type { GradientProps } from "./Gradient";
-export interface SweepGradientProps extends GradientProps {
-    c: Vector;
-    start?: number;
-    end?: number;
-}
-export declare const SweepGradient: (props: AnimatedProps<SweepGradientProps>) => JSX.Element;
+import type { SweepGradientProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+export declare const SweepGradient: (props: SkiaProps<SweepGradientProps>) => JSX.Element;

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

@@ -1,15 +1,8 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface TurbulenceProps {
-    freqX: number;
-    freqY: number;
-    octaves: number;
-    seed: number;
-    tileWidth: number;
-    tileHeight: number;
-}
+import type { TurbulenceProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 export declare const Turbulence: {
-    (props: AnimatedProps<TurbulenceProps>): JSX.Element;
+    (props: SkiaProps<TurbulenceProps>): JSX.Element;
     defaultProps: {
         seed: number;
         tileWidth: number;

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

@@ -1,11 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors";
-import type { Vector } from "../../../skia/types";
-import type { GradientProps } from "./Gradient";
-export interface TwoPointConicalGradientProps extends GradientProps {
-    start: Vector;
-    startR: number;
-    end: Vector;
-    endR: number;
-}
-export declare const TwoPointConicalGradient: (props: AnimatedProps<TwoPointConicalGradientProps>) => JSX.Element;
+import type { TwoPointConicalGradientProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+export declare const TwoPointConicalGradient: (props: SkiaProps<TwoPointConicalGradientProps>) => JSX.Element;

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

@@ -1,22 +1,5 @@
 /// <reference types="react" />
-import type { Color, SkRRect, SkRect } from "../../../skia/types";
-import type { AnimatedProps, CustomPaintProps } from "../../processors";
-interface BoxShadowProps {
-    dx?: number;
-    dy?: number;
-    spread?: number;
-    blur: number;
-    color?: Color;
-    inner?: boolean;
-}
-export declare const BoxShadow: (props: AnimatedProps<BoxShadowProps>) => JSX.Element;
-interface BoxProps extends CustomPaintProps {
-    box: SkRRect | SkRect;
-}
-export declare const Box: {
-    (props: AnimatedProps<BoxProps>): JSX.Element;
-    defaultProps: {
-        shadows: never[];
-    };
-};
-export {};
+import type { BoxProps, BoxShadowProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+export declare const BoxShadow: (props: SkiaProps<BoxShadowProps>) => JSX.Element;
+export declare const Box: (props: SkiaProps<BoxProps>) => JSX.Element;

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

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

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

@@ -1,9 +1,4 @@
 /// <reference types="react" />
-import type { CustomPaintProps } from "../../processors";
-import type { SkRRect } from "../../../skia/types";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface DiffRectProps extends CustomPaintProps {
-    inner: SkRRect;
-    outer: SkRRect;
-}
-export declare const DiffRect: (props: AnimatedProps<DiffRectProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { DiffRectProps } from "../../../dom/types";
+export declare const DiffRect: (props: SkiaProps<DiffRectProps>) => JSX.Element;

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

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { CustomPaintProps } from "../../processors/Paint";
-export declare type FillProps = CustomPaintProps;
-export declare const Fill: (props: AnimatedProps<FillProps>) => JSX.Element;
+import type { DrawingNodeProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+export declare const Fill: (props: SkiaProps<DrawingNodeProps>) => JSX.Element;

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { Fit } from "../image";
+import type { Fit } from "../../../dom/nodes";
 import type { SkRect } from "../../../skia/types";
 interface FitProps {
     fit: Fit;

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

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps } from "../../processors";
-import type { Vector } from "../../../skia/types";
-export interface LineProps extends CustomPaintProps {
-    p1: Vector;
-    p2: Vector;
-}
-export declare const Line: (props: AnimatedProps<LineProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors";
+import type { LineProps } from "../../../dom/types";
+export declare const Line: (props: SkiaProps<LineProps>) => JSX.Element;

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

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

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

@@ -1,21 +1,4 @@
 /// <reference types="react" />
-import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
-import type { SkPoint, Color, Vector } from "../../../skia/types";
-import { BlendMode } from "../../../skia/types";
-export interface CubicBezierHandle {
-    pos: Vector;
-    c1: Vector;
-    c2: Vector;
-}
-export interface PatchProps extends CustomPaintProps {
-    colors?: readonly Color[];
-    patch: readonly [
-        CubicBezierHandle,
-        CubicBezierHandle,
-        CubicBezierHandle,
-        CubicBezierHandle
-    ];
-    texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];
-    blendMode?: SkEnum<typeof BlendMode>;
-}
-export declare const Patch: (props: AnimatedProps<PatchProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors";
+import type { PatchProps } from "../../../dom/types";
+export declare const Patch: (props: SkiaProps<PatchProps>) => JSX.Element;

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

@@ -1,23 +1,10 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps, PathDef, SkEnum } from "../../processors";
-import { FillType } from "../../../skia/types";
-interface StrokeOpts {
-    width?: number;
-    strokeMiterlimit?: number;
-    precision?: number;
-}
-export interface PathProps extends CustomPaintProps {
-    path: PathDef;
-    start: number;
-    end: number;
-    stroke?: StrokeOpts;
-    fillType?: SkEnum<typeof FillType>;
-}
+import type { SkiaProps } from "../../processors";
+import type { PathProps } from "../../../dom/types";
 export declare const Path: {
-    (props: AnimatedProps<PathProps>): JSX.Element;
+    (props: SkiaProps<PathProps>): JSX.Element;
     defaultProps: {
         start: number;
         end: number;
     };
 };
-export {};

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

@@ -1,14 +1,8 @@
 /// <reference types="react" />
-import type { CustomPaintProps, SkEnum } from "../../processors";
-import type { SkPoint } from "../../../skia/types";
-import { PointMode } from "../../../skia/types";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface PointsProps extends CustomPaintProps {
-    points: SkPoint[];
-    mode: SkEnum<typeof PointMode>;
-}
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { PointsProps } from "../../../dom/types";
 export declare const Points: {
-    (props: AnimatedProps<PointsProps>): JSX.Element;
+    (props: SkiaProps<PointsProps>): JSX.Element;
     defaultProps: {
         mode: string;
     };

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import type { CustomPaintProps, RectDef, AnimatedProps } from "../../processors";
-export declare type RectProps = RectDef & CustomPaintProps;
-export declare const Rect: (props: AnimatedProps<RectProps>) => JSX.Element;
+import type { RectProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+export declare const Rect: (props: SkiaProps<RectProps>) => JSX.Element;

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

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

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

@@ -1,17 +1,8 @@
 /// <reference types="react" />
-import type { CustomPaintProps, SkEnum, AnimatedProps } from "../../processors";
-import type { SkPoint } from "../../../skia/types";
-import { BlendMode, VertexMode } from "../../../skia/types";
-export interface VerticesProps extends CustomPaintProps {
-    colors?: string[];
-    vertices: SkPoint[];
-    textures?: SkPoint[];
-    mode: SkEnum<typeof VertexMode>;
-    blendMode?: SkEnum<typeof BlendMode>;
-    indices?: number[];
-}
+import type { SkiaProps } from "../../processors";
+import type { VerticesProps } from "../../../dom/types";
 export declare const Vertices: {
-    (props: AnimatedProps<VerticesProps>): JSX.Element;
+    (props: SkiaProps<VerticesProps>): JSX.Element;
     defaultProps: {
         mode: string;
     };

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

@@ -1,18 +1,8 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps } from "../../processors";
-import type { SkPoint } from "../../../skia/types";
-import type { FontDef } from "../../processors/Font";
-export interface Glyph {
-    id: number;
-    pos: SkPoint;
-}
-export declare type GlyphsProps = CustomPaintProps & FontDef & {
-    x: number;
-    y: number;
-    glyphs: Glyph[];
-};
+import type { GlyphsProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 export declare const Glyphs: {
-    (props: AnimatedProps<GlyphsProps>): JSX.Element;
+    (props: SkiaProps<GlyphsProps>): JSX.Element;
     defaultProps: {
         x: number;
         y: number;

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

@@ -1,15 +1,10 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps, FontDef } from "../../processors";
-declare type TextProps = CustomPaintProps & FontDef & {
-    text: string;
-    x: number;
-    y: number;
-};
+import type { SkiaProps } from "../../processors";
+import type { TextProps } from "../../../dom/types";
 export declare const Text: {
-    (props: AnimatedProps<TextProps>): JSX.Element;
+    (props: SkiaProps<TextProps>): JSX.Element;
     defaultProps: {
         x: number;
         y: number;
     };
 };
-export {};

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

@@ -1,13 +1,8 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps } from "../../processors";
-import type { SkTextBlob } from "../../../skia/types";
-export interface TextBlobProps extends CustomPaintProps {
-    blob: SkTextBlob;
-    x: number;
-    y: number;
-}
+import type { SkiaProps } from "../../processors";
+import type { TextBlobProps } from "../../../dom/types";
 export declare const TextBlob: {
-    (props: AnimatedProps<TextBlobProps>): JSX.Element;
+    (props: SkiaProps<TextBlobProps>): JSX.Element;
     defaultProps: {
         x: number;
         y: number;

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

@@ -1,14 +1,8 @@
 /// <reference types="react" />
-import type { CustomPaintProps, AnimatedProps } from "../../processors";
-import type { SkPath } from "../../../skia/types";
-import type { FontDef } from "../../processors/Font";
-export declare type TextPathProps = CustomPaintProps & FontDef & {
-    text: string;
-    path: SkPath | string;
-    initialOffset: number;
-};
+import type { SkiaProps } from "../../processors";
+import type { TextPathProps } from "../../../dom/types";
 export declare const TextPath: {
-    (props: AnimatedProps<TextPathProps>): JSX.Element;
+    (props: SkiaProps<TextPathProps>): JSX.Element;
     defaultProps: {
         initialOffset: number;
     };

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

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

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

@@ -9,3 +9,4 @@ export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T
 export declare type AnimatedProps<T> = {
     [K in keyof T]: AnimatedProp<T[K]>;
 };
+export declare type SkiaProps<P = {}> = AnimatedProps<P>;

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

@@ -1,11 +1,2 @@
-export * from "./Transform";
 export * from "./Animations";
-export * from "./Circles";
-export * from "./Rects";
 export * from "./math";
-export * from "./Font";
-export * from "./Paths";
-export * from "./Clips";
-export * from "./Radius";
-export * from "./Color";
-export * from "./Paint";

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

@@ -19,6 +19,7 @@ export interface SkMatrix extends SkJSIInstance<"Matrix"> {
     skew: (x: number, y: number) => void;
     rotate: (theta: number) => void;
     identity: () => void;
+    get: () => number[];
 }
 declare type Transform2dName = "translateX" | "translateY" | "scale" | "skewX" | "skewY" | "scaleX" | "scaleY" | "rotateZ" | "rotate";
 declare type Transformations = {

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

@@ -9,4 +9,5 @@ export declare class JsiSkMatrix extends HostObject<Matrix3x3, "Matrix"> impleme
     skew(x: number, y: number): void;
     rotate(value: number): void;
     identity(): void;
+    get(): number[];
 }

package/package.json

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

package/src/dom/nodes/DrawingNode.ts

@@ -0,0 +1,72 @@
+import type {
+  DrawingContext,
+  DrawingNodeProps,
+  Node,
+  NodeType,
+  RenderNode,
+} from "../types";
+
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+import { PaintNode } from "./PaintNode";
+import { isSkPaint, JsiRenderNode } from "./RenderNode";
+
+export abstract class JsiDrawingNode<P extends DrawingNodeProps, C>
+  extends JsiRenderNode<P>
+  implements RenderNode<P>
+{
+  protected derived?: C;
+
+  constructor(ctx: NodeContext, type: NodeType, props: P) {
+    super(ctx, type, props);
+    this.derived = this.deriveProps();
+  }
+
+  setProps(props: P) {
+    super.setProps(props);
+    this.derived = this.deriveProps();
+  }
+
+  setProp<K extends keyof P>(name: K, value: P[K]) {
+    const hasChanged = super.setProp(name, value);
+    if (hasChanged) {
+      this.derived = this.deriveProps();
+    }
+    return hasChanged;
+  }
+
+  addChild(child: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.addChild(child);
+    this.derived = this.deriveProps();
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (!(child instanceof JsiDeclarationNode)) {
+      throw new Error(`Cannot add ${child.type} to ${this.type}`);
+    }
+    super.insertChildBefore(child, before);
+    this.derived = this.deriveProps();
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    if (this.props.paint && isSkPaint(this.props.paint)) {
+      this.draw({ ...ctx, paint: this.props.paint });
+    } else if (this.props.paint && this.props.paint.current != null) {
+      this.draw({ ...ctx, paint: this.props.paint.current.materialize() });
+    } else {
+      this.draw(ctx);
+    }
+    this.children().map((child) => {
+      if (child instanceof PaintNode) {
+        const paint = child.materialize();
+        this.draw({ ...ctx, paint });
+      }
+    });
+  }
+
+  protected abstract draw(ctx: DrawingContext): void;
+  protected abstract deriveProps(): C;
+}

package/src/dom/nodes/GroupNode.ts

@@ -0,0 +1,23 @@
+import type { DrawingContext, GroupProps } from "../types";
+import { NodeType } from "../types";
+import type { RenderNode } from "../types/Node";
+
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+
+export class GroupNode
+  extends JsiRenderNode<GroupProps>
+  implements RenderNode<GroupProps>
+{
+  constructor(ctx: NodeContext, props: GroupProps) {
+    super(ctx, NodeType.Group, props);
+  }
+
+  renderNode(ctx: DrawingContext): void {
+    this.children().map((child) => {
+      if (child instanceof JsiRenderNode) {
+        child.render(ctx);
+      }
+    });
+  }
+}