@shopify/react-native-skia 2.2.6 → 2.2.8

package/lib/module/sksg/StaticContainer.js

@@ -0,0 +1,62 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Recorder } from "./Recorder/Recorder";
+import { visit } from "./Recorder/Visitor";
+import { replay } from "./Recorder/Player";
+import { createDrawingContext } from "./Recorder/DrawingContext";
+import "../views/api";
+export class Container {
+  constructor(Skia) {
+    this.Skia = Skia;
+    _defineProperty(this, "_root", []);
+    _defineProperty(this, "recording", null);
+    _defineProperty(this, "unmounted", false);
+  }
+  get root() {
+    return this._root;
+  }
+  set root(value) {
+    this._root = value;
+  }
+  mount() {
+    this.unmounted = false;
+  }
+  unmount() {
+    this.unmounted = true;
+  }
+  drawOnCanvas(canvas) {
+    if (!this.recording) {
+      throw new Error("No recording to draw");
+    }
+    const ctx = createDrawingContext(this.Skia, this.recording.paintPool, canvas);
+    replay(ctx, this.recording.commands);
+  }
+}
+export class StaticContainer extends Container {
+  constructor(Skia, nativeId, onSize) {
+    super(Skia);
+    this.nativeId = nativeId;
+    this.onSize = onSize;
+  }
+  redraw() {
+    const recorder = new Recorder();
+    visit(recorder, this.root);
+    this.recording = recorder.getRecording();
+    const isOnScreen = this.nativeId !== -1;
+    if (isOnScreen) {
+      if (this.onSize) {
+        const size = SkiaViewApi.size(this.nativeId);
+        if (size.width !== this.onSize.value.width || size.height !== this.onSize.value.height) {
+          this.onSize.value = size;
+        }
+      }
+      const rec = this.Skia.PictureRecorder();
+      const canvas = rec.beginRecording();
+      this.drawOnCanvas(canvas);
+      const picture = rec.finishRecordingAsPicture();
+      SkiaViewApi.setJsiProperty(this.nativeId, "picture", picture);
+    }
+  }
+}
+//# sourceMappingURL=StaticContainer.js.map

