@shopify/react-native-skia 0.1.142 → 0.1.146

package/lib/module/views/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkImage, SkRect, SkCanvas } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  invalidateSkiaView: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n  setDrawCallback: (\n    nativeId: number,\n    callback: RNSkiaDrawCallback | undefined\n  ) => void;\n  setDrawMode: (nativeId: number, mode: DrawMode) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n}\n\nexport interface SkiaViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n"]}
+{"version":3,"sources":["types.ts"],"names":["TouchType"],"mappings":"AAYA,WAAYA,SAAZ;;WAAYA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S","sourcesContent":["import type { ViewProps } from \"react-native\";\n\nimport type { SkCanvas, SkImage, SkRect } from \"../skia/types\";\nimport type { SkiaValue } from \"../values\";\n\nexport type DrawMode = \"continuous\" | \"default\";\n\nexport type NativeSkiaViewProps = ViewProps & {\n  mode?: DrawMode;\n  debug?: boolean;\n};\n\nexport enum TouchType {\n  Start,\n  Active,\n  End,\n  Cancelled,\n}\n\nexport interface TouchInfo {\n  x: number;\n  y: number;\n  force: number;\n  type: TouchType;\n  id: number;\n  timestamp: number;\n}\n\nexport interface DrawingInfo {\n  width: number;\n  height: number;\n  timestamp: number;\n  touches: Array<Array<TouchInfo>>;\n}\n\nexport type ExtendedTouchInfo = TouchInfo & {\n  // points per second\n  velocityX: number;\n  velocityY: number;\n};\n\nexport type TouchHandlers = {\n  onStart?: (touchInfo: TouchInfo) => void;\n  onActive?: (touchInfo: ExtendedTouchInfo) => void;\n  onEnd?: (touchInfo: ExtendedTouchInfo) => void;\n};\n\nexport type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;\n\nexport type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;\n\n/**\n * Listener interface for value changes\n */\nexport interface ValueListener {\n  addListener: (callback: () => void) => number;\n  removeListener: (id: number) => void;\n}\n\nexport interface ISkiaViewApi {\n  setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;\n  callJsiMethod: <T extends Array<unknown>>(\n    nativeId: number,\n    name: string,\n    ...args: T\n  ) => void;\n  registerValuesInView: (\n    nativeId: number,\n    values: SkiaValue<unknown>[]\n  ) => () => void;\n  requestRedraw: (nativeId: number) => void;\n  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;\n}\n\nexport interface SkiaViewProps extends ViewProps {\n  /**\n   * Sets the drawing mode for the skia view. There are two drawing\n   * modes, \"continuous\" and \"default\", where the continuous mode will\n   * continuously redraw the view, and the default mode will only\n   * redraw when any of the regular react properties are changed like\n   * sizes and margins.\n   */\n  mode?: DrawMode;\n  /**\n   * When set to true the view will display information about the\n   * average time it takes to render.\n   */\n  debug?: boolean;\n  /**\n   * Draw callback. Will be called whenever the view is invalidated and\n   * needs to redraw. This is either caused by a change in a react\n   * property, a touch event, or a call to redraw. If the view is in\n   * continuous mode the callback will be called 60 frames per second\n   * by the native view.\n   */\n  onDraw?: RNSkiaDrawCallback;\n}\n"]}

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

@@ -11,4 +11,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     children: ReactNode;
     onTouch?: TouchHandler;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "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, "mode" | "debug" | "onDraw" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "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>>;

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

@@ -1,21 +1,47 @@
-import type { RefObject } from "react";
-import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 import type { Node } from "./nodes";
+import type { AnimatedProps } from "./processors";
 declare type Unsubscribe = () => void;
