Inconsistent rendering of opacity in <G> element on Android and iOS

[uier]

When using the element with an opacity attribute, the rendering of nested elements inside the element is inconsistent between Android and iOS platforms.

To Reproduce
Here's a minimal code snippet that reproduces the issue:

import { Svg, G, Circle, Rect } from "react-native-svg";

export function Overlap() {
    return (
        <Svg>
            <G opacity={0.5} translateX={100} translateY={200}>
                <Circle r="40" fill="black" />
                <Rect width="80" height="60" fill="green" />
            </G>
        </Svg>
    )
}

The left one is on Android emulator (Pixel_6_Pro_API_33), the right one is on iOS simulator (iPhone 14 Pro)

How can I achieve the iOS result (the contents of the group to first be composited and then the result to be lowered in opacity) on Android?

Thank you!

[jakex7]

Hey!
This issue has already been fixed in [this PR](#2417. Please try updating to the latest version, and feel free to ping me if you encounter any further problems!