@shopify/react-native-skia 1.8.0 → 1.8.1

package/lib/typescript/lib/module/sksg/Recorder/commands/Paint.d.ts

@@ -0,0 +1,13 @@
+export function processColor(Skia: any, color: any): any;
+export function setPaintProperties(Skia: any, paint: any, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither }: {
+    opacity: any;
+    color: any;
+    blendMode: any;
+    strokeWidth: any;
+    style: any;
+    strokeJoin: any;
+    strokeCap: any;
+    strokeMiter: any;
+    antiAlias: any;
+    dither: any;
+}): void;

package/lib/typescript/lib/module/sksg/Recorder/commands/PathEffects.d.ts

@@ -0,0 +1,3 @@
+export function isPushPathEffect(command: any): boolean;
+export function composePathEffects(ctx: any): void;
+export function pushPathEffect(ctx: any, command: any): void;

package/lib/typescript/lib/module/sksg/Recorder/commands/Shaders.d.ts

@@ -0,0 +1,2 @@
+export function isPushShader(command: any): boolean;
+export function pushShader(ctx: any, command: any): void;

package/lib/typescript/lib/module/sksg/{nodes/utils.d.ts → utils.d.ts}

@@ -1,2 +1,3 @@
 export function isSharedValue(value: any): boolean;
 export function materialize(props: any): any;
+export function composeDeclarations(filters: any, composer: any): any;

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

@@ -38,6 +38,11 @@ export interface TransformProps {
     origin?: Vector;
     matrix?: InputMatrix;
 }
