Conversation
meta-cla
bot
added
the
CLA Signed
facebook-github-tools
bot
added
the
Shared with Meta
| REBUILD_YG_FIELD_SWITCH_CASE_INDEXED( \ | ||
| position, setPosition, yoga::Edge::All, "inset"); | ||
|
|
||
| #define APPLY_CALC_COMMON(fieldName, setPoints, setPercent, setDynamic) \ |
There was a problem hiding this comment.
nit: why does this need to be a macro?
There was a problem hiding this comment.
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?
| /* | ||
| * Viewport size is size of the React Native's root view. | ||
| */ | ||
| Size viewportSize{}; |
There was a problem hiding this comment.
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.
| } | ||
|
|
||
| TEST(CSSCalc, simple_pixel_value) { | ||
| auto result = parseCalc("calc(10px)"); |
There was a problem hiding this comment.
I'm trying to figure out how CSSCalc works, more generically.
Ideally, any place where we use a specific CSS type, valid calc expression should work. So e.g. if we are parsing the result of a box-shadow, which expects a <length> in the middle, that length should be able to be some arbitrary calc() expression.
Like 0 calc(16px - 2px) should be valid, for reading something that requires two lengths.
Can we make that sort of scenario work? If we can do this sort of more generic substitution, it also gives us a way later to introduce variables.
| auto opResult = | ||
| parser.syntaxParser().consumeComponentValue<std::optional<char>>( | ||
| CSSDelimiter::None, [](const CSSPreservedToken &token) { | ||
| if (token.type() == CSSTokenType::Delim) { | ||
| auto sv = token.stringValue(); | ||
| if (!sv.empty() && (sv[0] == '+' || sv[0] == '-')) { | ||
| return std::optional<char>{sv[0]}; | ||
| } | ||
| } | ||
| return std::optional<char>{}; | ||
| }); |
There was a problem hiding this comment.
IIRC these aren't actually Delim tokens in the spec, but CSSTokenizer, didn't add any of the tokens for calc(), calc-constants, etc. This change will need to update tokenizer layer a bit. Adding tokenizer awareness of calc tokens, could be its own change, that would be easy to merge independently.
2 participants
Why?
calc()is a core CSS primitive and a common expectation for developers. Adding it to React Native enables more expressive and maintainable styles without JS-side manual calculations. It improves parity across web and native worlds, reducing friction when switching from another platform.My tweet about this potential feature in React Native was really well received and many people expressed excitement about it.
Yoga PR link
Summary:
Bring Yoga dynamic value resolution into React Native and wire
calc()-driven values.Yoga resolves dynamic values during layout by calling back into React Native with layout context and dynamic id, allowing mixed-unit expressions to be evaluated just-in-time.
Changelog:
[GENERAL] [ADDED] - CSS calc() support
This PR includes RN-side integration needed to make Yoga dynamic values usable in renderer layout paths.
vw/vh-based expressions.Missing:
To keep this PR focused, some areas are intentionally out of scope and will follow in separate work.
Test Plan:
Added focused C++ tests for calc parsing/evaluation.
Broader platform and API-level testing will be expanded in follow-up PRs.
cc @NickGerleman