CSS calc() percentage post-layout offset support

Summary:
Add native support for CSS calc() expressions containing percentages (e.g., `calc(50% - 20px)`). The JS side produces `{__rsdCalc: true, percent, offset}` objects; this diff adds the C++ side that consumes them.

**YogaStylableProps:**
- `CalcPropId` enum for width/height/min/max dimension properties
- `calcOffsets[]` array storing point offsets indexed by CalcPropId
- `trySetCalcDimension()` parses `__rsdCalc` map objects from RawValue, sets percentage on Yoga and stores point offset
- Width/height/min/max cases in `setProp` call `trySetCalcDimension` before falling back to standard handling

**YogaLayoutableShadowNode:**
- `applyCalcOffsets()` adjusts layout metrics after Yoga layout, adding point offsets to percentage-resolved dimensions
- Called in `layout()` after `layoutMetricsFromYogaNode` when `hasCalcOffsets()` is true

**LayoutTest:**
- `CalcOffsetTest` verifies calc(50% - 20px) in 200px parent → 80px child width
- Verifies calc(100% - 64px) → 136px height


Changelog:
[General][Added] - Added initial support for calc CSS property

Differential Revision: D97422357

Author: MazinZ

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

@@ -688,6 +688,59 @@ static EdgeInsets calculateOverflowInset(
   return overflowInset;
 }
 
+static void applyCalcOffsets(
+    LayoutMetrics& metrics,
+    const YogaStylableProps& props) {
+  // Width
+  float widthOffset = props.calcOffsets[static_cast<size_t>(CalcPropId::Width)];
+  if (widthOffset != 0.0f) {
+    metrics.frame.size.width += widthOffset;
+  }
+  // Height
+  float heightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::Height)];
+  if (heightOffset != 0.0f) {
+    metrics.frame.size.height += heightOffset;
+  }
+  // MinWidth: clamp width from below
+  float minWidthOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MinWidth)];
+  if (minWidthOffset != 0.0f) {
+    // Yoga already applied minWidth percent; adjust the resolved minimum
+    float adjustedMin = metrics.frame.size.width + minWidthOffset;
+    if (metrics.frame.size.width < adjustedMin) {
+      metrics.frame.size.width = adjustedMin;
+    }
+  }
+  // MinHeight
+  float minHeightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MinHeight)];
+  if (minHeightOffset != 0.0f) {
+    float adjustedMin = metrics.frame.size.height + minHeightOffset;
+    if (metrics.frame.size.height < adjustedMin) {
+      metrics.frame.size.height = adjustedMin;
+    }
+  }
+  // MaxWidth: clamp width from above
+  float maxWidthOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MaxWidth)];
+  if (maxWidthOffset != 0.0f) {
+    float adjustedMax = metrics.frame.size.width + maxWidthOffset;
+    if (metrics.frame.size.width > adjustedMax) {
+      metrics.frame.size.width = adjustedMax;
+    }
+  }
+  // MaxHeight
+  float maxHeightOffset =
+      props.calcOffsets[static_cast<size_t>(CalcPropId::MaxHeight)];
+  if (maxHeightOffset != 0.0f) {
+    float adjustedMax = metrics.frame.size.height + maxHeightOffset;
+    if (metrics.frame.size.height > adjustedMax) {
+      metrics.frame.size.height = adjustedMax;
+    }
+  }
+}
+
 void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
   // Reading data from a dirtied node does not make sense.
   react_native_assert(!YGNodeIsDirty(&yogaNode_));
