Skip to content

feat: calc support #56162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
paradowstack wants to merge 5 commits into
base: main
Choose a base branch
from
+1,607 −211
Open

feat: calc support #56162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81a65d2
feat: add viewport size to LayoutContext class
paradowstack Mar 24, 2026
12696b2
feat: calc support
paradowstack Mar 19, 2026
4c733b9
refactor: adjust CSSCalc formatting
paradowstack Mar 20, 2026
61455ea
refactor: use FNV-1a hashing for calc expression property identification
paradowstack Mar 20, 2026
3cda37b
refactor: fix return type syntax leftover in CSSCalc operator+
paradowstack Mar 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion packages/react-native/React/Fabric/Surface/RCTFabricSurface.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand All @@ -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));
}

Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/React/Views/RCTLayout.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ CGFloat RCTCoreGraphicsFloatFromYogaValue(YGValue value, CGFloat baseFloatValue)
case YGUnitFitContent:
case YGUnitStretch:
return baseFloatValue;
case YGUnitDynamic:
return RCTCoreGraphicsFloatFromYogaFloat(YGUndefined);
}
}

Expand Down
4 changes: 3 additions & 1 deletion packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaUnit.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
}
}
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/ReactAndroid/src/main/jni/react/fabric/SurfaceHandlerBinding.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
36 changes: 32 additions & 4 deletions ...ages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,9 @@ YogaLayoutableShadowNode::YogaLayoutableShadowNode(
}

if (fragment.props) {
updateYogaProps();
auto& sourceProps =
static_cast<const YogaStylableProps&>(*sourceShadowNode.getProps());
updateYogaProps(sourceProps.calcExpressions);
}

if (fragment.children) {
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -888,6 +893,29 @@ 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_);
if (!props.calcExpressions.contains(id)) {
return {};
}

auto& calc = props.calcExpressions.at(id);
return YGValue(
calc.resolve(
context.referenceLength,
threadLocalLayoutContext.viewportSize.width,
threadLocalLayoutContext.viewportSize.height),
YGUnitPoint);
};