-declare type Props = {
-    [key: string]: unknown;
+declare type Mutator = (value: unknown) => void;
+declare type SubscriptionState = {
+    nodes: Map<Node, Mutator[]>;
+    unsubscribe: null | Unsubscribe;
 };
 export declare class DependencyManager {
-    ref: RefObject<SkiaView>;
-    subscriptions: Map<Node, {
-        values: SkiaValue<unknown>[];
-        unsubscribe: null | Unsubscribe;
-    }>;
-    constructor(ref: RefObject<SkiaView>);
-    unSubscribeNode(node: Node): void;
-    subscribeNode(node: Node, props: Props): void;
-    subscribe(): void;
-    unsubscribe(): void;
+    registerValues: (values: Array<SkiaValue<unknown>>) => () => void;
+    subscriptions: Map<SkiaValue<unknown>, SubscriptionState>;
+    unregisterDependantValues: null | Unsubscribe;
+    constructor(registerValues: (values: Array<SkiaValue<unknown>>) => () => void);
+    /**
+     * Call to unsubscribe all value listeners from the given node based
+     * on the current list of subscriptions for the node. This function
+     * is typically called when the node is unmounted or when one or more
+     * properties have changed.
+     * @param node Node to unsubscribe value listeners from
+     */
+    unsubscribeNode(node: Node): void;
+    /**
+     * Adds listeners to the provided values so that the node is notified
+     * when a value changes. This is done in an optimized way so that this
+     * class only needs to listen to the value once and then forwards the
+     * change to the node and its listener. This method is typically called
+     * 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 extends Record<string, unknown>>(node: Node, props: AnimatedProps<P>): void;
+    /**
+     * Called when the hosting container is mounted or updated. This ensures that we have
+     * a ref to the underlying SkiaView so that we can registers redraw listeners
+     * on values used in the current View automatically.
+     */
+    update(): void;
+    /**
+     * Called when the hosting container is unmounted or recreated. This ensures that we remove
+     * all subscriptions to Skia values so that we don't have any listeners left after
+     * the component is removed.
+     */
+    remove(): void;
 }
 export {};

package/lib/typescript/src/renderer/nodes/Declaration.d.ts

@@ -8,7 +8,7 @@ export declare type DeclarationResult = SkJSIInstance<string> | null;
 declare type DeclarationCallback<T> = (props: T, children: DeclarationResult[], ctx: DrawingContext) => DeclarationResult;
 export declare const createDeclaration: <T>(cb: DeclarationCallback<T>) => DeclarationCallback<T>;
 export declare const useDeclaration: <P>(cb: DeclarationCallback<P>, deps?: DependencyList | undefined) => DeclarationCallback<P>;
-export declare const isDeclarationNode: (node: Node) => node is DeclarationNode<unknown>;
+export declare const isDeclarationNode: <P>(node: Node) => node is DeclarationNode<P>;
 export interface DeclarationProps<P> {
     onDeclare: DeclarationCallback<P>;
 }
@@ -16,7 +16,7 @@ export declare class DeclarationNode<P> extends Node<P> {
     private onDeclare;
     constructor(depMgr: DependencyManager, onDeclare: DeclarationCallback<P>, props: AnimatedProps<P>);
     set props(props: AnimatedProps<P>);
-    get props(): AnimatedProps<P>;
+    get props(): P;
     draw(ctx: DrawingContext): DeclarationResult;
 }
 export {};

package/lib/typescript/src/renderer/nodes/Drawing.d.ts

@@ -7,8 +7,8 @@ declare type DrawingCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>)
 declare type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export declare const createDrawing: <P>(cb: OnDrawCallback<P>) => DrawingCallback<P>;
 export declare const useDrawing: <P>(cb: OnDrawCallback<P>, deps?: DependencyList | undefined) => OnDrawCallback<P>;
