feat: calc support

Author: paradowstack

packages/react-native/React/Views/RCTLayout.m

@@ -87,6 +87,8 @@ CGFloat RCTCoreGraphicsFloatFromYogaValue(YGValue value, CGFloat baseFloatValue)
     case YGUnitFitContent:
     case YGUnitStretch:
       return baseFloatValue;
+    case YGUnitDynamic:
+      return RCTCoreGraphicsFloatFromYogaFloat(YGUndefined);
   }
 }
 

packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaUnit.java

@@ -16,7 +16,8 @@ public enum YogaUnit {
   AUTO(3),
   MAX_CONTENT(4),
   FIT_CONTENT(5),
-  STRETCH(6);
+  STRETCH(6),
+  DYNAMIC(7);
 
   private final int mIntValue;
 
@@ -37,6 +38,7 @@ public static YogaUnit fromInt(int value) {
       case 4: return MAX_CONTENT;
       case 5: return FIT_CONTENT;
       case 6: return STRETCH;
+      case 7: return DYNAMIC;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }

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

@@ -143,7 +143,9 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
   }
 
   if (fragment.props) {
-    updateYogaProps();
+    auto& sourceProps =
+        static_cast<const YogaStylableProps&>(*sourceShadowNode.getProps());
+    updateYogaProps(sourceProps.calcExpressions);
   }
 
   if (fragment.children) {
@@ -375,15 +377,18 @@ void YogaLayoutableShadowNode::updateYogaChildren() {
   yogaNode_.setDirty(!isClean);
 }
 
-void YogaLayoutableShadowNode::updateYogaProps() {
+void YogaLayoutableShadowNode::updateYogaProps(
+    const CalcExpressions& previousCalcExpressions) {
   ensureUnsealed();
 
   auto& props = static_cast<const YogaStylableProps&>(*props_);
   auto styleResult = applyAliasedProps(props.yogaStyle, props);
 
   // Resetting `dirty` flag only if `yogaStyle` portion of `Props` was
-  // changed.
-  if (!YGNodeIsDirty(&yogaNode_) && (styleResult != yogaNode_.style())) {
+  // changed or calc expressions changed.
+  if (!YGNodeIsDirty(&yogaNode_) &&
+      (props.calcExpressions != previousCalcExpressions ||
+       styleResult != yogaNode_.style())) {
     yogaNode_.setDirty(true);
   }
 
@@ -888,6 +893,30 @@ YogaLayoutableShadowNode& YogaLayoutableShadowNode::shadowNodeFromContext(
       *static_cast<ShadowNode*>(YGNodeGetContext(yogaNode)));
 }
 
+YGValue YogaLayoutableShadowNode::yogaNodeCalcValueResolver(
+    YGNodeConstRef yogaNode,
+    YGValueDynamicID id,
+    YGValueDynamicContext context) {
+  if (!yogaNode) {
+    return {};
+  }
+
+  auto& node = shadowNodeFromContext(yogaNode);
+  auto& props = static_cast<const YogaStylableProps&>(*node.props_);
+  auto key = static_cast<CalcExpressionPropertyID>(id);
+  if (!props.calcExpressions.contains(key)) {
+    return {};
+  }
+  
+  auto& calc = props.calcExpressions.at(key);
+  return YGValue(
+      calc.resolve(
+          context.referenceLength,
+          threadLocalLayoutContext.viewportSize.width,
+          threadLocalLayoutContext.viewportSize.height),
+      YGUnitPoint);
+};
+
 yoga::Config& YogaLayoutableShadowNode::initializeYogaConfig(
     yoga::Config& config,
     YGConfigConstRef previousConfig) {

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

@@ -53,7 +53,7 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
 
   void updateYogaChildren();
 
-  void updateYogaProps();
+  void updateYogaProps(const CalcExpressions& previousCalcExpressions = {});
 
   /*
    * Sets layoutable size of node.
@@ -82,6 +82,11 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {
 
   Rect getContentBounds() const;
 
+  static YGValue yogaNodeCalcValueResolver(
+      YGNodeConstRef yogaNode,
+      YGValueDynamicID id,
+      YGValueDynamicContext context);
+
  protected:
   /**
    * Subclasses which provide MeasurableYogaNode may override to signal that a

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

@@ -9,8 +9,10 @@
 
 #include <yoga/style/Style.h>
 
+#include <react/renderer/components/view/primitives.h>
 #include <react/renderer/core/Props.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/css/CSSCalc.h>
 #include <react/renderer/debug/DebugStringConvertible.h>
 
 namespace facebook::react {
@@ -57,6 +59,8 @@ class YogaStylableProps : public Props {
   yoga::Style::Length paddingBlockStart;
   yoga::Style::Length paddingBlockEnd;
 
+  CalcExpressions calcExpressions;
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 #pragma mark - DebugStringConvertible (Partial)
@@ -70,6 +74,11 @@ class YogaStylableProps : public Props {
       const PropsParserContext &context,
       const YogaStylableProps &sourceProps,
       const RawProps &rawProps);
+      
+  CalcExpressions buildCalcExpressions(
+      const PropsParserContext &context,
+      const RawProps &rawProps,
+      const CalcExpressions &defaultValue);
 };
 
 } // namespace facebook::react

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

@@ -7,6 +7,7 @@
 
 #pragma once
 
+#include <react/renderer/css/CSSCalc.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/RectangleCorners.h>
 #include <react/renderer/graphics/RectangleEdges.h>
@@ -248,4 +249,46 @@ struct BorderMetrics {
   bool operator==(const BorderMetrics &rhs) const = default;
 };
 
+enum class CalcExpressionPropertyID : uint8_t {
+  Width,
+  Height,
+  MinWidth,
+  MinHeight,
+  MaxWidth,
+  MaxHeight,
+  FlexBasis,
+  RowGap,
+  ColumnGap,
+  Gap,
+  Left,
+  Top,
+  Right,
+  Bottom,
+  Start,
+  End,
+  InsetInline,
+  InsetBlock,
+  Inset,
+  MarginLeft,
+  MarginTop,
+  MarginRight,
+  MarginBottom,
+  MarginStart,
+  MarginEnd,
+  MarginHorizontal,
+  MarginVertical,
+  MarginAll,
+  PaddingLeft,
+  PaddingTop,
+  PaddingRight,
+  PaddingBottom,
+  PaddingStart,
+  PaddingEnd,
+  PaddingHorizontal,
+  PaddingVertical,
+  PaddingAll,
+};
+
+using CalcExpressions = std::unordered_map<CalcExpressionPropertyID, CSSCalc>;
+
 } // namespace facebook::react

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

@@ -69,6 +69,10 @@ inline folly::dynamic toDynamic(const YGValue &dimension)
       return dimension.value;
     case YGUnitPercent:
       return std::format("{}%", dimension.value);
+    case YGUnitDynamic:
+      // YGValue do not support YGUnitDynamic yet.
+      // Return placeholder that won't parse as valid calc.
+      return "calc(dynamic)";
   }
 
   return nullptr;