+export interface CTMProps extends TransformProps {
+    clip?: ClipDef;
+    invertClip?: boolean;
+    layer?: SkPaint | boolean;
+}
 export interface PaintProps extends ChildrenProps {
     color?: Color;
     strokeWidth?: number;
@@ -50,8 +55,5 @@ export interface PaintProps extends ChildrenProps {
     antiAlias?: boolean;
     dither?: boolean;
 }
-export interface GroupProps extends PaintProps, TransformProps {
-    clip?: ClipDef;
-    invertClip?: boolean;
-    layer?: SkPaint | boolean;
+export interface GroupProps extends PaintProps, CTMProps {
 }

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

@@ -13,7 +13,7 @@ export interface RuntimeShaderImageFilterProps extends ChildrenProps {
     uniforms?: Uniforms;
 }
 export interface BlendImageFilterProps extends ChildrenProps {
-    mode: BlendMode;
+    mode: SkEnum<typeof BlendMode>;
 }
 export interface MorphologyImageFilterProps extends ChildrenProps {
     operator: "erode" | "dilate";

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

@@ -1,6 +1,5 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "../../sksg/DeclarationContext";
 export interface Node<P> {
     type: NodeType;
     setProps(props: P): void;
@@ -13,7 +12,6 @@ export interface Node<P> {
 }
 export type Invalidate = () => void;
 export interface DeclarationNode<P> extends Node<P> {
-    decorate(ctx: DeclarationContext): void;
     setInvalidate(invalidate: Invalidate): void;
 }
 export type RenderNode<P extends GroupProps> = Node<P>;

package/lib/typescript/src/external/reanimated/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./useAnimatedImageValue";
-export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";

package/lib/typescript/src/external/reanimated/renderHelpers.d.ts

@@ -1,7 +1,6 @@
 import type { Container } from "../../renderer/Container";
 import type { AnimatedProps } from "../../renderer/processors";
 import type { Node } from "../../dom/types";
-export declare let HAS_REANIMATED: boolean;
 export declare let HAS_REANIMATED_3: boolean;
 export declare const unbindReanimatedNode: (node: Node<unknown>) => void;
 export declare function extractReanimatedProps(props: AnimatedProps<any>): AnimatedProps<any, never>[];

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

@@ -35,6 +35,7 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
        SkPaint with the result of SkPaint().
      */
     reset(): void;
+    assign(paint: SkPaint): void;
     /**
      * Retrieves the alpha and RGB unpremultiplied. RGB are extended sRGB values
      * (sRGB gamut, and encoded with the sRGB transfer function).

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);
     dispose: () => void;
     copy(): JsiSkPaint;
+    assign(paint: JsiSkPaint): void;
     reset(): void;
     getAlphaf(): number;
     getColor(): Float32Array;

package/lib/typescript/src/sksg/Container.d.ts

@@ -1,9 +1,10 @@
 import type { Skia, SkCanvas } from "../skia/types";
-import type { Node } from "./nodes";
+import type { Node } from "./Node";
 export declare class Container {
     Skia: Skia;
     private nativeId;
-    _root: Node[];
+    private _root;
+    private _recording;
     unmounted: boolean;
     private values;
     private mapperId;

package/lib/typescript/src/sksg/HostConfig.d.ts

@@ -1,6 +1,6 @@
 import type { HostConfig } from "react-reconciler";
-import { NodeType } from "../dom/types";
-import type { Node } from "./nodes/Node";
+import type { NodeType } from "../dom/types";
+import type { Node } from "./Node";
 import type { Container } from "./Container";
 export declare const debug: (message?: any, ...optionalParams: any[]) => void;
 type Instance = Node;

package/lib/typescript/src/sksg/Node.d.ts

@@ -0,0 +1,19 @@
+import { NodeType } from "../dom/types";
+export interface Node<Props = unknown> {
+    type: NodeType;
+    props: Props;
+    children: Node[];
+}
+export declare const isColorFilter: (type: NodeType) => type is NodeType.MatrixColorFilter | NodeType.BlendColorFilter | NodeType.LinearToSRGBGammaColorFilter | NodeType.SRGBToLinearGammaColorFilter | NodeType.LumaColorFilter | NodeType.LerpColorFilter;
+export declare const isPathEffect: (type: NodeType) => type is NodeType.DiscretePathEffect | NodeType.DashPathEffect | NodeType.Path1DPathEffect | NodeType.Path2DPathEffect | NodeType.CornerPathEffect | NodeType.SumPathEffect | NodeType.Line2DPathEffect;
+export declare const isImageFilter: (type: NodeType) => type is NodeType.OffsetImageFilter | NodeType.DisplacementMapImageFilter | NodeType.BlurImageFilter | NodeType.DropShadowImageFilter | NodeType.MorphologyImageFilter | NodeType.BlendImageFilter | NodeType.RuntimeShaderImageFilter;
+export declare const isShader: (type: NodeType) => type is NodeType.Shader | NodeType.ImageShader | NodeType.ColorShader | NodeType.Turbulence | NodeType.FractalNoise | NodeType.LinearGradient | NodeType.RadialGradient | NodeType.SweepGradient | NodeType.TwoPointConicalGradient;
+export declare const sortNodeChildren: (parent: Node) => {
+    colorFilters: Node<unknown>[];
+    drawings: Node<unknown>[];
+    maskFilters: Node<unknown>[];
+    shaders: Node<unknown>[];
+    pathEffects: Node<unknown>[];
+    imageFilters: Node<unknown>[];
+    paints: Node<unknown>[];
+};

package/lib/typescript/src/sksg/Reconciler.d.ts

@@ -9,7 +9,7 @@ export declare class SkiaSGRoot {
     get sg(): {
         type: NodeType;
         props: {};
-        children: import("./nodes").Node<unknown>[];
+        children: import("./Node").Node<unknown>[];
         isDeclaration: boolean;
     };
     render(element: ReactNode): void;

package/lib/typescript/src/sksg/Recorder/Core.d.ts

@@ -0,0 +1,79 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, DrawingNodeProps } from "../../dom/types";
+export declare enum CommandType {
+    SavePaint = 0,
+    RestorePaint = 1,
+    SaveCTM = 2,
+    RestoreCTM = 3,
+    PushColorFilter = 4,
+    PushBlurMaskFilter = 5,
+    PushImageFilter = 6,
+    PushPathEffect = 7,
+    PushShader = 8,
+    ComposeColorFilter = 9,
+    ComposeImageFilter = 10,
+    ComposePathEffect = 11,
+    MaterializePaint = 12,
+    SaveBackdropFilter = 13,
+    SaveLayer = 14,
+    RestorePaintDeclaration = 15,
+    DrawBox = 16,
+    DrawImage = 17,
+    DrawCircle = 18,
+    DrawPaint = 19,
+    DrawPoints = 20,
+    DrawPath = 21,
+    DrawRect = 22,
+    DrawRRect = 23,
+    DrawOval = 24,
+    DrawLine = 25,
+    DrawPatch = 26,
+    DrawVertices = 27,
+    DrawDiffRect = 28,
+    DrawText = 29,
+    DrawTextPath = 30,
+    DrawTextBlob = 31,
+    DrawGlyphs = 32,
+    DrawPicture = 33,
+    DrawImageSVG = 34,
+    DrawParagraph = 35,
+    DrawAtlas = 36
+}
+export type Command<T extends CommandType = CommandType> = {
+    type: T;
+    [key: string]: unknown;
+};
+export declare const materializeProps: (command: {
+    props: Record<string, unknown>;
+    animatedProps?: Record<string, SharedValue<unknown>>;
+}) => void;
+export declare const isCommand: <T extends CommandType>(command: Command, type: T) => command is Command<T>;
+interface Props {
+    [CommandType.DrawImage]: ImageProps;
+    [CommandType.DrawCircle]: CircleProps;
+    [CommandType.SaveCTM]: CTMProps;
+    [CommandType.SavePaint]: DrawingNodeProps;
+    [CommandType.PushBlurMaskFilter]: BlurMaskFilterProps;
+    [CommandType.DrawPoints]: PointsProps;
+    [CommandType.DrawPath]: PathProps;
+    [CommandType.DrawRect]: RectProps;
+    [CommandType.DrawRRect]: RoundedRectProps;
+    [CommandType.DrawOval]: OvalProps;
+    [CommandType.DrawLine]: LineProps;
+    [CommandType.DrawPatch]: PatchProps;
+    [CommandType.DrawVertices]: VerticesProps;
+    [CommandType.DrawDiffRect]: DiffRectProps;
+    [CommandType.DrawText]: TextProps;
+    [CommandType.DrawTextPath]: TextPathProps;
+    [CommandType.DrawTextBlob]: TextBlobProps;
+    [CommandType.DrawGlyphs]: GlyphsProps;
+    [CommandType.DrawPicture]: PictureProps;
+    [CommandType.DrawImageSVG]: ImageSVGProps;
+    [CommandType.DrawParagraph]: ParagraphProps;
+    [CommandType.DrawAtlas]: AtlasProps;
+}
+interface DrawCommand<T extends CommandType> extends Command<T> {
+    props: T extends keyof Props ? Props[T] : never;
+}
+export declare const isDrawCommand: <T extends keyof Props>(command: Command, type: T) => command is DrawCommand<T>;
+export {};

package/lib/typescript/src/sksg/Recorder/DrawingContext.d.ts

@@ -0,0 +1,18 @@
+import type { Skia, SkCanvas, SkColorFilter, SkPaint, SkShader, SkImageFilter, SkPathEffect } from "../../skia/types";
+export declare const createDrawingContext: (Skia: Skia, paintPool: SkPaint[], canvas: SkCanvas) => {
+    Skia: Skia;
+    canvas: SkCanvas;
+    paints: SkPaint[];
+    colorFilters: SkColorFilter[];
+    shaders: SkShader[];
+    imageFilters: SkImageFilter[];
+    pathEffects: SkPathEffect[];
+    paintDeclarations: SkPaint[];
+    paintPool: SkPaint[];
+    savePaint: () => void;
+    saveBackdropFilter: () => void;
+    readonly paint: SkPaint;
+    restorePaint: () => SkPaint | undefined;
+    materializePaint: () => void;
+};
+export type DrawingContext = ReturnType<typeof createDrawingContext>;

package/lib/typescript/src/sksg/Recorder/Player.d.ts

@@ -0,0 +1,3 @@
+import { type Command } from "./Core";
+import type { DrawingContext } from "./DrawingContext";
+export declare const replay: (ctx: DrawingContext, commands: Command[]) => void;

package/lib/typescript/src/sksg/Recorder/Recorder.d.ts

@@ -0,0 +1,50 @@
+import type { SharedValue } from "react-native-reanimated";
+import { NodeType } from "../../dom/types";
+import type { BlurMaskFilterProps, CircleProps, CTMProps, ImageProps, PaintProps, PointsProps, PathProps, RectProps, RoundedRectProps, OvalProps, LineProps, PatchProps, VerticesProps, DiffRectProps, TextProps, TextPathProps, TextBlobProps, GlyphsProps, PictureProps, ImageSVGProps, ParagraphProps, AtlasProps, BoxProps, BoxShadowProps } from "../../dom/types";
+import type { AnimatedProps } from "../../renderer";
+import type { Command } from "./Core";
+export declare class Recorder {
+    commands: Command[];
+    private processProps;
+    private add;
+    savePaint(props: AnimatedProps<PaintProps>): void;
+    restorePaint(): void;
+    restorePaintDeclaration(): void;
+    materializePaint(): void;
+    pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
+    pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
+    composePathEffect(): void;
+    composeColorFilter(): void;
+    composeImageFilter(): void;
+    saveCTM(props: AnimatedProps<CTMProps>): void;
+    restoreCTM(): void;
+    drawPaint(): void;
+    saveLayer(): void;
+    saveBackdropFilter(): void;
+    drawBox(boxProps: AnimatedProps<BoxProps>, shadows: {
+        props: BoxShadowProps;
+        animatedProps?: Record<string, SharedValue<unknown>>;
+    }[]): void;
+    drawImage(props: AnimatedProps<ImageProps>): void;
+    drawCircle(props: AnimatedProps<CircleProps>): void;
+    drawPoints(props: AnimatedProps<PointsProps>): void;
+    drawPath(props: AnimatedProps<PathProps>): void;
+    drawRect(props: AnimatedProps<RectProps>): void;
+    drawRRect(props: AnimatedProps<RoundedRectProps>): void;
+    drawOval(props: AnimatedProps<OvalProps>): void;
+    drawLine(props: AnimatedProps<LineProps>): void;
+    drawPatch(props: AnimatedProps<PatchProps>): void;
+    drawVertices(props: AnimatedProps<VerticesProps>): void;
+    drawDiffRect(props: AnimatedProps<DiffRectProps>): void;
+    drawText(props: AnimatedProps<TextProps>): void;
+    drawTextPath(props: AnimatedProps<TextPathProps>): void;
+    drawTextBlob(props: AnimatedProps<TextBlobProps>): void;
+    drawGlyphs(props: AnimatedProps<GlyphsProps>): void;
+    drawPicture(props: AnimatedProps<PictureProps>): void;
+    drawImageSVG(props: AnimatedProps<ImageSVGProps>): void;
+    drawParagraph(props: AnimatedProps<ParagraphProps>): void;
+    drawAtlas(props: AnimatedProps<AtlasProps>): void;
+}

package/lib/typescript/src/sksg/Recorder/Recording.d.ts

@@ -0,0 +1,7 @@
+import type { SkPaint } from "../../skia/types";
+import type { Command } from "./Core";
+export interface Recording {
+    commands: Command[];
+    paintPool: SkPaint[];
+}
+export declare const createRecording: (commands: Command[]) => Recording;

package/lib/typescript/src/sksg/Recorder/Visitor.d.ts

@@ -0,0 +1,5 @@
+import type { DrawingNodeProps } from "../../dom/types";
+import type { Node } from "../Node";
+import type { Recorder } from "./Recorder";
+export declare const processPaint: ({ opacity, color, strokeWidth, blendMode, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, paint: paintRef, }: DrawingNodeProps) => DrawingNodeProps | null;
+export declare const visit: (recorder: Recorder, root: Node[]) => void;

package/lib/typescript/src/sksg/Recorder/commands/Box.d.ts

@@ -0,0 +1,13 @@
+import type { BoxProps, BoxShadowProps } from "../../../dom/types";
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+interface BoxCommand extends Command<CommandType.DrawBox> {
+    props: BoxProps;
+    shadows: {
+        props: BoxShadowProps;
+    }[];
+}
+export declare const isBoxCommand: (command: Command) => command is BoxCommand;
+export declare const drawBox: (ctx: DrawingContext, command: BoxCommand) => void;
+export {};

package/lib/typescript/src/sksg/Recorder/commands/CTM.d.ts

@@ -0,0 +1,3 @@
+import type { CTMProps } from "../../../dom/types";
+import type { DrawingContext } from "../DrawingContext";
+export declare const saveCTM: (ctx: DrawingContext, props: CTMProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/ColorFilters.d.ts

@@ -0,0 +1,6 @@
+import { CommandType } from "../Core";
+import type { Command } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushColorFilter: (command: Command) => command is Command<CommandType.PushColorFilter>;
+export declare const composeColorFilters: (ctx: DrawingContext) => void;
+export declare const pushColorFilter: (ctx: DrawingContext, command: Command<CommandType.PushColorFilter>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Drawing.d.ts

@@ -0,0 +1,24 @@
+import type { AtlasProps, BoxProps, CircleProps, DiffRectProps, DrawingNodeProps, GlyphsProps, ImageProps, ImageSVGProps, LineProps, OvalProps, ParagraphProps, PatchProps, PathProps, PictureProps, PointsProps, RectProps, RoundedRectProps, TextBlobProps, TextPathProps, TextProps, VerticesProps } from "../../../dom/types";
+import type { Node } from "../../Node";
+import type { DrawingContext } from "../DrawingContext";
+export declare const drawLine: (ctx: DrawingContext, props: LineProps) => void;
+export declare const drawOval: (ctx: DrawingContext, props: OvalProps) => void;
+export declare const drawBox: (ctx: DrawingContext, props: BoxProps, children: Node<any>[]) => void;
+export declare const drawImage: (ctx: DrawingContext, props: ImageProps) => void;
+export declare const drawPoints: (ctx: DrawingContext, props: PointsProps) => void;
+export declare const drawVertices: (ctx: DrawingContext, props: VerticesProps) => void;
+export declare const drawDiffRect: (ctx: DrawingContext, props: DiffRectProps) => void;
+export declare const drawTextPath: (ctx: DrawingContext, props: TextPathProps) => void;
+export declare const drawText: (ctx: DrawingContext, props: TextProps) => void;
+export declare const drawPatch: (ctx: DrawingContext, props: PatchProps) => void;
+export declare const drawPath: (ctx: DrawingContext, props: PathProps) => void;
+export declare const drawRect: (ctx: DrawingContext, props: RectProps) => void;
+export declare const drawRRect: (ctx: DrawingContext, props: RoundedRectProps) => void;
+export declare const drawTextBlob: (ctx: DrawingContext, props: TextBlobProps) => void;
+export declare const drawGlyphs: (ctx: DrawingContext, props: GlyphsProps) => void;
+export declare const drawImageSVG: (ctx: DrawingContext, props: ImageSVGProps) => void;
+export declare const drawParagraph: (ctx: DrawingContext, props: ParagraphProps) => void;
+export declare const drawPicture: (ctx: DrawingContext, props: PictureProps) => void;
+export declare const drawAtlas: (ctx: DrawingContext, props: AtlasProps) => void;
+export declare const drawCircle: (ctx: DrawingContext, props: CircleProps) => void;
+export declare const drawFill: (ctx: DrawingContext, _props: DrawingNodeProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/ImageFilters.d.ts

@@ -0,0 +1,12 @@
+import type { BlurMaskFilterProps } from "../../../dom/types";
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare enum MorphologyOperator {
+    Erode = 0,
+    Dilate = 1
+}
+export declare const composeImageFilters: (ctx: DrawingContext) => void;
+export declare const setBlurMaskFilter: (ctx: DrawingContext, props: BlurMaskFilterProps) => void;
+export declare const isPushImageFilter: (command: Command) => command is Command<CommandType.PushImageFilter>;
+export declare const pushImageFilter: (ctx: DrawingContext, command: Command<CommandType.PushImageFilter>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Paint.d.ts

@@ -0,0 +1,4 @@
+import type { PaintProps } from "../../../dom/types";
+import type { SkPaint, Skia } from "../../../skia/types";
+export declare const processColor: (Skia: Skia, color: number | string | Float32Array | number[]) => Float32Array;
+export declare const setPaintProperties: (Skia: Skia, paint: SkPaint, { opacity, color, blendMode, strokeWidth, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, }: PaintProps) => void;

package/lib/typescript/src/sksg/Recorder/commands/PathEffects.d.ts

@@ -0,0 +1,6 @@
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushPathEffect: (command: Command) => command is Command<CommandType.PushPathEffect>;
+export declare const composePathEffects: (ctx: DrawingContext) => void;
+export declare const pushPathEffect: (ctx: DrawingContext, command: Command<CommandType.PushPathEffect>) => void;

package/lib/typescript/src/sksg/Recorder/commands/Shaders.d.ts

@@ -0,0 +1,5 @@
+import type { Command } from "../Core";
+import { CommandType } from "../Core";
+import type { DrawingContext } from "../DrawingContext";
+export declare const isPushShader: (command: Command) => command is Command<CommandType.PushShader>;
+export declare const pushShader: (ctx: DrawingContext, command: Command<CommandType.PushShader>) => void;

package/lib/typescript/src/sksg/{nodes/utils.d.ts → utils.d.ts}

@@ -1,3 +1,6 @@
 import type { SharedValue } from "react-native-reanimated";
 export declare const isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;
 export declare const materialize: <T extends object>(props: T) => T;
+type Composer<T> = (outer: T, inner: T) => T;
+export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;
+export {};

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/dom/types/Common.ts

@@ -70,6 +70,12 @@ export interface TransformProps {
   matrix?: InputMatrix;
 }
 
+export interface CTMProps extends TransformProps {
+  clip?: ClipDef;
+  invertClip?: boolean;
+  layer?: SkPaint | boolean;
+}
+
 export interface PaintProps extends ChildrenProps {
   color?: Color;
   strokeWidth?: number;
@@ -83,8 +89,4 @@ export interface PaintProps extends ChildrenProps {
   dither?: boolean;
 }
 
-export interface GroupProps extends PaintProps, TransformProps {
-  clip?: ClipDef;
-  invertClip?: boolean;
-  layer?: SkPaint | boolean;
-}
+export interface GroupProps extends PaintProps, CTMProps {}

package/src/dom/types/ImageFilters.ts

@@ -24,8 +24,9 @@ export interface RuntimeShaderImageFilterProps extends ChildrenProps {
   uniforms?: Uniforms;
 }
 
+// TODO: delete
 export interface BlendImageFilterProps extends ChildrenProps {
-  mode: BlendMode;
+  mode: SkEnum<typeof BlendMode>;
 }
 
 export interface MorphologyImageFilterProps extends ChildrenProps {

package/src/dom/types/Node.ts

@@ -1,6 +1,5 @@
 import type { GroupProps } from "./Common";
 import type { NodeType } from "./NodeType";
-import type { DeclarationContext } from "../../sksg/DeclarationContext";
 
 export interface Node<P> {
   type: NodeType;
@@ -18,9 +17,6 @@ export interface Node<P> {
 export type Invalidate = () => void;
 
 export interface DeclarationNode<P> extends Node<P> {
-  //declarationType: DeclarationType;
-  decorate(ctx: DeclarationContext): void;
-
   setInvalidate(invalidate: Invalidate): void;
 }
 

package/src/external/reanimated/index.ts

@@ -1,5 +1,4 @@
 export * from "./useAnimatedImageValue";
-export * from "./useDerivedValueOnJS";
 export * from "./renderHelpers";
 export * from "./interpolators";
 export * from "./textures";

package/src/external/reanimated/renderHelpers.ts

@@ -6,7 +6,6 @@ import type { Node } from "../../dom/types";
 
 import Rea from "./ReanimatedProxy";
 
-export let HAS_REANIMATED = false;
 export let HAS_REANIMATED_3 = false;
 try {
   // This logic is convoluted but necessary
@@ -16,7 +15,6 @@ try {
   const reanimatedVersion =
     require("react-native-reanimated/package.json").version;
   require("react-native-reanimated");
-  HAS_REANIMATED = !!reanimatedVersion;
   if (
     reanimatedVersion &&
     (reanimatedVersion >= "3.0.0" || reanimatedVersion.includes("3.0.0-"))
@@ -24,13 +22,13 @@ try {
     HAS_REANIMATED_3 = true;
   }
 } catch (e) {
-  HAS_REANIMATED = false;
+  // do nothing
 }
 
 const _bindings = new WeakMap<Node<unknown>, unknown>();
 
 export const unbindReanimatedNode = (node: Node<unknown>) => {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const previousMapperId = _bindings.get(node);
@@ -40,7 +38,7 @@ export const unbindReanimatedNode = (node: Node<unknown>) => {
 };
 
 export function extractReanimatedProps(props: AnimatedProps<any>) {
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return [props, {}];
   }
   const reanimatedProps = {} as AnimatedProps<any>;
@@ -60,50 +58,12 @@ export function extractReanimatedProps(props: AnimatedProps<any>) {
   return [otherProps, reanimatedProps];
 }
 
-function bindReanimatedProps2(
-  container: Container,
-  node: Node<any>,
-  reanimatedProps: AnimatedProps<any>
-) {
-  const sharedValues = Object.values(reanimatedProps);
-  const previousMapperId = _bindings.get(node);
-  if (previousMapperId !== undefined) {
-    Rea.stopMapper(previousMapperId as number);
-  }
-  if (sharedValues.length > 0) {
-    const viewId = container.getNativeId();
-    const { SkiaViewApi } = global;
-    const updateProps = () => {
-      for (const propName in reanimatedProps) {
-        node && node.setProp(propName, reanimatedProps[propName].value);
-      }
-      // On React Native we use the SkiaViewApi to redraw because it can
-      // run on the worklet thread (container.redraw can't)
-      // if SkiaViewApi is undefined, we are on web and container.redraw()
-      // can safely be invoked
-      if (SkiaViewApi) {
-        SkiaViewApi.requestRedraw(viewId);
-      } else {
-        container.redraw();
-      }
-    };
-    const mapperId = Rea.startMapper(() => {
-      "worklet";
-      Rea.runOnJS(updateProps)();
-    }, sharedValues);
-    _bindings.set(node, mapperId);
-  }
-}
-
 export function bindReanimatedProps(
   container: Container,
   node: Node<any>,
   reanimatedProps: AnimatedProps<any>
 ) {
-  if (HAS_REANIMATED && !HAS_REANIMATED_3) {
-    return bindReanimatedProps2(container, node, reanimatedProps);
-  }
-  if (!HAS_REANIMATED) {
+  if (!HAS_REANIMATED_3) {
     return;
   }
   const sharedValues = Object.values(reanimatedProps);

package/src/renderer/__tests__/e2e/ColorFilters.spec.tsx

@@ -14,6 +14,7 @@ import {
 import { docPath, checkImage, processResult } from "../../../__tests__/setup";
 import { setupSkia } from "../../../skia/__tests__/setup";
 import { fitRects } from "../../../dom/nodes";
+import { BlendMode } from "../../../skia/types";
 
 const blackAndWhite = [
   0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
@@ -57,6 +58,20 @@ describe("Color Filters", () => {
     );
     checkImage(img, docPath("color-filters/color-blend.png"));
   });
+  it("should build the reference result for should use composition", async () => {
+    const { surface: ckSurface, Skia, canvas } = setupSkia(wWidth, wHeight);
+    const paint = Skia.Paint();
+    const outer = Skia.ColorFilter.MakeSRGBToLinearGamma();
+    const inner = Skia.ColorFilter.MakeBlend(
+      Skia.Color("lightblue"),
+      BlendMode.SrcIn
+    );
+    paint.setColorFilter(Skia.ColorFilter.MakeCompose(outer, inner));
+    const r = (surface.width * 3) / 2;
+    canvas.drawCircle(r, r, r, paint);
+    canvas.drawCircle(r * 2, r, r, paint);
+    processResult(ckSurface, docPath("color-filters/composition.png"));
+  });
   it("should use composition", async () => {
     const { width } = surface;
     const r = width / 2;