diff --git a/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm b/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm
index 0f5dc648ded670..f6c1ba3c6ed15f 100644
--- a/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm
+++ b/packages/react-native/React/Tests/Text/RCTParagraphComponentViewTests.mm
@@ -121,8 +121,8 @@ - (void)setUp
             auto &props = *sharedProps;
             props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
             auto &yogaStyle = props.yogaStyle;
-            yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-            yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
             return sharedProps;
           })
           .children({
@@ -134,10 +134,10 @@ - (void)setUp
                     props.accessible = true;
                     auto &yogaStyle = props.yogaStyle;
                     yogaStyle.positionType() = yoga::PositionType::Absolute;
-                    yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
-                    yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(0));
-                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
+                    yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
+                    yogaStyle.setPosition(YGEdgeTop, yoga::value::points(0));
+                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
                     return sharedProps;
                   })
                   .children({
@@ -214,10 +214,10 @@ - (void)setUp
                     props.accessible = true;
                     auto &yogaStyle = props.yogaStyle;
                     yogaStyle.positionType() = yoga::PositionType::Absolute;
-                    yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
-                    yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(30));
-                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(50));
+                    yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
+                    yogaStyle.setPosition(YGEdgeTop, yoga::value::points(30));
+                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(50));
                     return sharedProps;
                   })
                   .children({
@@ -258,10 +258,10 @@ - (void)setUp
                     props.accessible = true;
                     auto &yogaStyle = props.yogaStyle;
                     yogaStyle.positionType() = yoga::PositionType::Absolute;
-                    yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
-                    yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(90));
-                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(50));
+                    yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
+                    yogaStyle.setPosition(YGEdgeTop, yoga::value::points(90));
+                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(50));
                     return sharedProps;
                   })
                   .children({
@@ -418,8 +418,8 @@ - (void)testEntireParagraphLink
                        auto &props = *sharedProps;
                        props.layoutConstraints = LayoutConstraints{{0, 0}, {500, 500}};
                        auto &yogaStyle = props.yogaStyle;
-                       yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-                       yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
+                       yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+                       yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
                        return sharedProps;
                      })
                      .children({
@@ -432,10 +432,10 @@ - (void)testEntireParagraphLink
                                props.accessibilityTraits = AccessibilityTraits::Link;
                                auto &yogaStyle = props.yogaStyle;
                                yogaStyle.positionType() = yoga::PositionType::Absolute;
-                               yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(0));
-                               yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(0));
-                               yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-                               yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(20));
+                               yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(0));
+                               yogaStyle.setPosition(YGEdgeTop, yoga::value::points(90));
+                               yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+                               yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(20));
                                return sharedProps;
                              })
                              .children({
diff --git a/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h b/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h
index 553ba44389a8e1..0ff0f91ea30953 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/textinput/androidtextinput/react/renderer/components/androidtextinput/AndroidTextInputComponentDescriptor.h
@@ -13,7 +13,6 @@
 
 #include <yoga/YGEnums.h>
 #include <yoga/YGValue.h>
-#include <yoga/style/CompactValue.h>
 
 #include <unordered_map>
 
@@ -106,27 +105,23 @@ class AndroidTextInputComponentDescriptor final
           !textInputProps.hasPaddingLeft &&
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeStart, yoga::CompactValue::of<YGUnitPoint>(theme.start));
+        style.setPadding(YGEdgeStart, yoga::value::points(theme.start));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingEnd &&
           !textInputProps.hasPaddingRight &&
           !textInputProps.hasPaddingHorizontal) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeEnd, yoga::CompactValue::of<YGUnitPoint>(theme.end));
+        style.setPadding(YGEdgeEnd, yoga::value::points(theme.end));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingTop &&
           !textInputProps.hasPaddingVertical) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(theme.top));
+        style.setPadding(YGEdgeTop, yoga::value::points(theme.top));
       }
       if (!textInputProps.hasPadding && !textInputProps.hasPaddingBottom &&
           !textInputProps.hasPaddingVertical) {
         changedPadding = true;
-        style.setPadding(
-            YGEdgeBottom, yoga::CompactValue::of<YGUnitPoint>(theme.bottom));
+        style.setPadding(YGEdgeBottom, yoga::value::points(theme.bottom));
       }
 
       // If the TextInput initially does not have paddingLeft or paddingStart, a
@@ -137,12 +132,12 @@ class AndroidTextInputComponentDescriptor final
       if ((textInputProps.hasPadding || textInputProps.hasPaddingLeft ||
            textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingStart) {
-        style.setPadding(YGEdgeStart, yoga::CompactValue::ofUndefined());
+        style.setPadding(YGEdgeStart, yoga::value::undefined());
       }
       if ((textInputProps.hasPadding || textInputProps.hasPaddingRight ||
            textInputProps.hasPaddingHorizontal) &&
           !textInputProps.hasPaddingEnd) {
-        style.setPadding(YGEdgeEnd, yoga::CompactValue::ofUndefined());
+        style.setPadding(YGEdgeEnd, yoga::value::undefined());
       }
 
       // Note that this is expensive: on every adopt, we need to set the Yoga
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
index ac2e89a618aaab..ed278ac98828ba 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.cpp
@@ -529,12 +529,8 @@ void YogaLayoutableShadowNode::setSize(Size size) const {
   ensureUnsealed();
 
   auto style = yogaNode_.getStyle();
-  style.setDimension(
-      yoga::Dimension::Width,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(size.width));
-  style.setDimension(
-      yoga::Dimension::Height,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(size.height));
+  style.setDimension(yoga::Dimension::Width, yoga::value::points(size.width));
+  style.setDimension(yoga::Dimension::Height, yoga::value::points(size.height));
   yogaNode_.setStyle(style);
   yogaNode_.setDirty(true);
 }
@@ -544,23 +540,19 @@ void YogaLayoutableShadowNode::setPadding(RectangleEdges<Float> padding) const {
 
   auto style = yogaNode_.getStyle();
 
-  auto leftPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left);
-  auto topPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top);
-  auto rightPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right);
-  auto bottomPadding = yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom);
+  auto leftPadding = yoga::value::points(padding.left);
+  auto topPadding = yoga::value::points(padding.top);
+  auto rightPadding = yoga::value::points(padding.right);
+  auto bottomPadding = yoga::value::points(padding.bottom);
 
   if (leftPadding != style.padding(YGEdgeLeft) ||
       topPadding != style.padding(YGEdgeTop) ||
       rightPadding != style.padding(YGEdgeRight) ||
       bottomPadding != style.padding(YGEdgeBottom)) {
-    style.setPadding(
-        YGEdgeTop, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.top));
-    style.setPadding(
-        YGEdgeLeft, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.left));
-    style.setPadding(
-        YGEdgeRight, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.right));
-    style.setPadding(
-        YGEdgeBottom, yoga::CompactValue::ofMaybe<YGUnitPoint>(padding.bottom));
+    style.setPadding(YGEdgeTop, yoga::value::points(padding.top));
+    style.setPadding(YGEdgeLeft, yoga::value::points(padding.left));
+    style.setPadding(YGEdgeRight, yoga::value::points(padding.right));
+    style.setPadding(YGEdgeBottom, yoga::value::points(padding.bottom));
     yogaNode_.setStyle(style);
     yogaNode_.setDirty(true);
   }
@@ -630,20 +622,16 @@ void YogaLayoutableShadowNode::layoutTree(
   auto ownerHeight = yogaFloatFromFloat(maximumSize.height);
 
   yogaStyle.setMaxDimension(
-      yoga::Dimension::Width,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.width));
+      yoga::Dimension::Width, yoga::value::points(maximumSize.width));
 
   yogaStyle.setMaxDimension(
-      yoga::Dimension::Height,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(maximumSize.height));
+      yoga::Dimension::Height, yoga::value::points(maximumSize.height));
 
   yogaStyle.setMinDimension(
-      yoga::Dimension::Width,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.width));
+      yoga::Dimension::Width, yoga::value::points(minimumSize.width));
 
   yogaStyle.setMinDimension(
-      yoga::Dimension::Height,
-      yoga::CompactValue::ofMaybe<YGUnitPoint>(minimumSize.height));
+      yoga::Dimension::Height, yoga::value::points(minimumSize.height));
 
   auto direction =
       yogaDirectionFromLayoutDirection(layoutConstraints.layoutDirection);
@@ -887,32 +875,32 @@ void YogaLayoutableShadowNode::swapLeftAndRightInYogaStyleProps(
 
   if (yogaStyle.position(YGEdgeLeft).isDefined()) {
     yogaStyle.setPosition(YGEdgeStart, yogaStyle.position(YGEdgeLeft));
-    yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::ofUndefined());
+    yogaStyle.setPosition(YGEdgeLeft, yoga::value::undefined());
   }
 
   if (yogaStyle.position(YGEdgeRight).isDefined()) {
     yogaStyle.setPosition(YGEdgeEnd, yogaStyle.position(YGEdgeRight));
-    yogaStyle.setPosition(YGEdgeRight, yoga::CompactValue::ofUndefined());
+    yogaStyle.setPosition(YGEdgeRight, yoga::value::undefined());
   }
 
   if (yogaStyle.padding(YGEdgeLeft).isDefined()) {
     yogaStyle.setPadding(YGEdgeStart, yogaStyle.padding(YGEdgeLeft));
-    yogaStyle.setPadding(YGEdgeLeft, yoga::CompactValue::ofUndefined());
+    yogaStyle.setPadding(YGEdgeLeft, yoga::value::undefined());
   }
 
   if (yogaStyle.padding(YGEdgeRight).isDefined()) {
     yogaStyle.setPadding(YGEdgeEnd, yogaStyle.padding(YGEdgeRight));
-    yogaStyle.setPadding(YGEdgeRight, yoga::CompactValue::ofUndefined());
+    yogaStyle.setPadding(YGEdgeRight, yoga::value::undefined());
   }
 
   if (yogaStyle.margin(YGEdgeLeft).isDefined()) {
     yogaStyle.setMargin(YGEdgeStart, yogaStyle.margin(YGEdgeLeft));
-    yogaStyle.setMargin(YGEdgeLeft, yoga::CompactValue::ofUndefined());
+    yogaStyle.setMargin(YGEdgeLeft, yoga::value::undefined());
   }
 
   if (yogaStyle.margin(YGEdgeRight).isDefined()) {
     yogaStyle.setMargin(YGEdgeEnd, yogaStyle.margin(YGEdgeRight));
-    yogaStyle.setMargin(YGEdgeRight, yoga::CompactValue::ofUndefined());
+    yogaStyle.setMargin(YGEdgeRight, yoga::value::undefined());
   }
 
   shadowNode.yogaNode_.setStyle(yogaStyle);
