Oddly shaped MaskedView with touchable mask area

[greffgreff]

I am trying to make oddly shaped MaskedView components only touchable where the mask is present and not where it is not present. However, I can only seem to get a touchable area on the square bounding box of a componenet instead.

I have the following mask making use of react-native-svg's Svg and Path components with a circle as a mask:

<MaskedView
      maskElement={
            <Svg height="100" width="100">
                  <Circle r='45' cx='50' cy='50' stroke='green' stroke-width='3' fill='red' />
            </Svg>
      }
>
      <TouchableOpacity
            style={{
                  width: '100%',
                  height: '100%',
                  justifyContent: 'center',
                  alignContent: 'center',
                  backgroundColor: 'blue',
            }}
      >
            <Text style={{ color: 'white', textAlign: 'center' }}>This is some text.</Text>
      </TouchableOpacity>
</MaskedView>

In the above, both the interior and outside of the circle are touchable. Is it even possible?