package/lib/module/sksg/StaticContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Recorder","visit","replay","createDrawingContext","Container","constructor","Skia","_defineProperty","root","_root","value","mount","unmounted","unmount","drawOnCanvas","canvas","recording","Error","ctx","paintPool","commands","StaticContainer","nativeId","onSize","redraw","recorder","getRecording","isOnScreen","size","SkiaViewApi","width","height","rec","PictureRecorder","beginRecording","picture","finishRecordingAsPicture","setJsiProperty"],"sources":["StaticContainer.ts"],"sourcesContent":["import type { SharedValue } from \"react-native-reanimated\";\n\nimport type { Skia, SkCanvas, SkSize } from \"../skia/types\";\n\nimport type { Node } from \"./Node\";\nimport type { Recording } from \"./Recorder/Recorder\";\nimport { Recorder } from \"./Recorder/Recorder\";\nimport { visit } from \"./Recorder/Visitor\";\nimport { replay } from \"./Recorder/Player\";\nimport { createDrawingContext } from \"./Recorder/DrawingContext\";\n\nimport \"../views/api\";\n\nexport abstract class Container {\n  private _root: Node[] = [];\n  protected recording: Recording | null = null;\n  protected unmounted = false;\n\n  constructor(protected Skia: Skia) {}\n\n  get root() {\n    return this._root;\n  }\n\n  set root(value: Node[]) {\n    this._root = value;\n  }\n\n  mount() {\n    this.unmounted = false;\n  }\n\n  unmount() {\n    this.unmounted = true;\n  }\n\n  drawOnCanvas(canvas: SkCanvas) {\n    if (!this.recording) {\n      throw new Error(\"No recording to draw\");\n    }\n    const ctx = createDrawingContext(\n      this.Skia,\n      this.recording.paintPool,\n      canvas\n    );\n    replay(ctx, this.recording.commands);\n  }\n\n  abstract redraw(): void;\n}\n\nexport class StaticContainer extends Container {\n  constructor(\n    Skia: Skia,\n    private nativeId: number,\n    private onSize?: SharedValue<SkSize>\n  ) {\n    super(Skia);\n  }\n\n  redraw() {\n    const recorder = new Recorder();\n    visit(recorder, this.root);\n    this.recording = recorder.getRecording();\n    const isOnScreen = this.nativeId !== -1;\n    if (isOnScreen) {\n      if (this.onSize) {\n        const size = SkiaViewApi.size(this.nativeId);\n        if (\n          size.width !== this.onSize.value.width ||\n          size.height !== this.onSize.value.height\n        ) {\n          this.onSize.value = size;\n        }\n      }\n      const rec = this.Skia.PictureRecorder();\n      const canvas = rec.beginRecording();\n      this.drawOnCanvas(canvas);\n      const picture = rec.finishRecordingAsPicture();\n      SkiaViewApi.setJsiProperty(this.nativeId, \"picture\", picture);\n    }\n  }\n}\n"],"mappings":";;;AAMA,SAASA,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,KAAK,QAAQ,oBAAoB;AAC1C,SAASC,MAAM,QAAQ,mBAAmB;AAC1C,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,OAAO,cAAc;AAErB,OAAO,MAAeC,SAAS,CAAC;EAK9BC,WAAWA,CAAWC,IAAU,EAAE;IAAA,KAAZA,IAAU,GAAVA,IAAU;IAAAC,eAAA,gBAJR,EAAE;IAAAA,eAAA,oBACc,IAAI;IAAAA,eAAA,oBACtB,KAAK;EAEQ;EAEnC,IAAIC,IAAIA,CAAA,EAAG;IACT,OAAO,IAAI,CAACC,KAAK;EACnB;EAEA,IAAID,IAAIA,CAACE,KAAa,EAAE;IACtB,IAAI,CAACD,KAAK,GAAGC,KAAK;EACpB;EAEAC,KAAKA,CAAA,EAAG;IACN,IAAI,CAACC,SAAS,GAAG,KAAK;EACxB;EAEAC,OAAOA,CAAA,EAAG;IACR,IAAI,CAACD,SAAS,GAAG,IAAI;EACvB;EAEAE,YAAYA,CAACC,MAAgB,EAAE;IAC7B,IAAI,CAAC,IAAI,CAACC,SAAS,EAAE;MACnB,MAAM,IAAIC,KAAK,CAAC,sBAAsB,CAAC;IACzC;IACA,MAAMC,GAAG,GAAGf,oBAAoB,CAC9B,IAAI,CAACG,IAAI,EACT,IAAI,CAACU,SAAS,CAACG,SAAS,EACxBJ,MACF,CAAC;IACDb,MAAM,CAACgB,GAAG,EAAE,IAAI,CAACF,SAAS,CAACI,QAAQ,CAAC;EACtC;AAGF;AAEA,OAAO,MAAMC,eAAe,SAASjB,SAAS,CAAC;EAC7CC,WAAWA,CACTC,IAAU,EACFgB,QAAgB,EAChBC,MAA4B,EACpC;IACA,KAAK,CAACjB,IAAI,CAAC;IAAC,KAHJgB,QAAgB,GAAhBA,QAAgB;IAAA,KAChBC,MAA4B,GAA5BA,MAA4B;EAGtC;EAEAC,MAAMA,CAAA,EAAG;IACP,MAAMC,QAAQ,GAAG,IAAIzB,QAAQ,CAAC,CAAC;IAC/BC,KAAK,CAACwB,QAAQ,EAAE,IAAI,CAACjB,IAAI,CAAC;IAC1B,IAAI,CAACQ,SAAS,GAAGS,QAAQ,CAACC,YAAY,CAAC,CAAC;IACxC,MAAMC,UAAU,GAAG,IAAI,CAACL,QAAQ,KAAK,CAAC,CAAC;IACvC,IAAIK,UAAU,EAAE;MACd,IAAI,IAAI,CAACJ,MAAM,EAAE;QACf,MAAMK,IAAI,GAAGC,WAAW,CAACD,IAAI,CAAC,IAAI,CAACN,QAAQ,CAAC;QAC5C,IACEM,IAAI,CAACE,KAAK,KAAK,IAAI,CAACP,MAAM,CAACb,KAAK,CAACoB,KAAK,IACtCF,IAAI,CAACG,MAAM,KAAK,IAAI,CAACR,MAAM,CAACb,KAAK,CAACqB,MAAM,EACxC;UACA,IAAI,CAACR,MAAM,CAACb,KAAK,GAAGkB,IAAI;QAC1B;MACF;MACA,MAAMI,GAAG,GAAG,IAAI,CAAC1B,IAAI,CAAC2B,eAAe,CAAC,CAAC;MACvC,MAAMlB,MAAM,GAAGiB,GAAG,CAACE,cAAc,CAAC,CAAC;MACnC,IAAI,CAACpB,YAAY,CAACC,MAAM,CAAC;MACzB,MAAMoB,OAAO,GAAGH,GAAG,CAACI,wBAAwB,CAAC,CAAC;MAC9CP,WAAW,CAACQ,cAAc,CAAC,IAAI,CAACf,QAAQ,EAAE,SAAS,EAAEa,OAAO,CAAC;IAC/D;EACF;AACF","ignoreList":[]}

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

