@shopify/react-native-skia 2.2.7 → 2.2.8

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"));
+  });
 });

package/src/skia/types/Recorder.ts

@@ -48,7 +48,11 @@ export interface BaseRecorder {
     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/src/sksg/Container.ts

@@ -1,92 +1,13 @@
 import type { SharedValue } from "react-native-reanimated";
 
-import Rea from "../external/reanimated/ReanimatedProxy";
 import type { Skia, SkSize } from "../skia/types";
-import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
 
-import type { Recording } from "./Recorder/Recorder";
-import { Recorder } from "./Recorder/Recorder";
-import { visit } from "./Recorder/Visitor";
-import { replay } from "./Recorder/Player";
-import { createDrawingContext } from "./Recorder/DrawingContext";
-import { Container, StaticContainer } from "./StaticContainer";
-
-const drawOnscreen = (
-  Skia: Skia,
-  nativeId: number,
-  recording: Recording,
-  onSize?: SharedValue<SkSize>
-) => {
-  "worklet";
-  if (onSize) {
-    const size = SkiaViewApi.size(nativeId);
-    if (
-      size.width !== onSize.value.width ||
-      size.height !== onSize.value.height
-    ) {
-      onSize.value = size;
-    }
-  }
-  const rec = Skia.PictureRecorder();
-  const canvas = rec.beginRecording();
-  //const start = performance.now();
-
-  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
-  replay(ctx, recording.commands);
-  const picture = rec.finishRecordingAsPicture();
-  //const end = performance.now();
-  //console.log("Recording time: ", end - start);
-  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
-};
-
-class ReanimatedContainer extends Container {
-  private mapperId: number | null = null;
-
-  constructor(
-    Skia: Skia,
-    private nativeId: number,
-    private onSize?: SharedValue<SkSize>
-  ) {
-    super(Skia);
-  }
-
-  redraw() {
-    if (this.mapperId !== null) {
-      Rea.stopMapper(this.mapperId);
-    }
-    if (this.unmounted) {
-      return;
-    }
-    const recorder = new Recorder();
-    visit(recorder, this.root);
-    const record = recorder.getRecording();
-    const { animationValues } = record;
-    this.recording = {
-      commands: record.commands,
-      paintPool: record.paintPool,
-    };
-    const { nativeId, Skia, recording } = this;
-    if (animationValues.size > 0) {
-      this.mapperId = Rea.startMapper(() => {
-        "worklet";
-        drawOnscreen(Skia, nativeId, recording!);
-      }, Array.from(animationValues));
-    }
-    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
-      "worklet";
-      drawOnscreen(Skia, nativeId, recording!, onSize);
-    })(this.onSize);
-  }
-}
+import { StaticContainer } from "./StaticContainer";
 
 export const createContainer = (
   Skia: Skia,
   nativeId: number,
   onSize?: SharedValue<SkSize>
 ) => {
-  if (HAS_REANIMATED_3 && nativeId !== -1) {
-    return new ReanimatedContainer(Skia, nativeId, onSize);
-  } else {
-    return new StaticContainer(Skia, nativeId);
-  }
+  return new StaticContainer(Skia, nativeId, onSize);
 };

package/src/sksg/Container.web.ts

@@ -0,0 +1,95 @@
+import type { SharedValue } from "react-native-reanimated";
+
+import Rea from "../external/reanimated/ReanimatedProxy";
+import type { Skia, SkSize } from "../skia/types";
+import { HAS_REANIMATED_3 } from "../external/reanimated/renderHelpers";
+
+import type { Recording } from "./Recorder/Recorder";
+import { Recorder } from "./Recorder/Recorder";
+import { visit } from "./Recorder/Visitor";
+import { replay } from "./Recorder/Player";
+import { createDrawingContext } from "./Recorder/DrawingContext";
+import { Container, StaticContainer } from "./StaticContainer";
+
+import "../skia/NativeSetup";
+import "../views/api";
+
+const drawOnscreen = (
+  Skia: Skia,
+  nativeId: number,
+  recording: Recording,
+  onSize?: SharedValue<SkSize>
+) => {
+  "worklet";
+  if (onSize) {
+    const size = SkiaViewApi.size(nativeId);
+    if (
+      size.width !== onSize.value.width ||
+      size.height !== onSize.value.height
+    ) {
+      onSize.value = size;
+    }
+  }
+  const rec = Skia.PictureRecorder();
+  const canvas = rec.beginRecording();
+  //const start = performance.now();
+
+  const ctx = createDrawingContext(Skia, recording.paintPool, canvas);
+  replay(ctx, recording.commands);
+  const picture = rec.finishRecordingAsPicture();
+  //const end = performance.now();
+  //console.log("Recording time: ", end - start);
+  SkiaViewApi.setJsiProperty(nativeId, "picture", picture);
+};
+
+class ReanimatedContainer extends Container {
+  private mapperId: number | null = null;
+
+  constructor(
+    Skia: Skia,
+    private nativeId: number,
+    private onSize?: SharedValue<SkSize>
+  ) {
+    super(Skia);
+  }
+
+  redraw() {
+    if (this.mapperId !== null) {
+      Rea.stopMapper(this.mapperId);
+    }
+    if (this.unmounted) {
+      return;
+    }
+    const recorder = new Recorder();
+    visit(recorder, this.root);
+    const record = recorder.getRecording();
+    const { animationValues } = record;
+    this.recording = {
+      commands: record.commands,
+      paintPool: record.paintPool,
+    };
+    const { nativeId, Skia, recording } = this;
+    if (animationValues.size > 0) {
+      this.mapperId = Rea.startMapper(() => {
+        "worklet";
+        drawOnscreen(Skia, nativeId, recording!);
+      }, Array.from(animationValues));
+    }
+    Rea.runOnUI((onSize?: SharedValue<SkSize>) => {
+      "worklet";
+      drawOnscreen(Skia, nativeId, recording!, onSize);
+    })(this.onSize);
+  }
+}
+
+export const createContainer = (
+  Skia: Skia,
+  nativeId: number,
+  onSize?: SharedValue<SkSize>
+) => {
+  if (HAS_REANIMATED_3 && nativeId !== -1) {
+    return new ReanimatedContainer(Skia, nativeId, onSize);
+  } else {
+    return new StaticContainer(Skia, nativeId);
+  }
+};

