chore: Update logic to give precedence to cardinal directions

Author: gabrieldonadel

React/Views/RCTView.m

@@ -671,11 +671,16 @@ - (RCTCornerRadii)cornerRadii
   CGFloat bottomLeftRadius;
   CGFloat bottomRightRadius;
 
+  const CGFloat logicalTopStartRadius = RCTDefaultIfNegativeTo(_borderStartStartRadius, _borderTopStartRadius);
+  const CGFloat logicalTopEndRadius = RCTDefaultIfNegativeTo(_borderStartEndRadius, _borderTopEndRadius);
+  const CGFloat logicalBottomStartRadius = RCTDefaultIfNegativeTo(_borderEndStartRadius, _borderBottomStartRadius);
+  const CGFloat logicalBottomEndRadius = RCTDefaultIfNegativeTo(_borderEndEndRadius, _borderBottomEndRadius);
+
   if ([[RCTI18nUtil sharedInstance] doLeftAndRightSwapInRTL]) {
-    const CGFloat topStartRadius = RCTDefaultIfNegativeTo(_borderTopLeftRadius, _borderStartStartRadius > 0 ? _borderStartStartRadius: _borderTopStartRadius);
-    const CGFloat topEndRadius = RCTDefaultIfNegativeTo(_borderTopRightRadius, _borderStartEndRadius > 0 ? _borderStartEndRadius: _borderTopEndRadius);
-    const CGFloat bottomStartRadius = RCTDefaultIfNegativeTo(_borderBottomLeftRadius, _borderEndStartRadius > 0 ? _borderEndStartRadius: _borderBottomStartRadius);
-    const CGFloat bottomEndRadius = RCTDefaultIfNegativeTo(_borderBottomRightRadius, _borderEndEndRadius > 0 ? _borderEndEndRadius: _borderBottomEndRadius);
+    const CGFloat topStartRadius = RCTDefaultIfNegativeTo(_borderTopLeftRadius, logicalTopStartRadius);
+    const CGFloat topEndRadius = RCTDefaultIfNegativeTo(_borderTopRightRadius, logicalTopEndRadius);
+    const CGFloat bottomStartRadius = RCTDefaultIfNegativeTo(_borderBottomLeftRadius, logicalBottomStartRadius);
+    const CGFloat bottomEndRadius = RCTDefaultIfNegativeTo(_borderBottomRightRadius, logicalBottomEndRadius);
 
     const CGFloat directionAwareTopLeftRadius = isRTL ? topEndRadius : topStartRadius;
     const CGFloat directionAwareTopRightRadius = isRTL ? topStartRadius : topEndRadius;
@@ -687,10 +692,10 @@ - (RCTCornerRadii)cornerRadii
     bottomLeftRadius = RCTDefaultIfNegativeTo(radius, directionAwareBottomLeftRadius);
     bottomRightRadius = RCTDefaultIfNegativeTo(radius, directionAwareBottomRightRadius);
   } else {
-    const CGFloat directionAwareTopLeftRadius = isRTL ? _borderStartEndRadius > 0 ? _borderStartEndRadius: _borderTopEndRadius : _borderStartStartRadius > 0 ? _borderStartStartRadius: _borderTopStartRadius;
-    const CGFloat directionAwareTopRightRadius = isRTL ? _borderStartStartRadius > 0 ? _borderStartStartRadius: _borderTopStartRadius : _borderStartEndRadius > 0 ? _borderStartEndRadius: _borderTopEndRadius;
-    const CGFloat directionAwareBottomLeftRadius = isRTL ? _borderEndEndRadius > 0 ? _borderEndEndRadius: _borderBottomEndRadius : _borderEndStartRadius > 0 ? _borderEndStartRadius: _borderBottomStartRadius;
-    const CGFloat directionAwareBottomRightRadius = isRTL ? _borderEndStartRadius > 0 ? _borderEndStartRadius: _borderBottomStartRadius : _borderEndEndRadius > 0 ? _borderEndEndRadius: _borderBottomEndRadius;
+    const CGFloat directionAwareTopLeftRadius = isRTL ? logicalTopEndRadius : logicalTopStartRadius;
+    const CGFloat directionAwareTopRightRadius = isRTL ? logicalTopStartRadius : logicalTopEndRadius;
+    const CGFloat directionAwareBottomLeftRadius = isRTL ? logicalBottomEndRadius : logicalBottomStartRadius;
+    const CGFloat directionAwareBottomRightRadius = isRTL ? logicalBottomStartRadius : logicalBottomEndRadius;
 
     topLeftRadius =
         RCTDefaultIfNegativeTo(radius, RCTDefaultIfNegativeTo(_borderTopLeftRadius, directionAwareTopLeftRadius));

ReactAndroid/src/main/java/com/facebook/react/views/view/ReactViewBackgroundDrawable.java

@@ -607,10 +607,10 @@ private void updatePath() {
         bottomEndRadius = bottomRightRadius;
       }
 
-      final float logicalTopStartRadius = !YogaConstants.isUndefined(startStartRadius) ? startStartRadius : topStartRadius;
-      final float logicalTopEndRadius = !YogaConstants.isUndefined(startEndRadius) ? startEndRadius : topEndRadius;
-      final float logicalBottomStartRadius = !YogaConstants.isUndefined(endStartRadius) ? endStartRadius : bottomStartRadius;
-      final float logicalBottomEndRadius = !YogaConstants.isUndefined(endEndRadius) ? endEndRadius : bottomEndRadius;
+      final float logicalTopStartRadius = YogaConstants.isUndefined(topStartRadius) ? startStartRadius : topStartRadius;
+      final float logicalTopEndRadius = YogaConstants.isUndefined(topEndRadius) ? startEndRadius : topEndRadius;
+      final float logicalBottomStartRadius = YogaConstants.isUndefined(bottomStartRadius) ? endStartRadius : bottomStartRadius;
+      final float logicalBottomEndRadius = YogaConstants.isUndefined(bottomEndRadius) ? endEndRadius : bottomEndRadius;
 
       final float directionAwareTopLeftRadius = isRTL ? logicalTopEndRadius : logicalTopStartRadius;
       final float directionAwareTopRightRadius = isRTL ? logicalTopStartRadius : logicalTopEndRadius;
@@ -622,10 +622,10 @@ private void updatePath() {
       bottomLeftRadius = directionAwareBottomLeftRadius;
       bottomRightRadius = directionAwareBottomRightRadius;
     } else {
-      final float logicalTopStartRadius = !YogaConstants.isUndefined(startStartRadius) ? startStartRadius : topStartRadius;
-      final float logicalTopEndRadius = !YogaConstants.isUndefined(startEndRadius) ? startEndRadius : topEndRadius;
-      final float logicalBottomStartRadius = !YogaConstants.isUndefined(endStartRadius) ? endStartRadius : bottomStartRadius;
-      final float logicalBottomEndRadius = !YogaConstants.isUndefined(endEndRadius) ? endEndRadius : bottomEndRadius;
+      final float logicalTopStartRadius = YogaConstants.isUndefined(topStartRadius) ? startStartRadius : topStartRadius;
+      final float logicalTopEndRadius = YogaConstants.isUndefined(topEndRadius) ? startEndRadius : topEndRadius;
+      final float logicalBottomStartRadius = YogaConstants.isUndefined(bottomStartRadius) ? endStartRadius : bottomStartRadius;
+      final float logicalBottomEndRadius = YogaConstants.isUndefined(bottomEndRadius) ? endEndRadius : bottomEndRadius;
 
       final float directionAwareTopLeftRadius = isRTL ? logicalTopEndRadius : logicalTopStartRadius;
       final float directionAwareTopRightRadius = isRTL ? logicalTopStartRadius : logicalTopEndRadius;

ReactCommon/react/renderer/components/view/primitives.h

@@ -166,18 +166,15 @@ struct CascadedRectangleCorners {
   OptionalT startStart{};
 
   Counterpart resolve(bool isRTL, T defaults) const {
-    const auto topLeading = isRTL ? startEnd ? startEnd : topEnd
-        : startStart              ? startStart
-                                  : topStart;
-    const auto topTrailing = isRTL ? startStart ? startStart : topStart
-        : startEnd                 ? startEnd
-                                   : topEnd;
-    const auto bottomLeading = isRTL ? endEnd ? endEnd : bottomEnd
-        : endStart                   ? endStart
-                                     : bottomStart;
-    const auto bottomTrailing = isRTL ? endStart ? endStart : bottomStart
-        : endEnd                      ? endEnd
-                                      : bottomEnd;
+    const auto logicalTopStart = topStart ? topStart : startStart;
+    const auto logicalTopEnd = topEnd ? topEnd : startEnd;
+    const auto logicalBottomStart = bottomStart ? bottomStart : endStart;
+    const auto logicalBottomEnd = bottomEnd ? bottomEnd : endEnd;
+
+    const auto topLeading = isRTL ? logicalTopEnd : logicalTopStart;
+    const auto topTrailing = isRTL ? logicalTopStart : logicalTopEnd;
+    const auto bottomLeading = isRTL ? logicalBottomEnd : logicalBottomStart;
+    const auto bottomTrailing = isRTL ? logicalBottomStart : logicalBottomEnd;
 
     return {
         /* .topLeft = */ topLeft.value_or(