@@ -1,43 +1,3 @@
 export const __esModule: boolean;
-export class Container {
-    constructor(Skia: any);
-    Skia: any;
-    set root(value: any);
-    get root(): any;
-    _root: any;
-    mount(): void;
-    unmounted: boolean | undefined;
-    unmount(): void;
-    drawOnCanvas(canvas: any): void;
-}
-export function createContainer(Skia: any, nativeId: any, onSize: any): NativeReanimatedContainer | ReanimatedContainer | StaticContainer;
-declare class NativeReanimatedContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    mapperId: any;
-}
-declare class ReanimatedContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    recording: {
-        commands: any;
-        paintPool: never[];
-    } | undefined;
-    mapperId: any;
-}
-declare class StaticContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    recording: {
-        commands: any;
-        paintPool: never[];
-        animationValues: any;
-    } | undefined;
-}
-export {};
+export function createContainer(Skia: any, nativeId: any, onSize: any): _StaticContainer.StaticContainer;
+import _StaticContainer = require("./StaticContainer");

package/lib/typescript/lib/commonjs/sksg/Container.native.d.ts

@@ -0,0 +1,11 @@
+export const __esModule: boolean;
+export function createContainer(Skia: any, nativeId: any, onSize: any): _StaticContainer.StaticContainer | NativeReanimatedContainer;
+import _StaticContainer = require("./StaticContainer");
+declare class NativeReanimatedContainer extends _StaticContainer.Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    mapperId: any;
+}
+export {};

package/lib/typescript/lib/commonjs/sksg/Container.web.d.ts

@@ -0,0 +1,15 @@
+export const __esModule: boolean;
+export function createContainer(Skia: any, nativeId: any, onSize: any): _StaticContainer.StaticContainer | ReanimatedContainer;
+import _StaticContainer = require("./StaticContainer");
+declare class ReanimatedContainer extends _StaticContainer.Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    recording: {
+        commands: any;
+        paintPool: never[];
+    } | undefined;
+    mapperId: any;
+}
+export {};

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

