From 5bb4ef5dec5593b0f901a106475cab94d0625fab Mon Sep 17 00:00:00 2001 From: Joe Vilches Date: Thu, 22 Aug 2024 12:12:46 -0700 Subject: [PATCH] Fix issue where filter layer was not the same shape as the underlying layer (#46138) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/46138 jorge-cab noticed that filters on iOS do not fit the shape of the layer if we have rounded corners. Fix is pretty straight forward. Changelog: [Internal] Reviewed By: NickGerleman Differential Revision: D61612655 fbshipit-source-id: 91785ed10a039e031c5440bde131c1583ba3992a --- .../Mounting/ComponentViews/View/RCTViewComponentView.mm | 7 +++++++ 1 file changed, 7 insertions(+) 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 883e91b5d13..0c4b7c1d1dd 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm @@ -855,6 +855,13 @@ static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle) blue:multiplicativeBrightness alpha:self.layer.opacity] .CGColor; + if (borderMetrics.borderRadii.isUniform()) { + _filterLayer.cornerRadius = borderMetrics.borderRadii.topLeft; + } else { + RCTCornerInsets cornerInsets = + RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero); + _filterLayer.mask = [self createMaskLayer:self.bounds cornerInsets:cornerInsets]; + } // So that this layer is always above any potential sublayers this view may // add _filterLayer.zPosition = CGFLOAT_MAX;