Fix artifacting on RN-drawn borders with asymmetric radii (#21208)

Summary:
This PR fixes an obscure rendering bug on iOS for borders with asymmetric radii. It appears to be a problem with the custom drawing that React Native performs when it cannot use native UIKit/CoreAnimation border drawing.
Pull Request resolved: #21208

Differential Revision: D10130120

Pulled By: hramos

fbshipit-source-id: d9fbc5c622c060db15658d038a068216b47bb26d

Author: jamesreggio

React/Views/RCTBorderDrawing.m

@@ -217,13 +217,21 @@ static CGContextRef RCTUIGraphicsBeginImageContext(CGSize size, CGColorRef backg
   (borderInsets.top + cornerInsets.topRight.height +
    borderInsets.bottom + cornerInsets.bottomLeft.height <= viewSize.height);
 
-  const UIEdgeInsets edgeInsets = (UIEdgeInsets){
+  UIEdgeInsets edgeInsets = (UIEdgeInsets){
     borderInsets.top + MAX(cornerInsets.topLeft.height, cornerInsets.topRight.height),
     borderInsets.left + MAX(cornerInsets.topLeft.width, cornerInsets.bottomLeft.width),
     borderInsets.bottom + MAX(cornerInsets.bottomLeft.height, cornerInsets.bottomRight.height),
     borderInsets.right + MAX(cornerInsets.bottomRight.width, cornerInsets.topRight.width)
   };
 
+  // Asymmetrical edgeInsets cause strange artifacting on iOS 10 and earlier.
+  edgeInsets = (UIEdgeInsets){
+    MAX(edgeInsets.top, edgeInsets.bottom),
+    MAX(edgeInsets.left, edgeInsets.right),
+    MAX(edgeInsets.top, edgeInsets.bottom),
+    MAX(edgeInsets.left, edgeInsets.right),
+  };
+
   const CGSize size = makeStretchable ? (CGSize){
     // 1pt for the middle stretchable area along each axis
     edgeInsets.left + 1 + edgeInsets.right,