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( + + + + + + + + ); + processResult(surface, "snapshots/drawings/opacity-multiplication.png"); + }); + it("Should multiply the opacity to 0.25", () => { + const { rect, rrect } = importSkia(); + const r = width * 0.5; + const surface = drawOnNode( + + + + + + + + ); + processResult( + surface, + "snapshots/drawings/opacity-multiplication2.png", + true + ); + }); +});