diff --git a/packages/react-native/React/Views/RCTLayout.m b/packages/react-native/React/Views/RCTLayout.m
index e11d7e4b8189a9..d43dacd3e88e93 100644
--- a/packages/react-native/React/Views/RCTLayout.m
+++ b/packages/react-native/React/Views/RCTLayout.m
@@ -131,6 +131,7 @@ RCTDisplayType RCTReactDisplayTypeFromYogaDisplayType(YGDisplay displayType)
     case YGDisplayFlex:
       return RCTDisplayTypeFlex;
     case YGDisplayNone:
+    case YGDisplayContents:
       return RCTDisplayTypeNone;
   }
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java
index d4c4685fcb220d..4dae871936e65a 100644
--- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java
+++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/yoga/YogaDisplay.java
@@ -11,7 +11,8 @@
 
 public enum YogaDisplay {
   FLEX(0),
-  NONE(1);
+  NONE(1),
+  CONTENTS(2);
 
   private final int mIntValue;
 
@@ -27,6 +28,7 @@ public static YogaDisplay fromInt(int value) {
     switch (value) {
       case 0: return FLEX;
       case 1: return NONE;
+      case 2: return CONTENTS;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }
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 35f6047c318c22..826666b5f7fa8a 100644
--- a/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
+++ b/packages/react-native/ReactCommon/react/renderer/components/view/conversions.h
@@ -119,6 +119,17 @@ static inline PositionType positionTypeFromYogaPositionType(
   }
 }
 
+inline DisplayType displayTypeFromYGDisplay(YGDisplay display) {
+  switch (display) {
+    case YGDisplayNone:
+      return DisplayType::None;
+    case YGDisplayContents:
+      return DisplayType::Contents;
+    case YGDisplayFlex:
+      return DisplayType::Flex;
+  }
+}
+
 inline LayoutMetrics layoutMetricsFromYogaNode(yoga::Node& yogaNode) {
   auto layoutMetrics = LayoutMetrics{};
 
@@ -146,9 +157,8 @@ inline LayoutMetrics layoutMetricsFromYogaNode(yoga::Node& yogaNode) {
       layoutMetrics.borderWidth.bottom +
           floatFromYogaFloat(YGNodeLayoutGetPadding(&yogaNode, YGEdgeBottom))};
 
-  layoutMetrics.displayType = yogaNode.style().display() == yoga::Display::None
-      ? DisplayType::None
-      : DisplayType::Flex;
+  layoutMetrics.displayType =
+      displayTypeFromYGDisplay(YGNodeStyleGetDisplay(&yogaNode));
 
   layoutMetrics.positionType =
       positionTypeFromYogaPositionType(yogaNode.style().positionType());
diff --git a/packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h b/packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h
index bbe6e5484586e7..d2e50ff7355335 100644
--- a/packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h
+++ b/packages/react-native/ReactCommon/react/renderer/core/LayoutPrimitives.h
@@ -19,7 +19,7 @@ namespace facebook::react {
 enum class DisplayType {
   None = 0,
   Flex = 1,
-  Inline = 2,
+  Contents = 2,
 };
 
 enum class PositionType {
diff --git a/packages/react-native/ReactCommon/react/renderer/core/conversions.h b/packages/react-native/ReactCommon/react/renderer/core/conversions.h
index a11c2120fd4851..f778974811c297 100644
--- a/packages/react-native/ReactCommon/react/renderer/core/conversions.h
+++ b/packages/react-native/ReactCommon/react/renderer/core/conversions.h
@@ -39,7 +39,7 @@ inline int toInt(const DisplayType& displayType) {
       return 0;
     case DisplayType::Flex:
       return 1;
-    case DisplayType::Inline:
+    case DisplayType::Contents:
       return 2;
   }
 }
@@ -50,8 +50,8 @@ inline std::string toString(const DisplayType& displayType) {
       return "none";
     case DisplayType::Flex:
       return "flex";
-    case DisplayType::Inline:
-      return "inline";
+    case DisplayType::Contents:
+      return "contents";
   }
 }
 
diff --git a/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp b/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp
index 37d784cade03c3..6748efa540d949 100644
--- a/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp
+++ b/packages/react-native/ReactCommon/react/renderer/dom/DOM.cpp
@@ -380,8 +380,7 @@ DOMSizeRounded getScrollSize(
       *shadowNodeInCurrentRevision,
       {.includeTransform = false});
 
-  if (layoutMetrics == EmptyLayoutMetrics ||
-      layoutMetrics.displayType == DisplayType::Inline) {
+  if (layoutMetrics == EmptyLayoutMetrics) {
     return DOMSizeRounded{};
   }
 
@@ -417,8 +416,7 @@ DOMSizeRounded getInnerSize(
       *shadowNodeInCurrentRevision,
       {.includeTransform = false});
 
-  if (layoutMetrics == EmptyLayoutMetrics ||
-      layoutMetrics.displayType == DisplayType::Inline) {
+  if (layoutMetrics == EmptyLayoutMetrics) {
     return DOMSizeRounded{};
   }
 
@@ -445,8 +443,7 @@ DOMBorderWidthRounded getBorderWidth(
       *shadowNodeInCurrentRevision,
       {.includeTransform = false});
 
-  if (layoutMetrics == EmptyLayoutMetrics ||
-      layoutMetrics.displayType == DisplayType::Inline) {
+  if (layoutMetrics == EmptyLayoutMetrics) {
     return DOMBorderWidthRounded{};
   }
 
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp
index bea2cefa930f7e..cddd5d5849ff83 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.cpp
@@ -71,6 +71,8 @@ const char* YGDisplayToString(const YGDisplay value) {
       return "flex";
     case YGDisplayNone:
       return "none";
+    case YGDisplayContents:
+      return "contents";
   }
   return "unknown";
 }
diff --git a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h
index a41f723220f332..27f0426f450ec4 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/YGEnums.h
@@ -43,7 +43,8 @@ YG_ENUM_DECL(
 YG_ENUM_DECL(
     YGDisplay,
     YGDisplayFlex,
-    YGDisplayNone)
+    YGDisplayNone,
+    YGDisplayContents)
 
 YG_ENUM_DECL(
     YGEdge,
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
index 852c8fc4f0367b..b2d8d8dbefcd1a 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/AbsoluteLayout.cpp
@@ -434,7 +434,7 @@ bool layoutAbsoluteDescendants(
     float containingNodeAvailableInnerWidth,
     float containingNodeAvailableInnerHeight) {
   bool hasNewLayout = false;
-  for (auto child : currentNode->getChildren()) {
+  for (auto child : currentNode->getLayoutChildren()) {
     if (child->style().display() == Display::None) {
       continue;
     } else if (child->style().positionType() == PositionType::Absolute) {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.cpp
index 61cf7dd1e7eb20..b3002012bc065c 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/Baseline.cpp
@@ -32,9 +32,7 @@ float calculateBaseline(const yoga::Node* node) {
   }
 
   yoga::Node* baselineChild = nullptr;
-  const size_t childCount = node->getChildCount();
-  for (size_t i = 0; i < childCount; i++) {
-    auto child = node->getChild(i);
+  for (auto child : node->getLayoutChildren()) {
     if (child->getLineIndex() > 0) {
       break;
     }
@@ -67,9 +65,7 @@ bool isBaselineLayout(const yoga::Node* node) {
   if (node->style().alignItems() == Align::Baseline) {
     return true;
   }
-  const auto childCount = node->getChildCount();
-  for (size_t i = 0; i < childCount; i++) {
-    auto child = node->getChild(i);
+  for (auto child : node->getLayoutChildren()) {
     if (child->style().positionType() != PositionType::Absolute &&
         child->style().alignSelf() == Align::Baseline) {
       return true;
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
index d3c9bd7863379e..40a37bc754b0d7 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/CalculateLayout.cpp
@@ -476,6 +476,21 @@ static void zeroOutLayoutRecursively(yoga::Node* const node) {
   }
 }
 
+static void cleanupContentsNodesRecursively(yoga::Node* const node) {
+  for (auto child : node->getChildren()) {
+    if (child->style().display() == Display::Contents) {
+      child->getLayout() = {};
+      child->setLayoutDimension(0, Dimension::Width);
+      child->setLayoutDimension(0, Dimension::Height);
+      child->setHasNewLayout(true);
+      child->setDirty(false);
+      child->cloneChildrenIfNeeded();
+
+      cleanupContentsNodesRecursively(child);
+    }
+  }
+}
+
 static float calculateAvailableInnerDimension(
     const yoga::Node* const node,
     const Direction direction,
@@ -525,7 +540,7 @@ static float computeFlexBasisForChildren(
     const uint32_t generationCount) {
   float totalOuterFlexBasis = 0.0f;
   YGNodeRef singleFlexChild = nullptr;
-  const auto& children = node->getChildren();
+  const auto& children = node->getLayoutChildren();
   SizingMode sizingModeMainDim =
       isRow(mainAxis) ? widthSizingMode : heightSizingMode;
   // If there is only one child with flexGrow + flexShrink it means we can set
@@ -1316,7 +1331,7 @@ static void calculateLayoutImpl(
     return;
   }
 
-  const auto childCount = node->getChildCount();
+  const auto childCount = node->getLayoutChildCount();
   if (childCount == 0) {
     measureNodeWithoutChildren(
         node,
@@ -1351,6 +1366,9 @@ static void calculateLayoutImpl(
   // Reset layout flags, as they could have changed.
   node->setLayoutHadOverflow(false);
 
+  // Clean and update all display: contents nodes with a direct path to the
+  // current node as they will not be traversed
+  cleanupContentsNodesRecursively(node);
   // STEP 1: CALCULATE VALUES FOR REMAINDER OF ALGORITHM
   const FlexDirection mainAxis =
       resolveDirection(node->style().flexDirection(), direction);
@@ -1436,9 +1454,9 @@ static void calculateLayoutImpl(
   }
   // STEP 4: COLLECT FLEX ITEMS INTO FLEX LINES
 
-  // Indexes of children that represent the first and last items in the line.
-  size_t startOfLineIndex = 0;
-  size_t endOfLineIndex = 0;
+  // Iterator representing the beginning of the current line
+  Node::LayoutableChildren::Iterator startOfLineIterator =
+      node->getLayoutChildren().begin();
 
   // Number of lines.
   size_t lineCount = 0;
@@ -1451,8 +1469,7 @@ static void calculateLayoutImpl(
 
   // Max main dimension of all the lines.
   float maxLineMainDim = 0;
-  for (; endOfLineIndex < childCount;
-       lineCount++, startOfLineIndex = endOfLineIndex) {
+  for (; startOfLineIterator != node->getLayoutChildren().end(); lineCount++) {
     auto flexLine = calculateFlexLine(
         node,
         ownerDirection,
@@ -1460,11 +1477,9 @@ static void calculateLayoutImpl(
         mainAxisOwnerSize,
         availableInnerWidth,
         availableInnerMainDim,
-        startOfLineIndex,
+        startOfLineIterator,
         lineCount);
 
-    endOfLineIndex = flexLine.endOfLineIndex;
-
     // If we don't need to measure the cross axis, we can skip the entire flex
     // step.
     const bool canSkipFlex =
@@ -1816,17 +1831,18 @@ static void calculateLayoutImpl(
       case Align::Baseline:
         break;
     }
-    size_t endIndex = 0;
+    Node::LayoutableChildren::Iterator endIterator =
+        node->getLayoutChildren().begin();
     for (size_t i = 0; i < lineCount; i++) {
-      const size_t startIndex = endIndex;
-      size_t ii = startIndex;
+      const Node::LayoutableChildren::Iterator startIterator = endIterator;
+      auto iterator = startIterator;
 
       // compute the line's height and find the endIndex
       float lineHeight = 0;
       float maxAscentForCurrentLine = 0;
       float maxDescentForCurrentLine = 0;
-      for (; ii < childCount; ii++) {
-        const auto child = node->getChild(ii);
+      for (; iterator != node->getLayoutChildren().end(); iterator++) {
+        const auto child = *iterator;
         if (child->style().display() == Display::None) {
           continue;
         }
@@ -1859,11 +1875,11 @@ static void calculateLayoutImpl(
           }
         }
       }
-      endIndex = ii;
+      endIterator = iterator;
       currentLead += i != 0 ? crossAxisGap : 0;
 
-      for (ii = startIndex; ii < endIndex; ii++) {
-        const auto child = node->getChild(ii);
+      for (iterator = startIterator; iterator != endIterator; iterator++) {
+        const auto child = *iterator;
         if (child->style().display() == Display::None) {
           continue;
         }
@@ -2066,8 +2082,7 @@ static void calculateLayoutImpl(
   // As we only wrapped in normal direction yet, we need to reverse the
   // positions on wrap-reverse.
   if (performLayout && node->style().flexWrap() == Wrap::WrapReverse) {
-    for (size_t i = 0; i < childCount; i++) {
-      const auto child = node->getChild(i);
+    for (auto child : node->getLayoutChildren()) {
       if (child->style().positionType() != PositionType::Absolute) {
         child->setLayoutPosition(
             node->getLayout().measuredDimension(dimension(crossAxis)) -
@@ -2084,8 +2099,7 @@ static void calculateLayoutImpl(
     const bool needsCrossTrailingPos = needsTrailingPosition(crossAxis);
 
     if (needsMainTrailingPos || needsCrossTrailingPos) {
-      for (size_t i = 0; i < childCount; i++) {
-        const auto child = node->getChild(i);
+      for (auto child : node->getLayoutChildren()) {
         // Absolute children will be handled by their containing block since we
         // cannot guarantee that their positions are set when their parents are
         // done with layout.
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.cpp
index 1ad47fa577b53e..aac495f47b7ed8 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.cpp
@@ -20,17 +20,17 @@ FlexLine calculateFlexLine(
     const float mainAxisownerSize,
     const float availableInnerWidth,
     const float availableInnerMainDim,
-    const size_t startOfLineIndex,
+    Node::LayoutableChildren::Iterator& iterator,
     const size_t lineCount) {
   std::vector<yoga::Node*> itemsInFlow;
-  itemsInFlow.reserve(node->getChildren().size());
+  itemsInFlow.reserve(node->getChildCount());
 
   float sizeConsumed = 0.0f;
   float totalFlexGrowFactors = 0.0f;
   float totalFlexShrinkScaledFactors = 0.0f;
   size_t numberOfAutoMargins = 0;
-  size_t endOfLineIndex = startOfLineIndex;
-  size_t firstElementInLineIndex = startOfLineIndex;
+  size_t endOfLineIndex = iterator.index();
+  size_t firstElementInLineIndex = iterator.index();
 
   float sizeConsumedIncludingMinConstraint = 0;
   const Direction direction = node->resolveDirection(ownerDirection);
@@ -41,8 +41,9 @@ FlexLine calculateFlexLine(
       node->style().computeGapForAxis(mainAxis, availableInnerMainDim);
 
   // Add items to the current line until it's full or we run out of items.
-  for (; endOfLineIndex < node->getChildren().size(); endOfLineIndex++) {
-    auto child = node->getChild(endOfLineIndex);
+  for (; iterator != node->getLayoutChildren().end();
+       iterator++, endOfLineIndex = iterator.index()) {
+    auto child = *iterator;
     if (child->style().display() == Display::None ||
         child->style().positionType() == PositionType::Absolute) {
       if (firstElementInLineIndex == endOfLineIndex) {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h
index 14141794a467a6..4dcf7a509d0e24 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/FlexLine.h
@@ -72,7 +72,7 @@ FlexLine calculateFlexLine(
     float mainAxisownerSize,
     float availableInnerWidth,
     float availableInnerMainDim,
-    size_t startOfLineIndex,
+    Node::LayoutableChildren::Iterator& iterator,
     size_t lineCount);
 
 } // namespace facebook::yoga
diff --git a/packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp b/packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp
index 7a694565e9b44e..038994d70e2b08 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/algorithm/PixelGrid.cpp
@@ -124,7 +124,7 @@ void roundLayoutResultsToPixelGrid(
         Dimension::Height);
   }
 
-  for (yoga::Node* child : node->getChildren()) {
+  for (yoga::Node* child : node->getLayoutChildren()) {
     roundLayoutResultsToPixelGrid(child, absoluteNodeLeft, absoluteNodeTop);
   }
 }
diff --git a/packages/react-native/ReactCommon/yoga/yoga/enums/Display.h b/packages/react-native/ReactCommon/yoga/yoga/enums/Display.h
index 418ebc1dcd528c..9bf23c0ac7bd1e 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/enums/Display.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/enums/Display.h
@@ -18,11 +18,12 @@ namespace facebook::yoga {
 enum class Display : uint8_t {
   Flex = YGDisplayFlex,
   None = YGDisplayNone,
+  Contents = YGDisplayContents,
 };
 
 template <>
 constexpr int32_t ordinalCount<Display>() {
-  return 2;
+  return 3;
 }
 
 constexpr Display scopedEnum(YGDisplay unscoped) {
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/LayoutableChildren.h b/packages/react-native/ReactCommon/yoga/yoga/node/LayoutableChildren.h
new file mode 100644
index 00000000000000..c8300be342c51e
--- /dev/null
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/LayoutableChildren.h
@@ -0,0 +1,150 @@
+/*
+ * 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.
+ */
+
+#include <cstdint>
+#include <vector>
+
+#include <yoga/enums/Display.h>
+
+namespace facebook::yoga {
+
+class Node;
+
+template <typename T>
+class LayoutableChildren {
+ public:
+  using Backtrack = std::vector<std::pair<const T*, size_t>>;
+  struct Iterator {
+    using iterator_category = std::input_iterator_tag;
+    using difference_type = std::ptrdiff_t;
+    using value_type = T*;
+    using pointer = T*;
+    using reference = T*;
+
+    Iterator() = default;
+
+    Iterator(const T* node, size_t childIndex)
+        : node_(node), childIndex_(childIndex) {}
+    Iterator(const T* node, size_t childIndex, Backtrack&& backtrack)
+        : node_(node),
+          childIndex_(childIndex),
+          backtrack_(std::move(backtrack)) {}
+
+    T* operator*() const {
+      return node_->getChild(childIndex_);
+    }
+
+    Iterator& operator++() {
+      next();
+      currentNodeIndex_++;
+      return *this;
+    }
+
+    Iterator operator++(int) {
+      Iterator tmp = *this;
+      ++(*this);
+      return tmp;
+    }
+
+    size_t index() const {
+      return currentNodeIndex_;
+    }
+
+    friend bool operator==(const Iterator& a, const Iterator& b) {
+      return a.node_ == b.node_ && a.childIndex_ == b.childIndex_;
+    }
+
+    friend bool operator!=(const Iterator& a, const Iterator& b) {
+      return a.node_ != b.node_ || a.childIndex_ != b.childIndex_;
+    }
+
+   private:
+    void next() {
+      if (childIndex_ + 1 >= node_->getChildCount()) {
+        // if the current node has no more children, try to backtrack and
+        // visit its successor
+        if (backtrack_.empty()) {
+          // if there are no nodes to backtrack to, the last node has been
+          // visited
+          *this = Iterator{};
+        } else {
+          // pop and restore the latest backtrack entry
+          const auto back = backtrack_.back();
+          backtrack_.pop_back();
+          node_ = back.first;
+          childIndex_ = back.second;
+
+          // go to the next node
+          next();
+        }
+      } else {
+        // current node has more children to visit, go to next
+        ++childIndex_;
+        // skip all display: contents nodes, possibly going deeper into the
+        // tree
+        skipContentsNodes();
+      }
+    }
+
+    void skipContentsNodes() {
+      // get the node that would be returned from the iterator
+      auto currentNode = node_->getChild(childIndex_);
+      while (currentNode->style().display() == Display::Contents &&
+             currentNode->getChildCount() > 0) {
+        // if it has display: contents set, it shouldn't be returned but its
+        // children should in its place push the current node and child index
+        // so that the current state can be restored when backtracking
+        backtrack_.push_back({node_, childIndex_});
+        // traverse the child
+        node_ = currentNode;
+        childIndex_ = 0;
+
+        // repeat until a node without display: contents is found in the
+        // subtree or a leaf is reached
+        currentNode = currentNode->getChild(childIndex_);
+      }
+
+      // if no node without display: contents was found, try to backtrack
+      if (currentNode->style().display() == Display::Contents) {
+        next();
+      }
+    }
+
+    const T* node_{nullptr};
+    size_t childIndex_{0};
+    size_t currentNodeIndex_{0};
+    Backtrack backtrack_;
+
+    friend LayoutableChildren;
+  };
+
+  explicit LayoutableChildren(const T* node) : node_(node) {
+    static_assert(std::input_iterator<LayoutableChildren<T>::Iterator>);
+    static_assert(
+        std::is_base_of<Node, T>::value,
+        "Type parameter of LayoutableChildren must derive from yoga::Node");
+  }
+
+  Iterator begin() const {
+    if (node_->getChildCount() > 0) {
+      auto result = Iterator(node_, 0);
+      result.skipContentsNodes();
+      return result;
+    } else {
+      return Iterator{};
+    }
+  }
+
+  Iterator end() const {
+    return Iterator{};
+  }
+
+ private:
+  const T* node_;
+};
+
+} // namespace facebook::yoga
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
index 7c6bea55e3cfe7..cf36ab09a49ea3 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.cpp
@@ -41,6 +41,7 @@ Node::Node(Node&& node) noexcept
       style_(std::move(node.style_)),
       layout_(node.layout_),
       lineIndex_(node.lineIndex_),
+      contentsChildrenCount_(node.contentsChildrenCount_),
       owner_(node.owner_),
       children_(std::move(node.children_)),
       config_(node.config_),
@@ -116,14 +117,37 @@ void Node::setMeasureFunc(YGMeasureFunc measureFunc) {
 }
 
 void Node::replaceChild(Node* child, size_t index) {
+  auto previousChild = children_[index];
+  if (previousChild->style().display() == Display::Contents &&
+      child->style().display() != Display::Contents) {
+    contentsChildrenCount_--;
+  } else if (
+      previousChild->style().display() != Display::Contents &&
+      child->style().display() == Display::Contents) {
+    contentsChildrenCount_++;
+  }
+
   children_[index] = child;
 }
 
 void Node::replaceChild(Node* oldChild, Node* newChild) {
+  if (oldChild->style().display() == Display::Contents &&
+      newChild->style().display() != Display::Contents) {
+    contentsChildrenCount_--;
+  } else if (
+      oldChild->style().display() != Display::Contents &&
+      newChild->style().display() == Display::Contents) {
+    contentsChildrenCount_++;
+  }
+
   std::replace(children_.begin(), children_.end(), oldChild, newChild);
 }
 
 void Node::insertChild(Node* child, size_t index) {
+  if (child->style().display() == Display::Contents) {
+    contentsChildrenCount_++;
+  }
+
   children_.insert(children_.begin() + static_cast<ptrdiff_t>(index), child);
 }
 
@@ -160,6 +184,10 @@ void Node::setDirty(bool isDirty) {
 bool Node::removeChild(Node* child) {
   auto p = std::find(children_.begin(), children_.end(), child);
   if (p != children_.end()) {
+    if (child->style().display() == Display::Contents) {
+      contentsChildrenCount_--;
+    }
+
     children_.erase(p);
     return true;
   }
@@ -167,6 +195,10 @@ bool Node::removeChild(Node* child) {
 }
 
 void Node::removeChild(size_t index) {
+  if (children_[index]->style().display() == Display::Contents) {
+    contentsChildrenCount_--;
+  }
+
   children_.erase(children_.begin() + static_cast<ptrdiff_t>(index));
 }
 
diff --git a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
index 34ef6d955ed8da..ddd34591eb693c 100644
--- a/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
+++ b/packages/react-native/ReactCommon/yoga/yoga/node/Node.h
@@ -12,6 +12,7 @@
 #include <vector>
 
 #include <yoga/Yoga.h>
+#include <yoga/node/LayoutableChildren.h>
 
 #include <yoga/config/Config.h>
 #include <yoga/enums/Dimension.h>
@@ -31,6 +32,7 @@ namespace facebook::yoga {
 
 class YG_EXPORT Node : public ::YGNode {
  public:
+  using LayoutableChildren = yoga::LayoutableChildren<Node>;
   Node();
   explicit Node(const Config* config);
 
@@ -144,6 +146,24 @@ class YG_EXPORT Node : public ::YGNode {
     return children_.size();
   }
 
+  const LayoutableChildren getLayoutChildren() const {
+    return LayoutableChildren(this);
+  }
+
+  size_t getLayoutChildCount() const {
+    if (contentsChildrenCount_ == 0) {
+      return children_.size();
+    } else {
+      size_t count = 0;
+      for (auto iter = getLayoutChildren().begin();
+           iter != getLayoutChildren().end();
+           iter++) {
+        count++;
+      }
+      return count;
+    }
+  }
+
   const Config* getConfig() const {
     return config_;
   }
@@ -298,6 +318,7 @@ class YG_EXPORT Node : public ::YGNode {
   Style style_;
   LayoutResults layout_;
   size_t lineIndex_ = 0;
+  size_t contentsChildrenCount_ = 0;
   Node* owner_ = nullptr;
   std::vector<Node*> children_;
   const Config* config_;