@@ -967,12 +955,12 @@ void YogaLayoutableShadowNode::swapLeftAndRightInViewProps(
 
   if (props.yogaStyle.border(YGEdgeLeft).isDefined()) {
     props.yogaStyle.setBorder(YGEdgeStart, props.yogaStyle.border(YGEdgeLeft));
-    props.yogaStyle.setBorder(YGEdgeLeft, yoga::CompactValue::ofUndefined());
+    props.yogaStyle.setBorder(YGEdgeLeft, yoga::value::undefined());
   }
 
   if (props.yogaStyle.border(YGEdgeRight).isDefined()) {
     props.yogaStyle.setBorder(YGEdgeEnd, props.yogaStyle.border(YGEdgeRight));
-    props.yogaStyle.setBorder(YGEdgeRight, yoga::CompactValue::ofUndefined());
+    props.yogaStyle.setBorder(YGEdgeRight, yoga::value::undefined());
   }
 }
 
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h
index 0d31fb56eae31c..f4a9ba794362a8 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaLayoutableShadowNode.h
@@ -22,8 +22,6 @@
 namespace facebook::react {
 
 class YogaLayoutableShadowNode : public LayoutableShadowNode {
-  using CompactValue = facebook::yoga::CompactValue;
-
  public:
   using Shared = std::shared_ptr<const YogaLayoutableShadowNode>;
   using ListOfShared = std::vector<Shared>;
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
index 39e32c9fa93283..ce472496bedebe 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.cpp
@@ -417,98 +417,98 @@ void YogaStylableProps::convertRawPropAliases(
       rawProps,
       "insetBlockEnd",
       sourceProps.insetBlockEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   insetBlockStart = convertRawProp(
       context,
       rawProps,
       "insetBlockStart",
       sourceProps.insetBlockStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   insetInlineEnd = convertRawProp(
       context,
       rawProps,
       "insetInlineEnd",
       sourceProps.insetInlineEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   insetInlineStart = convertRawProp(
       context,
       rawProps,
       "insetInlineStart",
       sourceProps.insetInlineStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginInline = convertRawProp(
       context,
       rawProps,
       "marginInline",
       sourceProps.marginInline,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginInlineStart = convertRawProp(
       context,
       rawProps,
       "marginInlineStart",
       sourceProps.marginInlineStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginInlineEnd = convertRawProp(
       context,
       rawProps,
       "marginInlineEnd",
       sourceProps.marginInlineEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginBlock = convertRawProp(
       context,
       rawProps,
       "marginBlock",
       sourceProps.marginBlock,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginBlockStart = convertRawProp(
       context,
       rawProps,
       "marginBlockStart",
       sourceProps.marginBlockStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   marginBlockEnd = convertRawProp(
       context,
       rawProps,
       "marginBlockEnd",
       sourceProps.marginBlockEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
 
   paddingInline = convertRawProp(
       context,
       rawProps,
       "paddingInline",
       sourceProps.paddingInline,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   paddingInlineStart = convertRawProp(
       context,
       rawProps,
       "paddingInlineStart",
       sourceProps.paddingInlineStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   paddingInlineEnd = convertRawProp(
       context,
       rawProps,
       "paddingInlineEnd",
       sourceProps.paddingInlineEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   paddingBlock = convertRawProp(
       context,
       rawProps,
       "paddingBlock",
       sourceProps.paddingBlock,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   paddingBlockStart = convertRawProp(
       context,
       rawProps,
       "paddingBlockStart",
       sourceProps.paddingBlockStart,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
   paddingBlockEnd = convertRawProp(
       context,
       rawProps,
       "paddingBlockEnd",
       sourceProps.paddingBlockEnd,
-      CompactValue::ofUndefined());
+      yoga::value::undefined());
 }
 
 } // namespace facebook::react
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h
index 9114aa530e7ae8..165209183725ff 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/YogaStylableProps.h
@@ -16,8 +16,6 @@
 namespace facebook::react {
 
 class YogaStylableProps : public Props {
-  using CompactValue = facebook::yoga::CompactValue;
-
  public:
   YogaStylableProps() = default;
   YogaStylableProps(
@@ -41,30 +39,30 @@ class YogaStylableProps : public Props {
 
   // Duplicates of existing properties with different names, taking
   // precedence. E.g. "marginBlock" instead of "marginVertical"
-  CompactValue insetInlineStart;
-  CompactValue insetInlineEnd;
+  yoga::Style::Length insetInlineStart;
+  yoga::Style::Length insetInlineEnd;
 
-  CompactValue marginInline;
-  CompactValue marginInlineStart;
-  CompactValue marginInlineEnd;
-  CompactValue marginBlock;
+  yoga::Style::Length marginInline;
+  yoga::Style::Length marginInlineStart;
+  yoga::Style::Length marginInlineEnd;
+  yoga::Style::Length marginBlock;
 
-  CompactValue paddingInline;
-  CompactValue paddingInlineStart;
-  CompactValue paddingInlineEnd;
-  CompactValue paddingBlock;
+  yoga::Style::Length paddingInline;
+  yoga::Style::Length paddingInlineStart;
+  yoga::Style::Length paddingInlineEnd;
+  yoga::Style::Length paddingBlock;
 
   // BlockEnd/BlockStart map to top/bottom (no writing mode), but we preserve
   // Yoga's precedence and prefer specific edges (e.g. top) to ones which are
   // flow relative (e.g. blockStart).
-  CompactValue insetBlockStart;
-  CompactValue insetBlockEnd;
+  yoga::Style::Length insetBlockStart;
+  yoga::Style::Length insetBlockEnd;
 
-  CompactValue marginBlockStart;
-  CompactValue marginBlockEnd;
+  yoga::Style::Length marginBlockStart;
+  yoga::Style::Length marginBlockEnd;
 
-  CompactValue paddingBlockStart;
-  CompactValue paddingBlockEnd;
+  yoga::Style::Length paddingBlockStart;
+  yoga::Style::Length paddingBlockEnd;
 
 #if RN_DEBUG_STRING_CONVERTIBLE
 
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
index 2a82a16e85a1ce..58a898fb1027d1 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
@@ -395,9 +395,9 @@ inline void fromRawValue(
 inline void fromRawValue(
     const PropsParserContext& context,
     const RawValue& value,
-    yoga::CompactValue& result) {
+    yoga::Style::Length& result) {
   if (value.hasType<Float>()) {
-    result = yoga::CompactValue::ofMaybe<YGUnitPoint>((float)value);
+    result = yoga::value::points((float)value);
     return;
   } else if (value.hasType<std::string>()) {
     const auto stringValue = (std::string)value;
@@ -409,13 +409,13 @@ inline void fromRawValue(
         auto tryValue = folly::tryTo<float>(
             std::string_view(stringValue).substr(0, stringValue.length() - 1));
         if (tryValue.hasValue()) {
-          result = YGValue{tryValue.value(), YGUnitPercent};
+          result = yoga::value::percent(tryValue.value());
           return;
         }
       } else {
         auto tryValue = folly::tryTo<float>(stringValue);
         if (tryValue.hasValue()) {
-          result = YGValue{tryValue.value(), YGUnitPoint};
+          result = yoga::value::points(tryValue.value());
           return;
         }
       }
@@ -428,7 +428,7 @@ inline void fromRawValue(
     const PropsParserContext& context,
     const RawValue& value,
     YGValue& result) {
-  yoga::CompactValue ygValue{};
+  yoga::Style::Length ygValue{};
   fromRawValue(context, value, ygValue);
   result = ygValue;
 }
diff --git a/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp b/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp
index b0be9bc7f1e32d..5e44e2d5044293 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/tests/LayoutTest.cpp
@@ -77,8 +77,8 @@ class LayoutTest : public ::testing::Test {
             auto &props = *sharedProps;
             props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
             auto &yogaStyle = props.yogaStyle;
-            yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(200));
-            yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(200));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(200));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(200));
             return sharedProps;
           })
           .children({
@@ -90,8 +90,8 @@ class LayoutTest : public ::testing::Test {
                 auto &props = *sharedProps;
                 auto &yogaStyle = props.yogaStyle;
                 yogaStyle.positionType() = yoga::PositionType::Absolute;
-                yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(50));
-                yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(50));
+                yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(50));
+                yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(50));
                 return sharedProps;
               })
               .children({
@@ -103,10 +103,10 @@ class LayoutTest : public ::testing::Test {
                     auto &props = *sharedProps;
                     auto &yogaStyle = props.yogaStyle;
                     yogaStyle.positionType() = yoga::PositionType::Absolute;
-                    yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(10));
-                    yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(10));
-                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(30));
-                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(90));
+                    yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(10));
+                    yogaStyle.setPosition(YGEdgeTop, yoga::value::points(10));
+                    yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(30));
+                    yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(90));
 
                     if (testCase == TRANSFORM_SCALE) {
                       props.transform = props.transform * Transform::Scale(2, 2, 1);
@@ -136,10 +136,10 @@ class LayoutTest : public ::testing::Test {
                         }
 
                         yogaStyle.positionType() = yoga::PositionType::Absolute;
-                        yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(10));
-                        yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(10));
-                        yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(110));
-                        yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(20));
+                        yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(10));
+                        yogaStyle.setPosition(YGEdgeTop, yoga::value::points(10));
+                        yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(110));
+                        yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(20));
                         return sharedProps;
                       })
                       .children({
@@ -151,10 +151,10 @@ class LayoutTest : public ::testing::Test {
                             auto &props = *sharedProps;
                             auto &yogaStyle = props.yogaStyle;
                             yogaStyle.positionType() = yoga::PositionType::Absolute;
-                            yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(70));
-                            yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(-50));
-                            yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(30));
-                            yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(60));
+                            yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(70));
+                            yogaStyle.setPosition(YGEdgeTop, yoga::value::points(-50));
+                            yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(30));
+                            yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(60));
                             return sharedProps;
                           })
                       }),
@@ -166,10 +166,10 @@ class LayoutTest : public ::testing::Test {
                         auto &props = *sharedProps;
                         auto &yogaStyle = props.yogaStyle;
                         yogaStyle.positionType() = yoga::PositionType::Absolute;
-                        yogaStyle.setPosition(YGEdgeLeft, yoga::CompactValue::of<YGUnitPoint>(-60));
-                        yogaStyle.setPosition(YGEdgeTop, yoga::CompactValue::of<YGUnitPoint>(50));
-                        yogaStyle.setDimension(yoga::Dimension::Width, yoga::CompactValue::of<YGUnitPoint>(70));
-                        yogaStyle.setDimension(yoga::Dimension::Height, yoga::CompactValue::of<YGUnitPoint>(20));
+                        yogaStyle.setPosition(YGEdgeLeft, yoga::value::points(-60));
+                        yogaStyle.setPosition(YGEdgeTop, yoga::value::points(50));
+                        yogaStyle.setDimension(yoga::Dimension::Width, yoga::value::points(70));
+                        yogaStyle.setDimension(yoga::Dimension::Height, yoga::value::points(20));
                         return sharedProps;
                       })
                   })