package/src/sksg/Recorder/ReanimatedRecorder.ts

@@ -111,9 +111,13 @@ export class ReanimatedRecorder implements BaseRecorder {
     this.recorder.pushColorFilter(colorFilterType, props);
   }
 
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>): void {
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ): void {
     this.processAnimationValues(props);
-    this.recorder.pushShader(shaderType, props);
+    this.recorder.pushShader(shaderType, props, children);
   }
 
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>): void {

package/src/sksg/Recorder/Recorder.ts

@@ -152,11 +152,15 @@ export class Recorder implements BaseRecorder {
     });
   }
 
-  pushShader(shaderType: NodeType, props: AnimatedProps<unknown>) {
+  pushShader(
+    shaderType: NodeType,
+    props: AnimatedProps<unknown>,
+    children: number
+  ) {
     if (!isShader(shaderType) && !(shaderType === NodeType.Blend)) {
       throw new Error("Invalid color filter type: " + shaderType);
     }
-    this.add({ type: CommandType.PushShader, shaderType, props });
+    this.add({ type: CommandType.PushShader, shaderType, props, children });
   }
 
   pushBlurMaskFilter(props: AnimatedProps<BlurMaskFilterProps>) {

package/src/sksg/Recorder/Visitor.ts

@@ -160,7 +160,7 @@ const pushImageFilters = (
     if (isImageFilter(imageFilter.type)) {
       recorder.pushImageFilter(imageFilter.type, imageFilter.props);
     } else if (isShader(imageFilter.type)) {
-      recorder.pushShader(imageFilter.type, imageFilter.props);
+      recorder.pushShader(imageFilter.type, imageFilter.props, 0);
     }
     const needsComposition =
       imageFilter.type !== NodeType.BlendImageFilter &&
@@ -176,7 +176,7 @@ const pushShaders = (recorder: BaseRecorder, shaders: Node<any>[]) => {
     if (shader.children.length > 0) {
       pushShaders(recorder, shader.children);
     }
-    recorder.pushShader(shader.type, shader.props);
+    recorder.pushShader(shader.type, shader.props, shader.children.length);
   });
 };
 

package/src/sksg/Recorder/commands/Shaders.ts

@@ -34,14 +34,18 @@ import type { Command } from "../Core";
 import { CommandType } from "../Core";
 import type { DrawingContext } from "../DrawingContext";
 
-const declareShader = (ctx: DrawingContext, props: ShaderProps) => {
+const declareShader = (
+  ctx: DrawingContext,
+  props: ShaderProps,
+  children: number
+) => {
   "worklet";
   const { source, uniforms, ...transform } = props;
   const m3 = ctx.Skia.Matrix();
   processTransformProps(m3, transform);
   const shader = source.makeShaderWithChildren(
     processUniforms(source, uniforms),
-    ctx.shaders.splice(0, ctx.shaders.length),
+    ctx.shaders.splice(0, children),
     m3
   );
   ctx.shaders.push(shader);
@@ -257,6 +261,7 @@ interface PushShader<T extends keyof Props>
   extends Command<CommandType.PushShader> {
   shaderType: T;
   props: Props[T];
+  children: number;
 }
 
 const isShader = <T extends keyof Props>(
@@ -273,7 +278,7 @@ export const pushShader = (
 ) => {
   "worklet";
   if (isShader(command, NodeType.Shader)) {
-    declareShader(ctx, command.props);
+    declareShader(ctx, command.props, command.children);
   } else if (isShader(command, NodeType.ImageShader)) {
     declareImageShader(ctx, command.props);
   } else if (isShader(command, NodeType.ColorShader)) {