diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index eda8cacb542..2fcb76ae5e0 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -650,7 +650,9 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f; BOOL isPointInside = [self pointInside:point withEvent:event]; - BOOL clipsToBounds = self.currentContainerView.clipsToBounds; + UIView *currentContainerView = self.currentContainerView; + + BOOL clipsToBounds = currentContainerView.clipsToBounds; clipsToBounds = clipsToBounds || _layoutMetrics.overflowInset == EdgeInsets{}; @@ -658,8 +660,8 @@ const CGFloat BACKGROUND_COLOR_ZPOSITION = -1024.0f; return nil; } - for (UIView *subview in [self.subviews reverseObjectEnumerator]) { - UIView *hitView = [subview hitTest:[subview convertPoint:point fromView:self] withEvent:event]; + for (UIView *subview = nullptr in [currentContainerView.subviews reverseObjectEnumerator]) { + UIView *hitView = [subview hitTest:[subview convertPoint:point fromView:currentContainerView] withEvent:event]; if (hitView) { return hitView; } @@ -859,7 +861,7 @@ static RCTBorderStyle RCTBorderStyleFromOutlineStyle(OutlineStyle outlineStyle) if (_useCustomContainerView) { if (!_containerView) { - _containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)]; + _containerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height)]; for (UIView *subview = nullptr in effectiveContentView.subviews) { [_containerView addSubview:subview]; } diff --git a/packages/rn-tester/js/examples/Pressable/PressableExample.js b/packages/rn-tester/js/examples/Pressable/PressableExample.js index dd1c2b0b129..648fe4d5e6b 100644 --- a/packages/rn-tester/js/examples/Pressable/PressableExample.js +++ b/packages/rn-tester/js/examples/Pressable/PressableExample.js @@ -568,6 +568,43 @@ const examples = [ return ; }, }, + { + title: 'Pressable with box-shadow', + description: ('Pressables with box-shadow': string), + render: function PressableWithBoxShadow(): React.Node { + const [parentColor, setParentColor] = useState('red'); + const [childColor, setChildColor] = useState('blue'); + return ( + { + setParentColor(parentColor === 'red' ? 'orange' : 'red'); + }}> + { + setChildColor(childColor === 'blue' ? 'green' : 'blue'); + }} + /> + + ); + }, + }, ...PressableExampleFbInternal.examples, ];