@shopify/react-native-skia 0.1.157 → 0.1.159

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

@@ -1,6 +1,5 @@
-import type { RefObject } from "react";
 import type { SkMatrix, SkRect, SkRRect, SkPath, SkPaint } from "../../skia/types";
-import type { RenderNode, GroupProps, DrawingContext, NodeType, Node, DeclarationNode } from "../types";
+import type { RenderNode, GroupProps, DrawingContext, NodeType, Node } from "../types";
 import type { NodeContext } from "./Node";
 import { JsiNode } from "./Node";
 interface PaintCache {
@@ -25,5 +24,4 @@ export declare abstract class JsiRenderNode<P extends GroupProps> extends JsiNod
     render(parentCtx: DrawingContext): void;
     abstract renderNode(ctx: DrawingContext): void;
 }
-export declare const isSkPaint: (obj: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint) => obj is SkPaint;
 export {};

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

@@ -1,6 +1,5 @@
-import type { ReactNode, RefObject } from "react";
+import type { ReactNode } from "react";
 import type { BlendMode, Color, PaintStyle, SkMatrix, SkPaint, SkPath, SkRect, SkRRect, StrokeCap, StrokeJoin, Transforms2d, Vector } from "../../skia/types";
-import type { DeclarationNode } from "./Node";
 export declare type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export declare type PathDef = string | SkPath;
 export declare type ClipDef = SkRRect | SkRect | PathDef;
@@ -53,5 +52,5 @@ export interface PaintProps extends ChildrenProps {
 export interface GroupProps extends PaintProps, TransformProps {
     clip?: ClipDef;
     invertClip?: boolean;
-    layer?: RefObject<DeclarationNode<unknown, SkPaint>> | SkPaint | boolean;
+    layer?: SkPaint | boolean;
 }

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

@@ -1,10 +1,8 @@
-import type { RefObject } from "react";
 import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect } from "../../skia/types";
 import type { CircleDef, Fit, GroupProps, PathDef, RectDef, RRectDef, SkEnum } from "./Common";
 import type { DrawingContext } from "./DrawingContext";
