fix(iOS): boxShadow + overflow hidden combination affecting pointer event box-none and scale transform.

[intergalacticspacehighway]

Summary:

This issue is only reproducible with combination of overflow: hidden and boxShadow i.e. when a container view is added to the hierarchy.

Case 1:

<Pressable
  pointerEvents="box-none"
  style={{ width: 300, height: 300, boxShadow: "0 0 100px 0 rgba(0, 0, 0, 0.5)", overflow: "hidden" }}
  onPress={() => {
    alert("Tapped");
  }}
/>

Here the view has box-none but it will still trigger the press event because this line returns the _containerView as hitView and this condition gets fullfilled (since it is not self). To fix this issue we should iterate on self.currentContainerView.subviews.

Case 2:

Transform scale clipping child view.

<Pressable
  pointerEvents="box-none"
  style={{ width: 300, height: 300, overflow: "hidden",
    transform: [
      { scale: 0.5 },
    ],
    boxShadow: "0 0 100px 0 rgba(0, 0, 0, 0.5)",
  }}
  onPress={() => {
    alert("parent view");
  }}
>
  <Pressable
    style={{
      position: "absolute",
      bottom: 0,
      right: 0,
      backgroundColor: "blue",
      height: 50,
      width: 100,
    }}
    onPress={() => {
      alert("child view");
    }}
  >
    <Text>Press me</Text>
  </Pressable>
</Pressable>;

The above style hides the child view on iOS whereas it is visible on android.

iOS	Android

This happens because containerView uses self.frame property which gets mutated due to scale transform. So containerView becomes actualSize * scale * scale instead of actualSize * scale and ends up clipping child views because of overflow hidden. Please checkout the layout hierarchy in the below screenshot. To fix it we need to use self.bounds instead of self.frame when setting the frame for container.

Changelog:

[IOS] [FIXED] - boxShadow + overflow hidden combination interfering with pointerEvents and transform scale.

Test Plan:

Test above example snippets and pointer events examples in RNTester.

cc - @joevilches