@@ -717,6 +770,20 @@ void YogaLayoutableShadowNode::layout(LayoutContext layoutContext) {
           layoutContext.swapLeftAndRightInRTL &&
           newLayoutMetrics.layoutDirection == LayoutDirection::RightToLeft;
 
+      // Apply CSS calc() post-layout offsets. When a calc expression contains
+      // a percentage (e.g. calc(50% - 20px)), Yoga resolves the percentage
+      // part during layout. The point offset is applied here afterward.
+      {
+        const auto& childPropsShared = childNode.getProps();
+        if (childPropsShared != nullptr) {
+          const auto& childProps =
+              static_cast<const YogaStylableProps&>(*childPropsShared);
+          if (childProps.hasCalcOffsets()) {
+            applyCalcOffsets(newLayoutMetrics, childProps);
+          }
+        }
+      }
+
       // Child node's layout has changed. When a node is added to
       // `affectedNodes`, onLayout event is called on the component. Comparing
       // `newLayoutMetrics.frame` with `childNode.getLayoutMetrics().frame` to

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

@@ -7,6 +7,9 @@
 
 #include "YogaStylableProps.h"
 
+#include <string>
+#include <unordered_map>
+
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/renderer/components/view/conversions.h>
 #include <react/renderer/components/view/propsConversions.h>
@@ -121,6 +124,43 @@ static inline const T getFieldValue(
   REBUILD_YG_FIELD_SWITCH_CASE_INDEXED(                              \
       position, setPosition, yoga::Edge::All, "inset");
 
+bool YogaStylableProps::trySetCalcDimension(
+    const PropsParserContext& /*context*/,
+    const RawValue& value,
+    yoga::Dimension dim,
+    CalcPropId propId,
+    bool isMinMax) {
+  if (!value.hasType<std::unordered_map<std::string, RawValue>>()) {
+    return false;
+  }
+  auto map = static_cast<std::unordered_map<std::string, RawValue>>(value);
+  auto it = map.find("__rsdCalc");
+  if (it == map.end()) {
+    return false;
+  }
+  auto percentIt = map.find("percent");
+  auto offsetIt = map.find("offset");
+  if (percentIt == map.end() || offsetIt == map.end()) {
+    return false;
+  }
+  float percent = static_cast<float>(static_cast<double>(percentIt->second));
+  float offset = static_cast<float>(static_cast<double>(offsetIt->second));
+
+  auto percentValue = yoga::StyleSizeLength::percent(percent);
+  if (isMinMax) {
+    // For min/max, determine setter based on propId
+    if (propId == CalcPropId::MinWidth || propId == CalcPropId::MinHeight) {
+      yogaStyle.setMinDimension(dim, percentValue);
+    } else {
+      yogaStyle.setMaxDimension(dim, percentValue);
+    }
+  } else {
+    yogaStyle.setDimension(dim, percentValue);
+  }
+  calcOffsets[static_cast<size_t>(propId)] = offset;
+  return true;
+}
+
 void YogaStylableProps::setProp(
     const PropsParserContext& context,
     RawPropsPropNameHash hash,
@@ -154,11 +194,101 @@ void YogaStylableProps::setProp(
       return;
     }
       REBUILD_FIELD_SWITCH_CASE_YSP(boxSizing, setBoxSizing);
-      REBUILD_FIELD_YG_DIMENSION(dimension, setDimension, "width", "height");
-      REBUILD_FIELD_YG_DIMENSION(
-          minDimension, setMinDimension, "minWidth", "minHeight");
-      REBUILD_FIELD_YG_DIMENSION(
-          maxDimension, setMaxDimension, "maxWidth", "maxHeight");
+      // Dimension props with calc() offset support.
+      // For __rsdCalc objects {percent, offset}, set percentage on Yoga
+      // and store the point offset for post-layout adjustment.
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("width"): {
+      if (trySetCalcDimension(
+              context, value, yoga::Dimension::Width, CalcPropId::Width)) {
+        return;
+      }
+      yogaStyle.setDimension(
+          yoga::Dimension::Width,
+          getFieldValue(
+              context, value, ygDefaults.dimension(yoga::Dimension::Width)));
+      calcOffsets[static_cast<size_t>(CalcPropId::Width)] = 0;
+      return;
+    }
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("height"): {
+      if (trySetCalcDimension(
+              context, value, yoga::Dimension::Height, CalcPropId::Height)) {
+        return;
+      }
+      yogaStyle.setDimension(
+          yoga::Dimension::Height,
+          getFieldValue(
+              context, value, ygDefaults.dimension(yoga::Dimension::Height)));
+      calcOffsets[static_cast<size_t>(CalcPropId::Height)] = 0;
+      return;
+    }
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("minWidth"): {
+      if (trySetCalcDimension(
+              context,
+              value,
+              yoga::Dimension::Width,
+              CalcPropId::MinWidth,
+              true)) {
+        return;
+      }
+      yogaStyle.setMinDimension(
+          yoga::Dimension::Width,
+          getFieldValue(
+              context, value, ygDefaults.minDimension(yoga::Dimension::Width)));
+      calcOffsets[static_cast<size_t>(CalcPropId::MinWidth)] = 0;
+      return;
+    }
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("minHeight"): {
+      if (trySetCalcDimension(
+              context,
+              value,
+              yoga::Dimension::Height,
+              CalcPropId::MinHeight,
+              true)) {
+        return;
+      }
+      yogaStyle.setMinDimension(
+          yoga::Dimension::Height,
+          getFieldValue(
+              context,
+              value,
+              ygDefaults.minDimension(yoga::Dimension::Height)));
+      calcOffsets[static_cast<size_t>(CalcPropId::MinHeight)] = 0;
+      return;
+    }
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("maxWidth"): {
+      if (trySetCalcDimension(
+              context,
+              value,
+              yoga::Dimension::Width,
+              CalcPropId::MaxWidth,
+              true)) {
+        return;
+      }
+      yogaStyle.setMaxDimension(
+          yoga::Dimension::Width,
+          getFieldValue(
+              context, value, ygDefaults.maxDimension(yoga::Dimension::Width)));
+      calcOffsets[static_cast<size_t>(CalcPropId::MaxWidth)] = 0;
+      return;
+    }
+    case CONSTEXPR_RAW_PROPS_KEY_HASH("maxHeight"): {
+      if (trySetCalcDimension(
+              context,
+              value,
+              yoga::Dimension::Height,
+              CalcPropId::MaxHeight,
+              true)) {
+        return;
+      }
+      yogaStyle.setMaxDimension(
+          yoga::Dimension::Height,
+          getFieldValue(
+              context,
+              value,
+              ygDefaults.maxDimension(yoga::Dimension::Height)));
+      calcOffsets[static_cast<size_t>(CalcPropId::MaxHeight)] = 0;
+      return;
+    }
       REBUILD_FIELD_YG_EDGES_POSITION();
       REBUILD_FIELD_YG_EDGES(margin, setMargin, "margin", "");
       REBUILD_FIELD_YG_EDGES(padding, setPadding, "padding", "");

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

@@ -7,6 +7,8 @@
 
 #pragma once
 
+#include <cstdint>
+
 #include <yoga/style/Style.h>
 
 #include <react/renderer/core/Props.h>
@@ -15,6 +17,18 @@
 
 namespace facebook::react {
 
+// Property identifiers for calc post-layout offsets, matching Yoga dimension
+// props. Used by CSS calc() expressions like calc(50% - 20px), where the
+// percentage is set on Yoga and the point offset is applied post-layout.
+enum class CalcPropId : uint8_t {
+  Width,
+  Height,
+  MinWidth,
+  MinHeight,
+  MaxWidth,
+  MaxHeight,
+};
+
 class YogaStylableProps : public Props {
  public:
   YogaStylableProps() = default;
@@ -57,6 +71,21 @@ class YogaStylableProps : public Props {
   yoga::Style::Length paddingBlockStart;
   yoga::Style::Length paddingBlockEnd;
 
+  // Post-layout offsets for CSS calc() expressions containing percentages.
+  // Indexed by CalcPropId (cast to size_t). Non-zero offset means active.
+  static constexpr size_t kCalcPropCount = 6;
+  float calcOffsets[kCalcPropCount] = {0, 0, 0, 0, 0, 0};
+
+  bool hasCalcOffsets() const
+  {
+    for (size_t i = 0; i < kCalcPropCount; i++) {
+      if (calcOffsets[i] != 0.0f) {
+        return true;
+      }
+    }
+    return false;
+  }
+
 #if RN_DEBUG_STRING_CONVERTIBLE
 
 #pragma mark - DebugStringConvertible (Partial)
@@ -66,6 +95,16 @@ class YogaStylableProps : public Props {
 #endif
 
  private:
+  // Attempts to parse a __rsdCalc object from the RawValue. If found, sets the
+  // percentage part on yogaStyle and stores the point offset in calcOffsets.
+  // Returns true if the value was a calc object, false otherwise.
+  bool trySetCalcDimension(
+      const PropsParserContext &context,
+      const RawValue &value,
+      yoga::Dimension dim,
+      CalcPropId propId,
+      bool isMinMax = false);
+
   void convertRawPropAliases(
       const PropsParserContext &context,
       const YogaStylableProps &sourceProps,

packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp

@@ -10,6 +10,7 @@
 #include <react/renderer/componentregistry/ComponentDescriptorProviderRegistry.h>
 #include <react/renderer/components/root/RootComponentDescriptor.h>
 #include <react/renderer/components/view/ViewComponentDescriptor.h>
+#include <react/renderer/components/view/YogaStylableProps.h>
 #include <react/renderer/element/ComponentBuilder.h>
 #include <react/renderer/element/Element.h>
 #include <react/renderer/element/testUtils.h>
@@ -444,4 +445,75 @@ TEST_F(LayoutTest, overflowInsetHitSlopTransformTranslateTest) {
   EXPECT_EQ(layoutMetricsABC.overflowInset.bottom, 0);
 }
 
+// Test CSS calc() post-layout offsets.
+// A child with width: calc(50% - 20px) inside a 200px-wide parent
+// should resolve to 200*0.5 - 20 = 80px.
+class CalcOffsetTest : public ::testing::Test {
+ protected:
+  ComponentBuilder builder_;
+  std::shared_ptr<RootShadowNode> rootShadowNode_;
+  std::shared_ptr<ViewShadowNode> childNode_;
+
+  CalcOffsetTest() : builder_(simpleComponentBuilder()) {}
+
+  void initialize() {
+    // clang-format off
+    auto element =
+        Element<RootShadowNode>()
+          .reference(rootShadowNode_)
+          .tag(1)
+          .props([] {
+            auto sharedProps = std::make_shared<RootProps>();
+            auto &props = *sharedProps;
+            props.layoutConstraints = LayoutConstraints{
+                .minimumSize = {.width = 0, .height = 0},
+                .maximumSize = {.width = 500, .height = 500}};
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setDimension(
+                yoga::Dimension::Width, yoga::StyleSizeLength::points(200));
+            yogaStyle.setDimension(
+                yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+            return sharedProps;
+          })
+          .children({
+            Element<ViewShadowNode>()
+              .reference(childNode_)
+              .tag(2)
+              .props([] {
+                auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+                auto &props = *sharedProps;
+                auto &yogaStyle = props.yogaStyle;
+                // Simulate calc(50% - 20px): set 50% on Yoga, store -20 offset
+                yogaStyle.setDimension(
+                    yoga::Dimension::Width,
+                    yoga::StyleSizeLength::percent(50));
+                props.calcOffsets[static_cast<size_t>(CalcPropId::Width)] =
+                    -20.0f;
+                // Simulate calc(100% - 64px) for height
+                yogaStyle.setDimension(
+                    yoga::Dimension::Height,
+                    yoga::StyleSizeLength::percent(100));
+                props.calcOffsets[static_cast<size_t>(CalcPropId::Height)] =
+                    -64.0f;
+                return sharedProps;
+              })
+          });
+    // clang-format on
+
+    builder_.build(element);
+    rootShadowNode_->layoutIfNeeded();
+  }
+};
+
+TEST_F(CalcOffsetTest, calcWidthAndHeight) {
+  initialize();
+
+  auto layoutMetrics = childNode_->getLayoutMetrics();
+
+  // width: calc(50% - 20px) = 200 * 0.5 - 20 = 80
+  EXPECT_EQ(layoutMetrics.frame.size.width, 80);
+  // height: calc(100% - 64px) = 200 * 1.0 - 64 = 136
+  EXPECT_EQ(layoutMetrics.frame.size.height, 136);
+}
+
 } // namespace facebook::react