-import type { DeclarationNode } from "./Node";
 export interface DrawingNodeProps extends GroupProps {
-    paint?: SkPaint | RefObject<DeclarationNode<unknown, SkPaint>>;
+    paint?: SkPaint;
 }
 export declare type ImageProps = DrawingNodeProps & RectDef & {
     fit: Fit;

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

@@ -1,14 +1,14 @@
 import React from "react";
 import type { RefObject, ReactNode, ComponentProps } from "react";
 import ReactReconciler from "react-reconciler";
-import { SkiaView } from "../views";
+import { SkiaDomView } from "../views";
 import type { TouchHandler } from "../views";
 import { Container } from "./Container";
 export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>>;
-export declare const useCanvasRef: () => React.RefObject<SkiaView>;
-export interface CanvasProps extends ComponentProps<typeof SkiaView> {
-    ref?: RefObject<SkiaView>;
+export declare const useCanvasRef: () => React.RefObject<SkiaDomView>;
+export interface CanvasProps extends ComponentProps<typeof SkiaDomView> {
+    ref?: RefObject<SkiaDomView>;
     children: ReactNode;
     onTouch?: TouchHandler;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onSize" | "root" | "onTouch" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerUp" | "onPointerUpCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLabelledBy" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityLanguage" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors"> & React.RefAttributes<SkiaDomView>>;

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

@@ -12,7 +12,6 @@ export declare class DependencyManager {
     subscriptions: Map<SkiaValue<unknown>, SubscriptionState>;
     unregisterDependantValues: null | Unsubscribe;
     constructor(registerValues: (values: Array<SkiaValue<unknown>>) => () => void);
-    unsubscribeNodes(nodes: Node<unknown>[]): void;
     /**
      * Call to unsubscribe all value listeners from the given node based
      * on the current list of subscriptions for the node. This function
@@ -29,7 +28,6 @@ export declare class DependencyManager {
      * when the node is mounted and when one or more props on the node changes.
      * @param node Node to subscribe to value changes for
      * @param props Node's properties
-     * @param onResolveProp Callback when a property value changes
      */
     subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>): void;
     /**

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

@@ -1,19 +1,78 @@
-import type { ForwardedRef } from "react";
 import { NodeType } from "../dom/types";
-import type { CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, CustomDrawingNodeProps, 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 } from "../dom/types";
+import type { DeclarationNode, FractalNoiseProps, RenderNode, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, CustomDrawingNodeProps, 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 } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
-import type { PaintNode } from "../dom/nodes/PaintNode";
+import type { SkColorFilter, SkImageFilter, SkMaskFilter, SkPaint, SkPathEffect, SkRect, SkRRect, SkShader } from "../skia";
+import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
+import type { SkiaValue } from "../values";
 import type { Container } from "./Container";
 import type { SkiaProps } from "./processors";
+import type { DependencyManager } from "./DependencyManager";
 declare global {
+    var SkiaDomApi: {
+        DependencyManager: (registerValues: (values: Array<SkiaValue<unknown>>) => () => void) => DependencyManager;
+        RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
+        RRectNode: (props: RoundedRectProps) => JsiDrawingNode<RoundedRectProps, SkRRect>;
+        GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
+        PaintNode: (props: PaintProps) => DeclarationNode<PaintProps, SkPaint>;
+        FillNode: (props: PaintProps) => RenderNode<PaintProps>;
+        CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
+        PathNode: (props: PathProps) => RenderNode<PathProps>;
+        CustomDrawingNode: (props: CustomDrawingNodeProps) => RenderNode<CustomDrawingNodeProps>;
+        LineNode: (props: LineProps) => RenderNode<LineProps>;
+        ImageNode: (props: ImageProps) => RenderNode<ImageProps>;
+        OvalNode: (props: OvalProps) => RenderNode<OvalProps>;
+        PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
+        PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
+        DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
+        BlurMaskFilterNode: (props: BlurMaskFilterProps) => DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+        DashPathEffectNode: (props: DashPathEffectProps) => DeclarationNode<DashPathEffectProps, SkPathEffect>;
+        DiscretePathEffectNode: (props: DiscretePathEffectProps) => DeclarationNode<DiscretePathEffectProps, SkPathEffect>;
+        CornerPathEffectNode: (props: CornerPathEffectProps) => DeclarationNode<CornerPathEffectProps, SkPathEffect>;
+        Path1DPathEffectNode: (props: Path1DPathEffectProps) => DeclarationNode<Path1DPathEffectProps, SkPathEffect>;
+        Path2DPathEffectNode: (props: Path2DPathEffectProps) => DeclarationNode<Path2DPathEffectProps, SkPathEffect>;
+        Line2DPathEffectNode: (props: Line2DPathEffectProps) => DeclarationNode<Line2DPathEffectProps, SkPathEffect>;
+        SumPathEffectNode: () => DeclarationNode<null, SkPathEffect>;
+        BlendImageFilterNode: (props: BlendImageFilterProps) => DeclarationNode<BlendImageFilterProps, SkImageFilter>;
+        DropShadowImageFilterNode: (props: DropShadowImageFilterProps) => DeclarationNode<DropShadowImageFilterProps, SkImageFilter>;
+        DisplacementMapImageFilterNode: (props: DisplacementMapImageFilterProps) => DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter>;
+        BlurImageFilterNode: (props: BlurImageFilterProps) => DeclarationNode<BlurImageFilterProps, SkImageFilter>;
+        OffsetImageFilterNode: (props: OffsetImageFilterProps) => DeclarationNode<OffsetImageFilterProps, SkImageFilter>;
+        MorphologyImageFilterNode: (props: MorphologyImageFilterProps) => DeclarationNode<MorphologyImageFilterProps, SkImageFilter>;
+        RuntimeShaderImageFilterNode: (props: RuntimeShaderImageFilterProps) => DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter>;
+        MatrixColorFilterNode: (props: MatrixColorFilterProps) => DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
+        BlendColorFilterNode: (props: BlendColorFilterProps) => DeclarationNode<BlendColorFilterProps, SkColorFilter>;
+        LinearToSRGBGammaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
+        SRGBToLinearGammaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
+        LumaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
+        LerpColorFilterNode: (props: LerpColorFilterProps) => DeclarationNode<LerpColorFilterProps, SkColorFilter>;
+        ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps, SkShader>;
+        ImageShaderNode: (props: ImageShaderProps) => DeclarationNode<ImageShaderProps, SkShader>;
+        ColorShaderNode: (props: ColorProps) => DeclarationNode<ColorProps, SkShader>;
+        TurbulenceNode: (props: TurbulenceProps) => DeclarationNode<TurbulenceProps, SkShader>;
+        FractalNoiseNode: (props: FractalNoiseProps) => DeclarationNode<FractalNoiseProps, SkShader>;
+        LinearGradientNode: (props: LinearGradientProps) => DeclarationNode<LinearGradientProps, SkShader>;
+        RadialGradientNode: (props: RadialGradientProps) => DeclarationNode<RadialGradientProps, SkShader>;
+        SweepGradientNode: (props: SweepGradientProps) => DeclarationNode<SweepGradientProps, SkShader>;
+        TwoPointConicalGradientNode: (props: TwoPointConicalGradientProps) => DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+        PictureNode: (props: PictureProps) => RenderNode<PictureProps>;
+        ImageSVGNode: (props: ImageSVGProps) => RenderNode<ImageSVGProps>;
+        VerticesNode: (props: VerticesProps) => RenderNode<VerticesProps>;
+        TextNode: (prop: TextProps) => RenderNode<TextProps>;
+        TextPathNode: (prop: TextPathProps) => RenderNode<TextPathProps>;
+        TextBlobNode: (prop: TextBlobProps) => RenderNode<TextBlobProps>;
+        GlyphsNode: (prop: GlyphsProps) => RenderNode<GlyphsProps>;
+        BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps, SkImageFilter>;
+        BackdropFilterNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
+        BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
+        BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps, BoxShadowProps>;
+        LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
+    };
     namespace JSX {
         interface IntrinsicElements {
             skGroup: SkiaProps<GroupProps>;
             skLayer: SkiaProps<ChildrenProps>;
-            skPaint: SkiaProps<PaintProps> & {
-                ref: ForwardedRef<PaintNode>;
-            };
+            skPaint: SkiaProps<PaintProps>;
             skFill: SkiaProps<DrawingNodeProps>;
             skImage: SkiaProps<ImageProps>;
             skCircle: SkiaProps<CircleProps>;
@@ -51,7 +110,7 @@ declare global {
             skImageShader: SkiaProps<ImageShaderProps>;
             skColorShader: SkiaProps<ColorProps>;
             skTurbulence: SkiaProps<TurbulenceProps>;
-            skFractalNoise: SkiaProps<TurbulenceProps>;
+            skFractalNoise: SkiaProps<FractalNoiseProps>;
             skLinearGradient: SkiaProps<LinearGradientProps>;
             skRadialGradient: SkiaProps<RadialGradientProps>;
             skSweepGradient: SkiaProps<SweepGradientProps>;
@@ -70,4 +129,4 @@ declare global {
         }
     }
 }
-export declare const createNode: (container: Container, type: NodeType, props: any) => import("../dom/types").RenderNode<ChildrenProps> | import("../dom/types").DeclarationNode<PaintProps, import("..").SkPaint, never> | import("../dom/types").DeclarationNode<BlurMaskFilterProps, import("..").SkMaskFilter, never> | import("../dom/types").DeclarationNode<BlendImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<BlurImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<OffsetImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DropShadowImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MorphologyImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DisplacementMapImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<RuntimeShaderImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MatrixColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<BlendColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<null, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<LerpColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<ShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ImageShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ColorProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<TurbulenceProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<LinearGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<RadialGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<SweepGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<CornerPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<DiscretePathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<DashPathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<Path1DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Path2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<null, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Line2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<BlendProps, import("..").SkImageFilter | import("..").SkShader, never> | import("../dom/types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;
+export declare const createNode: (container: Container, type: NodeType, props: any) => RenderNode<ChildrenProps> | DeclarationNode<PaintProps, SkPaint, never> | DeclarationNode<BlurMaskFilterProps, SkMaskFilter, never> | DeclarationNode<BlendImageFilterProps, SkImageFilter, never> | DeclarationNode<BlurImageFilterProps, SkImageFilter, never> | DeclarationNode<OffsetImageFilterProps, SkImageFilter, never> | DeclarationNode<DropShadowImageFilterProps, SkImageFilter, never> | DeclarationNode<MorphologyImageFilterProps, SkImageFilter, never> | DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter, never> | DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter, never> | DeclarationNode<MatrixColorFilterProps, SkColorFilter, never> | DeclarationNode<BlendColorFilterProps, SkColorFilter, never> | DeclarationNode<null, SkColorFilter, never> | DeclarationNode<LerpColorFilterProps, SkColorFilter, never> | DeclarationNode<ShaderProps, SkShader, never> | DeclarationNode<ImageShaderProps, SkShader, never> | DeclarationNode<ColorProps, SkShader, never> | DeclarationNode<TurbulenceProps, SkShader, never> | DeclarationNode<LinearGradientProps, SkShader, never> | DeclarationNode<RadialGradientProps, SkShader, never> | DeclarationNode<SweepGradientProps, SkShader, never> | DeclarationNode<CornerPathEffectProps, SkPathEffect, null> | DeclarationNode<DiscretePathEffectProps, SkPathEffect, never> | DeclarationNode<DashPathEffectProps, SkPathEffect, never> | DeclarationNode<Path1DPathEffectProps, SkPathEffect, null> | DeclarationNode<Path2DPathEffectProps, SkPathEffect, null> | DeclarationNode<null, SkPathEffect, null> | DeclarationNode<Line2DPathEffectProps, SkPathEffect, null> | DeclarationNode<BlendProps, SkImageFilter | SkShader, never> | DeclarationNode<BoxShadowProps, BoxShadowProps, never>;

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

@@ -1,5 +1,4 @@
-import React from "react";
+/// <reference types="react" />
+import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
-import type { PaintNode } from "../../dom/nodes/PaintNode";
-export declare const usePaintRef: () => React.RefObject<PaintNode>;
-export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps, never> & React.RefAttributes<PaintNode>>;
+export declare const Paint: (props: SkiaProps<DrawingNodeProps>) => JSX.Element;

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

@@ -1,14 +1,9 @@
 import React from "react";
 import type { Skia } from "../skia/types";
-import type { SkiaValue } from "../values/types";
 interface CanvasContext {
     Skia: Skia;
-    size: SkiaValue<{
-        width: number;
-        height: number;
-    }>;
 }
 declare const CanvasContext: React.Context<CanvasContext | null>;
 export declare const CanvasProvider: React.Provider<CanvasContext | null>;
-export declare const useCanvas: () => CanvasContext;
+export declare const useSkiaPrivate: () => Skia;
 export {};

package/lib/typescript/src/skia/core/Picture.d.ts

@@ -1,12 +1,4 @@
-import type { DependencyList } from "react";
 import type { SkCanvas, SkRect } from "../types";
-/**
- * Memoizes and returns an SkPicture that can be drawn to another canvas.
- * @param rect Picture bounds
- * @param cb Callback for drawing to the canvas
- * @returns SkPicture
- */
-export declare const usePicture: (rect: SkRect, cb: (canvas: SkCanvas) => void, deps?: DependencyList) => import("../types").SkPicture;
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds

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

@@ -1,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
+import type { SkPoint } from "./Point";
 export interface PosTan {
     px: number;
     py: number;
@@ -9,10 +10,10 @@ export interface PosTan {
 export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
     /**
      * Returns the given position and tangent line for the distance on the given contour.
-     * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+     * The return value an array of 2 vectors: [position, tangent]
      * @param distance - will be pinned between 0 and length().
      */
-    getPosTan(distance: number): PosTan;
+    getPosTan(distance: number): [position: SkPoint, tangent: SkPoint];
     /**
      * Returns an Path representing the segment of this contour.
      * @param startD - will be pinned between 0 and length()

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

@@ -0,0 +1,4 @@
+export interface SkSize {
+    width: number;
+    height: number;
+}

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

@@ -25,3 +25,4 @@ export * from "./RSXform";
 export * from "./JsiInstance";
 export * from "./Skia";
 export * from "./TextBlob";
+export * from "./Size";

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

@@ -2,14 +2,10 @@ import type { CanvasKit, ContourMeasure } from "canvaskit-wasm";
 import type { SkContourMeasure } from "../types";
 import { HostObject } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
 export declare class JsiSkContourMeasure extends HostObject<ContourMeasure, "ContourMeasure"> implements SkContourMeasure {
     constructor(CanvasKit: CanvasKit, ref: ContourMeasure);
-    getPosTan(distance: number): {
-        px: number;
-        py: number;
-        tx: number;
-        ty: number;
-    };
+    getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint];
     getSegment(startD: number, stopD: number, startWithMoveTo: boolean): JsiSkPath;
     isClosed(): boolean;
     length(): number;

package/lib/typescript/src/views/SkiaBaseWebView.d.ts

@@ -18,6 +18,10 @@ export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps>
     protected height: number;
     private unsubscribeAll;
     private onLayout;
+    protected getSize(): {
+        width: number;
+        height: number;
+    };
     componentDidMount(): void;
     componentDidUpdate(): void;
     componentWillUnmount(): void;

package/lib/typescript/src/views/SkiaDomView.d.ts

@@ -0,0 +1,31 @@
+import React from "react";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+import type { SkiaDomViewProps } from "./types";
+export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    private _nativeId;
+    get nativeId(): number;
+    componentDidUpdate(prevProps: SkiaDomViewProps): void;
+    /**
+     * Creates a snapshot from the canvas in the surface
+     * @param rect Rect to use as bounds. Optional.
+     * @returns An Image object.
+     */
+    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage;
+    /**
+     * Sends a redraw request to the native SkiaView.
+     */
+    redraw(): void;
+    /**
+     * Registers one or move values as a dependant value of the Skia View. The view will
+     * The view will redraw itself when any of the values change.
+     * @param values Values to register
+     */
+    registerValues(values: SkiaValue<unknown>[]): () => void;
+    /**
+     * Clear up the dom node when unmounting to release resources.
+     */
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,7 @@
+import type { SkCanvas } from "../skia/types";
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import type { SkiaDomViewProps, TouchInfo } from "./types";
+export declare class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
+    constructor(props: SkiaDomViewProps);
+    protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void;
+}

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

@@ -1,5 +1,6 @@
 export * from "./SkiaView";
 export * from "./SkiaPictureView";
+export * from "./SkiaDomView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/lib/typescript/src/views/types.d.ts

@@ -1,6 +1,7 @@
 import type { ViewProps } from "react-native";
-import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
+import type { GroupProps, RenderNode } from "../dom/types";
+import type { SkCanvas, SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
+import type { SkiaMutableValue, SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
     mode?: DrawMode;
@@ -65,6 +66,11 @@ export interface SkiaBaseViewProps extends ViewProps {
      * average time it takes to render.
      */
     debug?: boolean;
+    /**
+     * Pass an animated value to the onSize property to get updates when
+     * the Skia view is resized.
+     */
+    onSize?: SkiaMutableValue<SkSize>;
 }
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
     /**
@@ -79,3 +85,7 @@ export interface SkiaDrawViewProps extends SkiaBaseViewProps {
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {
     picture?: SkPicture;
 }
+export interface SkiaDomViewProps extends SkiaBaseViewProps {
+    root?: RenderNode<GroupProps>;
+    onTouch?: TouchHandler;
+}

package/libs/ios/libskparagraph.xcframework/Info.plist

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskparagraph.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskparagraph.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>

package/libs/ios/libsksg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsksg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskunicode.xcframework/Info.plist

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e</string>
+			<key>LibraryPath</key>
+			<string>libskunicode.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+		<dict>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libskunicode.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>arm64e</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>