diff --git a/package/src/__tests__/snapshots/drawings/opacity-multiplication.png b/package/src/__tests__/snapshots/drawings/opacity-multiplication.png new file mode 100644 index 0000000000..c48ff5756a Binary files /dev/null and b/package/src/__tests__/snapshots/drawings/opacity-multiplication.png differ diff --git a/package/src/__tests__/snapshots/drawings/opacity-multiplication2.png b/package/src/__tests__/snapshots/drawings/opacity-multiplication2.png new file mode 100644 index 0000000000..ef9ae99041 Binary files /dev/null and b/package/src/__tests__/snapshots/drawings/opacity-multiplication2.png differ diff --git a/package/src/dom/nodes/RenderNode.ts b/package/src/dom/nodes/RenderNode.ts index e73b542287..2e0251d0bd 100644 --- a/package/src/dom/nodes/RenderNode.ts +++ b/package/src/dom/nodes/RenderNode.ts @@ -211,9 +211,10 @@ export abstract class JsiRenderNode
const { invertClip, layer, matrix, transform } = this.props;
const { canvas } = parentCtx;
- const opacity = this.props.opacity
- ? parentCtx.opacity * this.props.opacity
- : parentCtx.opacity;
+ const opacity =
+ this.props.opacity !== undefined
+ ? parentCtx.opacity * this.props.opacity
+ : parentCtx.opacity;
if (
this.paintCache === null ||
diff --git a/package/src/renderer/__tests__/Opacity.spec.tsx b/package/src/renderer/__tests__/Opacity.spec.tsx
new file mode 100644
index 0000000000..0da4528825
--- /dev/null
+++ b/package/src/renderer/__tests__/Opacity.spec.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+
+import { processResult } from "../../__tests__/setup";
+import { Fill, Group, RoundedRect } from "../components";
+
+import { drawOnNode, width, importSkia } from "./setup";
+
+describe("Opacity", () => {
+ it("Should multiply the opacity to 0", () => {
+ const { rect, rrect } = importSkia();
+ const r = width * 0.5;
+ const surface = drawOnNode(
+