@shopify/react-native-skia 0.1.140 → 0.1.143

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

@@ -1 +1 @@
-{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","timeDiffseconds","timestamp","current","id","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});\n  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(\n    {}\n  );\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX =\n          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);\n        const distY =\n          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled\n        ) {\n          if (timeDiffseconds > 0) {\n            prevVelocityRef.current[touch.id] = {\n              x: distX / timeDiffseconds / PixelRatio.get(),\n              y: distY / timeDiffseconds / PixelRatio.get(),\n            };\n          } else {\n            prevVelocityRef.current[touch.id] = { x: 0, y: 0 };\n          }\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id].x,\n          velocityY: prevVelocityRef.current[touch.id].y,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}
+{"version":3,"sources":["useTouchHandler.ts"],"names":["useCallback","useRef","PixelRatio","TouchType","useInternalTouchHandler","handlers","deps","multiTouch","prevTouchInfoRef","prevVelocityRef","history","forEach","touches","i","length","touch","prevTouch","current","id","timeDiffseconds","timestamp","distX","x","distY","y","type","Start","End","Cancelled","get","extendedTouchInfo","velocityX","velocityY","onStart","Active","onActive","onEnd","useTouchHandler","useMultiTouchHandler"],"mappings":"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","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback, useRef } from \"react\";\nimport { PixelRatio } from \"react-native\";\n\nimport type { Vector } from \"../skia/types\";\n\nimport type {\n  ExtendedTouchInfo,\n  TouchHandlers,\n  TouchHandler,\n  TouchInfo,\n} from \"./types\";\nimport { TouchType } from \"./types\";\n\nconst useInternalTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = [],\n  multiTouch = false\n): TouchHandler => {\n  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo | undefined }>({});\n  const prevVelocityRef = useRef<{ [key: number]: Vector | undefined }>({});\n\n  return useCallback((history: Array<Array<TouchInfo>>) => {\n    // Process all items in the current touch history\n    history.forEach((touches) => {\n      // Enumerate touches\n      for (let i = 0; i < touches.length; i++) {\n        if (!multiTouch && i > 0) {\n          break;\n        }\n\n        const touch = touches[i];\n        const prevTouch = prevTouchInfoRef.current[touch.id];\n        // Calculate the velocity from the previous touch.\n        const timeDiffseconds =\n          touch.timestamp -\n          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);\n\n        const distX = touch.x - (prevTouch?.x ?? touch.x);\n        const distY = touch.y - (prevTouch?.y ?? touch.y);\n\n        if (\n          touch.type !== TouchType.Start &&\n          touch.type !== TouchType.End &&\n          touch.type !== TouchType.Cancelled &&\n          timeDiffseconds > 0\n        ) {\n          prevVelocityRef.current[touch.id] = {\n            x: distX / timeDiffseconds / PixelRatio.get(),\n            y: distY / timeDiffseconds / PixelRatio.get(),\n          };\n        }\n\n        const extendedTouchInfo: ExtendedTouchInfo = {\n          ...touch,\n          velocityX: prevVelocityRef.current[touch.id]?.x ?? 0,\n          velocityY: prevVelocityRef.current[touch.id]?.y ?? 0,\n        };\n\n        // Save previous touch\n        prevTouchInfoRef.current[touch.id] = touch;\n\n        if (touch.type === TouchType.Start) {\n          delete prevVelocityRef.current[touch.id];\n          handlers.onStart && handlers.onStart(touch);\n        } else if (touch.type === TouchType.Active) {\n          handlers.onActive && handlers.onActive(extendedTouchInfo);\n        } else {\n          handlers.onEnd && handlers.onEnd(extendedTouchInfo);\n        }\n      }\n    });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler only handles single touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, false);\n};\n\n/**\n * Provides a callback for handling touch events in the Skia View.\n * This touch handler handles multiple touches.\n * @param handlers Callbacks for the different touch states\n * @param deps optional Dependency array to update the handlers\n * @returns A function that can be used from within the onDraw callback to\n * update and handle touch events. Call it with the touches property from\n * the info object.\n */\nexport const useMultiTouchHandler = (\n  handlers: TouchHandlers,\n  deps: DependencyList = []\n): TouchHandler => {\n  return useInternalTouchHandler(handlers, deps, true);\n};\n"]}

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

