feat(view): border style none wip

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/YogaStylableProps.cpp

@@ -540,6 +540,13 @@ YogaStylableProps::YogaStylableProps(
       sourceProps.yogaStyle.boxSizing(),
       yogaStyle.boxSizing()));
 
+  yogaStyle.setBorderStyle(convertRawProp(
+      context,
+      rawProps,
+      "borderStyle",
+      sourceProps.yogaStyle.borderStyle(),
+      yogaStyle.borderStyle()));
+
   convertRawPropAliases(context, sourceProps, rawProps);
 };
 

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

@@ -446,6 +446,35 @@ inline void fromRawValue(
   LOG(ERROR) << "Could not parse yoga::Display: " << stringValue;
 }
 
+inline void fromRawValue(
+    const PropsParserContext& context,
+    const RawValue& value,
+    yoga::BorderStyle& result) {
+  result = yoga::BorderStyle::Solid;
+  react_native_expect(value.hasType<std::string>());
+  if (!value.hasType<std::string>()) {
+    return;
+  }
+  auto stringValue = (std::string)value;
+  if (stringValue == "none") {
+    result = yoga::BorderStyle::None;
+    return;
+  }
+  if (stringValue == "solid") {
+    result = yoga::BorderStyle::Solid;
+    return;
+  }
+  if (stringValue == "dotted") {
+    result = yoga::BorderStyle::Dotted;
+    return;
+  }
+  if (stringValue == "dashed") {
+    result = yoga::BorderStyle::Dashed;
+    return;
+  }
+  LOG(ERROR) << "Could not parse yoga::BorderStyle: " << stringValue;
+}
+
 inline void fromRawValue(
     const PropsParserContext& context,
     const RawValue& value,
@@ -775,6 +804,10 @@ inline void fromRawValue(
     return;
   }
   auto stringValue = (std::string)value;
+  if (stringValue == "none") {
+    result = BorderStyle::None;
+    return;
+  }
   if (stringValue == "solid") {
     result = BorderStyle::Solid;
     return;
@@ -1369,6 +1402,10 @@ inline std::string toString(const yoga::Display& value) {
   return YGDisplayToString(yoga::unscopedEnum(value));
 }
 
+inline std::string toString(const yoga::BorderStyle& value) {
+  return YGBorderStyleToString(yoga::unscopedEnum(value));
+}
+
 inline std::string toString(const yoga::Style::Length& length) {
   switch (length.unit()) {
     case yoga::Unit::Undefined:

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

@@ -90,7 +90,7 @@ enum class BackfaceVisibility : uint8_t { Auto, Visible, Hidden };
 
 enum class BorderCurve : uint8_t { Circular, Continuous };
 
-enum class BorderStyle : uint8_t { Solid, Dotted, Dashed };
+enum class BorderStyle : uint8_t { None, Solid, Dotted, Dashed };
 
 enum class OutlineStyle : uint8_t { Solid, Dotted, Dashed };
 

packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp

@@ -260,3 +260,17 @@ const char* YGWrapToString(const YGWrap value) {
   }
   return "unknown";
 }
+
+const char* YGBorderStyleToString(const YGBorderStyle value) {
+  switch (value) {
+    case YGBorderStyleNone:
+      return "none";
+    case YGBorderStyleSolid:
+      return "solid";
+    case YGBorderStyleDotted:
+      return "dotted";
+    case YGBorderStyleDashed:
+      return "dashed";
+  }
+  return "unknown";
+}

packages/react-native/ReactCommon/yoga/yoga/YGEnums.h

@@ -139,4 +139,11 @@ YG_ENUM_DECL(
     YGWrapWrap,
     YGWrapWrapReverse)
 
+YG_ENUM_DECL(
+    YGBorderStyle,
+    YGBorderStyleNone,
+    YGBorderStyleSolid,
+    YGBorderStyleDotted,
+    YGBorderStyleDashed)
+
 YG_EXTERN_C_END

packages/react-native/ReactCommon/yoga/yoga/enums/BorderStyle.h

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @generated by enums.py
+// clang-format off
+#pragma once
+
+#include <cstdint>
+#include <yoga/YGEnums.h>
+#include <yoga/enums/YogaEnums.h>
+
+namespace facebook::yoga {
+
+enum class BorderStyle : uint8_t {
+  None = YGBorderStyleNone,
+  Solid = YGBorderStyleSolid,
+  Dotted = YGBorderStyleDotted,
+  Dashed = YGBorderStyleDashed,
+};
+
+template <>
+constexpr int32_t ordinalCount<BorderStyle>() {
+  return 4;
+}
+
+constexpr BorderStyle scopedEnum(YGBorderStyle unscoped) {
+  return static_cast<BorderStyle>(unscoped);
+}
+
+constexpr YGBorderStyle unscopedEnum(BorderStyle scoped) {
+  return static_cast<YGBorderStyle>(scoped);
+}
+
+inline const char* toString(BorderStyle e) {
+  return YGBorderStyleToString(unscopedEnum(e));
+}
+
+} // namespace facebook::yoga

packages/react-native/ReactCommon/yoga/yoga/style/Style.h

@@ -15,6 +15,7 @@
 
 #include <yoga/algorithm/FlexDirection.h>
 #include <yoga/enums/Align.h>
+#include <yoga/enums/BorderStyle.h>
 #include <yoga/enums/BoxSizing.h>
 #include <yoga/enums/Dimension.h>
 #include <yoga/enums/Direction.h>
@@ -250,6 +251,13 @@ class YG_EXPORT Style {
     boxSizing_ = value;
   }
 
+  BorderStyle borderStyle() const {
+    return borderStyle_;
+  }
+  void setBorderStyle(BorderStyle value) {
+    borderStyle_ = value;
+  }
+
   bool horizontalInsetsDefined() const {
     return position_[yoga::to_underlying(Edge::Left)].isDefined() ||
         position_[yoga::to_underlying(Edge::Right)].isDefined() ||
@@ -707,6 +715,10 @@ class YG_EXPORT Style {
   }
 
   Style::Length computeBorder(PhysicalEdge edge, Direction direction) const {
+    if (borderStyle_ == BorderStyle::None) {
+      return Style::Length{};
+    }
+
     switch (edge) {
       case PhysicalEdge::Left:
         return computeLeftEdge(border_, direction);
@@ -734,6 +746,7 @@ class YG_EXPORT Style {
   Overflow overflow_ : bitCount<Overflow>() = Overflow::Visible;
   Display display_ : bitCount<Display>() = Display::Flex;
   BoxSizing boxSizing_ : bitCount<BoxSizing>() = BoxSizing::BorderBox;
+  BorderStyle borderStyle_ : bitCount<BorderStyle>() = BorderStyle::Solid;
 
   StyleValueHandle flex_{};
   StyleValueHandle flexGrow_{};

packages/rn-tester/js/examples/Text/TextExample.android.js

@@ -10,12 +10,14 @@
 
 'use strict';
 
 import type {RNTesterModule} from '../../types/RNTesterTypes';
 
 import TextLegend from '../../components/TextLegend';
 import TextAdjustsDynamicLayoutExample from './TextAdjustsDynamicLayoutExample';
 import TextInlineViewsExample from './TextInlineViewsExample';
 
+import Platform from 'react-native/Libraries/Utilities/Platform.android';
+
 const TextInlineView = require('../../components/TextInlineView');
 const React = require('react');
 const {
@@ -1092,6 +1094,23 @@
             }}>
             Text with background AND borderWidth
           </Text>
+          {Platform.OS === 'android' ? (
+            <Text
+              // $FlowFixMe[incompatible-type] - Suppressing missing `none` type in `borderStyle` as it's not fully supported yet
+              style={{
+                borderWidth: 1,
+                borderColor: 'red',
+                borderStyle: 'none',
+                borderTopRightRadius: 10,
+                borderTopLeftRadius: 20,
+                borderBottomRightRadius: 20,
+                borderBottomLeftRadius: 10,
+                padding: 10,
+                marginTop: 10,
+              }}>
+              Text with borderWidth, borderRadius but borderStyle set to "none"
+            </Text>
+          ) : null}
         </View>
       );
     },

packages/rn-tester/js/examples/View/ViewExample.js

@@ -31,7 +31,7 @@ class ViewBorderStyleExample extends React.Component<
           <View
             style={[
               {
-                borderWidth: 1,
+                borderWidth: 10,
                 padding: 5,
               },
               this.state.showBorder
@@ -48,7 +48,7 @@ class ViewBorderStyleExample extends React.Component<
             style={[
               {
                 marginTop: 5,
-                borderWidth: 1,
+                borderWidth: 10,
                 borderRadius: 5,
                 padding: 5,
               },
@@ -62,6 +62,27 @@ class ViewBorderStyleExample extends React.Component<
               Dotted border style
             </RNTesterText>
           </View>
+          {Platform.OS === 'android' ? (
+            <View
+              // $FlowFixMe[incompatible-type] - Suppressing missing `none` type in `borderStyle` as it's not fully supported yet
+              style={[
+                {
+                  marginTop: 5,
+                  borderWidth: 10,
+                  borderRadius: 5,
+                  padding: 5,
+                },
+                this.state.showBorder
+                  ? {
+                      borderStyle: 'none',
+                    }
+                  : null,
+              ]}>
+              <RNTesterText style={{fontSize: 11}}>
+                None border style
+              </RNTesterText>
+            </View>
+          ) : null}
         </View>
       </Pressable>
     );