diff --git a/ReactCommon/yoga/yoga/YGLayout.cpp b/ReactCommon/yoga/yoga/YGLayout.cpp
index d1144ea6f26dac..ee398868620326 100644
--- a/ReactCommon/yoga/yoga/YGLayout.cpp
+++ b/ReactCommon/yoga/yoga/YGLayout.cpp
@@ -15,7 +15,8 @@ bool YGLayout::operator==(YGLayout layout) const {
       YGFloatArrayEqual(margin, layout.margin) &&
       YGFloatArrayEqual(border, layout.border) &&
       YGFloatArrayEqual(padding, layout.padding) &&
-      direction == layout.direction && hadOverflow == layout.hadOverflow &&
+      direction() == layout.direction() &&
+      hadOverflow() == layout.hadOverflow() &&
       lastOwnerDirection == layout.lastOwnerDirection &&
       nextCachedMeasurementsIndex == layout.nextCachedMeasurementsIndex &&
       cachedLayout == layout.cachedLayout &&
diff --git a/ReactCommon/yoga/yoga/YGLayout.h b/ReactCommon/yoga/yoga/YGLayout.h
index 74082a7640e841..4b62ceccf6f2cc 100644
--- a/ReactCommon/yoga/yoga/YGLayout.h
+++ b/ReactCommon/yoga/yoga/YGLayout.h
@@ -5,6 +5,7 @@
  * file in the root directory of this source tree.
  */
 #pragma once
+#include "Bitfield.h"
 #include "YGFloatOptional.h"
 #include "Yoga-internal.h"
 
@@ -14,11 +15,16 @@ struct YGLayout {
   std::array<float, 4> margin = {};
   std::array<float, 4> border = {};
   std::array<float, 4> padding = {};
-  YGDirection direction : 2;
-  bool didUseLegacyFlag : 1;
-  bool doesLegacyStretchFlagAffectsLayout : 1;
-  bool hadOverflow : 1;
 
+private:
+  static constexpr size_t directionIdx = 0;
+  static constexpr size_t didUseLegacyFlagIdx = 1;
+  static constexpr size_t doesLegacyStretchFlagAffectsLayoutIdx = 2;
+  static constexpr size_t hadOverflowIdx = 3;
+  facebook::yoga::Bitfield<uint8_t, YGDirection, bool, bool, bool> flags_ =
+      {YGDirectionInherit, false, false, false};
+
+public:
   uint32_t computedFlexBasisGeneration = 0;
   YGFloatOptional computedFlexBasis = {};
 
@@ -34,11 +40,28 @@ struct YGLayout {
 
   YGCachedMeasurement cachedLayout = YGCachedMeasurement();
 
-  YGLayout()
-      : direction(YGDirectionInherit),
-        didUseLegacyFlag(false),
-        doesLegacyStretchFlagAffectsLayout(false),
-        hadOverflow(false) {}
+  YGDirection direction() const { return flags_.at<directionIdx>(); }
+  decltype(flags_)::Ref<directionIdx> direction() {
+    return flags_.at<directionIdx>();
+  }
+
+  bool didUseLegacyFlag() const { return flags_.at<didUseLegacyFlagIdx>(); }
+  decltype(flags_)::Ref<didUseLegacyFlagIdx> didUseLegacyFlag() {
+    return flags_.at<didUseLegacyFlagIdx>();
+  }
+
+  bool doesLegacyStretchFlagAffectsLayout() const {
+    return flags_.at<doesLegacyStretchFlagAffectsLayoutIdx>();
+  }
+  decltype(flags_)::Ref<doesLegacyStretchFlagAffectsLayoutIdx>
+  doesLegacyStretchFlagAffectsLayout() {
+    return flags_.at<doesLegacyStretchFlagAffectsLayoutIdx>();
+  }
+
+  bool hadOverflow() const { return flags_.at<hadOverflowIdx>(); }
+  decltype(flags_)::Ref<hadOverflowIdx> hadOverflow() {
+    return flags_.at<hadOverflowIdx>();
+  }
 
   bool operator==(YGLayout layout) const;
   bool operator!=(YGLayout layout) const { return !(*this == layout); }
diff --git a/ReactCommon/yoga/yoga/YGNode.cpp b/ReactCommon/yoga/yoga/YGNode.cpp
index 969d1752c36177..bb240dfc8bd207 100644
--- a/ReactCommon/yoga/yoga/YGNode.cpp
+++ b/ReactCommon/yoga/yoga/YGNode.cpp
@@ -231,7 +231,7 @@ void YGNode::removeChild(uint32_t index) {
 }
 
 void YGNode::setLayoutDirection(YGDirection direction) {
-  layout_.direction = direction;
+  layout_.direction() = direction;
 }
 
 void YGNode::setLayoutMargin(float margin, int index) {
@@ -269,7 +269,7 @@ void YGNode::setLayoutMeasuredDimension(float measuredDimension, int index) {
 }
 
 void YGNode::setLayoutHadOverflow(bool hadOverflow) {
-  layout_.hadOverflow = hadOverflow;
+  layout_.hadOverflow() = hadOverflow;
 }
 
 void YGNode::setLayoutDimension(float dimension, int index) {
@@ -520,12 +520,12 @@ YGFloatOptional YGNode::getTrailingPaddingAndBorder(
 }
 
 bool YGNode::didUseLegacyFlag() {
-  bool didUseLegacyFlag = layout_.didUseLegacyFlag;
+  bool didUseLegacyFlag = layout_.didUseLegacyFlag();
   if (didUseLegacyFlag) {
     return true;
   }
   for (const auto& child : children_) {
-    if (child->layout_.didUseLegacyFlag) {
+    if (child->layout_.didUseLegacyFlag()) {
       didUseLegacyFlag = true;
       break;
     }
@@ -535,11 +535,11 @@ bool YGNode::didUseLegacyFlag() {
 
 void YGNode::setLayoutDoesLegacyFlagAffectsLayout(
     bool doesLegacyFlagAffectsLayout) {
-  layout_.doesLegacyStretchFlagAffectsLayout = doesLegacyFlagAffectsLayout;
+  layout_.doesLegacyStretchFlagAffectsLayout() = doesLegacyFlagAffectsLayout;
 }
 
 void YGNode::setLayoutDidUseLegacyFlag(bool didUseLegacyFlag) {
-  layout_.didUseLegacyFlag = didUseLegacyFlag;
+  layout_.didUseLegacyFlag() = didUseLegacyFlag;
 }
 
 bool YGNode::isLayoutTreeEqualToNode(const YGNode& node) const {
diff --git a/ReactCommon/yoga/yoga/Yoga.cpp b/ReactCommon/yoga/yoga/Yoga.cpp
index bc440cbbe6993b..6ba841f8e38f20 100644
--- a/ReactCommon/yoga/yoga/Yoga.cpp
+++ b/ReactCommon/yoga/yoga/Yoga.cpp
@@ -892,7 +892,7 @@ YGValue YGNodeStyleGetMaxHeight(const YGNodeConstRef node) {
         "Cannot get layout properties of multi-edge shorthands");       \
                                                                         \
     if (edge == YGEdgeStart) {                                          \
-      if (node->getLayout().direction == YGDirectionRTL) {              \
+      if (node->getLayout().direction() == YGDirectionRTL) {            \
         return node->getLayout().instanceName[YGEdgeRight];             \
       } else {                                                          \
         return node->getLayout().instanceName[YGEdgeLeft];              \
@@ -900,7 +900,7 @@ YGValue YGNodeStyleGetMaxHeight(const YGNodeConstRef node) {
     }                                                                   \
                                                                         \
     if (edge == YGEdgeEnd) {                                            \
-      if (node->getLayout().direction == YGDirectionRTL) {              \
+      if (node->getLayout().direction() == YGDirectionRTL) {            \
         return node->getLayout().instanceName[YGEdgeLeft];              \
       } else {                                                          \
         return node->getLayout().instanceName[YGEdgeRight];             \
@@ -916,15 +916,15 @@ YG_NODE_LAYOUT_PROPERTY_IMPL(float, Right, position[YGEdgeRight]);
 YG_NODE_LAYOUT_PROPERTY_IMPL(float, Bottom, position[YGEdgeBottom]);
 YG_NODE_LAYOUT_PROPERTY_IMPL(float, Width, dimensions[YGDimensionWidth]);
 YG_NODE_LAYOUT_PROPERTY_IMPL(float, Height, dimensions[YGDimensionHeight]);
-YG_NODE_LAYOUT_PROPERTY_IMPL(YGDirection, Direction, direction);
-YG_NODE_LAYOUT_PROPERTY_IMPL(bool, HadOverflow, hadOverflow);
+YG_NODE_LAYOUT_PROPERTY_IMPL(YGDirection, Direction, direction());
+YG_NODE_LAYOUT_PROPERTY_IMPL(bool, HadOverflow, hadOverflow());
 
 YG_NODE_LAYOUT_RESOLVED_PROPERTY_IMPL(float, Margin, margin);
 YG_NODE_LAYOUT_RESOLVED_PROPERTY_IMPL(float, Border, border);
 YG_NODE_LAYOUT_RESOLVED_PROPERTY_IMPL(float, Padding, padding);
 
 bool YGNodeLayoutGetDidLegacyStretchFlagAffectLayout(const YGNodeRef node) {
-  return node->getLayout().doesLegacyStretchFlagAffectsLayout;
+  return node->getLayout().doesLegacyStretchFlagAffectsLayout();
 }
 
 uint32_t gCurrentGenerationCount = 0;
@@ -2199,7 +2199,7 @@ static float YGDistributeFreeSpaceSecondPass(
         currentRelativeChild,
         childWidth,
         childHeight,
-        node->getLayout().direction,
+        node->getLayout().direction(),
         childWidthMeasureMode,
         childHeightMeasureMode,
         availableInnerWidth,
@@ -2213,8 +2213,8 @@ static float YGDistributeFreeSpaceSecondPass(
         depth,
         generationCount);
     node->setLayoutHadOverflow(
-        node->getLayout().hadOverflow |
-        currentRelativeChild->getLayout().hadOverflow);
+        node->getLayout().hadOverflow() |
+        currentRelativeChild->getLayout().hadOverflow());
   }
   return deltaFreeSpace;
 }
@@ -2973,7 +2973,7 @@ static void YGNodelayoutImpl(
     }
 
     node->setLayoutHadOverflow(
-        node->getLayout().hadOverflow |
+        node->getLayout().hadOverflow() |
         (collectedFlexItemsValues.remainingFreeSpace < 0));
 
     // STEP 6: MAIN-AXIS JUSTIFICATION & CROSS-AXIS SIZE DETERMINATION
@@ -4152,7 +4152,7 @@ void YGNodeCalculateLayoutWithContext(
           0, // tree root
           gCurrentGenerationCount)) {
     node->setPosition(
-        node->getLayout().direction, ownerWidth, ownerHeight, ownerWidth);
+        node->getLayout().direction(), ownerWidth, ownerHeight, ownerWidth);
     YGRoundToPixelGrid(node, node->getConfig()->pointScaleFactor, 0.0f, 0.0f);
 
 #ifdef DEBUG
@@ -4202,7 +4202,7 @@ void YGNodeCalculateLayoutWithContext(
             0, // tree root
             gCurrentGenerationCount)) {
       nodeWithoutLegacyFlag->setPosition(
-          nodeWithoutLegacyFlag->getLayout().direction,
+          nodeWithoutLegacyFlag->getLayout().direction(),
           ownerWidth,
           ownerHeight,
           ownerWidth);