How would I simulate an Intransitive zIndex in React Native? (A > B > C > A)

I am trying to create this effect, which can be found in the Spotify UI:

It seems that there are the following components:

• A parent <View> (black)

• The child <View> (pink)

• The <Text> inside the child

• The <Image>, which is a square shape, part of which is visible (on the pink background) and part of which is obscured (behind the black)

The problem is, how do they make this work zIndex-wise?

• The parent <View> appears above the <Image> - "P > I"

• The <Image> appears above the child <View> - "I > C"

• The child <View> appears above the parent <View> - "C > P"

This leaves us with P > I > C > P, so P > P which isn't possible with normal numbers, like those that zIndex is set to. This kind of property is called intransitivity and appears in situations like the game Rock Paper Scissors, where R > S > P > R.

Nevertheless, Spotify somehow managed to pull this off. Does anybody have any idea as to how this might be achieved?

Maybe the fact that React Native uses hierarchy-specific zIndexes rather than global ones could somehow help?

I found the solution - don't use zIndex. It's simply overflow: "hidden".

<View style={{ overflow: "hidden" }}> {/* pink box */}
  {/* all content inside here will be clipped by the boundary of this view */}
</View>