fix(iOS): displaying irregular borders on iOS old architecture

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

@@ -33,6 +33,7 @@ @implementation RCTViewComponentView {
   __weak CALayer *_borderLayer;
   CALayer *_boxShadowLayer;
   CALayer *_filterLayer;
+  CALayer *_backgroundLayer;
   NSMutableArray<CAGradientLayer *> *_gradientLayers;
   BOOL _needsInvalidateLayer;
   BOOL _isJSResponder;
@@ -739,6 +740,8 @@ - (void)invalidateLayer
            (*borderMetrics.borderColors.left).getUIColor() != nullptr));
 
   CGColorRef backgroundColor = [_backgroundColor resolvedColorWithTraitCollection:self.traitCollection].CGColor;
+  [_backgroundLayer removeFromSuperlayer];
+  _backgroundLayer = nil;
 
   if (useCoreAnimationBorderRendering) {
     layer.mask = nil;
@@ -749,19 +752,27 @@ - (void)invalidateLayer
     layer.borderColor = borderColor;
     CGColorRelease(borderColor);
     layer.cornerRadius = (CGFloat)borderMetrics.borderRadii.topLeft;
-
     layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
-
     layer.backgroundColor = backgroundColor;
   } else {
     if (!_borderLayer) {
       CALayer *borderLayer = [CALayer new];
-      borderLayer.zPosition = -1024.0f;
+      borderLayer.zPosition = 1024.0f;
       borderLayer.frame = layer.bounds;
       borderLayer.magnificationFilter = kCAFilterNearest;
       [layer addSublayer:borderLayer];
       _borderLayer = borderLayer;
     }
+
+    if (backgroundColor) {
+      CALayer *backgroundLayer = [CALayer new];
+      backgroundLayer.zPosition = -1024.0f;
+      backgroundLayer.frame = layer.bounds;
+      backgroundLayer.magnificationFilter = kCAFilterNearest;
+      [layer addSublayer:backgroundLayer];
+      _backgroundLayer = backgroundLayer;
+      _backgroundLayer.backgroundColor = backgroundColor;
+    }
 
     layer.backgroundColor = nil;
     layer.borderWidth = 0;
@@ -775,9 +786,9 @@ - (void)invalidateLayer
         RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
         RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths),
         borderColors,
-        backgroundColor,
+        nil,
         self.clipsToBounds);
-
+      
     RCTReleaseRCTBorderColors(borderColors);
 
     if (image == nil) {
@@ -807,31 +818,25 @@ - (void)invalidateLayer
     // Stage 2.5. Custom Clipping Mask
     CAShapeLayer *maskLayer = nil;
     CGFloat cornerRadius = 0;
-    if (self.clipsToBounds) {
-      if (borderMetrics.borderRadii.isUniform()) {
+    BOOL isBorderRadiiUniform = borderMetrics.borderRadii.isUniform();
+    if (self.clipsToBounds && isBorderRadiiUniform) {
         // In this case we can simply use `cornerRadius` exclusively.
         cornerRadius = borderMetrics.borderRadii.topLeft;
-      } else {
+    } else if (self.clipsToBounds) {
         RCTCornerInsets cornerInsets =
             RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero);
-        maskLayer = [self createMaskLayer:self.bounds cornerInsets:cornerInsets];
-      }
+        maskLayer = RCTCreateMaskLayer(self.bounds, cornerInsets);
+    } else if (borderMetrics.borderRadii.isUniform()) {
+        _backgroundLayer.cornerRadius = borderMetrics.borderRadii.topLeft;
+    } else {
+        RCTCornerInsets cornerInsets =
+            RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero);
+        CAShapeLayer *backgroundMaskLayer = RCTCreateMaskLayer(self.bounds, cornerInsets);
+        _backgroundLayer.mask = backgroundMaskLayer;
     }
 
     layer.cornerRadius = cornerRadius;
     layer.mask = maskLayer;
-
-    for (UIView *subview in self.subviews) {
-      if ([subview isKindOfClass:[UIImageView class]]) {
-        RCTCornerInsets cornerInsets = RCTGetCornerInsets(
-            RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
-            RCTUIEdgeInsetsFromEdgeInsets(borderMetrics.borderWidths));
-
-        // If the subview is an image view, we have to apply the mask directly to the image view's layer,
-        // otherwise the image might overflow with the border radius.
-        subview.layer.mask = [self createMaskLayer:subview.bounds cornerInsets:cornerInsets];
-      }
-    }
   }
 
   [_filterLayer removeFromSuperlayer];
