Fix visual artifacts when sometimes using decimal assymetric borderRadii (#54237)

Summary:
Pull Request resolved: #54237

Before we were adding a single pixel for the stretchable area. in RCTViewComponentView we calculate what percentage is 1 pixel from the entire image to create the unit rectangle:
```
    CGRect contentsCenter = CGRect{
        CGPoint{imageCapInsets.left / imageSize.width, imageCapInsets.top / imageSize.height},
        CGSize{(CGFloat)1.0 / imageSize.width, (CGFloat)1.0 / imageSize.height}};
```

However sometimes when dividing `1.0 / imageSize.width` we would get a big enough float that causes a rounding error essentially having part of the border bleed into the stretchable region.

The easiest way to fix this is give the stretchable region a little more space so to prevent the bleeding.

We can do this by rounding the edgeInsets that give the border area its size

The alternative is some shockingly complex math to appropriately calculate the most convenient stretchable area size

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D85260693

fbshipit-source-id: 50eaba2189f3ff524be730211f8d19023522c68a

Author: jorge-cab

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

@@ -247,8 +247,12 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn
 
   const CGSize size = makeStretchable ? (CGSize){
     // 1pt for the middle stretchable area along each axis
-    edgeInsets.left + 1 + edgeInsets.right,
-    edgeInsets.top + 1 + edgeInsets.bottom
+    // we also need to round the edge insets to avoid border bleeding
+    // this is because if the size is decimal, when calculating the unit
+    // rectangle for CALayer.contentsCenter we encounter rounding errors
+    // which causes visual glitches
+    ceil(edgeInsets.left) + 1 + ceil(edgeInsets.right),
+    ceil(edgeInsets.top) + 1 + ceil(edgeInsets.bottom),
   } : viewSize;
 
   UIGraphicsImageRenderer *const imageRenderer =