@@ -2,51 +2,7 @@ export const __esModule: boolean;
 export class SkiaSGRoot {
     constructor(Skia: any, nativeId: number | undefined, onSize: any);
     Skia: any;
-    container: {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        mapperId: any;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        recording: {
-            commands: any;
-            paintPool: never[];
-        } | undefined;
-        mapperId: any;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        recording: {
-            commands: any;
-            paintPool: never[];
-            animationValues: any;
-        } | undefined;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    };
+    container: import("./StaticContainer").StaticContainer;
     root: any;
     get sg(): {
         type: any;

package/lib/typescript/lib/commonjs/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -14,7 +14,7 @@ export class ReanimatedRecorder {
     pushPathEffect(pathEffectType: any, props: any): void;
     pushImageFilter(imageFilterType: any, props: any): void;
     pushColorFilter(colorFilterType: any, props: any): void;
-    pushShader(shaderType: any, props: any): void;
+    pushShader(shaderType: any, props: any, children: any): void;
     pushBlurMaskFilter(props: any): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -19,7 +19,7 @@ export class Recorder {
     pushPathEffect(pathEffectType: any, props: any): void;
     pushImageFilter(imageFilterType: any, props: any): void;
     pushColorFilter(colorFilterType: any, props: any): void;
-    pushShader(shaderType: any, props: any): void;
+    pushShader(shaderType: any, props: any, children: any): void;
     pushBlurMaskFilter(props: any): void;
     composePathEffect(): void;
     composeColorFilter(): void;

package/lib/typescript/lib/commonjs/sksg/StaticContainer.d.ts

@@ -0,0 +1,23 @@
+export const __esModule: boolean;
+export class Container {
+    constructor(Skia: any);
+    Skia: any;
+    set root(value: any);
+    get root(): any;
+    _root: any;
+    mount(): void;
+    unmounted: boolean | undefined;
+    unmount(): void;
+    drawOnCanvas(canvas: any): void;
+}
+export class StaticContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    recording: {
+        commands: any;
+        paintPool: never[];
+        animationValues: any;
+    } | undefined;
+}

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

@@ -1,42 +1,2 @@
-export class Container {
-    constructor(Skia: any);
-    Skia: any;
-    set root(value: any);
-    get root(): any;
-    _root: any;
-    mount(): void;
-    unmounted: boolean | undefined;
-    unmount(): void;
-    drawOnCanvas(canvas: any): void;
-}
-export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
-declare class StaticContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    recording: {
-        commands: any;
-        paintPool: never[];
-        animationValues: any;
-    } | undefined;
-}
-declare class ReanimatedContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    recording: {
-        commands: any;
-        paintPool: never[];
-    } | undefined;
-    mapperId: any;
-}
-declare class NativeReanimatedContainer extends Container {
-    constructor(Skia: any, nativeId: any, onSize: any);
-    nativeId: any;
-    onSize: any;
-    redraw(): void;
-    mapperId: any;
-}
-export {};
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer;
+import { StaticContainer } from "./StaticContainer";

package/lib/typescript/lib/module/sksg/Container.native.d.ts

@@ -0,0 +1,11 @@
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | NativeReanimatedContainer;
+import { StaticContainer } from "./StaticContainer";
+declare class NativeReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    mapperId: any;
+}
+import { Container } from "./StaticContainer";
+export {};

package/lib/typescript/lib/module/sksg/Container.web.d.ts

@@ -0,0 +1,15 @@
+export function createContainer(Skia: any, nativeId: any, onSize: any): StaticContainer | ReanimatedContainer;
+import { StaticContainer } from "./StaticContainer";
+declare class ReanimatedContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    recording: {
+        commands: any;
+        paintPool: never[];
+    } | undefined;
+    mapperId: any;
+}
+import { Container } from "./StaticContainer";
+export {};

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

