Feat/border style none support fixes without yoga changes

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

@@ -731,6 +731,8 @@ static CALayerCornerCurve CornerCurveFromBorderCurve(BorderCurve borderCurve)
 static RCTBorderStyle RCTBorderStyleFromBorderStyle(BorderStyle borderStyle)
 {
   switch (borderStyle) {
+    case BorderStyle::None:
+      return RCTBorderStyleUnset;
     case BorderStyle::Solid:
       return RCTBorderStyleSolid;
     case BorderStyle::Dotted:

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/BorderDrawable.kt

@@ -167,6 +167,10 @@ internal class BorderDrawable(
   }
 
   override fun draw(canvas: Canvas) {
+    if (this.borderStyle == BorderStyle.NONE) {
+      return
+    }
+
     updatePathEffect()
     computedBorderColors = borderColors?.resolve(layoutDirection, context) ?: computedBorderColors
     if (borderRadius?.hasRoundedBorders() == true) {
@@ -570,6 +574,7 @@ internal class BorderDrawable(
 
   private fun getPathEffect(style: BorderStyle, borderWidth: Float): PathEffect? {
     return when (style) {
+      BorderStyle.NONE,
       BorderStyle.SOLID -> null
       BorderStyle.DASHED ->
           DashPathEffect(

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/drawable/CSSBackgroundDrawable.java

@@ -75,6 +75,7 @@ public class CSSBackgroundDrawable extends Drawable {
 
   private static @Nullable PathEffect getPathEffect(BorderStyle style, float borderWidth) {
     switch (style) {
+      case NONE:
       case SOLID:
         return null;
 
@@ -1385,6 +1386,12 @@ public int getBorderColor(int position) {
   }
 
   public RectF getDirectionAwareBorderInsets() {
+    @Nullable BorderStyle borderStyle = getBorderStyle();
+
+    if (borderStyle == BorderStyle.NONE) {
+      return new RectF(0, 0, 0, 0);
+    }
+
     final float borderWidth = getBorderWidthOrDefaultTo(0, Spacing.ALL);
     final float borderTopWidth = getBorderWidthOrDefaultTo(borderWidth, Spacing.TOP);
     final float borderBottomWidth = getBorderWidthOrDefaultTo(borderWidth, Spacing.BOTTOM);

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/style/BorderStyle.kt

@@ -8,6 +8,7 @@
 package com.facebook.react.uimanager.style
 
 public enum class BorderStyle {
+  NONE,
   SOLID,
   DASHED,
   DOTTED;
@@ -16,6 +17,7 @@ public enum class BorderStyle {
     @JvmStatic
     public fun fromString(borderStyle: String): BorderStyle? {
       return when (borderStyle.lowercase()) {
+        "none" -> NONE
         "solid" -> SOLID
         "dashed" -> DASHED
         "dotted" -> DOTTED

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp

@@ -6,6 +6,7 @@
  */
 
 #include "YogaLayoutableShadowNode.h"
+#include <android/log.h>
 #include <cxxreact/SystraceSection.h>
 #include <logger/react_native_log.h>
 #include <react/debug/flags.h>
@@ -371,8 +372,12 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
 void YogaLayoutableShadowNode::updateYogaProps() {
   ensureUnsealed();
 
+  auto& viewProps = static_cast<const ViewProps&>(*props_);
   auto& props = static_cast<const YogaStylableProps&>(*props_);
-  auto styleResult = applyAliasedProps(props.yogaStyle, props);
+
+  auto applyAliasedPropsStyleResult = applyAliasedProps(props.yogaStyle, props);
+  auto styleResult = unsetBorderWidthsIfStyleIsNone(
+      applyAliasedPropsStyleResult, props, viewProps);
 
   // Resetting `dirty` flag only if `yogaStyle` portion of `Props` was changed.
   if (!yogaNode_.isDirty() && (styleResult != yogaNode_.style())) {
@@ -381,7 +386,6 @@ void YogaLayoutableShadowNode::updateYogaProps() {
 
   yogaNode_.setStyle(styleResult);
   if (getTraits().check(ShadowNodeTraits::ViewKind)) {
-    auto& viewProps = static_cast<const ViewProps&>(*props_);
     // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
     bool alwaysFormsContainingBlock =
         viewProps.transform != Transform::Identity() ||
@@ -456,6 +460,66 @@ void YogaLayoutableShadowNode::updateYogaProps() {
   return result;
 }
 
+/*static*/ yoga::Style YogaLayoutableShadowNode::unsetBorderWidthsIfStyleIsNone(
+    const yoga::Style& baseStyle,
+    const YogaStylableProps& props,
+    const ViewProps& viewProps) {
+  yoga::Style result{baseStyle};
+
+  __android_log_print(
+      ANDROID_LOG_INFO,
+      "YogaLayoutableShadowNode",
+      "unsetBorderWidthsIfStyleIsNone");
+
+  //   OptionalT left{};
+  // OptionalT top{};
+  // OptionalT right{};
+  // OptionalT bottom{};
+  // OptionalT start{};
+  // OptionalT end{};
+  // OptionalT horizontal{};
+  // OptionalT vertical{};
+  // OptionalT all{};
+  // OptionalT block{};
+  // OptionalT blockStart{};
+  // OptionalT blockEnd{};
+
+    __android_log_print(
+      ANDROID_LOG_INFO,
+      "YogaLayoutableShadowNode",
+      "borderStyles: left=%d top=%d right=%d bottom=%d start=%d end=%d horizontal=%d vertical=%d all=%d block=%d blockStart=%d blockEnd=%d",
+      static_cast<int>(
+          viewProps.borderStyles.left.value_or(BorderStyle::Solid)),
+      static_cast<int>(viewProps.borderStyles.top.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.right.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.bottom.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.start.value_or(BorderStyle::Solid)),
+      static_cast<int>(viewProps.borderStyles.end.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.horizontal.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.vertical.value_or(BorderStyle::Solid)),
+      static_cast<int>(viewProps.borderStyles.all.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.block.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.blockStart.value_or(BorderStyle::Solid)),
+      static_cast<int>(
+          viewProps.borderStyles.blockEnd.value_or(BorderStyle::Solid)));
+
+  if (viewProps.borderStyles.all == BorderStyle::None) {
+    __android_log_print(
+        ANDROID_LOG_INFO, "YogaLayoutableShadowNode", "BorderStyle::None");
+
+    result.setBorder(yoga::Edge::All, yoga::StyleLength::points(0));
+  }
+
+  return result;
+}
+
 void YogaLayoutableShadowNode::configureYogaTree(
     float pointScaleFactor,
     YGErrata defaultErrata,

packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h

@@ -13,6 +13,7 @@
 #include <yoga/node/Node.h>
 
 #include <react/debug/react_native_assert.h>
+#include <react/renderer/components/view/ViewProps.h>
 #include <react/renderer/components/view/YogaStylableProps.h>
 #include <react/renderer/core/LayoutableShadowNode.h>
 #include <react/renderer/core/Sealable.h>
@@ -210,6 +211,15 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
       const yoga::Style& baseStyle,
       const YogaStylableProps& props);
 
+  /*
+   * Combine a base yoga::Style with aliased properties which should be
+   * flattened into it. E.g. reconciling "marginInlineStart" and "marginStart".
+   */
+  static yoga::Style unsetBorderWidthsIfStyleIsNone(
+      const yoga::Style& baseStyle,
+      const YogaStylableProps& props,
+      const ViewProps& viewProps);
+
 #pragma mark - Consistency Ensuring Helpers
 
   void ensureConsistency() const;