@@ -1,7 +1,12 @@
-import type { SkiaValue } from "../../../values";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 export declare const isValue: (value: unknown) => value is SkiaValue<unknown>;
+export declare const isSelector: <T, R>(value: unknown) => value is {
+    selector: (v: T) => R;
+    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]: T[K] | SkiaValue<T[K]>;
+    [K in keyof T]: AnimatedProp<T[K]>;
 };

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

@@ -1,5 +1,3 @@
-import type { DependencyList } from "react";
-import type { SkData, DataSource } from "../types";
-export declare const useDataCollection: <T>(sources: DataSource[], factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => (T | null)[] | null;
-export declare const useRawData: <T>(source: DataSource | null | undefined, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => T | null;
-export declare const useData: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined, deps?: DependencyList | undefined) => SkData | null;
+import type { SkData, DataSourceParam } from "../types";
+export declare const useRawData: <T>(source: DataSourceParam, factory: (data: SkData) => T, onError?: ((err: Error) => void) | undefined) => T | null;
+export declare const useData: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => SkData | null;

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

@@ -1,5 +1,5 @@
-import type { DataSource, SkFont } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Font object
  * */
-export declare const useFont: (font: DataSource | null | undefined, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => SkFont | null;
+export declare const useFont: (font: DataSourceParam, size?: number | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkFont | null;

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

@@ -1,5 +1,5 @@
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Image object
  * */
-export declare const useImage: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkImage | null;
+export declare const useImage: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkImage | null;

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

@@ -1,2 +1,2 @@
-import type { DataSource } from "../types";
-export declare const useSVG: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;
+import type { DataSourceParam } from "../types";
+export declare const useSVG: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkSVG | null;

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

@@ -1,5 +1,5 @@
-import type { DataSource } from "../types";
+import type { DataSourceParam } from "../types";
 /**
  * Returns a Skia Typeface object
  * */
-export declare const useTypeface: (source: DataSource | null | undefined, onError?: ((err: Error) => void) | undefined) => import("../types").SkTypeface | null;
+export declare const useTypeface: (source: DataSourceParam, onError?: ((err: Error) => void) | undefined) => import("../types").SkTypeface | null;

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

@@ -1,5 +1,12 @@
-/// <reference types="node" />
-/// <reference types="react-native" />
 import type { SkJSIInstance } from "../JsiInstance";
 export declare type SkData = SkJSIInstance<"Data">;
-export declare type DataSource = ReturnType<typeof require> | string | Uint8Array;
+declare type RNModule = number;
+declare type ESModule = {
+    __esModule: true;
+    default: string;
+};
+export declare type DataModule = RNModule | ESModule;
+export declare type DataSource = DataModule | string | Uint8Array;
+export declare type DataSourceParam = DataSource | null | undefined;
+export declare const isRNModule: (mod: DataModule) => mod is number;
+export {};

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;
     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/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,9 @@
 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;
     get ry(): 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,8 +1,8 @@
 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 {
-    static fromValue(CanvasKit: CanvasKit, rect: SkRect): JsiSkRect;
+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;
     get y(): 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/values/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./hooks";
 export * from "./api";
+export * from "./selector";

package/lib/typescript/src/values/selector.d.ts

@@ -0,0 +1,14 @@
+import type { SkiaValue } from "./types";
+export declare type SkiaSelector<TReturn, TInput = unknown> = {
+    value: SkiaValue<TInput>;
+    selector: (v: TInput) => TReturn;
+};
+/**
+ * Wraps a Skia Value with a selector function. The selector function can access the
+ * inner values of the Skia Value so that we can dynamically ready array values and
+ * object values when doing animations in Skia.
+ * @param value Dependant value
+ * @param selector Selector function to calculate new value from the Skia Value's value
+ * @returns A descriptor that will be used by the reconciler to calculate the value
+ */
+export declare const Selector: <TInput, TReturn>(value: SkiaValue<TInput>, selector: (v: TInput) => TReturn) => SkiaSelector<TReturn, TInput>;

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

@@ -8,6 +8,10 @@ export interface SkiaValue<T = number> {
      * Returns unsubscribe method.
      */
     addListener: (cb: (value: T) => void) => () => void;
+    /**
+     * Invalidates the value. Has different meaning depending on the type of the value.
+     */
+    __invalidate: () => void;
     /**
      * Field to make typechecking easier
      */

package/lib/typescript/src/values/web/RNSkComputedValue.d.ts

@@ -6,4 +6,5 @@ export declare class RNSkComputedValue<T> extends RNSkReadonlyValue<T> {
     private _callback;
     private _unsubscribers;
     unsubscribe(): void;
+    __invalidate(): void;
 }

package/lib/typescript/src/values/web/RNSkReadonlyValue.d.ts

@@ -8,4 +8,5 @@ export declare class RNSkReadonlyValue<T> implements SkiaValue<T> {
     readonly __typename__ = "RNSkValue";
     get current(): T;
     addListener(cb: (value: T) => void): () => void;
+    __invalidate(): void;
 }

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.140",
+  "version": "0.1.143",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [
@@ -37,7 +37,7 @@
   ],
   "scripts": {
     "tsc": "tsc --noEmit",
-    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0",
+    "lint": "eslint . --ext .ts,.tsx  --max-warnings 0 --cache",
     "test": "jest",
     "postinstall": "node scripts/install-npm.js",
     "build": "bob build"
@@ -75,21 +75,21 @@
     }
   },
   "devDependencies": {
-    "@types/jest": "^27.0.3",
+    "@types/jest": "^28.1.6",
     "@types/react-native": "^0.65.0",
     "@types/react-reconciler": "^0.26.4",
     "eslint": "8.21.0",
     "eslint-config-react-native-wcandillon": "3.9.0",
     "eslint-plugin-reanimated": "2.0.0",
-    "jest": "^27.4.3",
+    "jest": "28.1.3",
     "react": "17.0.2",
     "react-native": "0.66.2",
     "react-native-builder-bob": "^0.18.2",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^28.0.7",
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "canvaskit-wasm": "^0.35.0",
+    "canvaskit-wasm": "^0.36.0",
     "react-reconciler": "^0.26.2"
   },
   "eslintIgnore": [

package/src/mock/index.ts

@@ -3,6 +3,7 @@
 import type { Color, Skia as SkiaApi, SkRect, Vector } from "../skia/types";
 import * as Values from "../values/web";
 import * as ValuesHooks from "../values/hooks";
+import { Selector } from "../values/selector";
 import * as BaseSkia from "../skia/types";
 import type * as SkiaExports from "../skia";
 import type * as ExternalExports from "../external";
@@ -46,7 +47,6 @@ export const Mock: typeof SkiaExports &
   Skia,
   ...BaseSkia,
   // 2. Hooks
-  useDataCollection: Noop,
   useRawData: Noop,
   useData: Noop,
   useFont: Noop,
@@ -87,6 +87,7 @@ export const Mock: typeof SkiaExports &
   // ValueExports
   ...Values,
   ...ValuesHooks,
+  Selector,
   // Animations
   ...timingFunctions,
   ...springFunctions,

package/src/renderer/DependencyManager.tsx

@@ -3,7 +3,7 @@ import type { RefObject } from "react";
 import type { SkiaView } from "../views";
 import type { SkiaValue } from "../values";
 
-import { isValue } from "./processors";
+import { isSelector, isValue } from "./processors";
 import type { Node } from "./nodes";
 
 type Unsubscribe = () => void;
@@ -29,7 +29,10 @@ export class DependencyManager {
   }
 
   subscribeNode(node: Node, props: Props) {
-    const values = Object.values(props).filter(isValue);
+    const values = Object.values(props)
+      .filter((v) => isValue(v) || isSelector(v))
+      .map((v) => (isSelector(v) ? v.value : (v as SkiaValue<unknown>)));
+
     if (values.length > 0) {
       this.subscriptions.set(node, { values, unsubscribe: null });
     }

package/src/renderer/components/Blend.tsx

@@ -1,10 +1,21 @@
 import type { ReactNode } from "react";
 import React from "react";
 
+import type { SkImageFilter, SkShader } from "../../skia/types";
 import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import type { AnimatedProps, SkEnum } from "../processors";
 import { enumKey } from "../processors/Paint";
+import type { DeclarationResult } from "../nodes/Declaration";
+
+const childrenAreImageFilters = (
+  children: DeclarationResult[]
+): children is SkImageFilter[] =>
+  children.every((child) => isImageFilter(child));
+
+const childrenAreShaders = (
+  children: DeclarationResult[]
+): children is SkShader[] => children.every((child) => isShader(child));
 
 interface BlendProps {
   mode: SkEnum<typeof BlendMode>;
@@ -13,12 +24,21 @@ interface BlendProps {
 
 const onDeclare = createDeclaration<BlendProps>(
   ({ mode }, children, { Skia }) => {
-    const [inner, outer] = children;
     const blend = BlendMode[enumKey(mode)];
-    if (isImageFilter(outer) && isImageFilter(inner)) {
-      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-    } else if (isShader(outer) && isShader(inner)) {
-      return Skia.Shader.MakeBlend(blend, outer, inner);
+    if (childrenAreImageFilters(children)) {
+      return children.reverse().reduce<SkImageFilter | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+      }, null);
+    } else if (childrenAreShaders(children)) {
+      return children.reverse().reduce<SkShader | null>((inner, outer) => {
+        if (inner === null) {
+          return outer;
+        }
+        return Skia.Shader.MakeBlend(blend, outer, inner);
+      }, null);
     }
     throw new Error("<Blend /> can only blend Shaders or ImageFilters");
   }

package/src/renderer/components/imageFilters/Morphology.tsx

@@ -18,8 +18,8 @@ const onDeclare = createDeclaration<MorphologyProps>(
     const r = processRadius(Skia, radius);
     const factory =
       operator === "dilate"
-        ? Skia.ImageFilter.MakeDilate
-        : Skia.ImageFilter.MakeErode;
+        ? Skia.ImageFilter.MakeDilate.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeErode.bind(Skia.ImageFilter);
     return factory(r.x, r.y, input);
   }
 );

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -30,8 +30,8 @@ const onDeclare = createDeclaration<ShadowProps>(
       factory = MakeInnerShadow.bind(null, Skia, shadowOnly);
     } else {
       factory = shadowOnly
-        ? Skia.ImageFilter.MakeDropShadowOnly
-        : Skia.ImageFilter.MakeDropShadow;
+        ? Skia.ImageFilter.MakeDropShadowOnly.bind(Skia.ImageFilter)
+        : Skia.ImageFilter.MakeDropShadow.bind(Skia.ImageFilter);
     }
     return factory(dx, dy, blur, blur, color, input);
   }

package/src/renderer/processors/Animations/Animations.ts

@@ -1,4 +1,4 @@
-import type { SkiaValue } from "../../../values";
+import type { SkiaSelector, SkiaValue } from "../../../values";
 import { mapKeys } from "../../typeddash";
 
 export const isValue = (value: unknown): value is SkiaValue<unknown> => {
@@ -17,6 +17,24 @@ export const isValue = (value: unknown): value is SkiaValue<unknown> => {
   return false;
 };
 
+export const isSelector = <T, R>(
+  value: unknown
+): value is {
+  selector: (v: T) => R;
+  value: SkiaValue<T>;
+} => {
+  if (value) {
+    return (
+      typeof value === "object" &&
+      "selector" in value &&
+      "value" in value &&
+      (value as Record<string, unknown>).selector !== undefined &&
+      (value as Record<string, unknown>).value !== undefined
+    );
+  }
+  return false;
+};
+
 export const isAnimated = <T>(props: AnimatedProps<T>) => {
   for (const value of Object.values(props)) {
     if (isValue(value)) {
@@ -29,14 +47,18 @@ export const isAnimated = <T>(props: AnimatedProps<T>) => {
 export const materialize = <T>(props: AnimatedProps<T>) => {
   const result = { ...props };
   mapKeys(props).forEach((key) => {
-    const value = props[key];
-    if (isValue(value)) {
-      result[key] = (value as SkiaValue<T[typeof key]>).current;
+    const prop = props[key];
+    if (isValue(prop)) {
+      result[key] = (prop as SkiaValue<T[typeof key]>).current;
+    } else if (isSelector(prop)) {
+      result[key] = prop.selector(prop.value.current) as T[typeof key];
     }
   });
   return result as T;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnimatedProp<T, P = any> = T | SkiaValue<T> | SkiaSelector<T, P>;
 export type AnimatedProps<T> = {
-  [K in keyof T]: T[K] | SkiaValue<T[K]>;
+  [K in keyof T]: AnimatedProp<T[K]>;
 };

package/src/skia/core/Data.ts

@@ -1,14 +1,14 @@
-import type { DependencyList } from "react";
-import { useRef, useEffect, useState } from "react";
-import { Image, Platform } from "react-native";
+import { useEffect, useState } from "react";
+import { Image } from "react-native";
 
 import { Skia } from "../Skia";
-import type { SkData, DataSource } from "../types";
+import { isRNModule } from "../types";
+import type { SkData, DataModule, DataSourceParam } from "../types";
 
-const resolveAsset = (source: ReturnType<typeof require>) => {
-  return Platform.OS === "web"
-    ? source.default
-    : Image.resolveAssetSource(source).uri;
+const resolveAsset = (source: DataModule) => {
+  return isRNModule(source)
+    ? Image.resolveAssetSource(source).uri
+    : source.default;
 };
 
 const factoryWrapper = <T>(
@@ -25,19 +25,12 @@ const factoryWrapper = <T>(
   }
 };
 
-const loadDataCollection = <T>(
-  sources: DataSource[],
-  factory: (data: SkData) => T,
-  onError?: (err: Error) => void
-): Promise<(T | null)[]> =>
-  Promise.all(sources.map((source) => loadData(source, factory, onError)));
-
 const loadData = <T>(
-  source: DataSource,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source === null) {
+  if (source === null || source === undefined) {
     return new Promise((resolve) => resolve(null));
   } else if (source instanceof Uint8Array) {
     return new Promise((resolve) =>
@@ -50,51 +43,27 @@ const loadData = <T>(
     );
   }
 };
-
-type Source = DataSource | null | undefined;
-
 const useLoading = <T>(
-  source: Source,
-  loader: () => Promise<T | null>,
-  deps: DependencyList = []
+  source: DataSourceParam,
+  loader: () => Promise<T | null>
 ) => {
   const [data, setData] = useState<T | null>(null);
-  const prevSourceRef = useRef<Source>();
   useEffect(() => {
-    if (prevSourceRef.current !== source) {
-      prevSourceRef.current = source;
-      loader().then(setData);
-    } else {
-      setData(null);
-    }
+    loader().then(setData);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
+  }, [source]);
   return data;
 };
 
-export const useDataCollection = <T>(
-  sources: DataSource[],
-  factory: (data: SkData) => T,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) =>
-  useLoading(
-    sources,
-    () => loadDataCollection(sources, factory, onError),
-    deps
-  );
-
 export const useRawData = <T>(
-  source: DataSource | null | undefined,
+  source: DataSourceParam,
   factory: (data: SkData) => T,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useLoading(source, () => loadData(source, factory, onError), deps);
+  onError?: (err: Error) => void
+) => useLoading(source, () => loadData(source, factory, onError));
 
 const identity = (data: SkData) => data;
 
 export const useData = (
-  source: DataSource | null | undefined,
-  onError?: (err: Error) => void,
-  deps?: DependencyList
-) => useRawData(source, identity, onError, deps);
+  source: DataSourceParam,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);