diff --git a/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp b/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp
index ab06e2f8ccce76..ae64dd3393dc34 100644
--- a/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/mounting/tests/StackingContextTest.cpp
@@ -251,8 +251,8 @@ TEST_F(StackingContextTest, mostPropsDoNotForceViewsToMaterialize) {
 
   mutateViewShadowNodeProps_(nodeAA_, [](ViewProps& props) {
     auto& yogaStyle = props.yogaStyle;
-    yogaStyle.setPadding(YGEdgeAll, yoga::CompactValue::of<YGUnitPoint>(42));
-    yogaStyle.setMargin(YGEdgeAll, yoga::CompactValue::of<YGUnitPoint>(42));
+    yogaStyle.setPadding(YGEdgeAll, yoga::value::points(42));
+    yogaStyle.setMargin(YGEdgeAll, yoga::value::points(42));
     yogaStyle.positionType() = yoga::PositionType::Absolute;
     props.shadowRadius = 42;
     props.shadowOffset = Size{42, 42};
@@ -262,7 +262,7 @@ TEST_F(StackingContextTest, mostPropsDoNotForceViewsToMaterialize) {
   mutateViewShadowNodeProps_(nodeBA_, [](ViewProps& props) {
     auto& yogaStyle = props.yogaStyle;
     props.zIndex = 42;
-    yogaStyle.setMargin(YGEdgeAll, yoga::CompactValue::of<YGUnitPoint>(42));
+    yogaStyle.setMargin(YGEdgeAll, yoga::value::points(42));
     props.shadowColor = clearColor();
     props.shadowOpacity = 0.42;
   });
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNode.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGNode.cpp
index 38d8f319161cc8..50cfd98f20af3e 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/YGNode.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/YGNode.cpp
@@ -351,13 +351,13 @@ bool YGNodeCanUseCachedMeasurement(
     float marginColumn,
     YGConfigRef config) {
   return yoga::canUseCachedMeasurement(
-      scopedEnum(widthMode),
+      sizingMode(scopedEnum(widthMode)),
       availableWidth,
-      scopedEnum(heightMode),
+      sizingMode(scopedEnum(heightMode)),
       availableHeight,
-      scopedEnum(lastWidthMode),
+      sizingMode(scopedEnum(lastWidthMode)),
       lastAvailableWidth,
-      scopedEnum(lastHeightMode),
+      sizingMode(scopedEnum(lastHeightMode)),
       lastAvailableHeight,
       lastComputedWidth,
       lastComputedHeight,
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNode.h b/packages/react-native/ReactCommon/yoga/yoga/YGNode.h
index 61a2bc4ea5f7f5..b267cde14808d7 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/YGNode.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/YGNode.h
@@ -186,6 +186,19 @@ typedef struct YGSize {
 } YGSize;
 
 /**
+ * Returns the computed dimensions of the node, following the contraints of
+ * `widthMode` and `heightMode`:
+ *
+ * YGMeasureModeUndefined: The parent has not imposed any constraint on the
+ * child. It can be whatever size it wants.
+ *
+ * YGMeasureModeAtMost: The child can be as large as it wants up to the
+ * specified size.
+ *
+ * YGMeasureModeExactly: The parent has determined an exact size for the
+ * child. The child is going to be given those bounds regardless of how big it
+ * wants to be.
+ *
  * @returns the size of the leaf node, measured under the given contraints.
  */
 typedef YGSize (*YGMeasureFunc)(
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp
index 38a55f2c8c8a31..6767e5e8e31969 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/YGNodeStyle.cpp
@@ -26,22 +26,22 @@ void updateStyle(
   }
 }
 
-template <typename Ref, typename T>
-void updateStyle(YGNodeRef node, Ref (Style::*prop)(), T value) {
+template <typename Ref, typename ValueT>
+void updateStyle(YGNodeRef node, Ref (Style::*prop)(), ValueT value) {
   updateStyle(
       resolveRef(node),
       value,
-      [prop](Style& s, T x) { return (s.*prop)() != x; },
-      [prop](Style& s, T x) { (s.*prop)() = x; });
+      [prop](Style& s, ValueT x) { return (s.*prop)() != x; },
+      [prop](Style& s, ValueT x) { (s.*prop)() = x; });
 }
 
-template <auto GetterT, auto SetterT, typename IdxT>
-void updateIndexedStyleProp(YGNodeRef node, IdxT idx, CompactValue value) {
+template <auto GetterT, auto SetterT, typename IdxT, typename ValueT>
+void updateIndexedStyleProp(YGNodeRef node, IdxT idx, ValueT value) {
   updateStyle(
       resolveRef(node),
       value,
-      [idx](Style& s, CompactValue x) { return (s.*GetterT)(idx) != x; },
-      [idx](Style& s, CompactValue x) { (s.*SetterT)(idx, x); });
+      [idx](Style& s, ValueT x) { return (s.*GetterT)(idx) != x; },
+      [idx](Style& s, ValueT x) { (s.*SetterT)(idx, x); });
 }
 
 } // namespace
@@ -198,20 +198,19 @@ float YGNodeStyleGetFlexShrink(const YGNodeConstRef nodeRef) {
 }
 
 void YGNodeStyleSetFlexBasis(const YGNodeRef node, const float flexBasis) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(flexBasis);
-  updateStyle<MSVC_HINT(flexBasis)>(node, &Style::flexBasis, value);
+  updateStyle<MSVC_HINT(flexBasis)>(
+      node, &Style::flexBasis, value::points(flexBasis));
 }
 
 void YGNodeStyleSetFlexBasisPercent(
     const YGNodeRef node,
     const float flexBasisPercent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(flexBasisPercent);
-  updateStyle<MSVC_HINT(flexBasis)>(node, &Style::flexBasis, value);
+  updateStyle<MSVC_HINT(flexBasis)>(
+      node, &Style::flexBasis, value::percent(flexBasisPercent));
 }
 
 void YGNodeStyleSetFlexBasisAuto(const YGNodeRef node) {
-  updateStyle<MSVC_HINT(flexBasis)>(
-      node, &Style::flexBasis, CompactValue::ofAuto());
+  updateStyle<MSVC_HINT(flexBasis)>(node, &Style::flexBasis, value::ofAuto());
 }
 
 YGValue YGNodeStyleGetFlexBasis(const YGNodeConstRef node) {
@@ -223,15 +222,13 @@ YGValue YGNodeStyleGetFlexBasis(const YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetPosition(YGNodeRef node, YGEdge edge, float points) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(points);
   updateIndexedStyleProp<&Style::position, &Style::setPosition>(
-      node, edge, value);
+      node, edge, value::points(points));
 }
 
 void YGNodeStyleSetPositionPercent(YGNodeRef node, YGEdge edge, float percent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(percent);
   updateIndexedStyleProp<&Style::position, &Style::setPosition>(
-      node, edge, value);
+      node, edge, value::percent(percent));
 }
 
 YGValue YGNodeStyleGetPosition(YGNodeConstRef node, YGEdge edge) {
@@ -239,18 +236,18 @@ YGValue YGNodeStyleGetPosition(YGNodeConstRef node, YGEdge edge) {
 }
 
 void YGNodeStyleSetMargin(YGNodeRef node, YGEdge edge, float points) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(points);
-  updateIndexedStyleProp<&Style::margin, &Style::setMargin>(node, edge, value);
+  updateIndexedStyleProp<&Style::margin, &Style::setMargin>(
+      node, edge, value::points(points));
 }
 
 void YGNodeStyleSetMarginPercent(YGNodeRef node, YGEdge edge, float percent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(percent);
-  updateIndexedStyleProp<&Style::margin, &Style::setMargin>(node, edge, value);
+  updateIndexedStyleProp<&Style::margin, &Style::setMargin>(
+      node, edge, value::percent(percent));
 }
 
 void YGNodeStyleSetMarginAuto(YGNodeRef node, YGEdge edge) {
   updateIndexedStyleProp<&Style::margin, &Style::setMargin>(
-      node, edge, CompactValue::ofAuto());
+      node, edge, value::ofAuto());
 }
 
 YGValue YGNodeStyleGetMargin(YGNodeConstRef node, YGEdge edge) {
@@ -258,15 +255,13 @@ YGValue YGNodeStyleGetMargin(YGNodeConstRef node, YGEdge edge) {
 }
 
 void YGNodeStyleSetPadding(YGNodeRef node, YGEdge edge, float points) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(points);
   updateIndexedStyleProp<&Style::padding, &Style::setPadding>(
-      node, edge, value);
+      node, edge, value::points(points));
 }
 
 void YGNodeStyleSetPaddingPercent(YGNodeRef node, YGEdge edge, float percent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(percent);
   updateIndexedStyleProp<&Style::padding, &Style::setPadding>(
-      node, edge, value);
+      node, edge, value::percent(percent));
 }
 
 YGValue YGNodeStyleGetPadding(YGNodeConstRef node, YGEdge edge) {
@@ -277,8 +272,8 @@ void YGNodeStyleSetBorder(
     const YGNodeRef node,
     const YGEdge edge,
     const float border) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(border);
-  updateIndexedStyleProp<&Style::border, &Style::setBorder>(node, edge, value);
+  updateIndexedStyleProp<&Style::border, &Style::setBorder>(
+      node, edge, value::points(border));
 }
 
 float YGNodeStyleGetBorder(const YGNodeConstRef node, const YGEdge edge) {
@@ -294,9 +289,8 @@ void YGNodeStyleSetGap(
     const YGNodeRef node,
     const YGGutter gutter,
     const float gapLength) {
-  auto length = CompactValue::ofMaybe<YGUnitPoint>(gapLength);
   updateIndexedStyleProp<&Style::gap, &Style::setGap>(
-      node, scopedEnum(gutter), length);
+      node, scopedEnum(gutter), value::points(gapLength));
 }
 
 float YGNodeStyleGetGap(const YGNodeConstRef node, const YGGutter gutter) {
@@ -319,20 +313,18 @@ float YGNodeStyleGetAspectRatio(const YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetWidth(YGNodeRef node, float points) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(points);
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::points(points));
 }
 
 void YGNodeStyleSetWidthPercent(YGNodeRef node, float percent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(percent);
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::percent(percent));
 }
 
 void YGNodeStyleSetWidthAuto(YGNodeRef node) {
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Width, CompactValue::ofAuto());
+      node, Dimension::Width, value::ofAuto());
 }
 
 YGValue YGNodeStyleGetWidth(YGNodeConstRef node) {
@@ -340,20 +332,18 @@ YGValue YGNodeStyleGetWidth(YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetHeight(YGNodeRef node, float points) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(points);
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::points(points));
 }
 
 void YGNodeStyleSetHeightPercent(YGNodeRef node, float percent) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(percent);
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::percent(percent));
 }
 
 void YGNodeStyleSetHeightAuto(YGNodeRef node) {
   updateIndexedStyleProp<&Style::dimension, &Style::setDimension>(
-      node, Dimension::Height, CompactValue::ofAuto());
+      node, Dimension::Height, value::ofAuto());
 }
 
 YGValue YGNodeStyleGetHeight(YGNodeConstRef node) {
@@ -361,15 +351,13 @@ YGValue YGNodeStyleGetHeight(YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetMinWidth(const YGNodeRef node, const float minWidth) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(minWidth);
   updateIndexedStyleProp<&Style::minDimension, &Style::setMinDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::points(minWidth));
 }
 
 void YGNodeStyleSetMinWidthPercent(const YGNodeRef node, const float minWidth) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(minWidth);
   updateIndexedStyleProp<&Style::minDimension, &Style::setMinDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::percent(minWidth));
 }
 
 YGValue YGNodeStyleGetMinWidth(const YGNodeConstRef node) {
@@ -377,17 +365,15 @@ YGValue YGNodeStyleGetMinWidth(const YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetMinHeight(const YGNodeRef node, const float minHeight) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(minHeight);
   updateIndexedStyleProp<&Style::minDimension, &Style::setMinDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::points(minHeight));
 }
 
 void YGNodeStyleSetMinHeightPercent(
     const YGNodeRef node,
     const float minHeight) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(minHeight);
   updateIndexedStyleProp<&Style::minDimension, &Style::setMinDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::percent(minHeight));
 }
 
 YGValue YGNodeStyleGetMinHeight(const YGNodeConstRef node) {
@@ -395,15 +381,13 @@ YGValue YGNodeStyleGetMinHeight(const YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetMaxWidth(const YGNodeRef node, const float maxWidth) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(maxWidth);
   updateIndexedStyleProp<&Style::maxDimension, &Style::setMaxDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::points(maxWidth));
 }
 
 void YGNodeStyleSetMaxWidthPercent(const YGNodeRef node, const float maxWidth) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(maxWidth);
   updateIndexedStyleProp<&Style::maxDimension, &Style::setMaxDimension>(
-      node, Dimension::Width, value);
+      node, Dimension::Width, value::percent(maxWidth));
 }
 
 YGValue YGNodeStyleGetMaxWidth(const YGNodeConstRef node) {
@@ -411,17 +395,15 @@ YGValue YGNodeStyleGetMaxWidth(const YGNodeConstRef node) {
 }
 
 void YGNodeStyleSetMaxHeight(const YGNodeRef node, const float maxHeight) {
-  auto value = CompactValue::ofMaybe<YGUnitPoint>(maxHeight);
   updateIndexedStyleProp<&Style::maxDimension, &Style::setMaxDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::points(maxHeight));
 }
 
 void YGNodeStyleSetMaxHeightPercent(
     const YGNodeRef node,
     const float maxHeight) {
-  auto value = CompactValue::ofMaybe<YGUnitPercent>(maxHeight);
   updateIndexedStyleProp<&Style::maxDimension, &Style::setMaxDimension>(
-      node, Dimension::Height, value);
+      node, Dimension::Height, value::percent(maxHeight));
 }
 
 YGValue YGNodeStyleGetMaxHeight(const YGNodeConstRef node) {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.cpp
index 7496e873e04ce4..9154fc6ce9cc87 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.cpp
@@ -12,51 +12,52 @@
 namespace facebook::yoga {
 
 static inline bool sizeIsExactAndMatchesOldMeasuredSize(
-    MeasureMode sizeMode,
+    SizingMode sizeMode,
     float size,
     float lastComputedSize) {
-  return sizeMode == MeasureMode::Exactly &&
+  return sizeMode == SizingMode::StretchFit &&
       yoga::inexactEquals(size, lastComputedSize);
 }
 
-static inline bool oldSizeIsUnspecifiedAndStillFits(
-    MeasureMode sizeMode,
+static inline bool oldSizeIsMaxContentAndStillFits(
+    SizingMode sizeMode,
     float size,
-    MeasureMode lastSizeMode,
+    SizingMode lastSizeMode,
     float lastComputedSize) {
-  return sizeMode == MeasureMode::AtMost &&
-      lastSizeMode == MeasureMode::Undefined &&
+  return sizeMode == SizingMode::FitContent &&
+      lastSizeMode == SizingMode::MaxContent &&
       (size >= lastComputedSize || yoga::inexactEquals(size, lastComputedSize));
 }
 
-static inline bool newMeasureSizeIsStricterAndStillValid(
-    MeasureMode sizeMode,
+static inline bool newSizeIsStricterAndStillValid(
+    SizingMode sizeMode,
     float size,
-    MeasureMode lastSizeMode,
+    SizingMode lastSizeMode,
     float lastSize,
     float lastComputedSize) {
-  return lastSizeMode == MeasureMode::AtMost &&
-      sizeMode == MeasureMode::AtMost && !std::isnan(lastSize) &&
-      !std::isnan(size) && !std::isnan(lastComputedSize) && lastSize > size &&
+  return lastSizeMode == SizingMode::FitContent &&
+      sizeMode == SizingMode::FitContent && yoga::isDefined(lastSize) &&
+      yoga::isDefined(size) && yoga::isDefined(lastComputedSize) &&
+      lastSize > size &&
       (lastComputedSize <= size || yoga::inexactEquals(size, lastComputedSize));
 }
 
 bool canUseCachedMeasurement(
-    const MeasureMode widthMode,
+    const SizingMode widthMode,
     const float availableWidth,
-    const MeasureMode heightMode,
+    const SizingMode heightMode,
     const float availableHeight,
-    const MeasureMode lastWidthMode,
+    const SizingMode lastWidthMode,
     const float lastAvailableWidth,
-    const MeasureMode lastHeightMode,
+    const SizingMode lastHeightMode,
     const float lastAvailableHeight,
     const float lastComputedWidth,
     const float lastComputedHeight,
     const float marginRow,
     const float marginColumn,
     const yoga::Config* const config) {
-  if ((!std::isnan(lastComputedHeight) && lastComputedHeight < 0) ||
-      (!std::isnan(lastComputedWidth) && lastComputedWidth < 0)) {
+  if ((yoga::isDefined(lastComputedHeight) && lastComputedHeight < 0) ||
+      ((yoga::isDefined(lastComputedWidth)) && lastComputedWidth < 0)) {
     return false;
   }
 
@@ -87,33 +88,32 @@ bool canUseCachedMeasurement(
       hasSameWidthSpec ||
       sizeIsExactAndMatchesOldMeasuredSize(
           widthMode, availableWidth - marginRow, lastComputedWidth) ||
-      oldSizeIsUnspecifiedAndStillFits(
+      oldSizeIsMaxContentAndStillFits(
           widthMode,
           availableWidth - marginRow,
           lastWidthMode,
           lastComputedWidth) ||
-      newMeasureSizeIsStricterAndStillValid(
+      newSizeIsStricterAndStillValid(
           widthMode,
           availableWidth - marginRow,
           lastWidthMode,
           lastAvailableWidth,
           lastComputedWidth);
 
-  const bool heightIsCompatible =
-      hasSameHeightSpec ||
+  const bool heightIsCompatible = hasSameHeightSpec ||
       sizeIsExactAndMatchesOldMeasuredSize(
-          heightMode, availableHeight - marginColumn, lastComputedHeight) ||
-      oldSizeIsUnspecifiedAndStillFits(
-          heightMode,
-          availableHeight - marginColumn,
-          lastHeightMode,
-          lastComputedHeight) ||
-      newMeasureSizeIsStricterAndStillValid(
-          heightMode,
-          availableHeight - marginColumn,
-          lastHeightMode,
-          lastAvailableHeight,
-          lastComputedHeight);
+                                      heightMode,
+                                      availableHeight - marginColumn,
+                                      lastComputedHeight) ||
+      oldSizeIsMaxContentAndStillFits(heightMode,
+                                      availableHeight - marginColumn,
+                                      lastHeightMode,
+                                      lastComputedHeight) ||
+      newSizeIsStricterAndStillValid(heightMode,
+                                     availableHeight - marginColumn,
+                                     lastHeightMode,
+                                     lastAvailableHeight,
+                                     lastComputedHeight);
 
   return widthIsCompatible && heightIsCompatible;
 }
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h
index 31b91d5f791ead..f8857eaf35c947 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Cache.h
@@ -7,19 +7,19 @@
 
 #pragma once
 
+#include <yoga/algorithm/SizingMode.h>
 #include <yoga/config/Config.h>
-#include <yoga/enums/MeasureMode.h>
 
 namespace facebook::yoga {
 
 bool canUseCachedMeasurement(
-    MeasureMode widthMode,
+    SizingMode widthMode,
     float availableWidth,
-    MeasureMode heightMode,
+    SizingMode heightMode,
     float availableHeight,
-    MeasureMode lastWidthMode,
+    SizingMode lastWidthMode,
     float lastAvailableWidth,
-    MeasureMode lastHeightMode,
+    SizingMode lastHeightMode,
     float lastAvailableHeight,
     float lastComputedWidth,
     float lastComputedHeight,
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
index c1026c9adcf823..f066dbdfc45213 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
@@ -22,6 +22,7 @@
 #include <yoga/algorithm/FlexLine.h>
 #include <yoga/algorithm/PixelGrid.h>
 #include <yoga/algorithm/ResolveValue.h>
+#include <yoga/algorithm/SizingMode.h>
 #include <yoga/debug/AssertFatal.h>
 #include <yoga/debug/Log.h>
 #include <yoga/debug/NodeToString.h>
@@ -39,8 +40,8 @@ bool calculateLayoutInternal(
     const float availableWidth,
     const float availableHeight,
     const Direction ownerDirection,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight,
     const bool performLayout,
@@ -97,22 +98,22 @@ static void constrainMaxSizeForMode(
     const enum FlexDirection axis,
     const float ownerAxisSize,
     const float ownerWidth,
-    MeasureMode* mode,
+    SizingMode* mode,
     float* size) {
   const FloatOptional maxSize =
       yoga::resolveValue(
           node->getStyle().maxDimension(dimension(axis)), ownerAxisSize) +
       FloatOptional(node->getMarginForAxis(axis, ownerWidth));
   switch (*mode) {
-    case MeasureMode::Exactly:
-    case MeasureMode::AtMost:
+    case SizingMode::StretchFit:
+    case SizingMode::FitContent:
       *size = (maxSize.isUndefined() || *size < maxSize.unwrap())
           ? *size
           : maxSize.unwrap();
       break;
-    case MeasureMode::Undefined:
+    case SizingMode::MaxContent:
       if (maxSize.isDefined()) {
-        *mode = MeasureMode::AtMost;
+        *mode = SizingMode::FitContent;
         *size = maxSize.unwrap();
       }
       break;
@@ -123,11 +124,11 @@ static void computeFlexBasisForChild(
     const yoga::Node* const node,
     yoga::Node* const child,
     const float width,
-    const MeasureMode widthMode,
+    const SizingMode widthMode,
     const float height,
     const float ownerWidth,
     const float ownerHeight,
-    const MeasureMode heightMode,
+    const SizingMode heightMode,
     const Direction direction,
     LayoutData& layoutMarkerData,
     const uint32_t depth,
@@ -140,8 +141,8 @@ static void computeFlexBasisForChild(
 
   float childWidth;
   float childHeight;
-  MeasureMode childWidthMeasureMode;
-  MeasureMode childHeightMeasureMode;
+  SizingMode childWidthSizingMode;
+  SizingMode childHeightSizingMode;
 
   const FloatOptional resolvedFlexBasis =
       yoga::resolveValue(child->resolveFlexBasisPtr(), mainAxisownerSize);
@@ -182,8 +183,8 @@ static void computeFlexBasisForChild(
     // basis).
     childWidth = YGUndefined;
     childHeight = YGUndefined;
-    childWidthMeasureMode = MeasureMode::Undefined;
-    childHeightMeasureMode = MeasureMode::Undefined;
+    childWidthSizingMode = SizingMode::MaxContent;
+    childHeightSizingMode = SizingMode::MaxContent;
 
     auto marginRow = child->getMarginForAxis(FlexDirection::Row, ownerWidth);
     auto marginColumn =
@@ -195,7 +196,7 @@ static void computeFlexBasisForChild(
               child->getResolvedDimension(Dimension::Width), ownerWidth)
               .unwrap() +
           marginRow;
-      childWidthMeasureMode = MeasureMode::Exactly;
+      childWidthSizingMode = SizingMode::StretchFit;
     }
     if (isColumnStyleDimDefined) {
       childHeight =
@@ -203,7 +204,7 @@ static void computeFlexBasisForChild(
               child->getResolvedDimension(Dimension::Height), ownerHeight)
               .unwrap() +
           marginColumn;
-      childHeightMeasureMode = MeasureMode::Exactly;
+      childHeightSizingMode = SizingMode::StretchFit;
     }
 
     // The W3C spec doesn't say anything about the 'overflow' property, but all
@@ -212,7 +213,7 @@ static void computeFlexBasisForChild(
         node->getStyle().overflow() != Overflow::Scroll) {
       if (yoga::isUndefined(childWidth) && yoga::isDefined(width)) {
         childWidth = width;
-        childWidthMeasureMode = MeasureMode::AtMost;
+        childWidthSizingMode = SizingMode::FitContent;
       }
     }
 
@@ -220,21 +221,21 @@ static void computeFlexBasisForChild(
         node->getStyle().overflow() != Overflow::Scroll) {
       if (yoga::isUndefined(childHeight) && yoga::isDefined(height)) {
         childHeight = height;
-        childHeightMeasureMode = MeasureMode::AtMost;
+        childHeightSizingMode = SizingMode::FitContent;
       }
     }
 
     const auto& childStyle = child->getStyle();
     if (childStyle.aspectRatio().isDefined()) {
-      if (!isMainAxisRow && childWidthMeasureMode == MeasureMode::Exactly) {
+      if (!isMainAxisRow && childWidthSizingMode == SizingMode::StretchFit) {
         childHeight = marginColumn +
             (childWidth - marginRow) / childStyle.aspectRatio().unwrap();
-        childHeightMeasureMode = MeasureMode::Exactly;
+        childHeightSizingMode = SizingMode::StretchFit;
       } else if (
-          isMainAxisRow && childHeightMeasureMode == MeasureMode::Exactly) {
+          isMainAxisRow && childHeightSizingMode == SizingMode::StretchFit) {
         childWidth = marginRow +
             (childHeight - marginColumn) * childStyle.aspectRatio().unwrap();
-        childWidthMeasureMode = MeasureMode::Exactly;
+        childWidthSizingMode = SizingMode::StretchFit;
       }
     }
 
@@ -242,35 +243,35 @@ static void computeFlexBasisForChild(
     // the cross axis to be measured exactly with the available inner width
 
     const bool hasExactWidth =
-        yoga::isDefined(width) && widthMode == MeasureMode::Exactly;
+        yoga::isDefined(width) && widthMode == SizingMode::StretchFit;
     const bool childWidthStretch =
         resolveChildAlignment(node, child) == Align::Stretch &&
-        childWidthMeasureMode != MeasureMode::Exactly;
+        childWidthSizingMode != SizingMode::StretchFit;
     if (!isMainAxisRow && !isRowStyleDimDefined && hasExactWidth &&
         childWidthStretch) {
       childWidth = width;
-      childWidthMeasureMode = MeasureMode::Exactly;
+      childWidthSizingMode = SizingMode::StretchFit;
       if (childStyle.aspectRatio().isDefined()) {
         childHeight =
             (childWidth - marginRow) / childStyle.aspectRatio().unwrap();
-        childHeightMeasureMode = MeasureMode::Exactly;
+        childHeightSizingMode = SizingMode::StretchFit;
       }
     }
 
     const bool hasExactHeight =
-        yoga::isDefined(height) && heightMode == MeasureMode::Exactly;
+        yoga::isDefined(height) && heightMode == SizingMode::StretchFit;
     const bool childHeightStretch =
         resolveChildAlignment(node, child) == Align::Stretch &&
-        childHeightMeasureMode != MeasureMode::Exactly;
+        childHeightSizingMode != SizingMode::StretchFit;
     if (isMainAxisRow && !isColumnStyleDimDefined && hasExactHeight &&
         childHeightStretch) {
       childHeight = height;
-      childHeightMeasureMode = MeasureMode::Exactly;
+      childHeightSizingMode = SizingMode::StretchFit;
 
       if (childStyle.aspectRatio().isDefined()) {
         childWidth =
             (childHeight - marginColumn) * childStyle.aspectRatio().unwrap();
-        childWidthMeasureMode = MeasureMode::Exactly;
+        childWidthSizingMode = SizingMode::StretchFit;
       }
     }
 
@@ -279,14 +280,14 @@ static void computeFlexBasisForChild(
         FlexDirection::Row,
         ownerWidth,
         ownerWidth,
-        &childWidthMeasureMode,
+        &childWidthSizingMode,
         &childWidth);
     constrainMaxSizeForMode(
         child,
         FlexDirection::Column,
         ownerHeight,
         ownerWidth,
-        &childHeightMeasureMode,
+        &childHeightSizingMode,
         &childHeight);
 
     // Measure the child
@@ -295,8 +296,8 @@ static void computeFlexBasisForChild(
         childWidth,
         childHeight,
         direction,
-        childWidthMeasureMode,
-        childHeightMeasureMode,
+        childWidthSizingMode,
+        childHeightSizingMode,
         ownerWidth,
         ownerHeight,
         false,
@@ -316,7 +317,7 @@ static void layoutAbsoluteChild(
     const yoga::Node* const node,
     yoga::Node* const child,
     const float width,
-    const MeasureMode widthMode,
+    const SizingMode widthMode,
     const float height,
     const Direction direction,
     LayoutData& layoutMarkerData,
@@ -329,8 +330,8 @@ static void layoutAbsoluteChild(
 
   float childWidth = YGUndefined;
   float childHeight = YGUndefined;
-  MeasureMode childWidthMeasureMode = MeasureMode::Undefined;
-  MeasureMode childHeightMeasureMode = MeasureMode::Undefined;
+  SizingMode childWidthSizingMode = SizingMode::MaxContent;
+  SizingMode childHeightSizingMode = SizingMode::MaxContent;
 
   auto marginRow = child->getMarginForAxis(FlexDirection::Row, width);
   auto marginColumn = child->getMarginForAxis(FlexDirection::Column, width);
@@ -395,22 +396,22 @@ static void layoutAbsoluteChild(
 
   // If we're still missing one or the other dimension, measure the content.
   if (yoga::isUndefined(childWidth) || yoga::isUndefined(childHeight)) {
-    childWidthMeasureMode = yoga::isUndefined(childWidth)
-        ? MeasureMode::Undefined
-        : MeasureMode::Exactly;
-    childHeightMeasureMode = yoga::isUndefined(childHeight)
-        ? MeasureMode::Undefined
-        : MeasureMode::Exactly;
+    childWidthSizingMode = yoga::isUndefined(childWidth)
+        ? SizingMode::MaxContent
+        : SizingMode::StretchFit;
+    childHeightSizingMode = yoga::isUndefined(childHeight)
+        ? SizingMode::MaxContent
+        : SizingMode::StretchFit;
 
     // If the size of the owner is defined then try to constrain the absolute
     // child to that size as well. This allows text within the absolute child to
     // wrap to the size of its owner. This is the same behavior as many browsers
     // implement.
     if (!isMainAxisRow && yoga::isUndefined(childWidth) &&
-        widthMode != MeasureMode::Undefined && yoga::isDefined(width) &&
+        widthMode != SizingMode::MaxContent && yoga::isDefined(width) &&
         width > 0) {
       childWidth = width;
-      childWidthMeasureMode = MeasureMode::AtMost;
+      childWidthSizingMode = SizingMode::FitContent;
     }
 
     calculateLayoutInternal(
@@ -418,8 +419,8 @@ static void layoutAbsoluteChild(
         childWidth,
         childHeight,
         direction,
-        childWidthMeasureMode,
-        childHeightMeasureMode,
+        childWidthSizingMode,
+        childHeightSizingMode,
         childWidth,
         childHeight,
         false,
@@ -438,8 +439,8 @@ static void layoutAbsoluteChild(
       childWidth,
       childHeight,
       direction,
-      MeasureMode::Exactly,
-      MeasureMode::Exactly,
+      SizingMode::StretchFit,
+      SizingMode::StretchFit,
       childWidth,
       childHeight,
       true,
@@ -534,8 +535,8 @@ static void measureNodeWithMeasureFunc(
     yoga::Node* const node,
     float availableWidth,
     float availableHeight,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight,
     LayoutData& layoutMarkerData,
@@ -545,10 +546,10 @@ static void measureNodeWithMeasureFunc(
       node->hasMeasureFunc(),
       "Expected node to have custom measure function");
 
-  if (widthMeasureMode == MeasureMode::Undefined) {
+  if (widthSizingMode == SizingMode::MaxContent) {
     availableWidth = YGUndefined;
   }
-  if (heightMeasureMode == MeasureMode::Undefined) {
+  if (heightSizingMode == SizingMode::MaxContent) {
     availableHeight = YGUndefined;
   }
 
@@ -567,8 +568,8 @@ static void measureNodeWithMeasureFunc(
       ? availableHeight
       : yoga::maxOrDefined(0.0f, availableHeight - paddingAndBorderAxisColumn);
 
-  if (widthMeasureMode == MeasureMode::Exactly &&
-      heightMeasureMode == MeasureMode::Exactly) {
+  if (widthSizingMode == SizingMode::StretchFit &&
+      heightSizingMode == SizingMode::StretchFit) {
     // Don't bother sizing the text if both dimensions are already defined.
     node->setLayoutMeasuredDimension(
         boundAxis(
@@ -587,7 +588,10 @@ static void measureNodeWithMeasureFunc(
 
     // Measure the text under the current constraints.
     const YGSize measuredSize = node->measure(
-        innerWidth, widthMeasureMode, innerHeight, heightMeasureMode);
+        innerWidth,
+        measureMode(widthSizingMode),
+        innerHeight,
+        measureMode(heightSizingMode));
 
     layoutMarkerData.measureCallbacks += 1;
     layoutMarkerData.measureCallbackReasonsCount[static_cast<size_t>(reason)] +=
@@ -596,9 +600,9 @@ static void measureNodeWithMeasureFunc(
     Event::publish<Event::MeasureCallbackEnd>(
         node,
         {innerWidth,
-         unscopedEnum(widthMeasureMode),
+         unscopedEnum(measureMode(widthSizingMode)),
          innerHeight,
-         unscopedEnum(heightMeasureMode),
+         unscopedEnum(measureMode(heightSizingMode)),
          measuredSize.width,
          measuredSize.height,
          reason});
@@ -607,8 +611,8 @@ static void measureNodeWithMeasureFunc(
         boundAxis(
             node,
             FlexDirection::Row,
-            (widthMeasureMode == MeasureMode::Undefined ||
-             widthMeasureMode == MeasureMode::AtMost)
+            (widthSizingMode == SizingMode::MaxContent ||
+             widthSizingMode == SizingMode::FitContent)
                 ? measuredSize.width + paddingAndBorderAxisRow
                 : availableWidth,
             ownerWidth,
@@ -619,8 +623,8 @@ static void measureNodeWithMeasureFunc(
         boundAxis(
             node,
             FlexDirection::Column,
-            (heightMeasureMode == MeasureMode::Undefined ||
-             heightMeasureMode == MeasureMode::AtMost)
+            (heightSizingMode == SizingMode::MaxContent ||
+             heightSizingMode == SizingMode::FitContent)
                 ? measuredSize.height + paddingAndBorderAxisColumn
                 : availableHeight,
             ownerHeight,
@@ -635,16 +639,16 @@ static void measureNodeWithoutChildren(
     yoga::Node* const node,
     const float availableWidth,
     const float availableHeight,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight) {
   const auto& padding = node->getLayout().padding;
   const auto& border = node->getLayout().border;
 
   float width = availableWidth;
-  if (widthMeasureMode == MeasureMode::Undefined ||
-      widthMeasureMode == MeasureMode::AtMost) {
+  if (widthSizingMode == SizingMode::MaxContent ||
+      widthSizingMode == SizingMode::FitContent) {
     width = padding[YGEdgeLeft] + padding[YGEdgeRight] + border[YGEdgeLeft] +
         border[YGEdgeRight];
   }
@@ -653,8 +657,8 @@ static void measureNodeWithoutChildren(
       Dimension::Width);
 
   float height = availableHeight;
-  if (heightMeasureMode == MeasureMode::Undefined ||
-      heightMeasureMode == MeasureMode::AtMost) {
+  if (heightSizingMode == SizingMode::MaxContent ||
+      heightSizingMode == SizingMode::FitContent) {
     height = padding[YGEdgeTop] + padding[YGEdgeBottom] + border[YGEdgeTop] +
         border[YGEdgeBottom];
   }
@@ -667,22 +671,22 @@ static bool measureNodeWithFixedSize(
     yoga::Node* const node,
     const float availableWidth,
     const float availableHeight,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight) {
   if ((yoga::isDefined(availableWidth) &&
-       widthMeasureMode == MeasureMode::AtMost && availableWidth <= 0.0f) ||
+       widthSizingMode == SizingMode::FitContent && availableWidth <= 0.0f) ||
       (yoga::isDefined(availableHeight) &&
-       heightMeasureMode == MeasureMode::AtMost && availableHeight <= 0.0f) ||
-      (widthMeasureMode == MeasureMode::Exactly &&
-       heightMeasureMode == MeasureMode::Exactly)) {
+       heightSizingMode == SizingMode::FitContent && availableHeight <= 0.0f) ||
+      (widthSizingMode == SizingMode::StretchFit &&
+       heightSizingMode == SizingMode::StretchFit)) {
     node->setLayoutMeasuredDimension(
         boundAxis(
             node,
             FlexDirection::Row,
             yoga::isUndefined(availableWidth) ||
-                    (widthMeasureMode == MeasureMode::AtMost &&
+                    (widthSizingMode == SizingMode::FitContent &&
                      availableWidth < 0.0f)
                 ? 0.0f
                 : availableWidth,
@@ -695,7 +699,7 @@ static bool measureNodeWithFixedSize(
             node,
             FlexDirection::Column,
             yoga::isUndefined(availableHeight) ||
-                    (heightMeasureMode == MeasureMode::AtMost &&
+                    (heightSizingMode == SizingMode::FitContent &&
                      availableHeight < 0.0f)
                 ? 0.0f
                 : availableHeight,
@@ -755,8 +759,8 @@ static float computeFlexBasisForChildren(
     yoga::Node* const node,
     const float availableInnerWidth,
     const float availableInnerHeight,
-    MeasureMode widthMeasureMode,
-    MeasureMode heightMeasureMode,
+    SizingMode widthSizingMode,
+    SizingMode heightSizingMode,
     Direction direction,
     FlexDirection mainAxis,
     bool performLayout,
@@ -766,12 +770,12 @@ static float computeFlexBasisForChildren(
   float totalOuterFlexBasis = 0.0f;
   YGNodeRef singleFlexChild = nullptr;
   const auto& children = node->getChildren();
-  MeasureMode measureModeMainDim =
-      isRow(mainAxis) ? widthMeasureMode : heightMeasureMode;
+  SizingMode sizingModeMainDim =
+      isRow(mainAxis) ? widthSizingMode : heightSizingMode;
   // If there is only one child with flexGrow + flexShrink it means we can set
   // the computedFlexBasis to 0 instead of measuring and shrinking / flexing the
   // child to exactly match the remaining space
-  if (measureModeMainDim == MeasureMode::Exactly) {
+  if (sizingModeMainDim == SizingMode::StretchFit) {
     for (auto child : children) {
       if (child->isNodeFlexible()) {
         if (singleFlexChild != nullptr ||
@@ -818,11 +822,11 @@ static float computeFlexBasisForChildren(
           node,
           child,
           availableInnerWidth,
-          widthMeasureMode,
+          widthSizingMode,
           availableInnerHeight,
           availableInnerWidth,
           availableInnerHeight,
-          heightMeasureMode,
+          heightSizingMode,
           direction,
           layoutMarkerData,
           depth,
@@ -852,7 +856,7 @@ static float distributeFreeSpaceSecondPass(
     const float availableInnerWidth,
     const float availableInnerHeight,
     const bool mainAxisOverflows,
-    const MeasureMode measureModeCrossDim,
+    const SizingMode sizingModeCrossDim,
     const bool performLayout,
     LayoutData& layoutMarkerData,
     const uint32_t depth,
@@ -925,35 +929,35 @@ static float distributeFreeSpaceSecondPass(
 
     float childCrossSize;
     float childMainSize = updatedMainSize + marginMain;
-    MeasureMode childCrossMeasureMode;
-    MeasureMode childMainMeasureMode = MeasureMode::Exactly;
+    SizingMode childCrossSizingMode;
+    SizingMode childMainSizingMode = SizingMode::StretchFit;
 
     const auto& childStyle = currentLineChild->getStyle();
     if (childStyle.aspectRatio().isDefined()) {
       childCrossSize = isMainAxisRow
           ? (childMainSize - marginMain) / childStyle.aspectRatio().unwrap()
           : (childMainSize - marginMain) * childStyle.aspectRatio().unwrap();
-      childCrossMeasureMode = MeasureMode::Exactly;
+      childCrossSizingMode = SizingMode::StretchFit;
 
       childCrossSize += marginCross;
     } else if (
         !std::isnan(availableInnerCrossDim) &&
         !styleDefinesDimension(
             currentLineChild, crossAxis, availableInnerCrossDim) &&
-        measureModeCrossDim == MeasureMode::Exactly &&
+        sizingModeCrossDim == SizingMode::StretchFit &&
         !(isNodeFlexWrap && mainAxisOverflows) &&
         resolveChildAlignment(node, currentLineChild) == Align::Stretch &&
         currentLineChild->getFlexStartMarginValue(crossAxis).unit !=
             YGUnitAuto &&
         currentLineChild->marginTrailingValue(crossAxis).unit != YGUnitAuto) {
       childCrossSize = availableInnerCrossDim;
-      childCrossMeasureMode = MeasureMode::Exactly;
+      childCrossSizingMode = SizingMode::StretchFit;
     } else if (!styleDefinesDimension(
                    currentLineChild, crossAxis, availableInnerCrossDim)) {
       childCrossSize = availableInnerCrossDim;
-      childCrossMeasureMode = yoga::isUndefined(childCrossSize)
-          ? MeasureMode::Undefined
-          : MeasureMode::AtMost;
+      childCrossSizingMode = yoga::isUndefined(childCrossSize)
+          ? SizingMode::MaxContent
+          : SizingMode::FitContent;
     } else {
       childCrossSize =
           yoga::resolveValue(
@@ -964,11 +968,11 @@ static float distributeFreeSpaceSecondPass(
       const bool isLoosePercentageMeasurement =
           currentLineChild->getResolvedDimension(dimension(crossAxis)).unit ==
               YGUnitPercent &&
-          measureModeCrossDim != MeasureMode::Exactly;
-      childCrossMeasureMode =
+          sizingModeCrossDim != SizingMode::StretchFit;
+      childCrossSizingMode =
           yoga::isUndefined(childCrossSize) || isLoosePercentageMeasurement
-          ? MeasureMode::Undefined
-          : MeasureMode::Exactly;
+          ? SizingMode::MaxContent
+          : SizingMode::StretchFit;
     }
 
     constrainMaxSizeForMode(
@@ -976,14 +980,14 @@ static float distributeFreeSpaceSecondPass(
         mainAxis,
         availableInnerMainDim,
         availableInnerWidth,
-        &childMainMeasureMode,
+        &childMainSizingMode,
         &childMainSize);
     constrainMaxSizeForMode(
         currentLineChild,
         crossAxis,
         availableInnerCrossDim,
         availableInnerWidth,
-        &childCrossMeasureMode,
+        &childCrossSizingMode,
         &childCrossSize);
 
     const bool requiresStretchLayout =
@@ -997,10 +1001,10 @@ static float distributeFreeSpaceSecondPass(
     const float childWidth = isMainAxisRow ? childMainSize : childCrossSize;
     const float childHeight = !isMainAxisRow ? childMainSize : childCrossSize;
 
-    const MeasureMode childWidthMeasureMode =
-        isMainAxisRow ? childMainMeasureMode : childCrossMeasureMode;
-    const MeasureMode childHeightMeasureMode =
-        !isMainAxisRow ? childMainMeasureMode : childCrossMeasureMode;
+    const SizingMode childWidthSizingMode =
+        isMainAxisRow ? childMainSizingMode : childCrossSizingMode;
+    const SizingMode childHeightSizingMode =
+        !isMainAxisRow ? childMainSizingMode : childCrossSizingMode;
 
     const bool isLayoutPass = performLayout && !requiresStretchLayout;
     // Recursively call the layout algorithm for this child with the updated
@@ -1010,8 +1014,8 @@ static float distributeFreeSpaceSecondPass(
         childWidth,
         childHeight,
         node->getLayout().direction(),
-        childWidthMeasureMode,
-        childHeightMeasureMode,
+        childWidthSizingMode,
+        childHeightSizingMode,
         availableInnerWidth,
         availableInnerHeight,
         isLayoutPass,
@@ -1144,7 +1148,7 @@ static void resolveFlexibleLength(
     const float availableInnerWidth,
     const float availableInnerHeight,
     const bool mainAxisOverflows,
-    const MeasureMode measureModeCrossDim,
+    const SizingMode sizingModeCrossDim,
     const bool performLayout,
     LayoutData& layoutMarkerData,
     const uint32_t depth,
@@ -1170,7 +1174,7 @@ static void resolveFlexibleLength(
       availableInnerWidth,
       availableInnerHeight,
       mainAxisOverflows,
-      measureModeCrossDim,
+      sizingModeCrossDim,
       performLayout,
       layoutMarkerData,
       depth,
@@ -1186,8 +1190,8 @@ static void justifyMainAxis(
     const FlexDirection mainAxis,
     const FlexDirection crossAxis,
     const Direction direction,
-    const MeasureMode measureModeMainDim,
-    const MeasureMode measureModeCrossDim,
+    const SizingMode sizingModeMainDim,
+    const SizingMode sizingModeCrossDim,
     const float mainAxisownerSize,
     const float ownerWidth,
     const float availableInnerMainDim,
@@ -1208,7 +1212,7 @@ static void justifyMainAxis(
   const float gap = node->getGapForAxis(mainAxis);
   // If we are using "at most" rules in the main axis, make sure that
   // remainingFreeSpace is 0 when min main dimension is not given
-  if (measureModeMainDim == MeasureMode::AtMost &&
+  if (sizingModeMainDim == SizingMode::FitContent &&
       flexLine.layout.remainingFreeSpace > 0) {
     if (style.minDimension(dimension(mainAxis)).isDefined() &&
         yoga::resolveValue(
@@ -1340,7 +1344,7 @@ static void justifyMainAxis(
               static_cast<float>(numberOfAutoMarginsOnCurrentLine);
         }
         bool canSkipFlex =
-            !performLayout && measureModeCrossDim == MeasureMode::Exactly;
+            !performLayout && sizingModeCrossDim == SizingMode::StretchFit;
         if (canSkipFlex) {
           // If we skipped the flex step, then we can't rely on the measuredDims
           // because they weren't computed. This means we can't call
@@ -1432,9 +1436,9 @@ static void justifyMainAxis(
 //      depends on layout flags
 //    - ownerDirection: the inline (text) direction within the owner
 //      (left-to-right or right-to-left)
-//    - widthMeasureMode: indicates the sizing rules for the width (see below
+//    - widthSizingMode: indicates the sizing rules for the width (see below
 //      for explanation)
-//    - heightMeasureMode: indicates the sizing rules for the height (see below
+//    - heightSizingMode: indicates the sizing rules for the height (see below
 //      for explanation)
 //    - performLayout: specifies whether the caller is interested in just the
 //      dimensions of the node or it requires the entire node and its subtree to
@@ -1449,26 +1453,17 @@ static void justifyMainAxis(
 //    layout.measuredDimensions field includes any border or padding for the
 //    node but does not include margins.
 //
-//    The spec describes four different layout modes: "fill available", "max
-//    content", "min content", and "fit content". Of these, we don't use "min
-//    content" because we don't support default minimum main sizes (see above
-//    for details). Each of our measure modes maps to a layout mode from the
-//    spec (https://www.w3.org/TR/CSS3-sizing/#terms):
-//      - MeasureMode::Undefined: max content
-//      - MeasureMode::Exactly: fill available
-//      - MeasureMode::AtMost: fit content
-//
 //    When calling calculateLayoutImpl and calculateLayoutInternal, if the
 //    caller passes an available size of undefined then it must also pass a
-//    measure mode of MeasureMode::Undefined in that dimension.
+//    measure mode of SizingMode::MaxContent in that dimension.
 //
 static void calculateLayoutImpl(
     yoga::Node* const node,
     const float availableWidth,
     const float availableHeight,
     const Direction ownerDirection,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight,
     const bool performLayout,
@@ -1479,17 +1474,17 @@ static void calculateLayoutImpl(
   yoga::assertFatalWithNode(
       node,
       yoga::isUndefined(availableWidth)
-          ? widthMeasureMode == MeasureMode::Undefined
+          ? widthSizingMode == SizingMode::MaxContent
           : true,
-      "availableWidth is indefinite so widthMeasureMode must be "
-      "MeasureMode::Undefined");
+      "availableWidth is indefinite so widthSizingMode must be "
+      "SizingMode::MaxContent");
   yoga::assertFatalWithNode(
       node,
       yoga::isUndefined(availableHeight)
-          ? heightMeasureMode == MeasureMode::Undefined
+          ? heightSizingMode == SizingMode::MaxContent
           : true,
-      "availableHeight is indefinite so heightMeasureMode must be "
-      "MeasureMode::Undefined");
+      "availableHeight is indefinite so heightSizingMode must be "
+      "SizingMode::MaxContent");
 
   (performLayout ? layoutMarkerData.layouts : layoutMarkerData.measures) += 1;
 
@@ -1549,8 +1544,8 @@ static void calculateLayoutImpl(
         node,
         availableWidth - marginAxisRow,
         availableHeight - marginAxisColumn,
-        widthMeasureMode,
-        heightMeasureMode,
+        widthSizingMode,
+        heightSizingMode,
         ownerWidth,
         ownerHeight,
         layoutMarkerData,
@@ -1564,8 +1559,8 @@ static void calculateLayoutImpl(
         node,
         availableWidth - marginAxisRow,
         availableHeight - marginAxisColumn,
-        widthMeasureMode,
-        heightMeasureMode,
+        widthSizingMode,
+        heightSizingMode,
         ownerWidth,
         ownerHeight);
     return;
@@ -1578,8 +1573,8 @@ static void calculateLayoutImpl(
           node,
           availableWidth - marginAxisRow,
           availableHeight - marginAxisColumn,
-          widthMeasureMode,
-          heightMeasureMode,
+          widthSizingMode,
+          heightSizingMode,
           ownerWidth,
           ownerHeight)) {
     return;
@@ -1608,10 +1603,10 @@ static void calculateLayoutImpl(
   const float leadingPaddingAndBorderCross =
       node->getInlineStartPaddingAndBorder(crossAxis, direction, ownerWidth);
 
-  MeasureMode measureModeMainDim =
-      isMainAxisRow ? widthMeasureMode : heightMeasureMode;
-  MeasureMode measureModeCrossDim =
-      isMainAxisRow ? heightMeasureMode : widthMeasureMode;
+  SizingMode sizingModeMainDim =
+      isMainAxisRow ? widthSizingMode : heightSizingMode;
+  SizingMode sizingModeCrossDim =
+      isMainAxisRow ? heightSizingMode : widthSizingMode;
 
   const float paddingAndBorderAxisRow =
       isMainAxisRow ? paddingAndBorderAxisMain : paddingAndBorderAxisCross;
@@ -1646,8 +1641,8 @@ static void calculateLayoutImpl(
       node,
       availableInnerWidth,
       availableInnerHeight,
-      widthMeasureMode,
-      heightMeasureMode,
+      widthSizingMode,
+      heightSizingMode,
       direction,
       mainAxis,
       performLayout,
@@ -1661,12 +1656,12 @@ static void calculateLayoutImpl(
   }
 
   const bool mainAxisOverflows =
-      (measureModeMainDim != MeasureMode::Undefined) &&
+      (sizingModeMainDim != SizingMode::MaxContent) &&
       totalMainDim > availableInnerMainDim;
 
   if (isNodeFlexWrap && mainAxisOverflows &&
-      measureModeMainDim == MeasureMode::AtMost) {
-    measureModeMainDim = MeasureMode::Exactly;
+      sizingModeMainDim == SizingMode::FitContent) {
+    sizingModeMainDim = SizingMode::StretchFit;
   }
   // STEP 4: COLLECT FLEX ITEMS INTO FLEX LINES
 
@@ -1700,7 +1695,7 @@ static void calculateLayoutImpl(
     // If we don't need to measure the cross axis, we can skip the entire flex
     // step.
     const bool canSkipFlex =
-        !performLayout && measureModeCrossDim == MeasureMode::Exactly;
+        !performLayout && sizingModeCrossDim == SizingMode::StretchFit;
 
     // STEP 5: RESOLVING FLEXIBLE LENGTHS ON MAIN AXIS
     // Calculate the remaining available space that needs to be allocated. If
@@ -1710,7 +1705,7 @@ static void calculateLayoutImpl(
     bool sizeBasedOnContent = false;
     // If we don't measure with exact main dimension we want to ensure we don't
     // violate min and max
-    if (measureModeMainDim != MeasureMode::Exactly) {
+    if (sizingModeMainDim != SizingMode::StretchFit) {
       const auto& style = node->getStyle();
       const float minInnerWidth =
           yoga::resolveValue(style.minDimension(Dimension::Width), ownerWidth)
@@ -1783,7 +1778,7 @@ static void calculateLayoutImpl(
           availableInnerWidth,
           availableInnerHeight,
           mainAxisOverflows,
-          measureModeCrossDim,
+          sizingModeCrossDim,
           performLayout,
           layoutMarkerData,
           depth,
@@ -1808,8 +1803,8 @@ static void calculateLayoutImpl(
         mainAxis,
         crossAxis,
         direction,
-        measureModeMainDim,
-        measureModeCrossDim,
+        sizingModeMainDim,
+        sizingModeCrossDim,
         mainAxisownerSize,
         ownerWidth,
         availableInnerMainDim,
@@ -1818,8 +1813,8 @@ static void calculateLayoutImpl(
         performLayout);
 
     float containerCrossAxis = availableInnerCrossDim;
-    if (measureModeCrossDim == MeasureMode::Undefined ||
-        measureModeCrossDim == MeasureMode::AtMost) {
+    if (sizingModeCrossDim == SizingMode::MaxContent ||
+        sizingModeCrossDim == SizingMode::FitContent) {
       // Compute the cross axis from the max cross dimension of the children.
       containerCrossAxis =
           boundAxis(
@@ -1832,7 +1827,7 @@ static void calculateLayoutImpl(
     }
 
     // If there's no flex wrap, the cross dimension is defined by the container.
-    if (!isNodeFlexWrap && measureModeCrossDim == MeasureMode::Exactly) {
+    if (!isNodeFlexWrap && sizingModeCrossDim == SizingMode::StretchFit) {
       flexLine.layout.crossDim = availableInnerCrossDim;
     }
 
@@ -1911,21 +1906,21 @@ static void calculateLayoutImpl(
               childMainSize +=
                   child->getMarginForAxis(mainAxis, availableInnerWidth);
 
-              MeasureMode childMainMeasureMode = MeasureMode::Exactly;
-              MeasureMode childCrossMeasureMode = MeasureMode::Exactly;
+              SizingMode childMainSizingMode = SizingMode::StretchFit;
+              SizingMode childCrossSizingMode = SizingMode::StretchFit;
               constrainMaxSizeForMode(
                   child,
                   mainAxis,
                   availableInnerMainDim,
                   availableInnerWidth,
-                  &childMainMeasureMode,
+                  &childMainSizingMode,
                   &childMainSize);
               constrainMaxSizeForMode(
                   child,
                   crossAxis,
                   availableInnerCrossDim,
                   availableInnerWidth,
-                  &childCrossMeasureMode,
+                  &childCrossSizingMode,
                   &childCrossSize);
 
               const float childWidth =
@@ -1936,24 +1931,24 @@ static void calculateLayoutImpl(
               auto alignContent = node->getStyle().alignContent();
               auto crossAxisDoesNotGrow =
                   alignContent != Align::Stretch && isNodeFlexWrap;
-              const MeasureMode childWidthMeasureMode =
+              const SizingMode childWidthSizingMode =
                   yoga::isUndefined(childWidth) ||
                       (!isMainAxisRow && crossAxisDoesNotGrow)
-                  ? MeasureMode::Undefined
-                  : MeasureMode::Exactly;
-              const MeasureMode childHeightMeasureMode =
+                  ? SizingMode::MaxContent
+                  : SizingMode::StretchFit;
+              const SizingMode childHeightSizingMode =
                   yoga::isUndefined(childHeight) ||
                       (isMainAxisRow && crossAxisDoesNotGrow)
-                  ? MeasureMode::Undefined
-                  : MeasureMode::Exactly;
+                  ? SizingMode::MaxContent
+                  : SizingMode::StretchFit;
 
               calculateLayoutInternal(
                   child,
                   childWidth,
                   childHeight,
                   direction,
-                  childWidthMeasureMode,
-                  childHeightMeasureMode,
+                  childWidthSizingMode,
+                  childHeightSizingMode,
                   availableInnerWidth,
                   availableInnerHeight,
                   true,
@@ -2174,8 +2169,8 @@ static void calculateLayoutImpl(
                         childWidth,
                         childHeight,
                         direction,
-                        MeasureMode::Exactly,
-                        MeasureMode::Exactly,
+                        SizingMode::StretchFit,
+                        SizingMode::StretchFit,
                         availableInnerWidth,
                         availableInnerHeight,
                         true,
@@ -2234,9 +2229,9 @@ static void calculateLayoutImpl(
 
   // If the user didn't specify a width or height for the node, set the
   // dimensions based on the children.
-  if (measureModeMainDim == MeasureMode::Undefined ||
+  if (sizingModeMainDim == SizingMode::MaxContent ||
       (node->getStyle().overflow() != Overflow::Scroll &&
-       measureModeMainDim == MeasureMode::AtMost)) {
+       sizingModeMainDim == SizingMode::FitContent)) {
     // Clamp the size to the min/max size, if specified, and make sure it
     // doesn't go below the padding and border amount.
     node->setLayoutMeasuredDimension(
@@ -2245,7 +2240,7 @@ static void calculateLayoutImpl(
         dimension(mainAxis));
 
   } else if (
-      measureModeMainDim == MeasureMode::AtMost &&
+      sizingModeMainDim == SizingMode::FitContent &&
       node->getStyle().overflow() == Overflow::Scroll) {
     node->setLayoutMeasuredDimension(
         yoga::maxOrDefined(
@@ -2261,9 +2256,9 @@ static void calculateLayoutImpl(
         dimension(mainAxis));
   }
 
-  if (measureModeCrossDim == MeasureMode::Undefined ||
+  if (sizingModeCrossDim == SizingMode::MaxContent ||
       (node->getStyle().overflow() != Overflow::Scroll &&
-       measureModeCrossDim == MeasureMode::AtMost)) {
+       sizingModeCrossDim == SizingMode::FitContent)) {
     // Clamp the size to the min/max size, if specified, and make sure it
     // doesn't go below the padding and border amount.
     node->setLayoutMeasuredDimension(
@@ -2276,7 +2271,7 @@ static void calculateLayoutImpl(
         dimension(crossAxis));
 
   } else if (
-      measureModeCrossDim == MeasureMode::AtMost &&
+      sizingModeCrossDim == SizingMode::FitContent &&
       node->getStyle().overflow() == Overflow::Scroll) {
     node->setLayoutMeasuredDimension(
         yoga::maxOrDefined(
@@ -2325,7 +2320,7 @@ static void calculateLayoutImpl(
           absolutePercentageAgainstPaddingEdge
               ? node->getLayout().measuredDimension(Dimension::Width)
               : availableInnerWidth,
-          isMainAxisRow ? measureModeMainDim : measureModeCrossDim,
+          isMainAxisRow ? sizingModeMainDim : sizingModeCrossDim,
           absolutePercentageAgainstPaddingEdge
               ? node->getLayout().measuredDimension(Dimension::Height)
               : availableInnerHeight,
@@ -2375,15 +2370,15 @@ static const char* spacerWithLength(const unsigned long level) {
   }
 }
 
-static const char* measureModeName(
-    const MeasureMode mode,
+static const char* sizingModeName(
+    const SizingMode mode,
     const bool performLayout) {
   switch (mode) {
-    case MeasureMode::Undefined:
+    case SizingMode::MaxContent:
       return performLayout ? "LAY_UNDEFINED" : "UNDEFINED";
-    case MeasureMode::Exactly:
+    case SizingMode::StretchFit:
       return performLayout ? "LAY_EXACTLY" : "EXACTLY";
-    case MeasureMode::AtMost:
+    case SizingMode::FitContent:
       return performLayout ? "LAY_AT_MOST" : "AT_MOST";
   }
   return "";
@@ -2402,8 +2397,8 @@ bool calculateLayoutInternal(
     const float availableWidth,
     const float availableHeight,
     const Direction ownerDirection,
-    const MeasureMode widthMeasureMode,
-    const MeasureMode heightMeasureMode,
+    const SizingMode widthSizingMode,
+    const SizingMode heightSizingMode,
     const float ownerWidth,
     const float ownerHeight,
     const bool performLayout,
@@ -2424,8 +2419,8 @@ bool calculateLayoutInternal(
     layout->nextCachedMeasurementsIndex = 0;
     layout->cachedLayout.availableWidth = -1;
     layout->cachedLayout.availableHeight = -1;
-    layout->cachedLayout.widthMeasureMode = MeasureMode::Undefined;
-    layout->cachedLayout.heightMeasureMode = MeasureMode::Undefined;
+    layout->cachedLayout.widthSizingMode = SizingMode::MaxContent;
+    layout->cachedLayout.heightSizingMode = SizingMode::MaxContent;
     layout->cachedLayout.computedWidth = -1;
     layout->cachedLayout.computedHeight = -1;
   }
@@ -2448,13 +2443,13 @@ bool calculateLayoutInternal(
 
     // First, try to use the layout cache.
     if (canUseCachedMeasurement(
-            widthMeasureMode,
+            widthSizingMode,
             availableWidth,
-            heightMeasureMode,
+            heightSizingMode,
             availableHeight,
-            layout->cachedLayout.widthMeasureMode,
+            layout->cachedLayout.widthSizingMode,
             layout->cachedLayout.availableWidth,
-            layout->cachedLayout.heightMeasureMode,
+            layout->cachedLayout.heightSizingMode,
             layout->cachedLayout.availableHeight,
             layout->cachedLayout.computedWidth,
             layout->cachedLayout.computedHeight,
@@ -2466,13 +2461,13 @@ bool calculateLayoutInternal(
       // Try to use the measurement cache.
       for (size_t i = 0; i < layout->nextCachedMeasurementsIndex; i++) {
         if (canUseCachedMeasurement(
-                widthMeasureMode,
+                widthSizingMode,
                 availableWidth,
-                heightMeasureMode,
+                heightSizingMode,
                 availableHeight,
-                layout->cachedMeasurements[i].widthMeasureMode,
+                layout->cachedMeasurements[i].widthSizingMode,
                 layout->cachedMeasurements[i].availableWidth,
-                layout->cachedMeasurements[i].heightMeasureMode,
+                layout->cachedMeasurements[i].heightSizingMode,
                 layout->cachedMeasurements[i].availableHeight,
                 layout->cachedMeasurements[i].computedWidth,
                 layout->cachedMeasurements[i].computedHeight,
@@ -2489,8 +2484,8 @@ bool calculateLayoutInternal(
             layout->cachedLayout.availableWidth, availableWidth) &&
         yoga::inexactEquals(
             layout->cachedLayout.availableHeight, availableHeight) &&
-        layout->cachedLayout.widthMeasureMode == widthMeasureMode &&
-        layout->cachedLayout.heightMeasureMode == heightMeasureMode) {
+        layout->cachedLayout.widthSizingMode == widthSizingMode &&
+        layout->cachedLayout.heightSizingMode == heightSizingMode) {
       cachedResults = &layout->cachedLayout;
     }
   } else {
@@ -2499,9 +2494,8 @@ bool calculateLayoutInternal(
               layout->cachedMeasurements[i].availableWidth, availableWidth) &&
           yoga::inexactEquals(
               layout->cachedMeasurements[i].availableHeight, availableHeight) &&
-          layout->cachedMeasurements[i].widthMeasureMode == widthMeasureMode &&
-          layout->cachedMeasurements[i].heightMeasureMode ==
-              heightMeasureMode) {
+          layout->cachedMeasurements[i].widthSizingMode == widthSizingMode &&
+          layout->cachedMeasurements[i].heightSizingMode == heightSizingMode) {
         cachedResults = &layout->cachedMeasurements[i];
         break;
       }
@@ -2529,8 +2523,8 @@ bool calculateLayoutInternal(
           node,
           LogLevel::Verbose,
           "wm: %s, hm: %s, aw: %f ah: %f => d: (%f, %f) %s\n",
-          measureModeName(widthMeasureMode, performLayout),
-          measureModeName(heightMeasureMode, performLayout),
+          sizingModeName(widthSizingMode, performLayout),
+          sizingModeName(heightSizingMode, performLayout),
           availableWidth,
           availableHeight,
           cachedResults->computedWidth,
@@ -2551,8 +2545,8 @@ bool calculateLayoutInternal(
           node,
           LogLevel::Verbose,
           "wm: %s, hm: %s, aw: %f ah: %f %s\n",
-          measureModeName(widthMeasureMode, performLayout),
-          measureModeName(heightMeasureMode, performLayout),
+          sizingModeName(widthSizingMode, performLayout),
+          sizingModeName(heightSizingMode, performLayout),
           availableWidth,
           availableHeight,
           LayoutPassReasonToString(reason));
@@ -2563,8 +2557,8 @@ bool calculateLayoutInternal(
         availableWidth,
         availableHeight,
         ownerDirection,
-        widthMeasureMode,
-        heightMeasureMode,
+        widthSizingMode,
+        heightSizingMode,
         ownerWidth,
         ownerHeight,
         performLayout,
@@ -2586,8 +2580,8 @@ bool calculateLayoutInternal(
           node,
           LogLevel::Verbose,
           "wm: %s, hm: %s, d: (%f, %f) %s\n",
-          measureModeName(widthMeasureMode, performLayout),
-          measureModeName(heightMeasureMode, performLayout),
+          sizingModeName(widthSizingMode, performLayout),
+          sizingModeName(heightSizingMode, performLayout),
           layout->measuredDimension(Dimension::Width),
           layout->measuredDimension(Dimension::Height),
           LayoutPassReasonToString(reason));
@@ -2621,8 +2615,8 @@ bool calculateLayoutInternal(
 
       newCacheEntry->availableWidth = availableWidth;
       newCacheEntry->availableHeight = availableHeight;
-      newCacheEntry->widthMeasureMode = widthMeasureMode;
-      newCacheEntry->heightMeasureMode = heightMeasureMode;
+      newCacheEntry->widthSizingMode = widthSizingMode;
+      newCacheEntry->heightSizingMode = heightSizingMode;
       newCacheEntry->computedWidth =
           layout->measuredDimension(Dimension::Width);
       newCacheEntry->computedHeight =
@@ -2672,7 +2666,7 @@ void calculateLayout(
   gCurrentGenerationCount.fetch_add(1, std::memory_order_relaxed);
   node->resolveDimension();
   float width = YGUndefined;
-  MeasureMode widthMeasureMode = MeasureMode::Undefined;
+  SizingMode widthSizingMode = SizingMode::MaxContent;
   const auto& style = node->getStyle();
   if (styleDefinesDimension(node, FlexDirection::Row, ownerWidth)) {
     width =
@@ -2681,21 +2675,21 @@ void calculateLayout(
              ownerWidth)
              .unwrap() +
          node->getMarginForAxis(FlexDirection::Row, ownerWidth));
-    widthMeasureMode = MeasureMode::Exactly;
+    widthSizingMode = SizingMode::StretchFit;
   } else if (yoga::resolveValue(
                  style.maxDimension(Dimension::Width), ownerWidth)
                  .isDefined()) {
     width = yoga::resolveValue(style.maxDimension(Dimension::Width), ownerWidth)
                 .unwrap();
-    widthMeasureMode = MeasureMode::AtMost;
+    widthSizingMode = SizingMode::FitContent;
   } else {
     width = ownerWidth;
-    widthMeasureMode = yoga::isUndefined(width) ? MeasureMode::Undefined
-                                                : MeasureMode::Exactly;
+    widthSizingMode = yoga::isUndefined(width) ? SizingMode::MaxContent
+                                               : SizingMode::StretchFit;
   }
 
   float height = YGUndefined;
-  MeasureMode heightMeasureMode = MeasureMode::Undefined;
+  SizingMode heightSizingMode = SizingMode::MaxContent;
   if (styleDefinesDimension(node, FlexDirection::Column, ownerHeight)) {
     height =
         (yoga::resolveValue(
@@ -2703,26 +2697,26 @@ void calculateLayout(
              ownerHeight)
              .unwrap() +
          node->getMarginForAxis(FlexDirection::Column, ownerWidth));
-    heightMeasureMode = MeasureMode::Exactly;
+    heightSizingMode = SizingMode::StretchFit;
   } else if (yoga::resolveValue(
                  style.maxDimension(Dimension::Height), ownerHeight)
                  .isDefined()) {
     height =
         yoga::resolveValue(style.maxDimension(Dimension::Height), ownerHeight)
             .unwrap();
-    heightMeasureMode = MeasureMode::AtMost;
+    heightSizingMode = SizingMode::FitContent;
   } else {
     height = ownerHeight;
-    heightMeasureMode = yoga::isUndefined(height) ? MeasureMode::Undefined
-                                                  : MeasureMode::Exactly;
+    heightSizingMode = yoga::isUndefined(height) ? SizingMode::MaxContent
+                                                 : SizingMode::StretchFit;
   }
   if (calculateLayoutInternal(
           node,
           width,
           height,
           ownerDirection,
-          widthMeasureMode,
-          heightMeasureMode,
+          widthSizingMode,
+          heightSizingMode,
           ownerWidth,
           ownerHeight,
           true,
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h
index 4e03d0c50d4d9a..a2d650b237a0cb 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/ResolveValue.h
@@ -10,7 +10,7 @@
 #include <yoga/Yoga.h>
 
 #include <yoga/numeric/FloatOptional.h>
-#include <yoga/style/CompactValue.h>
+#include <yoga/style/Style.h>
 
 namespace facebook::yoga {
 
@@ -25,7 +25,7 @@ inline FloatOptional resolveValue(const YGValue value, const float ownerSize) {
   }
 }
 
-inline FloatOptional resolveValue(CompactValue value, float ownerSize) {
+inline FloatOptional resolveValue(Style::Length value, float ownerSize) {
   return resolveValue((YGValue)value, ownerSize);
 }
 
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/SizingMode.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/SizingMode.h
new file mode 100644
index 00000000000000..bd725df13ac68b
--- /dev/null
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/SizingMode.h
@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <yoga/debug/AssertFatal.h>
+#include <yoga/enums/MeasureMode.h>
+
+namespace facebook::yoga {
+
+/**
+ * Corresponds to a CSS auto box sizes. Missing "min-content", as Yoga does not
+ * current support automatic minimum sizes.
+ * https://www.w3.org/TR/css-sizing-3/#auto-box-sizes
+ * https://www.w3.org/TR/css-flexbox-1/#min-size-auto
+ */
+enum class SizingMode {
+  /**
+   * The size a box would take if its outer size filled the available space in
+   * the given axis; in other words, the stretch fit into the available space,
+   * if that is definite. Undefined if the available space is indefinite.
+   */
+  StretchFit,
+
+  /**
+   * A box’s “ideal” size in a given axis when given infinite available space.
+   * Usually this is the smallest size the box could take in that axis while
+   * still fitting around its contents, i.e. minimizing unfilled space while
+   * avoiding overflow.
+   */
+  MaxContent,
+
+  /**
+   * If the available space in a given axis is definite, equal to
+   * clamp(min-content size, stretch-fit size, max-content size) (i.e.
+   * max(min-content size, min(max-content size, stretch-fit size))). When
+   * sizing under a min-content constraint, equal to the min-content size.
+   * Otherwise, equal to the max-content size in that axis.
+   */
+  FitContent,
+};
+
+inline MeasureMode measureMode(SizingMode mode) {
+  switch (mode) {
+    case SizingMode::StretchFit:
+      return MeasureMode::Exactly;
+    case SizingMode::MaxContent:
+      return MeasureMode::Undefined;
+    case SizingMode::FitContent:
+      return MeasureMode::AtMost;
+  }
+
+  fatalWithMessage("Invalid SizingMode");
+}
+
+inline SizingMode sizingMode(MeasureMode mode) {
+  switch (mode) {
+    case MeasureMode::Exactly:
+      return SizingMode::StretchFit;
+    case MeasureMode::Undefined:
+      return SizingMode::MaxContent;
+    case MeasureMode::AtMost:
+      return SizingMode::FitContent;
+  }
+
+  fatalWithMessage("Invalid MeasureMode");
+}
+
+} // namespace facebook::yoga
diff --git a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp
index 2388a744539dbe..e43ce2a254ee23 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.cpp
@@ -7,8 +7,10 @@
 
 #include <stdexcept>
 
+#include <yoga/config/Config.h>
 #include <yoga/debug/AssertFatal.h>
 #include <yoga/debug/Log.h>
+#include <yoga/node/Node.h>
 
 namespace facebook::yoga {
 
diff --git a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h
index 929ff1792d0d8f..bbd8ad19eabbf0 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/debug/AssertFatal.h
@@ -8,11 +8,12 @@
 #pragma once
 
 #include <yoga/Yoga.h>
-#include <yoga/config/Config.h>
-#include <yoga/node/Node.h>
 
 namespace facebook::yoga {
 
+class Node;
+class Config;
+
 [[noreturn]] void fatalWithMessage(const char* message);
 
 void assertFatal(bool condition, const char* message);
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h b/packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h
index 4d2c22260075dc..9c76280acf74e1 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/CachedMeasurement.h
@@ -11,7 +11,7 @@
 
 #include <yoga/Yoga.h>
 
-#include <yoga/enums/MeasureMode.h>
+#include <yoga/algorithm/SizingMode.h>
 #include <yoga/numeric/Comparison.h>
 
 namespace facebook::yoga {
@@ -19,15 +19,15 @@ namespace facebook::yoga {
 struct CachedMeasurement {
   float availableWidth{-1};
   float availableHeight{-1};
-  MeasureMode widthMeasureMode{MeasureMode::Undefined};
-  MeasureMode heightMeasureMode{MeasureMode::Undefined};
+  SizingMode widthSizingMode{SizingMode::MaxContent};
+  SizingMode heightSizingMode{SizingMode::MaxContent};
 
   float computedWidth{-1};
   float computedHeight{-1};
 
   bool operator==(CachedMeasurement measurement) const {
-    bool isEqual = widthMeasureMode == measurement.widthMeasureMode &&
-        heightMeasureMode == measurement.heightMeasureMode;
+    bool isEqual = widthSizingMode == measurement.widthSizingMode &&
+        heightSizingMode == measurement.heightSizingMode;
 
     if (!yoga::isUndefined(availableWidth) ||
         !yoga::isUndefined(measurement.availableWidth)) {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
index e5100ee2815137..0781b8e63ab44b 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
@@ -58,7 +58,7 @@ void Node::print() {
 
 // TODO: Edge value resolution should be moved to `yoga::Style`
 template <auto Field>
-CompactValue Node::computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const {
+Style::Length Node::computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const {
   if ((style_.*Field)(rowEdge).isDefined()) {
     return (style_.*Field)(rowEdge);
   } else if ((style_.*Field)(edge).isDefined()) {
@@ -72,7 +72,7 @@ CompactValue Node::computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const {
 
 // TODO: Edge value resolution should be moved to `yoga::Style`
 template <auto Field>
-CompactValue Node::computeEdgeValueForColumn(YGEdge edge) const {
+Style::Length Node::computeEdgeValueForColumn(YGEdge edge) const {
   if ((style_.*Field)(edge).isDefined()) {
     return (style_.*Field)(edge);
   } else if ((style_.*Field)(YGEdgeVertical).isDefined()) {
@@ -497,8 +497,8 @@ void Node::setLayoutHadOverflow(bool hadOverflow) {
   layout_.setHadOverflow(hadOverflow);
 }
 
-void Node::setLayoutDimension(float dimensionValue, Dimension dimension) {
-  layout_.setDimension(dimension, dimensionValue);
+void Node::setLayoutDimension(float LengthValue, Dimension dimension) {
+  layout_.setDimension(dimension, LengthValue);
 }
 
 // If both left and right are defined, then use left. Otherwise return +left or
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
index 9fefcf15aa0b99..1c9acbbe86d23d 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
@@ -20,7 +20,6 @@
 #include <yoga/enums/MeasureMode.h>
 #include <yoga/enums/NodeType.h>
 #include <yoga/node/LayoutResults.h>
-#include <yoga/style/CompactValue.h>
 #include <yoga/style/Style.h>
 
 // Tag struct used to form the opaque YGNodeRef for the public C API
@@ -66,10 +65,10 @@ class YG_EXPORT Node : public ::YGNode {
   }
 
   template <auto Field>
-  CompactValue computeEdgeValueForColumn(YGEdge edge) const;
+  Style::Length computeEdgeValueForColumn(YGEdge edge) const;
 
   template <auto Field>
-  CompactValue computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const;
+  Style::Length computeEdgeValueForRow(YGEdge rowEdge, YGEdge edge) const;
 
   // DANGER DANGER DANGER!
   // If the node assigned to has children, we'd either have to deallocate
@@ -327,7 +326,7 @@ class YG_EXPORT Node : public ::YGNode {
       uint32_t computedFlexBasisGeneration);
   void setLayoutMeasuredDimension(float measuredDimension, Dimension dimension);
   void setLayoutHadOverflow(bool hadOverflow);
-  void setLayoutDimension(float dimensionValue, Dimension dimension);
+  void setLayoutDimension(float LengthValue, Dimension dimension);
   void setLayoutDirection(Direction direction);
   void setLayoutMargin(float margin, YGEdge edge);
   void setLayoutBorder(float border, YGEdge edge);
diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h b/packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h
index a6ca3f1283e175..c32dd9276f1ede 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/style/CompactValue.h
@@ -52,6 +52,10 @@ class YG_EXPORT CompactValue {
 
   template <YGUnit Unit>
   static CompactValue of(float value) noexcept {
+    if (yoga::isUndefined(value) || std::isinf(value)) {
+      return ofUndefined();
+    }
+
     if (value == 0.0f || (value < LOWER_BOUND && value > -LOWER_BOUND)) {
       constexpr auto zero =
           Unit == YGUnitPercent ? ZERO_BITS_PERCENT : ZERO_BITS_POINT;
@@ -71,16 +75,6 @@ class YG_EXPORT CompactValue {
     return {data};
   }
 
-  template <YGUnit Unit>
-  static CompactValue ofMaybe(float value) noexcept {
-    return std::isnan(value) || std::isinf(value) ? ofUndefined()
-                                                  : of<Unit>(value);
-  }
-
-  static constexpr CompactValue ofZero() noexcept {
-    return CompactValue{ZERO_BITS_POINT};
-  }
-
   static constexpr CompactValue ofUndefined() noexcept {
     return CompactValue{};
   }
@@ -168,10 +162,6 @@ template <>
 CompactValue CompactValue::of<YGUnitUndefined>(float) noexcept = delete;
 template <>
 CompactValue CompactValue::of<YGUnitAuto>(float) noexcept = delete;
-template <>
-CompactValue CompactValue::ofMaybe<YGUnitUndefined>(float) noexcept = delete;
-template <>
-CompactValue CompactValue::ofMaybe<YGUnitAuto>(float) noexcept = delete;
 
 constexpr bool operator==(CompactValue a, CompactValue b) noexcept {
   return a.repr_ == b.repr_;
diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h
index d7dbf2f1886b05..835632edd598dc 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/style/Style.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/style/Style.h
@@ -28,18 +28,29 @@
 #include <yoga/enums/Wrap.h>
 #include <yoga/numeric/FloatOptional.h>
 #include <yoga/style/CompactValue.h>
+#include <yoga/style/ValueFactories.h>
 
 namespace facebook::yoga {
 
 class YG_EXPORT Style {
-  template <typename Enum>
-  using Values = std::array<CompactValue, ordinalCount<Enum>()>;
-
-  using Dimensions = Values<Dimension>;
-  using Edges = Values<YGEdge>;
-  using Gutters = Values<Gutter>;
-
  public:
+  /**
+   * Style::Length represents a CSS Value which may be one of:
+   * 1. Undefined
+   * 2. A keyword (e.g. auto)
+   * 3. A CSS <length-percentage> value:
+   *    a. <length> value (e.g. 10px)
+   *    b. <percentage> value of a reference <length>
+   * 4. (soon) A math function which returns a <length-percentage> value
+   *
+   * References:
+   * 1. https://www.w3.org/TR/css-values-4/#lengths
+   * 2. https://www.w3.org/TR/css-values-4/#percentage-value
+   * 3. https://www.w3.org/TR/css-values-4/#mixed-percentages
+   * 4. https://www.w3.org/TR/css-values-4/#math
+   */
+  using Length = CompactValue;
+
   static constexpr float DefaultFlexGrow = 0.0f;
   static constexpr float DefaultFlexShrink = 0.0f;
   static constexpr float WebDefaultFlexShrink = 1.0f;
@@ -76,6 +87,10 @@ class YG_EXPORT Style {
   ~Style() = default;
 
  private:
+  using Dimensions = std::array<Style::Length, ordinalCount<Dimension>()>;
+  using Edges = std::array<Style::Length, ordinalCount<Edge>()>;
+  using Gutters = std::array<Style::Length, ordinalCount<Gutter>()>;
+
   static constexpr uint8_t directionOffset = 0;
   static constexpr uint8_t flexdirectionOffset =
       directionOffset + minimumBitCount<Direction>();
@@ -101,13 +116,13 @@ class YG_EXPORT Style {
   FloatOptional flex_ = {};
   FloatOptional flexGrow_ = {};
   FloatOptional flexShrink_ = {};
-  CompactValue flexBasis_ = CompactValue::ofAuto();
+  Style::Length flexBasis_ = value::ofAuto();
   Edges margin_ = {};
   Edges position_ = {};
   Edges padding_ = {};
   Edges border_ = {};
   Gutters gap_ = {};
-  Dimensions dimensions_{CompactValue::ofAuto(), CompactValue::ofAuto()};
+  Dimensions dimensions_{value::ofAuto(), value::ofAuto()};
   Dimensions minDimensions_ = {};
   Dimensions maxDimensions_ = {};
   // Yoga specific properties, not compatible with flexbox specification
@@ -205,66 +220,66 @@ class YG_EXPORT Style {
     return {*this};
   }
 
-  CompactValue flexBasis() const {
+  Style::Length flexBasis() const {
     return flexBasis_;
   }
-  Ref<CompactValue, &Style::flexBasis_> flexBasis() {
+  Ref<Style::Length, &Style::flexBasis_> flexBasis() {
     return {*this};
   }
 
-  CompactValue margin(YGEdge edge) const {
+  Style::Length margin(YGEdge edge) const {
     return margin_[edge];
   }
-  void setMargin(YGEdge edge, CompactValue value) {
+  void setMargin(YGEdge edge, Style::Length value) {
     margin_[edge] = value;
   }
 
-  CompactValue position(YGEdge edge) const {
+  Style::Length position(YGEdge edge) const {
     return position_[edge];
   }
-  void setPosition(YGEdge edge, CompactValue value) {
+  void setPosition(YGEdge edge, Style::Length value) {
     position_[edge] = value;
   }
 
-  CompactValue padding(YGEdge edge) const {
+  Style::Length padding(YGEdge edge) const {
     return padding_[edge];
   }
-  void setPadding(YGEdge edge, CompactValue value) {
+  void setPadding(YGEdge edge, Style::Length value) {
     padding_[edge] = value;
   }
 
-  CompactValue border(YGEdge edge) const {
+  Style::Length border(YGEdge edge) const {
     return border_[edge];
   }
-  void setBorder(YGEdge edge, CompactValue value) {
+  void setBorder(YGEdge edge, Style::Length value) {
     border_[edge] = value;
   }
 
-  CompactValue gap(Gutter gutter) const {
+  Style::Length gap(Gutter gutter) const {
     return gap_[yoga::to_underlying(gutter)];
   }
-  void setGap(Gutter gutter, CompactValue value) {
+  void setGap(Gutter gutter, Style::Length value) {
     gap_[yoga::to_underlying(gutter)] = value;
   }
 
-  CompactValue dimension(Dimension axis) const {
+  Style::Length dimension(Dimension axis) const {
     return dimensions_[yoga::to_underlying(axis)];
   }
-  void setDimension(Dimension axis, CompactValue value) {
+  void setDimension(Dimension axis, Style::Length value) {
     dimensions_[yoga::to_underlying(axis)] = value;
   }
 
-  CompactValue minDimension(Dimension axis) const {
+  Style::Length minDimension(Dimension axis) const {
     return minDimensions_[yoga::to_underlying(axis)];
   }
-  void setMinDimension(Dimension axis, CompactValue value) {
+  void setMinDimension(Dimension axis, Style::Length value) {
     minDimensions_[yoga::to_underlying(axis)] = value;
   }
 
-  CompactValue maxDimension(Dimension axis) const {
+  Style::Length maxDimension(Dimension axis) const {
     return maxDimensions_[yoga::to_underlying(axis)];
   }
-  void setMaxDimension(Dimension axis, CompactValue value) {
+  void setMaxDimension(Dimension axis, Style::Length value) {
     maxDimensions_[yoga::to_underlying(axis)] = value;
   }
 
@@ -276,7 +291,7 @@ class YG_EXPORT Style {
     return {*this};
   }
 
-  CompactValue resolveColumnGap() const {
+  Length resolveColumnGap() const {
     if (gap_[yoga::to_underlying(Gutter::Column)].isDefined()) {
       return gap_[yoga::to_underlying(Gutter::Column)];
     } else {
@@ -284,7 +299,7 @@ class YG_EXPORT Style {
     }
   }
 
-  CompactValue resolveRowGap() const {
+  Style::Length resolveRowGap() const {
     if (gap_[yoga::to_underlying(Gutter::Row)].isDefined()) {
       return gap_[yoga::to_underlying(Gutter::Row)];
     } else {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/style/ValueFactories.h b/packages/react-native/ReactCommon/yoga/yoga/style/ValueFactories.h
new file mode 100644
index 00000000000000..65486347b0a52c
--- /dev/null
+++ b/packages/react-native/ReactCommon/yoga/yoga/style/ValueFactories.h
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <yoga/style/CompactValue.h>
+
+namespace facebook::yoga::value {
+
+/**
+ * Canonical unit (one YGUnitPoint)
+ */
+inline CompactValue points(float value) {
+  return CompactValue::of<YGUnitPoint>(value);
+}
+
+/**
+ * Percent of reference
+ */
+inline CompactValue percent(float value) {
+  return CompactValue::of<YGUnitPercent>(value);
+}
+
+/**
+ * "auto" keyword
+ */
+inline CompactValue ofAuto() {
+  return CompactValue::ofAuto();
+}
+
+/**
+ * Undefined
+ */
+inline CompactValue undefined() {
+  return CompactValue::ofUndefined();
+}
+
+} // namespace facebook::yoga::value