Fix issue where scaling transform + box shadow break the shadow (facebook#49272)

Summary:

Turns out bounds does not account for the proper size if a scaling transform is applied while frame does. Using the example listed in facebook#49134, the size of the frame is the expected 240, but the size of the bounds is 200.

We had a mismatch where we use bounds everywhere in shadow image creation, but use the frame when asking for the size of the box shadow layer. What ends up happening is we have a 240x240 layer that is getting scaled again.

I refactored the shadow creation to just take a CGSize instead of a whole CALayer (which we had only used for its size anyway) so that we can be consistent with frame and bounds, and use bounds everywhere so that we only scale once.

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: D69320213

Author: joevilches

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

@@ -1047,13 +1047,13 @@ - (void)invalidateLayer
     _boxShadowLayer = [CALayer layer];
     [self.layer addSublayer:_boxShadowLayer];
     _boxShadowLayer.zPosition = _borderLayer.zPosition;
-    _boxShadowLayer.frame = RCTGetBoundingRect(_props->boxShadow, self.layer.frame.size);
+    _boxShadowLayer.frame = RCTGetBoundingRect(_props->boxShadow, self.layer.bounds.size);
 
     UIImage *boxShadowImage = RCTGetBoxShadowImage(
         _props->boxShadow,
         RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
         RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
-        layer);
+        self.layer.bounds.size);
 
     _boxShadowLayer.contents = (id)boxShadowImage.CGImage;
   }

packages/react-native/React/Fabric/Utils/RCTBoxShadow.h

@@ -16,6 +16,6 @@ RCT_EXTERN UIImage *RCTGetBoxShadowImage(
     const std::vector<facebook::react::BoxShadow> &shadows,
     RCTCornerRadii cornerRadii,
     UIEdgeInsets edgeInsets,
-    CALayer *layer);
+    CGSize layerSize);
 
 RCT_EXTERN CGRect RCTGetBoundingRect(const std::vector<facebook::react::BoxShadow> &boxShadows, CGSize layerSize);

packages/react-native/React/Fabric/Utils/RCTBoxShadow.mm

@@ -104,7 +104,7 @@ static CGColorRef colorRefFromSharedColor(const SharedColor &color)
 static void renderOutsetShadows(
     std::vector<BoxShadow> &outsetShadows,
     RCTCornerRadii cornerRadii,
-    CALayer *layer,
+    CGSize layerSize,
     CGRect boundingRect,
     CGContextRef context)
 {
@@ -129,8 +129,8 @@ static void renderOutsetShadows(
     // the blur radius since this rect is not the shadow itself.
     const RCTCornerInsets shadowRectCornerInsets =
         RCTGetCornerInsets(cornerRadiiForBoxShadow(cornerRadii, spreadDistance), UIEdgeInsetsZero);
-    CGSize shadowRectSize = CGSizeMake(
-        fmax(layer.bounds.size.width + 2 * spreadDistance, 0), fmax(layer.bounds.size.height + 2 * spreadDistance, 0));
+    CGSize shadowRectSize =
+        CGSizeMake(fmax(layerSize.width + 2 * spreadDistance, 0), fmax(layerSize.height + 2 * spreadDistance, 0));
     // Ensure this is drawn offscreen and will not show in the image
     CGRect shadowRect = CGRectMake(-shadowRectSize.width, 0, shadowRectSize.width, shadowRectSize.height);
     CGPathRef shadowRectPath = RCTPathCreateWithRoundedRect(shadowRect, shadowRectCornerInsets, nil);
@@ -165,7 +165,7 @@ static void renderOutsetShadows(
   // not cover its content
   const RCTCornerInsets layerCornerInsets = RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero);
   CGPathRef shadowPathAlignedWithLayer = RCTPathCreateWithRoundedRect(
-      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layer.bounds.size.width, layer.bounds.size.height),
+      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layerSize.width, layerSize.height),
       layerCornerInsets,
       nil);
   CGContextAddPath(context, shadowPathAlignedWithLayer);
@@ -187,7 +187,7 @@ static void renderInsetShadows(
     std::vector<BoxShadow> &insetShadows,
     RCTCornerRadii cornerRadii,
     UIEdgeInsets edgeInsets,
-    CALayer *layer,
+    CGSize layerSize,
     CGRect boundingRect,
     CGContextRef context)
 {
@@ -200,7 +200,7 @@ static void renderInsetShadows(
   CGContextSaveGState(context);
 
   CGRect layerFrameRelativeToBoundingRect =
-      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layer.bounds.size.width, layer.bounds.size.height);
+      CGRectMake(-boundingRect.origin.x, -boundingRect.origin.y, layerSize.width, layerSize.height);
   CGRect shadowFrame =
       insetRect(layerFrameRelativeToBoundingRect, edgeInsets.left, edgeInsets.top, edgeInsets.right, edgeInsets.bottom);
 
@@ -279,9 +279,9 @@ static void renderInsetShadows(
     const std::vector<BoxShadow> &shadows,
     RCTCornerRadii cornerRadii,
     UIEdgeInsets edgeInsets,
-    CALayer *layer)
+    CGSize layerSize)
 {
-  CGRect boundingRect = RCTGetBoundingRect(shadows, layer.bounds.size);
+  CGRect boundingRect = RCTGetBoundingRect(shadows, layerSize);
   UIGraphicsImageRendererFormat *const rendererFormat = [UIGraphicsImageRendererFormat defaultFormat];
   UIGraphicsImageRenderer *const renderer = [[UIGraphicsImageRenderer alloc] initWithSize:boundingRect.size
                                                                                    format:rendererFormat];
@@ -293,8 +293,8 @@ static void renderInsetShadows(
         // clear out a region in the view so we do not block its contents.
         // Inset shadows could draw over those outset shadows but if the shadow
         // colors have alpha < 1 then we will have inaccurate alpha compositing
-        renderOutsetShadows(outsetShadows, cornerRadii, layer, boundingRect, context);
-        renderInsetShadows(insetShadows, cornerRadii, edgeInsets, layer, boundingRect, context);
+        renderOutsetShadows(outsetShadows, cornerRadii, layerSize, boundingRect, context);
+        renderInsetShadows(insetShadows, cornerRadii, edgeInsets, layerSize, boundingRect, context);
       }];
 
   return boxShadowImage;