diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm index 8b4b87996862e2..c8db4e550b40cd 100644 --- a/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm +++ b/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: diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp index 4f36bf6bb813e1..cc33c46b8a39e2 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp +++ b/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); }; diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h index 58e04bba088aae..bfeec481af7137 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h +++ b/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()); + if (!value.hasType()) { + 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: diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h b/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h index feb396a0535584..a61c056b917f68 100644 --- a/packages/react-native/ReactCommon/react/renderer/components/view/primitives.h +++ b/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 }; diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp index cddd5d5849ff83..2322b3798abb2f 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp +++ b/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"; +} diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h index 27f0426f450ec4..a500bf45a3929a 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h +++ b/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 diff --git a/packages/react-native/ReactCommon/yoga/yoga/enums/BorderStyle.h b/packages/react-native/ReactCommon/yoga/yoga/enums/BorderStyle.h new file mode 100644 index 00000000000000..3b2fec387e6df1 --- /dev/null +++ b/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 +#include +#include + +namespace facebook::yoga { + +enum class BorderStyle : uint8_t { + None = YGBorderStyleNone, + Solid = YGBorderStyleSolid, + Dotted = YGBorderStyleDotted, + Dashed = YGBorderStyleDashed, +}; + +template <> +constexpr int32_t ordinalCount() { + return 4; +} + +constexpr BorderStyle scopedEnum(YGBorderStyle unscoped) { + return static_cast(unscoped); +} + +constexpr YGBorderStyle unscopedEnum(BorderStyle scoped) { + return static_cast(scoped); +} + +inline const char* toString(BorderStyle e) { + return YGBorderStyleToString(unscopedEnum(e)); +} + +} // namespace facebook::yoga diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h index 73203e6cca3c7c..2c96bd69a23c28 100644 --- a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h +++ b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h @@ -15,6 +15,7 @@ #include #include +#include #include #include #include @@ -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::Visible; Display display_ : bitCount() = Display::Flex; BoxSizing boxSizing_ : bitCount() = BoxSizing::BorderBox; + BorderStyle borderStyle_ : bitCount() = BorderStyle::Solid; StyleValueHandle flex_{}; StyleValueHandle flexGrow_{}; diff --git a/packages/rn-tester/js/examples/View/ViewExample.js b/packages/rn-tester/js/examples/View/ViewExample.js index b448475210cfe0..44dcea8e263300 100644 --- a/packages/rn-tester/js/examples/View/ViewExample.js +++ b/packages/rn-tester/js/examples/View/ViewExample.js @@ -31,7 +31,7 @@ class ViewBorderStyleExample extends React.Component<