maskElement color being ignored when view being masked has reduced opacity

[Trevash]

Hey I'm trying to overlay two different colors on the same text and thought that Masked View would provide that functionality since it is supposed to clip the view inside Masked View to the text that is the maskElement prop. It looks like when opacity is reduced on the masked View element, it doesn't show the color of the Text element that should be showing through since the opacity was reduced on the View.

Here is my code to demonstrate:

<MaskedView
        maskElement={
          <Text style={{ fontSize: 20, color: 'green', backgroundColor: 'transparent' }}>Basic Mask</Text>
        }
      >
      <View style={{ backgroundColor: '#000', opacity: .1, flex: 1, height: 24 }} />
</MaskedView>

Please let me know if there is something I am doing wrong or if this isn't something supported by masked view. If it isn't, is there any other way to do the functionality I'm looking for? For an example in html, you would do background-color, background-clip, and color with varying degrees of rgba values

[mafeung]

The Masked Single