@@ -1,51 +1,7 @@
 export class SkiaSGRoot {
     constructor(Skia: any, nativeId: number | undefined, onSize: any);
     Skia: any;
-    container: {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        recording: {
-            commands: any;
-            paintPool: never[];
-            animationValues: any;
-        } | undefined;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        recording: {
-            commands: any;
-            paintPool: never[];
-        } | undefined;
-        mapperId: any;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    } | {
-        nativeId: any;
-        onSize: any;
-        redraw(): void;
-        mapperId: any;
-        Skia: any;
-        root: any;
-        _root: any;
-        mount(): void;
-        unmounted: boolean | undefined;
-        unmount(): void;
-        drawOnCanvas(canvas: any): void;
-    };
+    container: import("./StaticContainer").StaticContainer;
     root: any;
     get sg(): {
         type: any;

package/lib/typescript/lib/module/sksg/Recorder/ReanimatedRecorder.d.ts

@@ -13,7 +13,7 @@ export class ReanimatedRecorder {
     pushPathEffect(pathEffectType: any, props: any): void;
     pushImageFilter(imageFilterType: any, props: any): void;
     pushColorFilter(colorFilterType: any, props: any): void;
-    pushShader(shaderType: any, props: any): void;
+    pushShader(shaderType: any, props: any, children: any): void;
     pushBlurMaskFilter(props: any): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -18,7 +18,7 @@ export class Recorder {
     pushPathEffect(pathEffectType: any, props: any): void;
     pushImageFilter(imageFilterType: any, props: any): void;
     pushColorFilter(colorFilterType: any, props: any): void;
-    pushShader(shaderType: any, props: any): void;
+    pushShader(shaderType: any, props: any, children: any): void;
     pushBlurMaskFilter(props: any): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -0,0 +1,22 @@
+export class Container {
+    constructor(Skia: any);
+    Skia: any;
+    set root(value: any);
+    get root(): any;
+    _root: any;
+    mount(): void;
+    unmounted: boolean | undefined;
+    unmount(): void;
+    drawOnCanvas(canvas: any): void;
+}
+export class StaticContainer extends Container {
+    constructor(Skia: any, nativeId: any, onSize: any);
+    nativeId: any;
+    onSize: any;
+    redraw(): void;
+    recording: {
+        commands: any;
+        paintPool: never[];
+        animationValues: any;
+    } | undefined;
+}

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

@@ -12,7 +12,7 @@ export interface BaseRecorder {
     pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
     pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
     pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
-    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>, children: number): void;
     pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -1,40 +1,4 @@
 import type { SharedValue } from "react-native-reanimated";
-import type { Skia, SkCanvas, SkSize } from "../skia/types";
-import type { Node } from "./Node";
-import type { Recording } from "./Recorder/Recorder";
-import "../views/api";
-export declare abstract class Container {
-    protected Skia: Skia;
-    private _root;
-    protected recording: Recording | null;
-    protected unmounted: boolean;
-    constructor(Skia: Skia);
-    get root(): Node[];
-    set root(value: Node[]);
-    mount(): void;
-    unmount(): void;
-    drawOnCanvas(canvas: SkCanvas): void;
-    abstract redraw(): void;
-}
-declare class StaticContainer extends Container {
-    private nativeId;
-    private onSize?;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-declare class ReanimatedContainer extends Container {
-    private nativeId;
-    private onSize?;
-    private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-declare class NativeReanimatedContainer extends Container {
-    private nativeId;
-    private onSize?;
-    private mapperId;
-    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
-    redraw(): void;
-}
-export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer | NativeReanimatedContainer;
-export {};
+import type { Skia, SkSize } from "../skia/types";
+import { StaticContainer } from "./StaticContainer";
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer;

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

@@ -0,0 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
+import "../skia/NativeSetup";
+import "../views/api";
+declare class NativeReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | NativeReanimatedContainer;
+export {};

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

@@ -0,0 +1,14 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkSize } from "../skia/types";
+import { Container, StaticContainer } from "./StaticContainer";
+import "../skia/NativeSetup";
+import "../views/api";
+declare class ReanimatedContainer extends Container {
+    private nativeId;
+    private onSize?;
+    private mapperId;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}
+export declare const createContainer: (Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize>) => StaticContainer | ReanimatedContainer;
+export {};

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

@@ -1,7 +1,7 @@
 import type { HostConfig } from "react-reconciler";
 import type { NodeType } from "../dom/types";
 import type { Node } from "./Node";
-import type { Container } from "./Container";
+import type { Container } from "./StaticContainer";
 export declare const debug: (...args: Parameters<typeof console.log>) => void;
 type Instance = Node;
 type Props = object;

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

@@ -18,7 +18,7 @@ export declare class ReanimatedRecorder implements BaseRecorder {
     pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
     pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
     pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
-    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>, children: number): void;
     pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -28,7 +28,7 @@ export declare class Recorder implements BaseRecorder {
     pushPathEffect(pathEffectType: NodeType, props: AnimatedProps<unknown>): void;
     pushImageFilter(imageFilterType: NodeType, props: AnimatedProps<unknown>): void;
     pushColorFilter(colorFilterType: NodeType, props: AnimatedProps<unknown>): void;
-    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void;
+    pushShader(shaderType: NodeType, props: AnimatedProps<unknown>, children: number): void;
     pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void;
     composePathEffect(): void;
     composeColorFilter(): void;

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

@@ -0,0 +1,24 @@
+import type { SharedValue } from "react-native-reanimated";
+import type { Skia, SkCanvas, SkSize } from "../skia/types";
+import type { Node } from "./Node";
+import type { Recording } from "./Recorder/Recorder";
+import "../views/api";
+export declare abstract class Container {
+    protected Skia: Skia;
+    private _root;
+    protected recording: Recording | null;
+    protected unmounted: boolean;
+    constructor(Skia: Skia);
+    get root(): Node[];
+    set root(value: Node[]);
+    mount(): void;
+    unmount(): void;
+    drawOnCanvas(canvas: SkCanvas): void;
+    abstract redraw(): void;
+}
+export declare class StaticContainer extends Container {
+    private nativeId;
+    private onSize?;
+    constructor(Skia: Skia, nativeId: number, onSize?: SharedValue<SkSize> | undefined);
+    redraw(): void;
+}

package/package.json

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

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

@@ -257,4 +257,97 @@ vec4 main(vec2 pos) {
     );
     checkImage(img, docPath("shaders/color.png"));
   });
+  it("should display a mix of red and lightblue color", async () => {
+    const { Skia } = importSkia();
+    const colorSelection = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  return mix(c1, c2, 0.5);
+}`)!;
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={colorSelection}>
+          <ColorShader color="lightblue" />
+          <ColorShader color="red" />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/mixed-colors.png"));
+  });
+  it("should display a mix of red and lightblue from custom shaders", async () => {
+    const { Skia } = importSkia();
+    const colorSelection = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  return mix(c1, c2, 0.5);
+}`)!;
+    expect(colorSelection).toBeDefined();
+    const colorShader = Skia.RuntimeEffect.Make(`
+uniform vec4 color;
+
+vec4 main(vec2 pos) {
+  return color;
+}
+`)!;
+    expect(colorShader).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={colorSelection}>
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("lightblue") }}
+          />
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("red") }}
+          />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/mixed-colors.png"));
+  });
+
+  it("should display different results based on children order", async () => {
+    const { Skia } = importSkia();
+    const orderSensitiveShader = Skia.RuntimeEffect.Make(`uniform shader child1;
+uniform shader child2;
+
+vec4 main(vec2 pos) {
+  vec4 c1 = child1.eval(pos);
+  vec4 c2 = child2.eval(pos);
+  // Order-dependent: blend child2 over child1 with position-based alpha
+  float alpha = pos.x / 256.0;
+  return mix(c1, c2, alpha);
+}`)!;
+    expect(orderSensitiveShader).toBeDefined();
+    const colorShader = Skia.RuntimeEffect.Make(`
+uniform vec4 color;
+
+vec4 main(vec2 pos) {
+  return color;
+}
+`)!;
+    expect(colorShader).toBeDefined();
+    const img = await surface.draw(
+      <Fill>
+        <Shader source={orderSensitiveShader}>
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("blue") }}
+          />
+          <Shader
+            source={colorShader}
+            uniforms={{ color: Skia.Color("yellow") }}
+          />
+        </Shader>
+      </Fill>
+    );
+    checkImage(img, docPath("shaders/order-dependent.png"));
+  });
 });