-export declare type DrawingProps<T> = {
-    onDraw: DrawingCallback<T>;
+export declare type DrawingProps<P> = {
+    onDraw: DrawingCallback<P>;
     skipProcessing?: boolean;
     children?: ReactNode | ReactNode[];
 };

package/lib/typescript/src/renderer/nodes/Node.d.ts

@@ -9,15 +9,16 @@ export declare enum NodeType {
 declare type DeclarationResult = SkJSIInstance<string> | null;
 export declare abstract class Node<P = unknown> {
     readonly children: Node[];
-    _props: AnimatedProps<P>;
+    resolvedProps: P;
     memoizable: boolean;
     memoized: DeclarationResult | null;
     parent?: Node;
     depMgr: DependencyManager;
     constructor(depMgr: DependencyManager, props: AnimatedProps<P>);
     abstract draw(ctx: DrawingContext): void | DeclarationResult;
+    updatePropSubscriptions(props: AnimatedProps<P>): void;
     set props(props: AnimatedProps<P>);
-    get props(): AnimatedProps<P>;
+    get props(): P;
     visit(ctx: DrawingContext, children?: Node[]): SkJSIInstance<string>[];
 }
 export {};

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

@@ -5,7 +5,6 @@ export declare const isSelector: <T, R>(value: unknown) => value is {
     value: SkiaValue<T>;
 };
 export declare const isAnimated: <T>(props: AnimatedProps<T>) => boolean;
-export declare const materialize: <T>(props: AnimatedProps<T>) => T;
 export declare type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 export declare type AnimatedProps<T> = {
     [K in keyof T]: AnimatedProp<T[K]>;

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

@@ -26,6 +26,11 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
      * Returns a copy of this paint.
      */
     copy(): SkPaint;
+    /**
+     * Sets all SkPaint contents to their initial values. This is equivalent to replacing
+       SkPaint with the result of SkPaint().
+     */
+    reset(): 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/types/Picture/Picture.d.ts

@@ -3,7 +3,8 @@ import type { TileMode } from "../ImageFilter";
 import type { SkRect } from "../Rect";
 import type { SkShader } from "../Shader";
 import type { SkMatrix } from "../Matrix";
-export interface SkPicture {
+import type { SkJSIInstance } from "../JsiInstance";
+export interface SkPicture extends SkJSIInstance<"Picture"> {
     /**
      *  Returns a new shader that will draw with this picture.
      *

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

@@ -1,21 +1,19 @@
 import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
 import type { SkJSIInstance } from "../types";
 export declare class NotImplementedOnRNWeb extends Error {
-    constructor();
+    constructor(msg?: string);
 }
 export declare abstract class Host {
     readonly CanvasKit: CanvasKit;
     constructor(CanvasKit: CanvasKit);
 }
-export declare abstract class HostObject<T, N extends string> extends Host implements SkJSIInstance<N> {
+export declare abstract class BaseHostObject<T, N extends string> extends Host implements SkJSIInstance<N> {
     readonly __typename__: N;
-    readonly ref: T;
+    ref: T;
     constructor(CanvasKit: CanvasKit, ref: T, typename: N);
 }
-export declare type NonNullish = {};
-export declare const toOptionalValue: <T>(value: NonNullish | undefined | null) => T | null | undefined;
-export declare const toUndefinedableValue: <T>(value: NonNullish | undefined) => T | undefined;
-export declare const toNullableValue: <T>(value: NonNullish | null) => T | null;
-export declare const toValue: <T>(value: NonNullish) => T;
+export declare abstract class HostObject<T, N extends string> extends BaseHostObject<T, N> {
+    static fromValue<T>(value: SkJSIInstance<string>): T;
+}
 export declare const ckEnum: (value: number) => EmbindEnumEntity;
 export declare const optEnum: (value: number | undefined) => EmbindEnumEntity | undefined;

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

@@ -4,16 +4,16 @@ import { Host } from "./Host";
 import { JsiSkImageFilter } from "./JsiSkImageFilter";
 export declare class JsiSkImageFilterFactory extends Host implements ImageFilterFactory {
     constructor(CanvasKit: CanvasKit);
-    MakeOffset(_dx: number, _dy: number, _input: SkImageFilter | null): SkImageFilter;
-    MakeDisplacementMap(_channelX: ColorChannel, _channelY: ColorChannel, _scale: number, _in1: SkImageFilter, _input: SkImageFilter | null): SkImageFilter;
-    MakeShader(_shader: SkShader, _input: SkImageFilter | null): SkImageFilter;
+    MakeOffset(dx: number, dy: number, input: SkImageFilter | null): JsiSkImageFilter;
+    MakeDisplacementMap(channelX: ColorChannel, channelY: ColorChannel, scale: number, in1: SkImageFilter, input: SkImageFilter | null): SkImageFilter;
+    MakeShader(shader: SkShader, _input: SkImageFilter | null): SkImageFilter;
     MakeBlur(sigmaX: number, sigmaY: number, mode: TileMode, input: SkImageFilter | null): JsiSkImageFilter;
     MakeColorFilter(cf: SkColorFilter, input: SkImageFilter | null): JsiSkImageFilter;
     MakeCompose(outer: SkImageFilter | null, inner: SkImageFilter | null): JsiSkImageFilter;
-    MakeDropShadow(_dx: number, _dy: number, _sigmaX: number, _sigmaY: number, _color: SkColor, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeDropShadowOnly(_dx: number, _dy: number, _sigmaX: number, _sigmaY: number, _color: SkColor, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeErode(_rx: number, _ry: number, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeDilate(_rx: number, _ry: number, _input: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
-    MakeBlend(_mode: BlendMode, _background: SkImageFilter, _foreground: SkImageFilter | null, _cropRect?: SkRect): SkImageFilter;
+    MakeDropShadow(dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeDropShadowOnly(dx: number, dy: number, sigmaX: number, sigmaY: number, color: SkColor, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeErode(rx: number, ry: number, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeDilate(rx: number, ry: number, input: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
+    MakeBlend(mode: BlendMode, background: SkImageFilter, foreground: SkImageFilter | null, cropRect?: SkRect): SkImageFilter;
     MakeRuntimeShader(_builder: SkRuntimeShaderBuilder, _childShaderName: string | null, _input: SkImageFilter | null): SkImageFilter;
 }

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

@@ -4,6 +4,7 @@ import { HostObject } from "./Host";
 export declare class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     constructor(CanvasKit: CanvasKit, ref: Paint);
     copy(): JsiSkPaint;
+    reset(): void;
     getColor(): Float32Array;
     getStrokeCap(): number;
     getStrokeJoin(): number;

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

@@ -1,7 +1,8 @@
 import type { CanvasKit, Point } from "canvaskit-wasm";
 import type { SkPoint } from "../types";
-import { HostObject } from "./Host";
-export declare class JsiSkPoint extends HostObject<Point, "Point"> implements SkPoint {
+import { BaseHostObject } from "./Host";
+export declare class JsiSkPoint extends BaseHostObject<Point, "Point"> implements SkPoint {
+    static fromValue(point: SkPoint): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Point);
     get x(): number;
     get y(): number;

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

@@ -1,8 +1,8 @@
 import type { CanvasKit, RRect } from "canvaskit-wasm";
 import type { SkRRect } from "../types";
-import { HostObject } from "./Host";
+import { BaseHostObject } from "./Host";
 import { JsiSkRect } from "./JsiSkRect";
-export declare class JsiSkRRect extends HostObject<RRect, "RRect"> implements SkRRect {
+export declare class JsiSkRRect extends BaseHostObject<RRect, "RRect"> implements SkRRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: RRect);
     get rx(): number;

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

@@ -1,8 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
 import type { SkRSXform } from "../types";
 import { HostObject } from "./Host";
-declare type RSXform = Float32Array;
+export declare type RSXform = Float32Array;
 export declare class JsiSkRSXform extends HostObject<RSXform, "RSXform"> implements SkRSXform {
     constructor(CanvasKit: CanvasKit, ref: RSXform);
 }
-export {};

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

@@ -1,7 +1,7 @@
 import type { CanvasKit, Rect } from "canvaskit-wasm";
 import type { SkRect } from "../types";
-import { HostObject } from "./Host";
-export declare class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+import { BaseHostObject } from "./Host";
+export declare class JsiSkRect extends BaseHostObject<Rect, "Rect"> implements SkRect {
     static fromValue(CanvasKit: CanvasKit, rect: SkRect): Float32Array;
     constructor(CanvasKit: CanvasKit, ref: Rect);
     get x(): number;

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

@@ -1,6 +1,7 @@
 import type { CanvasKit } from "canvaskit-wasm";
-import type { SkFont, SkRSXform } from "../types";
+import type { SkFont } from "../types";
 import type { TextBlobFactory } from "../types/TextBlob";
+import type { SkRSXform } from "../types/RSXform";
 import { Host } from "./Host";
 import { JsiSkTextBlob } from "./JsiSkTextBlob";
 export declare class JsiSkTextBlobFactory extends Host implements TextBlobFactory {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import type { SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
-import type { DrawMode, SkiaViewProps } from "./types";
+import type { SkiaViewProps } from "./types";
 export declare class SkiaView extends React.Component<SkiaViewProps> {
     constructor(props: SkiaViewProps);
     private _nativeId;
@@ -17,16 +17,6 @@ export declare class SkiaView extends React.Component<SkiaViewProps> {
      * Sends a redraw request to the native SkiaView.
      */
     redraw(): void;
-    /**
-     * Updates the drawing mode for the skia view. This is the same
-     * as declaratively setting the mode property on the SkiaView.
-     * There are two drawing modes, "continuous" and "default",
-     * where the continuous mode will continuously redraw the view and
-     * the default mode will only redraw when any of the regular react
-     * properties are changed like size and margins.
-     * @param mode Drawing mode to use.
-     */
-    setDrawMode(mode: DrawMode): 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.

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

@@ -1,5 +1,5 @@
 import type { ViewProps } from "react-native";
-import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkCanvas, SkImage, SkRect } from "../skia/types";
 import type { SkiaValue } from "../values";
 export declare type DrawMode = "continuous" | "default";
 export declare type NativeSkiaViewProps = ViewProps & {
@@ -45,11 +45,11 @@ export interface ValueListener {
     removeListener: (id: number) => void;
 }
 export interface ISkiaViewApi {
-    invalidateSkiaView: (nativeId: number) => void;
-    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
-    setDrawCallback: (nativeId: number, callback: RNSkiaDrawCallback | undefined) => void;
-    setDrawMode: (nativeId: number, mode: DrawMode) => void;
+    setJsiProperty: <T>(nativeId: number, name: string, value: T) => void;
+    callJsiMethod: <T extends Array<unknown>>(nativeId: number, name: string, ...args: T) => void;
     registerValuesInView: (nativeId: number, values: SkiaValue<unknown>[]) => () => void;
+    requestRedraw: (nativeId: number) => void;
+    makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
 }
 export interface SkiaViewProps extends ViewProps {
     /**

package/libs/ios/libskia.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>libskia.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>libskia.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/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.142",
+  "version": "0.1.146",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -89,7 +89,7 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.35.0",
+    "canvaskit-wasm": "^0.36.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/src/renderer/Canvas.tsx

@@ -20,6 +20,7 @@ import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
 import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
+import type { SkiaValue } from "../values";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
@@ -38,8 +39,7 @@ skiaReconciler.injectIntoDevTools({
 const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
   skiaReconciler.updateContainer(element, root, null, () => {
     hostDebug("updateContainer");
-
-    container.depMgr.subscribe();
+    container.depMgr.update();
   });
 };
 
@@ -60,9 +60,19 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     const [tick, setTick] = useState(0);
     const redraw = useCallback(() => setTick((t) => t + 1), []);
 
+    const registerValues = useCallback(
+      (values: Array<SkiaValue<unknown>>) => {
+        if (ref.current === null) {
+          throw new Error("Canvas ref is not set");
+        }
+        return ref.current.registerValues(values);
+      },
+      [ref]
+    );
+
     const container = useMemo(
-      () => new Container(new DependencyManager(ref), redraw),
-      [redraw, ref]
+      () => new Container(new DependencyManager(registerValues), redraw),
+      [redraw, registerValues]
     );
 
     const root = useMemo(
@@ -78,6 +88,8 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
       );
     }, [children, root, redraw, container, canvasCtx]);
 
+    const paint = useMemo(() => Skia.Paint(), []);
+
     // Draw callback
     const onDraw = useDrawCallback(
       (canvas, info) => {
@@ -92,7 +104,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ) {
           canvasCtx.size.current = { width, height };
         }
-        const paint = Skia.Paint();
+        paint.reset();
         const ctx = {
           width,
           height,
@@ -101,7 +113,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           paint,
           opacity: 1,
           ref,
-          center: Skia.Point(width / 2, height / 2),
+          center: { x: width / 2, y: height / 2 },
           Skia,
         };
         container.draw(ctx);
@@ -112,7 +124,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     useEffect(() => {
       return () => {
         skiaReconciler.updateContainer(null, root, null, () => {
-          container.depMgr.unsubscribe();
+          container.depMgr.remove();
         });
       };
     }, [container, root]);