Fix opacity bug (#975)

package/src/dom/nodes/RenderNode.ts

@@ -211,9 +211,10 @@ export abstract class JsiRenderNode<P extends GroupProps>
     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 ||

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(
+      <Group>
+        <Fill color="lightblue" />
+        <Group opacity={0}>
+          <RoundedRect
+            rect={rrect(rect(0, 0, r, r), r, r)}
+            color="rgba(0, 0, 0, 0.2)"
+          />
+          <RoundedRect
+            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
+            color="white"
+          />
+        </Group>
+      </Group>
+    );
+    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(
+      <Group opacity={0.5}>
+        <Fill color="lightblue" />
+        <Group opacity={0.5}>
+          <RoundedRect
+            rect={rrect(rect(0, 0, r, r), r, r)}
+            color="rgba(0, 0, 0, 0.2)"
+          />
+          <RoundedRect
+            rect={rrect(rect(0, 0, r / 2, r / 2), r, r)}
+            color="white"
+          />
+        </Group>
+      </Group>
+    );
+    processResult(
+      surface,
+      "snapshots/drawings/opacity-multiplication2.png",
+      true
+    );
+  });
+});