feat: calc support

Author: paradowstack

packages/react-native/React/Fabric/Surface/RCTFabricSurface.mm

@@ -214,7 +214,8 @@ - (void)setMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximumSize viewp
   if (!isnan(viewportOffset.x) && !isnan(viewportOffset.y)) {
     layoutContext.viewportOffset = RCTPointFromCGPoint(viewportOffset);
   }
-
+  layoutContext.viewportSize = layoutConstraints.maximumSize;
+  
   _surfaceHandler->constraintLayout(layoutConstraints, layoutContext);
 }
 
@@ -236,6 +237,8 @@ - (CGSize)sizeThatFitsMinimumSize:(CGSize)minimumSize maximumSize:(CGSize)maximu
   layoutConstraints.minimumSize = RCTSizeFromCGSize(minimumSize);
   layoutConstraints.maximumSize = RCTSizeFromCGSize(maximumSize);
 
+  layoutContext.viewportSize = layoutConstraints.maximumSize;
+  
   return RCTCGSizeFromSize(_surfaceHandler->measure(layoutConstraints, layoutContext));
 }
 

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/ReactAndroid/src/main/jni/react/fabric/SurfaceHandlerBinding.cpp

@@ -60,6 +60,7 @@ void SurfaceHandlerBinding::setLayoutConstraints(
   context.swapLeftAndRightInRTL = (doLeftAndRightSwapInRTL != 0u);
   context.pointScaleFactor = pixelDensity;
   context.viewportOffset = {.x = offsetX, .y = offsetY};
+  context.viewportSize = {.width = maxWidth, .height = maxHeight};
   context.fontSizeMultiplier = fontScale;
 
   surfaceHandler_.constraintLayout(constraints, context);

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