Ensure filterLayer, backgroundImageLayer, and backgroundColorLayer are the same size/shape as the owning View (#49278)

Summary:
Pull Request resolved: #49278

The previous diff (#49272) fixed an issue where we used frame to get the size of a sublayer. This is problematic in that it scales things twice if a scaling transform is applied. I looked to see where else we do this and we have this problem (sometimes) with background color and filter.

To fix this in the general case I created a helper to size a layer to the same shape as the View's layer - so using bounds for the size, (0,0) for position on the frame, and cornerRadius/mask for border radius considerations. The only 3 layers that should be the exact same size are backgroundColorLayer, backgroundImageLayer, and filterLayer

Changelog: [iOS] [Fixed] - Fix cases where background color, filter, and background image were sized incorrectly if there was a scaling transform

Reviewed By: jorge-cab

Differential Revision: D69321790

fbshipit-source-id: 70b5d18fa01967896b1bfffdb5684c2c907f3549

Author: joevilches

packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -883,25 +883,11 @@ - (void)invalidateLayer
     layer.backgroundColor = nil;
     if (!_backgroundColorLayer) {
       _backgroundColorLayer = [CALayer layer];
-      _backgroundColorLayer.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.height);
       _backgroundColorLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
       [self.layer addSublayer:_backgroundColorLayer];
     }
-
+    [self shapeLayerToMatchView:_backgroundColorLayer borderMetrics:borderMetrics];
     _backgroundColorLayer.backgroundColor = backgroundColor.CGColor;
-    if (borderMetrics.borderRadii.isUniform()) {
-      _backgroundColorLayer.mask = nil;
-      _backgroundColorLayer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
-      _backgroundColorLayer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
-    } else {
-      CAShapeLayer *maskLayer =
-          [self createMaskLayer:self.bounds
-                   cornerInsets:RCTGetCornerInsets(
-                                    RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero)];
-      _backgroundColorLayer.mask = maskLayer;
-      _backgroundColorLayer.cornerRadius = 0;
-    }
-
     [_backgroundColorLayer removeAllAnimations];
   }
 
@@ -987,20 +973,13 @@ - (void)invalidateLayer
     }
 
     _filterLayer = [CALayer layer];
-    _filterLayer.frame = CGRectMake(0, 0, layer.frame.size.width, layer.frame.size.height);
+    [self shapeLayerToMatchView:_filterLayer borderMetrics:borderMetrics];
     _filterLayer.compositingFilter = @"multiplyBlendMode";
     _filterLayer.backgroundColor = [UIColor colorWithRed:multiplicativeBrightness
                                                    green:multiplicativeBrightness
                                                     blue:multiplicativeBrightness
                                                    alpha:self.layer.opacity]
                                        .CGColor;
-    if (borderMetrics.borderRadii.isUniform()) {
-      _filterLayer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
-    } 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;
@@ -1016,24 +995,9 @@ - (void)invalidateLayer
         const auto &linearGradient = std::get<LinearGradient>(backgroundImage);
         CALayer *backgroundImageLayer = [RCTLinearGradient gradientLayerWithSize:self.layer.bounds.size
                                                                         gradient:linearGradient];
-        backgroundImageLayer.frame = layer.bounds;
+        [self shapeLayerToMatchView:backgroundImageLayer borderMetrics:borderMetrics];
         backgroundImageLayer.masksToBounds = YES;
-        // To make border radius work with gradient layers
-        if (borderMetrics.borderRadii.isUniform()) {
-          backgroundImageLayer.cornerRadius = layer.cornerRadius;
-          backgroundImageLayer.cornerCurve = layer.cornerCurve;
-          backgroundImageLayer.mask = nil;
-        } else {
-          CAShapeLayer *maskLayer =
-              [self createMaskLayer:self.bounds
-                       cornerInsets:RCTGetCornerInsets(
-                                        RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero)];
-          backgroundImageLayer.mask = maskLayer;
-          backgroundImageLayer.cornerRadius = 0;
-        }
-
         backgroundImageLayer.zPosition = BACKGROUND_COLOR_ZPOSITION;
-
         [self.layer addSublayer:backgroundImageLayer];
         [_backgroundImageLayers addObject:backgroundImageLayer];
       }
@@ -1098,6 +1062,26 @@ - (void)invalidateLayer
   }
 }
 
+// Shapes the given layer to match the shape of this View's layer. This is
+// basically just accounting for size, position, and border radius.
+- (void)shapeLayerToMatchView:(CALayer *)layer borderMetrics:(BorderMetrics)borderMetrics
+{
+  // Bounds is needed here to account for scaling transforms properly and ensure
+  // we do not scale twice
+  layer.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
+  if (borderMetrics.borderRadii.isUniform()) {
+    layer.mask = nil;
+    layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
+    layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
+  } else {
+    CAShapeLayer *maskLayer = [self
+        createMaskLayer:self.bounds
+           cornerInsets:RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero)];
+    layer.mask = maskLayer;
+    layer.cornerRadius = 0;
+  }
+}
+
 - (CAShapeLayer *)createMaskLayer:(CGRect)bounds cornerInsets:(RCTCornerInsets)cornerInsets
 {
   CGPathRef path = RCTPathCreateWithRoundedRect(bounds, cornerInsets, nil);