yoga::Config& YogaLayoutableShadowNode::initializeYogaConfig(
yoga::Config& config,
YGConfigConstRef previousConfig) {
Expand Down
7 changes: 6 additions & 1 deletion packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ class YogaLayoutableShadowNode : public LayoutableShadowNode {

void updateYogaChildren();

void updateYogaProps();
void updateYogaProps(const CalcExpressions& previousCalcExpressions = {});

/*
* Sets layoutable size of node.
Expand Down Expand Up @@ -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
Expand Down
141 changes: 141 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,23 @@
#include <react/renderer/components/view/propsConversions.h>
#include <react/renderer/core/propsConversions.h>
#include <react/renderer/debug/debugStringConvertibleUtils.h>
#include <react/utils/fnv1a.h>
#include <yoga/Yoga.h>
#include <yoga/style/StyleLength.h>

#include "YogaLayoutableShadowNode.h"
#include "conversions.h"

namespace facebook::react {

YGValue yogaNodeCalcValueResolver(
YGNodeConstRef yogaNode,
YGValueDynamicID id,
YGValueDynamicContext context) {
return YogaLayoutableShadowNode::yogaNodeCalcValueResolver(
yogaNode, id, context);
}

YogaStylableProps::YogaStylableProps(
const PropsParserContext& context,
const YogaStylableProps& sourceProps,
Expand All @@ -31,6 +41,8 @@ YogaStylableProps::YogaStylableProps(
? sourceProps.yogaStyle
: convertRawProp(context, rawProps, sourceProps.yogaStyle);

calcExpressions =
buildCalcExpressions(context, rawProps, sourceProps.calcExpressions);
if (!ReactNativeFeatureFlags::enableCppPropsIteratorSetter()) {
convertRawPropAliases(context, sourceProps, rawProps);
}
Expand Down Expand Up @@ -121,6 +133,119 @@ static inline const T getFieldValue(
REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \
position, setPosition, yoga::Edge::All, "inset");

#define APPLY_CALC_COMMON(fieldName, setPoints, setPercent, setDynamic) \
Copy link
Contributor

@NickGerleman NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: why does this need to be a macro?

Copy link
Author

@paradowstack paradowstack Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does not - I wrote it as macros because this file already achieve similar functionality using macros (REBUILD_FIELD_YG_* stuff) and I got the feeling it would be more consistent.
Would you like me to rewrite it using template functions?

{ \
if (const auto* rawValue = rawProps.at(fieldName, nullptr, nullptr)) { \
const auto& value = *rawValue; \
if (value.hasType<std::string>()) { \
constexpr auto key = fnv1a(fieldName); \
auto isCalcExpression{false}; \
auto parsed = parseCSSProperty<CSSCalc>((std::string)value); \
if (std::holds_alternative<CSSCalc>(parsed)) { \
auto calc = std::get<CSSCalc>(parsed); \
if (calc.isPointsOnly()) { \
setPoints(calc.px); \
} else if (calc.isPercentOnly()) { \
setPercent(calc.percent); \
} else { \
setDynamic(key); \
calcExpressions[key] = std::move(calc); \
isCalcExpression = true; \
} \
} \
if (!isCalcExpression && calcExpressions.count(key)) { \
calcExpressions.erase(key); \
} \
} \
} \
}

#define APPLY_CALC_YG_INDEXED(setter, index, fieldName, LengthType) \
APPLY_CALC_COMMON( \
fieldName, \
[&](float points) { \
yogaStyle.setter(index, LengthType::points(points)); \
}, \
[&](float percent) { \
yogaStyle.setter(index, LengthType::percent(percent)); \
}, \
[&](YGValueDynamicID dynamicId) { \
yogaStyle.setter( \
index, \
LengthType::dynamic(&yogaNodeCalcValueResolver, dynamicId)); \
})

#define APPLY_CALC_YG_FIELD(setter, fieldName, LengthType) \
APPLY_CALC_COMMON( \
fieldName, \
[&](float points) { yogaStyle.setter(LengthType::points(points)); }, \
[&](float percent) { yogaStyle.setter(LengthType::percent(percent)); }, \
[&](YGValueDynamicID dynamicId) { \
yogaStyle.setter( \
LengthType::dynamic(&yogaNodeCalcValueResolver, dynamicId)); \
})

#define APPLY_CALC_YG_DIMENSION(setter, widthStr, heightStr) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Dimension::Width, widthStr, yoga::StyleSizeLength) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Dimension::Height, heightStr, yoga::StyleSizeLength)

#define APPLY_CALC_YG_EDGES_MARGIN(setter, LengthType, prefix) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Left, prefix "Left", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Top, prefix "Top", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Right, prefix "Right", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Bottom, prefix "Bottom", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Start, prefix "Start", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::End, prefix "End", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Horizontal, prefix "Horizontal", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Vertical, prefix "Vertical", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::All, prefix, LengthType)

#define APPLY_CALC_YG_EDGES_PADDING(setter, LengthType, prefix) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Left, prefix "Left", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Top, prefix "Top", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Right, prefix "Right", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Bottom, prefix "Bottom", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::Start, prefix "Start", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::End, prefix "End", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Horizontal, prefix "Horizontal", LengthType) \
APPLY_CALC_YG_INDEXED( \
setter, yoga::Edge::Vertical, prefix "Vertical", LengthType) \
APPLY_CALC_YG_INDEXED(setter, yoga::Edge::All, prefix, LengthType)

#define APPLY_CALC_YG_EDGES_POSITION() \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Left, "left", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Top, "top", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Right, "right", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Bottom, "bottom", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Start, "start", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::End, "end", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Horizontal, "insetInline", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::Vertical, "insetBlock", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setPosition, yoga::Edge::All, "inset", yoga::StyleLength)

#define APPLY_CALC_YG_GUTTER() \
APPLY_CALC_YG_INDEXED( \
setGap, yoga::Gutter::Row, "rowGap", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED( \
setGap, yoga::Gutter::Column, "columnGap", yoga::StyleLength) \
APPLY_CALC_YG_INDEXED(setGap, yoga::Gutter::All, "gap", yoga::StyleLength)

void YogaStylableProps::setProp(
const PropsParserContext& context,
RawPropsPropNameHash hash,
Expand Down Expand Up @@ -522,4 +647,20 @@ void YogaStylableProps::convertRawPropAliases(
yoga::StyleLength::undefined());
}

CalcExpressions YogaStylableProps::buildCalcExpressions(
const PropsParserContext& context,
const RawProps& rawProps,
const CalcExpressions& defaultValue) {
auto calcExpressions = defaultValue;
APPLY_CALC_YG_DIMENSION(setDimension, "width", "height")
APPLY_CALC_YG_DIMENSION(setMinDimension, "minWidth", "minHeight")
APPLY_CALC_YG_DIMENSION(setMaxDimension, "maxWidth", "maxHeight")
APPLY_CALC_YG_FIELD(setFlexBasis, "flexBasis", yoga::StyleSizeLength)
APPLY_CALC_YG_GUTTER()
APPLY_CALC_YG_EDGES_POSITION()
APPLY_CALC_YG_EDGES_MARGIN(setMargin, yoga::StyleLength, "margin")
APPLY_CALC_YG_EDGES_PADDING(setPadding, yoga::StyleLength, "padding")
return calcExpressions;
}

} // namespace facebook::react
9 changes: 9 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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)
Expand All @@ -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
4 changes: 4 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/components/view/primitives.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -16,6 +17,7 @@
#include <bitset>
#include <cmath>
#include <optional>
#include <unordered_map>

namespace facebook::react {

Expand Down Expand Up @@ -248,4 +250,6 @@ struct BorderMetrics {
bool operator==(const BorderMetrics &rhs) const = default;
};

using CalcExpressions = std::unordered_map<uint32_t, CSSCalc>;

} // namespace facebook::react
11 changes: 9 additions & 2 deletions packages/react-native/ReactCommon/react/renderer/core/LayoutContext.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,11 @@ struct LayoutContext {
* If React Native takes up entire screen, it will be {0, 0}.
*/
Point viewportOffset{};

/*
* Viewport size is size of the React Native's root view.
*/
Size viewportSize{};
Copy link
Contributor

@NickGerleman NickGerleman Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ooh, this may be helpful in more places in the future 👍. If you had a PR for just the plumbing for e.g. this part of the change, would be quick to import and accept.

Copy link
Author

@paradowstack paradowstack Mar 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I extracted it to the separated PR: #56209

};

inline bool operator==(const LayoutContext &lhs, const LayoutContext &rhs)
Expand All @@ -68,13 +73,15 @@ inline bool operator==(const LayoutContext &lhs, const LayoutContext &rhs)
lhs.affectedNodes,
lhs.swapLeftAndRightInRTL,
lhs.fontSizeMultiplier,
lhs.viewportOffset) ==
lhs.viewportOffset,
lhs.viewportSize) ==
std::tie(
rhs.pointScaleFactor,
rhs.affectedNodes,
rhs.swapLeftAndRightInRTL,
rhs.fontSizeMultiplier,
rhs.viewportOffset);
rhs.viewportOffset,
rhs.viewportSize);
}

} // namespace facebook::react
Loading