@shopify/react-native-skia 1.7.7 → 1.8.0

package/lib/typescript/lib/module/dom/nodes/JsiSkDOM.d.ts

@@ -1,119 +1,59 @@
 export class JsiSkDOM {
-    constructor(ctx: any, native: any);
-    ctx: any;
-    native: any;
-    Layer(props: any): import("../../../..").RenderNode<import("../../../..").ChildrenProps> | LayerNode;
-    Group(props: any): import("../../../..").RenderNode<import("../../../..").GroupProps> | GroupNode;
-    Paint(props: any): import("../../../..").DeclarationNode<import("../../../..").PaintProps> | PaintNode;
-    Fill(props: any): import("../../../..").RenderNode<import("../../../..").PaintProps> | FillNode;
-    Image(props: any): import("../../../..").RenderNode<import("../../../..").ImageProps> | ImageNode;
-    Circle(props: any): import("../../../..").RenderNode<import("../../../..").CircleProps> | CircleNode;
-    Path(props: any): import("../../../..").RenderNode<import("../../../..").PathProps> | PathNode;
-    Line(props: any): import("../../../..").RenderNode<import("../../../..").LineProps> | LineNode;
-    Oval(props: any): import("../../../..").RenderNode<import("../../../..").OvalProps> | OvalNode;
-    Patch(props: any): import("../../../..").RenderNode<import("../../../..").PatchProps> | PatchNode;
-    Points(props: any): import("../../../..").RenderNode<import("../../../..").PointsProps> | PointsNode;
-    Rect(props: any): import("../../../../src/dom/nodes/DrawingNode").JsiDrawingNode<import("../../../..").RectProps, import("../../../..").SkRect> | RectNode;
-    RRect(props: any): import("../../../../src/dom/nodes/DrawingNode").JsiDrawingNode<import("../../../..").RoundedRectProps, import("../../../..").SkRRect> | RRectNode;
-    Vertices(props: any): import("../../../..").RenderNode<import("../../../..").VerticesProps> | VerticesNode;
-    Text(props: any): import("../../../..").RenderNode<import("../../../..").TextProps> | TextNode;
-    TextPath(props: any): import("../../../..").RenderNode<import("../../../..").TextPathProps> | TextPathNode;
-    TextBlob(props: any): import("../../../..").RenderNode<import("../../../..").TextBlobProps> | TextBlobNode;
-    Glyphs(props: any): import("../../../..").RenderNode<import("../../../..").GlyphsProps> | GlyphsNode;
-    DiffRect(props: any): import("../../../..").RenderNode<import("../../../..").DiffRectProps> | DiffRectNode;
-    Picture(props: any): import("../../../..").RenderNode<import("../../../..").PictureProps> | PictureNode;
-    Atlas(props: any): import("../../../..").RenderNode<import("../../../..").AtlasProps> | AtlasNode;
-    ImageSVG(props: any): import("../../../..").RenderNode<import("../../../..").ImageSVGProps> | ImageSVGNode;
-    BlurMaskFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlurMaskFilterProps> | BlurMaskFilterNode;
-    BlendImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendImageFilterProps> | BlendImageFilterNode;
-    DropShadowImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").DropShadowImageFilterProps> | DropShadowImageFilterNode;
-    DisplacementMapImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").DisplacementMapImageFilterProps> | DisplacementMapImageFilterNode;
-    BlurImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlurImageFilterProps> | BlurImageFilterNode;
-    OffsetImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").OffsetImageFilterProps> | OffsetImageFilterNode;
-    MorphologyImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").MorphologyImageFilterProps> | MorphologyImageFilterNode;
-    RuntimeShaderImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").RuntimeShaderImageFilterProps> | RuntimeShaderImageFilterNode;
-    MatrixColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").MatrixColorFilterProps> | MatrixColorFilterNode;
-    BlendColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendColorFilterProps> | BlendColorFilterNode;
-    LumaColorFilter(): import("../../../..").DeclarationNode<null> | LumaColorFilterNode;
-    LinearToSRGBGammaColorFilter(): import("../../../..").DeclarationNode<null> | LinearToSRGBGammaColorFilterNode;
-    SRGBToLinearGammaColorFilter(): import("../../../..").DeclarationNode<null> | SRGBToLinearGammaColorFilterNode;
-    LerpColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").LerpColorFilterProps> | LerpColorFilterNode;
-    Shader(props: any): import("../../../..").DeclarationNode<import("../../../..").ShaderProps> | ShaderNode;
-    ImageShader(props: any): import("../../../..").DeclarationNode<import("../../../..").ImageShaderProps> | ImageShaderNode;
-    ColorShader(props: any): import("../../../..").DeclarationNode<import("../../../..").ColorProps> | ColorNode;
-    SweepGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").SweepGradientProps> | SweepGradientNode;
-    Turbulence(props: any): import("../../../..").DeclarationNode<import("../../../..").TurbulenceProps> | TurbulenceNode;
-    FractalNoise(props: any): import("../../../..").DeclarationNode<import("../../../..").FractalNoiseProps> | FractalNoiseNode;
-    LinearGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").LinearGradientProps> | LinearGradientNode;
-    RadialGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").RadialGradientProps> | RadialGradientNode;
-    TwoPointConicalGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").TwoPointConicalGradientProps> | TwoPointConicalGradientNode;
-    CornerPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").CornerPathEffectProps> | CornerPathEffectNode;
-    DiscretePathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").DiscretePathEffectProps> | DiscretePathEffectNode;
-    DashPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").DashPathEffectProps> | DashPathEffectNode;
-    Path1DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Path1DPathEffectProps> | Path1DPathEffectNode;
-    Path2DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Path2DPathEffectProps> | Path2DPathEffectNode;
-    SumPathEffect(): import("../../../..").DeclarationNode<null> | SumPathEffectNode;
-    Line2DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Line2DPathEffectProps> | Line2DPathEffectNode;
-    Blend(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendProps> | BlendNode;
-    BackdropFilter(props: any): import("../../../..").RenderNode<import("../../../..").ChildrenProps> | BackdropFilterNode;
-    Box(props: any): import("../../../..").RenderNode<import("../../../..").BoxProps> | BoxNode;
-    BoxShadow(props: any): import("../../../..").DeclarationNode<import("../../../..").BoxShadowProps> | BoxShadowNode;
-    Paragraph(props: any): import("../../../..").RenderNode<import("../../../..").ParagraphProps> | ParagraphNode;
+    Layer(props: any): import("../../../..").RenderNode<import("../../../..").ChildrenProps>;
+    Group(props: any): import("../../../..").RenderNode<import("../../../..").GroupProps>;
+    Paint(props: any): import("../../../..").DeclarationNode<import("../../../..").PaintProps>;
+    Fill(props: any): import("../../../..").RenderNode<import("../../../..").PaintProps>;
+    Image(props: any): import("../../../..").RenderNode<import("../../../..").ImageProps>;
+    Circle(props: any): import("../../../..").RenderNode<import("../../../..").CircleProps>;
+    Path(props: any): import("../../../..").RenderNode<import("../../../..").PathProps>;
+    Line(props: any): import("../../../..").RenderNode<import("../../../..").LineProps>;
+    Oval(props: any): import("../../../..").RenderNode<import("../../../..").OvalProps>;
+    Patch(props: any): import("../../../..").RenderNode<import("../../../..").PatchProps>;
+    Points(props: any): import("../../../..").RenderNode<import("../../../..").PointsProps>;
+    Rect(props: any): import("../../../..").RenderNode<import("../../../..").RectProps>;
+    RRect(props: any): import("../../../..").RenderNode<import("../../../..").RoundedRectProps>;
+    Vertices(props: any): import("../../../..").RenderNode<import("../../../..").VerticesProps>;
+    Text(props: any): import("../../../..").RenderNode<import("../../../..").TextProps>;
+    TextPath(props: any): import("../../../..").RenderNode<import("../../../..").TextPathProps>;
+    TextBlob(props: any): import("../../../..").RenderNode<import("../../../..").TextBlobProps>;
+    Glyphs(props: any): import("../../../..").RenderNode<import("../../../..").GlyphsProps>;
+    DiffRect(props: any): import("../../../..").RenderNode<import("../../../..").DiffRectProps>;
+    Picture(props: any): import("../../../..").RenderNode<import("../../../..").PictureProps>;
+    Atlas(props: any): import("../../../..").RenderNode<import("../../../..").AtlasProps>;
+    ImageSVG(props: any): import("../../../..").RenderNode<import("../../../..").ImageSVGProps>;
+    BlurMaskFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlurMaskFilterProps>;
+    BlendImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendImageFilterProps>;
+    DropShadowImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").DropShadowImageFilterProps>;
+    DisplacementMapImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").DisplacementMapImageFilterProps>;
+    BlurImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlurImageFilterProps>;
+    OffsetImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").OffsetImageFilterProps>;
+    MorphologyImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").MorphologyImageFilterProps>;
+    RuntimeShaderImageFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").RuntimeShaderImageFilterProps>;
+    MatrixColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").MatrixColorFilterProps>;
+    BlendColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendColorFilterProps>;
+    LumaColorFilter(): import("../../../..").DeclarationNode<null>;
+    LinearToSRGBGammaColorFilter(): import("../../../..").DeclarationNode<null>;
+    SRGBToLinearGammaColorFilter(): import("../../../..").DeclarationNode<null>;
+    LerpColorFilter(props: any): import("../../../..").DeclarationNode<import("../../../..").LerpColorFilterProps>;
+    Shader(props: any): import("../../../..").DeclarationNode<import("../../../..").ShaderProps>;
+    ImageShader(props: any): import("../../../..").DeclarationNode<import("../../../..").ImageShaderProps>;
+    ColorShader(props: any): import("../../../..").DeclarationNode<import("../../../..").ColorProps>;
+    SweepGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").SweepGradientProps>;
+    Turbulence(props: any): import("../../../..").DeclarationNode<import("../../../..").TurbulenceProps>;
+    FractalNoise(props: any): import("../../../..").DeclarationNode<import("../../../..").FractalNoiseProps>;
+    LinearGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").LinearGradientProps>;
+    RadialGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").RadialGradientProps>;
+    TwoPointConicalGradient(props: any): import("../../../..").DeclarationNode<import("../../../..").TwoPointConicalGradientProps>;
+    CornerPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").CornerPathEffectProps>;
+    DiscretePathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").DiscretePathEffectProps>;
+    DashPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").DashPathEffectProps>;
+    Path1DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Path1DPathEffectProps>;
+    Path2DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Path2DPathEffectProps>;
+    SumPathEffect(): import("../../../..").DeclarationNode<null>;
+    Line2DPathEffect(props: any): import("../../../..").DeclarationNode<import("../../../..").Line2DPathEffectProps>;
+    Blend(props: any): import("../../../..").DeclarationNode<import("../../../..").BlendProps>;
+    BackdropFilter(props: any): import("../../../..").RenderNode<import("../../../..").ChildrenProps>;
+    Box(props: any): import("../../../..").RenderNode<import("../../../..").BoxProps>;
+    BoxShadow(props: any): import("../../../..").DeclarationNode<import("../../../..").BoxShadowProps>;
+    Paragraph(props: any): import("../../../..").RenderNode<import("../../../..").ParagraphProps>;
 }
-import { LayerNode } from "./LayerNode";
-import { GroupNode } from "./GroupNode";
-import { PaintNode } from "./PaintNode";
-import { FillNode } from "./drawings";
-import { ImageNode } from "./drawings";
-import { CircleNode } from "./drawings";
-import { PathNode } from "./drawings";
-import { LineNode } from "./drawings";
-import { OvalNode } from "./drawings";
-import { PatchNode } from "./drawings";
-import { PointsNode } from "./drawings";
-import { RectNode } from "./drawings";
-import { RRectNode } from "./drawings";
-import { VerticesNode } from "./drawings";
-import { TextNode } from "./drawings";
-import { TextPathNode } from "./drawings";
-import { TextBlobNode } from "./drawings";
-import { GlyphsNode } from "./drawings";
-import { DiffRectNode } from "./drawings";
-import { PictureNode } from "./drawings";
-import { AtlasNode } from "./drawings";
-import { ImageSVGNode } from "./drawings";
-import { BlurMaskFilterNode } from "./paint";
-import { BlendImageFilterNode } from "./paint";
-import { DropShadowImageFilterNode } from "./paint";
-import { DisplacementMapImageFilterNode } from "./paint";
-import { BlurImageFilterNode } from "./paint";
-import { OffsetImageFilterNode } from "./paint";
-import { MorphologyImageFilterNode } from "./paint/ImageFilters";
-import { RuntimeShaderImageFilterNode } from "./paint";
-import { MatrixColorFilterNode } from "./paint/ColorFilters";
-import { BlendColorFilterNode } from "./paint/ColorFilters";
-import { LumaColorFilterNode } from "./paint/ColorFilters";
-import { LinearToSRGBGammaColorFilterNode } from "./paint/ColorFilters";
-import { SRGBToLinearGammaColorFilterNode } from "./paint/ColorFilters";
-import { LerpColorFilterNode } from "./paint/ColorFilters";
-import { ShaderNode } from "./paint/Shaders";
-import { ImageShaderNode } from "./paint/Shaders";
-import { ColorNode } from "./paint/Shaders";
-import { SweepGradientNode } from "./paint/Shaders";
-import { TurbulenceNode } from "./paint/Shaders";
-import { FractalNoiseNode } from "./paint/Shaders";
-import { LinearGradientNode } from "./paint/Shaders";
-import { RadialGradientNode } from "./paint/Shaders";
-import { TwoPointConicalGradientNode } from "./paint/Shaders";
-import { CornerPathEffectNode } from "./paint";
-import { DiscretePathEffectNode } from "./paint";
-import { DashPathEffectNode } from "./paint";
-import { Path1DPathEffectNode } from "./paint";
-import { Path2DPathEffectNode } from "./paint";
-import { SumPathEffectNode } from "./paint";
-import { Line2DPathEffectNode } from "./paint";
-import { BlendNode } from "./paint";
-import { BackdropFilterNode } from "./drawings";
-import { BoxNode } from "./drawings";
-import { BoxShadowNode } from "./drawings";
-import { ParagraphNode } from "./drawings/ParagraphNode";

package/lib/typescript/lib/module/dom/types/index.d.ts

@@ -1,5 +1,3 @@
-export * from "./DrawingContext";
-export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

package/lib/typescript/lib/module/index.d.ts

@@ -1,6 +1,7 @@
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/lib/module/mock/index.d.ts

@@ -57,9 +57,6 @@ export function Mock(CanvasKit: any): {
     useImage: () => null;
     useSVG: () => null;
     useVideo: () => null;
-    JsiDrawingContext: typeof import("../dom/types").JsiDrawingContext;
-    composeDeclarations: (filters: any, composer: any) => any;
-    DeclarationContext: typeof import("../dom/types").DeclarationContext;
     NodeType: {};
     JsiSkDOM: typeof import("../dom/nodes").JsiSkDOM;
     enumKey: (k: any) => any;

package/lib/typescript/lib/module/renderer/Canvas.web.d.ts

@@ -0,0 +1 @@
+export const Canvas: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/Canvas2.d.ts

@@ -0,0 +1 @@
+export const Canvas2: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/Canvas2.web.d.ts

@@ -0,0 +1 @@
+export const Canvas2: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;

package/lib/typescript/lib/module/renderer/Container.d.ts

@@ -1,10 +1,9 @@
 export class Container {
-    constructor(Skia: any, redraw: (() => void) | undefined, getNativeId: (() => number) | undefined, native: any);
+    constructor(redraw?: () => void, getNativeId?: () => number);
     redraw: () => void;
     getNativeId: () => number;
     Sk: JsiSkDOM;
-    _root: import("../../..").RenderNode<import("../../..").GroupProps> | import("../dom/nodes/GroupNode").GroupNode;
-    draw(ctx: any): void;
-    get root(): import("../../..").RenderNode<import("../../..").GroupProps> | import("../dom/nodes/GroupNode").GroupNode;
+    _root: import("../../..").RenderNode<import("../../..").GroupProps>;
+    get root(): import("../../..").RenderNode<import("../../..").GroupProps>;
 }
 import { JsiSkDOM } from "../dom/nodes";

package/lib/typescript/lib/module/renderer/HostComponents.d.ts

@@ -1,2 +1 @@
-export const NATIVE_DOM: boolean;
 export function createNode(container: any, type: any, props: any): any;

package/lib/typescript/lib/module/renderer/Reconciler.d.ts

@@ -1,9 +1,9 @@
 export class SkiaRoot {
-    constructor(Skia: any, native?: boolean, redraw?: () => void, getNativeId?: () => number);
+    constructor(redraw?: () => void, getNativeId?: () => number);
     container: Container;
     root: any;
     render(element: any): void;
     unmount(): void;
-    get dom(): import("../../..").RenderNode<import("../../..").GroupProps> | import("../dom/nodes/GroupNode").GroupNode;
+    get dom(): import("../../..").RenderNode<import("../../..").GroupProps>;
 }
 import { Container } from "./Container";

package/lib/typescript/lib/module/sksg/DeclarationContext.d.ts

@@ -0,0 +1,52 @@
+export function composeDeclarations(filters: any, composer: any): any;
+export function createDeclarationContext(Skia: any): {
+    Skia: any;
+    paints: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+    maskFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+    shaders: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+    pathEffects: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+    imageFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+    colorFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => undefined;
+        push: (decl: any) => void;
+        popAll: () => never[];
+        popAllAsOne: () => any;
+    };
+};

package/lib/typescript/lib/module/sksg/DrawingContext.d.ts

@@ -1,14 +1,10 @@
-export class DrawingContext {
-    constructor(Skia: any, canvas: any);
+export function createDrawingContext(Skia: any, canvas: any): {
     Skia: any;
     canvas: any;
-    paints: any[];
-    declCtx: DeclarationContext;
-    save(): void;
-    restore(): void;
-    get paint(): any;
-    getLocalPaints(): any[];
-    processPaint({ opacity, color, strokeWidth, blendMode, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, paint: paintProp }: {
+    save: () => number;
+    restore: () => any;
+    getPaint: () => any;
+    processPaint: ({ opacity, color, strokeWidth, blendMode, style, strokeJoin, strokeCap, strokeMiter, antiAlias, dither, paint: paintProp }: {
         opacity: any;
         color: any;
         strokeWidth: any;
@@ -20,7 +16,6 @@ export class DrawingContext {
         antiAlias: any;
         dither: any;
         paint: any;
-    }): boolean;
-    processMatrixAndClipping(props: any, layer: any): boolean;
-}
-import { DeclarationContext } from "../dom/types";
+    }, declCtx: any) => boolean;
+    processMatrixAndClipping: (props: any, layer: any) => boolean;
+};

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

@@ -1,5 +1,6 @@
 export class SkiaSGRoot {
     constructor(Skia: any, nativeId?: number);
+    Skia: any;
     container: Container;
     root: any;
     get sg(): {
@@ -10,6 +11,7 @@ export class SkiaSGRoot {
     };
     render(element: any): void;
     drawOnCanvas(canvas: any): void;
+    getPicture(): any;
     unmount(): void;
 }
 import { Container } from "./Container";

package/lib/typescript/lib/module/sksg/nodes/colorFilters.d.ts

@@ -1,3 +1,4 @@
+export function composeColorFilters(ctx: any, cf: any, processChildren: any): void;
 export function makeBlendColorFilter(ctx: any, props: any): any;
 export function makeSRGBToLinearGammaColorFilter(ctx: any): any;
 export function makeLinearToSRGBGammaColorFilter(ctx: any): any;

package/lib/typescript/lib/module/sksg/nodes/drawings.d.ts

@@ -1,7 +1,6 @@
 export function drawLine(ctx: any, props: any): void;
 export function drawOval(ctx: any, props: any): void;
 export function drawBox(ctx: any, props: any, children: any): void;
-export function drawBoxShadow(_ctx: any, _props: any): void;
 export function drawImage(ctx: any, props: any): void;
 export function drawPoints(ctx: any, props: any): void;
 export function drawVertices(ctx: any, props: any): void;

package/lib/typescript/lib/module/sksg/nodes/imageFilters.d.ts

@@ -1,4 +1,6 @@
 export let MorphologyOperator: {};
+export function declareBlend(ctx: any, props: any): void;
+export function composeImageFilters(ctx: any, imgf1: any, processChildren: any): void;
 export function makeOffsetImageFilter(ctx: any, props: any): any;
 export function declareDisplacementMapImageFilter(ctx: any, props: any): void;
 export function makeBlurImageFilter(ctx: any, props: any): any;

package/lib/typescript/lib/module/sksg/nodes/pathEffects.d.ts

@@ -1,3 +1,4 @@
+export function composePathEffects(ctx: any, pe: any, processChildren: any): void;
 export function makeDiscretePathEffect(ctx: any, props: any): any;
 export function makePath2DPathEffect(ctx: any, props: any): any;
 export function makeDashPathEffect(ctx: any, props: any): any;

package/lib/typescript/lib/module/views/SkiaDomView.web.d.ts

@@ -1,4 +0,0 @@
-export class SkiaDomView extends SkiaBaseWebView {
-    renderInCanvas(canvas: any): void;
-}
-import { SkiaBaseWebView } from "./SkiaBaseWebView";

package/lib/typescript/lib/module/views/SkiaPictureView.web.d.ts

@@ -1,4 +1,6 @@
 export class SkiaPictureView extends SkiaBaseWebView {
+    setPicture(picture: any): void;
+    picture: any;
     renderInCanvas(canvas: any): void;
 }
 import { SkiaBaseWebView } from "./SkiaBaseWebView";

package/lib/typescript/src/dom/nodes/JsiSkDOM.d.ts

@@ -2,12 +2,8 @@ import type { PathProps, SkDOM, GroupProps, ImageProps, BlurImageFilterProps, Ma
 import type { BlendImageFilterProps, BlendProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, MorphologyImageFilterProps, RuntimeShaderImageFilterProps } from "../types/ImageFilters";
 import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "../types/PathEffects";
 import type { ParagraphProps } from "../types/Paragraph";
-import { RRectNode } from "./drawings";
-import type { NodeContext } from "./Node";
 export declare class JsiSkDOM implements SkDOM {
-    private ctx;
-    private native;
-    constructor(ctx: NodeContext, native: boolean);
+    constructor();
     Layer(props?: ChildrenProps): import("../types").RenderNode<ChildrenProps>;
     Group(props?: GroupProps): import("../types").RenderNode<GroupProps>;
     Paint(props: PaintProps): import("../types").DeclarationNode<PaintProps>;
@@ -19,8 +15,8 @@ export declare class JsiSkDOM implements SkDOM {
     Oval(props: OvalProps): import("../types").RenderNode<OvalProps>;
     Patch(props: PatchProps): import("../types").RenderNode<PatchProps>;
     Points(props: PointsProps): import("../types").RenderNode<PointsProps>;
-    Rect(props: RectProps): import("./DrawingNode").JsiDrawingNode<RectProps, import("../..").SkRect>;
-    RRect(props: RoundedRectProps): RRectNode | import("./DrawingNode").JsiDrawingNode<RoundedRectProps, import("../..").SkRRect>;
+    Rect(props: RectProps): import("../types").RenderNode<RectProps>;
+    RRect(props: RoundedRectProps): import("../types").RenderNode<RoundedRectProps>;
     Vertices(props: VerticesProps): import("../types").RenderNode<VerticesProps>;
     Text(props: TextProps): import("../types").RenderNode<TextProps>;
     TextPath(props: TextPathProps): import("../types").RenderNode<TextPathProps>;

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

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

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

@@ -1,5 +1,3 @@
-export * from "./DrawingContext";
-export * from "./DeclarationContext";
 export * from "./Node";
 export * from "./NodeType";
 export * from "./SkDOM";

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

@@ -2,6 +2,7 @@ import "./skia/NativeSetup";
 export { JsiSkImage } from "./skia/web/JsiSkImage";
 export * from "./renderer";
 export * from "./renderer/Canvas";
+export * from "./renderer/Canvas2";
 export * from "./renderer/Offscreen";
 export * from "./views";
 export * from "./skia";

package/lib/typescript/src/renderer/Canvas.web.d.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkSize } from "../skia/types";
+export interface CanvasProps extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    mode?: "continuous" | "default";
+}
+export declare const Canvas: import("react").ForwardRefExoticComponent<CanvasProps & import("react").RefAttributes<unknown>>;

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

@@ -0,0 +1,10 @@
+import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
+import type { SkSize } from "../skia/types";
+export interface Canvas2Props extends ViewProps {
+    debug?: boolean;
+    opaque?: boolean;
+    onSize?: SharedValue<SkSize>;
+    mode?: "continuous" | "default";
+}
+export declare const Canvas2: import("react").ForwardRefExoticComponent<Canvas2Props & import("react").RefAttributes<unknown>>;

package/lib/typescript/src/renderer/Canvas2.web.d.ts

@@ -0,0 +1,3 @@
+import type { CanvasProps } from "./Canvas";
+export type Canvas2Props = CanvasProps;
+export declare const Canvas2: import("react").FunctionComponent<CanvasProps & import("react").RefAttributes<import("..").SkiaDomView>>;

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

@@ -1,12 +1,10 @@
-import type { GroupProps, DrawingContext, RenderNode, SkDOM } from "../dom/types";
-import type { Skia } from "../skia/types";
+import type { Node, SkDOM } from "../dom/types";
 export declare class Container {
     redraw: () => void;
     getNativeId: () => number;
     private _root;
     Sk: SkDOM;
     unmounted: boolean;
-    constructor(Skia: Skia, redraw: () => void, getNativeId: () => number, native: boolean);
-    draw(ctx: DrawingContext): void;
-    get root(): RenderNode<GroupProps>;
+    constructor(redraw?: () => void, getNativeId?: () => number);
+    get root(): Node<unknown>;
 }

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

@@ -2,15 +2,12 @@ import { NodeType } from "../dom/types";
 import type { DeclarationNode, FractalNoiseProps, RenderNode, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps, AtlasProps } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
-import type { SkRect, SkRRect } from "../skia/types";
-import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
 import type { Container } from "./Container";
 import type { SkiaProps } from "./processors";
-export declare const NATIVE_DOM: boolean;
 declare global {
     var SkiaDomApi: {
-        RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
-        RRectNode: (props: RoundedRectProps) => JsiDrawingNode<RoundedRectProps, SkRRect>;
+        RectNode: (props: RectProps) => RenderNode<RectProps>;
+        RRectNode: (props: RoundedRectProps) => RenderNode<RoundedRectProps>;
         GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
         PaintNode: (props: PaintProps) => DeclarationNode<PaintProps>;
         FillNode: (props: PaintProps) => RenderNode<PaintProps>;
@@ -129,4 +126,4 @@ declare global {
         }
     }
 }
-export declare const createNode: (container: Container, type: NodeType, props: any) => RenderNode<ChildrenProps> | DeclarationNode<PaintProps> | DeclarationNode<BlurMaskFilterProps> | DeclarationNode<BlendImageFilterProps> | DeclarationNode<BlurImageFilterProps> | DeclarationNode<OffsetImageFilterProps> | DeclarationNode<MorphologyImageFilterProps> | DeclarationNode<DisplacementMapImageFilterProps> | DeclarationNode<RuntimeShaderImageFilterProps> | DeclarationNode<MatrixColorFilterProps> | DeclarationNode<null> | DeclarationNode<LerpColorFilterProps> | DeclarationNode<ImageShaderProps> | DeclarationNode<ColorProps> | DeclarationNode<TurbulenceProps> | DeclarationNode<LinearGradientProps> | DeclarationNode<RadialGradientProps> | DeclarationNode<SweepGradientProps> | DeclarationNode<CornerPathEffectProps> | DeclarationNode<DiscretePathEffectProps> | DeclarationNode<DashPathEffectProps> | DeclarationNode<Path1DPathEffectProps> | DeclarationNode<Path2DPathEffectProps> | DeclarationNode<Line2DPathEffectProps> | DeclarationNode<BlendProps> | DeclarationNode<BoxShadowProps>;
+export declare const createNode: (container: Container, type: NodeType, props: any) => RenderNode<ChildrenProps> | DeclarationNode<BlurMaskFilterProps> | DeclarationNode<null> | DeclarationNode<ImageShaderProps> | DeclarationNode<ColorProps> | DeclarationNode<TurbulenceProps> | DeclarationNode<LinearGradientProps> | DeclarationNode<RadialGradientProps> | DeclarationNode<SweepGradientProps> | DeclarationNode<BoxShadowProps>;

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

@@ -1,10 +1,9 @@
 import type { ReactNode } from "react";
-import type { Skia } from "../skia/types";
 export declare class SkiaRoot {
     private root;
     private container;
-    constructor(Skia: Skia, native?: boolean, redraw?: () => void, getNativeId?: () => number);
+    constructor(redraw?: () => void, getNativeId?: () => number);
     render(element: ReactNode): void;
     unmount(): void;
-    get dom(): import("..").RenderNode<import("..").GroupProps>;
+    get dom(): import("..").Node<unknown>;
 }

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

@@ -0,0 +1,56 @@
+import type { SkShader, SkPaint, SkImageFilter, SkMaskFilter, SkPathEffect, Skia, SkColorFilter } from "../skia/types";
+type Composer<T> = (outer: T, inner: T) => T;
+export declare const composeDeclarations: <T>(filters: T[], composer: Composer<T>) => T;
+export declare const createDeclarationContext: (Skia: Skia) => {
+    Skia: Skia;
+    paints: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkPaint | undefined;
+        push: (decl: SkPaint) => void;
+        popAll: () => SkPaint[];
+        popAllAsOne: () => SkPaint | undefined;
+    };
+    maskFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkMaskFilter | undefined;
+        push: (decl: SkMaskFilter) => void;
+        popAll: () => SkMaskFilter[];
+        popAllAsOne: () => SkMaskFilter | undefined;
+    };
+    shaders: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkShader | undefined;
+        push: (decl: SkShader) => void;
+        popAll: () => SkShader[];
+        popAllAsOne: () => SkShader | undefined;
+    };
+    pathEffects: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkPathEffect | undefined;
+        push: (decl: SkPathEffect) => void;
+        popAll: () => SkPathEffect[];
+        popAllAsOne: () => SkPathEffect | undefined;
+    };
+    imageFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkImageFilter | undefined;
+        push: (decl: SkImageFilter) => void;
+        popAll: () => SkImageFilter[];
+        popAllAsOne: () => SkImageFilter | undefined;
+    };
+    colorFilters: {
+        save: () => void;
+        restore: () => void;
+        pop: () => SkColorFilter | undefined;
+        push: (decl: SkColorFilter) => void;
+        popAll: () => SkColorFilter[];
+        popAllAsOne: () => SkColorFilter | undefined;
+    };
+};
+export type DeclarationContext = ReturnType<typeof createDeclarationContext>;
+export {};