@@ -927,15 +932,6 @@ - (void)invalidateLayer
   }
 }
 
-- (CAShapeLayer *)createMaskLayer:(CGRect)bounds cornerInsets:(RCTCornerInsets)cornerInsets
-{
-  CGPathRef path = RCTPathCreateWithRoundedRect(bounds, cornerInsets, nil);
-  CAShapeLayer *maskLayer = [CAShapeLayer layer];
-  maskLayer.path = path;
-  CGPathRelease(path);
-  return maskLayer;
-}
-
 - (void)clearExistingGradientLayers
 {
   if (_gradientLayers == nil) {

packages/react-native/React/Views/RCTBorderDrawing.h

@@ -65,3 +65,9 @@ RCT_EXTERN UIImage *RCTGetBorderImage(
     RCTBorderColors borderColors,
     CGColorRef backgroundColor,
     BOOL drawToEdge);
+
+/**
+ * Create a CAShapeLayer that contains a path with specified bounds and corner insets without
+ * any affine transformations.
+ */
+RCT_EXTERN CAShapeLayer *RCTCreateMaskLayer(CGRect bounds, RCTCornerInsets cornerInsets);

packages/react-native/React/Views/RCTBorderDrawing.m

@@ -530,3 +530,16 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn
 
   return nil;
 }
+
+CAShapeLayer *RCTCreateMaskLayer(CGRect bounds, RCTCornerInsets cornerInsets)
+{
+    CGPathRef path = RCTPathCreateWithRoundedRect(
+                 bounds,
+                 cornerInsets,
+                 nil);
+    CAShapeLayer *maskLayer = [CAShapeLayer layer];
+    maskLayer.path = path;
+    CGPathRelease(path);
+    return maskLayer;
+}
+

packages/react-native/React/Views/RCTView.m

@@ -923,26 +923,40 @@ static void RCTUpdateHoverStyleForView(RCTView *view)
 
 - (void)updateClippingForLayer:(CALayer *)layer
 {
-  CALayer *mask = nil;
-  CGFloat cornerRadius = 0;
-
-  if (self.clipsToBounds) {
-    const RCTCornerRadii cornerRadii = [self cornerRadii];
-    if (RCTCornerRadiiAreEqual(cornerRadii)) {
-      cornerRadius = cornerRadii.topLeft;
-
-    } else {
-      CAShapeLayer *shapeLayer = [CAShapeLayer layer];
-      CGPathRef path =
-          RCTPathCreateWithRoundedRect(self.bounds, RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero), NULL);
-      shapeLayer.path = path;
-      CGPathRelease(path);
-      mask = shapeLayer;
+    CALayer *mask = nil;
+    CGFloat cornerRadius = 0;
+
+    if (self.clipsToBounds) {
+        const RCTCornerRadii cornerRadii = [self cornerRadii];
+        if (RCTCornerRadiiAreEqual(cornerRadii)) {
+            cornerRadius = cornerRadii.topLeft;
+
+        } else {
+            RCTCornerInsets cornerInsets = RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero);
+            mask = RCTCreateMaskLayer(self.bounds, cornerInsets);
+        }
+    }
+
+    layer.cornerRadius = cornerRadius;
+    layer.mask = mask;
+
+    for (UIView *subview in self.subviews) {
+        if ([subview isKindOfClass:[UIImageView class]]) {
+            const RCTCornerRadii cornerRadii = [self cornerRadii];
+            const UIEdgeInsets borderInsets = [self bordersAsInsets];
+            RCTCornerInsets cornerInsets = RCTGetCornerInsets(cornerRadii, borderInsets);
+
+            // If the subview is an image view, we have to apply the mask directly to the image view's layer,
+            // otherwise the image might overflow with the border radius.
+            CGRect pathBounds = subview.bounds;
+            pathBounds.size.width -= borderInsets.left + borderInsets.right;
+            pathBounds.size.height -= borderInsets.top + borderInsets.bottom;
+            pathBounds.origin.x += borderInsets.left;
+            pathBounds.origin.y += borderInsets.top;
+
+            subview.layer.mask = RCTCreateMaskLayer(pathBounds, cornerInsets);
+        }
     }
-  }
-
-  layer.cornerRadius = cornerRadius;
-  layer.mask = mask;
 }
 
 #pragma mark Border Color