react-native-tvos 0.78.0-0rc3 → 0.79.0-0

package/ReactCommon/react/renderer/core/ShadowNodeFamily.h

@@ -122,6 +122,9 @@ class ShadowNodeFamily final {
    */
   Tag getTag() const;
 
+  InstanceHandle::Shared getInstanceHandle() const;
+  void setInstanceHandle(InstanceHandle::Shared& instanceHandle) const;
+
   /**
    * Override destructor to call onUnmountedFamilyDestroyedCallback() for
    * ShadowViews that were preallocated but never mounted on the screen.
@@ -160,7 +163,7 @@ class ShadowNodeFamily final {
   /*
    * Weak reference to the React instance handle
    */
-  const InstanceHandle::Shared instanceHandle_;
+  mutable InstanceHandle::Shared instanceHandle_;
 
   /*
    * `EventEmitter` associated with all nodes of the family.
@@ -196,12 +199,6 @@ class ShadowNodeFamily final {
    * Determines if the ShadowNodeFamily was ever mounted on the screen.
    */
   mutable bool hasBeenMounted_{false};
-
-  /*
-   * Determines if Views that were never mounted on the screen should be deleted
-   * when the shadow node family is destroyed.
-   */
-  const bool isDeletionOfUnmountedViewsEnabled_;
 };
 
 } // namespace facebook::react

package/ReactCommon/react/renderer/core/tests/FindNodeAtPointTest.cpp

@@ -415,3 +415,37 @@ TEST(FindNodeAtPointTest, invertedList) {
           ->getTag(),
       2);
 }
+
+TEST(FindNodeAtPointTest, considersOverflowAreaOfTheParent) {
+  auto builder = simpleComponentBuilder();
+
+  auto element =
+      Element<ViewShadowNode>()
+          .tag(1)
+          .finalize([](ViewShadowNode& shadowNode) {
+            auto layoutMetrics = EmptyLayoutMetrics;
+            layoutMetrics.frame.size = {100, 100};
+            shadowNode.setLayoutMetrics(layoutMetrics);
+          })
+          .children({Element<ViewShadowNode>()
+                         .tag(2)
+                         .finalize([](ViewShadowNode& shadowNode) {
+                           auto layoutMetrics = EmptyLayoutMetrics;
+                           layoutMetrics.frame.size = {100, 0};
+                           layoutMetrics.overflowInset = {0, 0, 0, -100};
+
+                           shadowNode.setLayoutMetrics(layoutMetrics);
+                         })
+                         .children({Element<ViewShadowNode>().tag(3).finalize(
+                             [](ViewShadowNode& shadowNode) {
+                               auto layoutMetrics = EmptyLayoutMetrics;
+                               layoutMetrics.frame.size = {100, 100};
+                               shadowNode.setLayoutMetrics(layoutMetrics);
+                             })})});
+
+  auto parentShadowNode = builder.build(element);
+  EXPECT_EQ(
+      LayoutableShadowNode::findNodeAtPoint(parentShadowNode, {1, 99})
+          ->getTag(),
+      3);
+}

package/ReactCommon/react/renderer/core/tests/LayoutableShadowNodeTest.cpp

@@ -9,7 +9,7 @@
 #include <react/renderer/element/Element.h>
 #include <react/renderer/element/testUtils.h>
 
-using namespace facebook::react;
+namespace facebook::react {
 
 /*
  * ┌────────┐
@@ -311,6 +311,285 @@ TEST(LayoutableShadowNodeTest, relativeLayoutMetricsOnTransformedNode) {
   EXPECT_EQ(relativeLayoutMetrics.frame.size.height, 100);
 }
 
+/*
+ * View B is child of View A.
+ * In this example, there is no overflow and view B is completely within view A.
+ *
+ * ┌──────────────┐
+ * │<View A />    │
+ * │ ┌───────────┐│
+ * │ │<View B /> ││
+ * │ │           ││
+ * │ └───────────┘│
+ * └──────────────┘
+ */
+TEST(LayoutableShadowNodeTest, noOverflow) {
+  auto builder = simpleComponentBuilder();
+  auto shadowNode = std::shared_ptr<ViewShadowNode>{};
+  // clang-format off
+  auto element =
+    Element<RootShadowNode>()
+      .props([] {
+        auto sharedProps = std::make_shared<RootProps>();
+        auto &props = *sharedProps;
+        props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
+        auto &yogaStyle = props.yogaStyle;
+        yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(500));
+        yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(500));
+        return sharedProps;
+      }).children({
+        Element<ViewShadowNode>()
+        .props([=] {
+          auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+          auto &props = *sharedProps;
+          auto &yogaStyle = props.yogaStyle;
+          yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(100));
+          yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+          return sharedProps;
+        })
+        .reference(shadowNode)
+        .children({
+          Element<ViewShadowNode>()
+          .props([] {
+            auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+            auto &props = *sharedProps;
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setPositionType(yoga::PositionType::Absolute);
+            yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(50));
+            yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(100));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(25));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(50));
+            return sharedProps;
+          })
+      })
+    });
+  // clang-format on
+
+  auto parentShadowNode = builder.build(element);
+
+  parentShadowNode->layoutIfNeeded();
+
+  auto overflowInsetFrame =
+      shadowNode->getLayoutMetrics().getOverflowInsetFrame();
+  EXPECT_EQ(overflowInsetFrame.origin.x, 0);
+  EXPECT_EQ(overflowInsetFrame.origin.y, 0);
+  EXPECT_EQ(overflowInsetFrame.size.width, 100);
+  EXPECT_EQ(overflowInsetFrame.size.height, 200);
+}
+
+/*
+ * View B is child of view A.
+ * In this example, view B overflows from view A to the right and down.
+ *
+ * ┌─────────────┐
+ * │<View A />   │
+ * │     ┌───────┴─────┐
+ * └─────┤<View B />   │
+ *       │             │
+ *       └─────────────┘
+ */
+TEST(LayoutableShadowNodeTest, overflowInsetFrameToRightAndDown) {
+  auto builder = simpleComponentBuilder();
+  auto shadowNode = std::shared_ptr<ViewShadowNode>{};
+  // clang-format off
+  auto element =
+    Element<RootShadowNode>()
+      .props([] {
+        auto sharedProps = std::make_shared<RootProps>();
+        auto &props = *sharedProps;
+        props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
+        auto &yogaStyle = props.yogaStyle;
+        yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(500));
+        yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(500));
+        return sharedProps;
+      }).children({
+        Element<ViewShadowNode>()
+        .props([=] {
+          auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+          auto &props = *sharedProps;
+          auto &yogaStyle = props.yogaStyle;
+          yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(100));
+          yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+          return sharedProps;
+        })
+        .reference(shadowNode)
+        .children({
+          Element<ViewShadowNode>()
+          .props([] {
+            auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+            auto &props = *sharedProps;
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setPositionType(yoga::PositionType::Absolute);
+            yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(50));
+            yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(100));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(75));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(125));
+            return sharedProps;
+          })
+      })
+    });
+  // clang-format on
+
+  auto parentShadowNode = builder.build(element);
+
+  parentShadowNode->layoutIfNeeded();
+
+  auto overflowInsetFrame =
+      shadowNode->getLayoutMetrics().getOverflowInsetFrame();
+  EXPECT_EQ(overflowInsetFrame.origin.x, 0);
+  EXPECT_EQ(overflowInsetFrame.origin.y, 0);
+  EXPECT_EQ(overflowInsetFrame.size.width, 125);
+  EXPECT_EQ(overflowInsetFrame.size.height, 225);
+}
+
+/*
+ * View B is child of View A.
+ * In this example, view B overflows from view A to the left and top.
+ *
+ * ┌─────────────┐
+ * │<View B />   │
+ * │             ├───────────┐
+ * └───────┬─────┘           │
+ *         │    <View A />   │
+ *         │                 │
+ *         └─────────────────┘
+ */
+TEST(LayoutableShadowNodeTest, overflowInsetFrameToLeftAndTop) {
+  auto builder = simpleComponentBuilder();
+  auto shadowNode = std::shared_ptr<ViewShadowNode>{};
+  // clang-format off
+  auto element =
+    Element<RootShadowNode>()
+      .props([] {
+        auto sharedProps = std::make_shared<RootProps>();
+        auto &props = *sharedProps;
+        props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
+        auto &yogaStyle = props.yogaStyle;
+        yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(500));
+        yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(500));
+        return sharedProps;
+      }).children({
+        Element<ViewShadowNode>()
+        .props([=] {
+          auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+          auto &props = *sharedProps;
+          auto &yogaStyle = props.yogaStyle;
+          yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(100));
+          yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+          return sharedProps;
+        })
+        .reference(shadowNode)
+        .children({
+          Element<ViewShadowNode>()
+          .props([] {
+            auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+            auto &props = *sharedProps;
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setPositionType(yoga::PositionType::Absolute);
+            yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(-50));
+            yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(-100));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(75));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(125));
+            return sharedProps;
+          })
+      })
+    });
+  // clang-format on
+
+  auto parentShadowNode = builder.build(element);
+
+  parentShadowNode->layoutIfNeeded();
+
+  auto overflowInsetFrame =
+      shadowNode->getLayoutMetrics().getOverflowInsetFrame();
+  EXPECT_EQ(overflowInsetFrame.origin.x, -50);
+  EXPECT_EQ(overflowInsetFrame.origin.y, -100);
+  EXPECT_EQ(overflowInsetFrame.size.width, 150);
+  EXPECT_EQ(overflowInsetFrame.size.height, 300);
+}
+
+/*
+ * View B and view C are children of View A.
+ * In this example, view B overflows from view A to the left and top and view C
+ * overflows from view A to the right and down.
+ *
+ * ┌─────────────┐
+ * │<View B />   │
+ * │             ├───────────┐
+ * └───────┬─────┘           │
+ *         │    <View A />   │
+ *         │                 │
+ *         │     ┌───────────┴─┐
+ *         └─────┤<View C />   │
+ *               │             │
+ *               └─────────────┘
+ */
+TEST(LayoutableShadowNodeTest, overflowInsetFrameToAllSides) {
+  auto builder = simpleComponentBuilder();
+  auto shadowNode = std::shared_ptr<ViewShadowNode>{};
+  // clang-format off
+  auto element =
+    Element<RootShadowNode>()
+      .props([] {
+        auto sharedProps = std::make_shared<RootProps>();
+        auto &props = *sharedProps;
+        props.layoutConstraints = LayoutConstraints{{0,0}, {500, 500}};
+        auto &yogaStyle = props.yogaStyle;
+        yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(500));
+        yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(500));
+        return sharedProps;
+      }).children({
+        Element<ViewShadowNode>()
+        .props([=] {
+          auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+          auto &props = *sharedProps;
+          auto &yogaStyle = props.yogaStyle;
+          yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(100));
+          yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(200));
+          return sharedProps;
+        })
+        .reference(shadowNode)
+        .children({
+          Element<ViewShadowNode>()
+          .props([] {
+            auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+            auto &props = *sharedProps;
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setPositionType(yoga::PositionType::Absolute);
+            yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(-50));
+            yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(-100));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(75));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(125));
+            return sharedProps;
+          }),
+          Element<ViewShadowNode>()
+          .props([] {
+            auto sharedProps = std::make_shared<ViewShadowNodeProps>();
+            auto &props = *sharedProps;
+            auto &yogaStyle = props.yogaStyle;
+            yogaStyle.setPositionType(yoga::PositionType::Absolute);
+            yogaStyle.setPosition(yoga::Edge::Left, yoga::StyleLength::points(50));
+            yogaStyle.setPosition(yoga::Edge::Top, yoga::StyleLength::points(100));
+            yogaStyle.setDimension(yoga::Dimension::Width, yoga::StyleSizeLength::points(75));
+            yogaStyle.setDimension(yoga::Dimension::Height, yoga::StyleSizeLength::points(125));
+            return sharedProps;
+          })
+      })
+    });
+  // clang-format on
+
+  auto parentShadowNode = builder.build(element);
+
+  parentShadowNode->layoutIfNeeded();
+
+  auto overflowInsetFrame =
+      shadowNode->getLayoutMetrics().getOverflowInsetFrame();
+  EXPECT_EQ(overflowInsetFrame.origin.x, -50);
+  EXPECT_EQ(overflowInsetFrame.origin.y, -100);
+  EXPECT_EQ(overflowInsetFrame.size.width, 175);
+  EXPECT_EQ(overflowInsetFrame.size.height, 325);
+}
+
 /*
  * ┌────────────────────────┐
  * │<Root>                  │
@@ -1146,3 +1425,5 @@ TEST(LayoutableShadowNodeTest, inversedContentOriginOffset) {
   EXPECT_EQ(relativeLayoutMetrics.frame.origin.x, 180);
   EXPECT_EQ(relativeLayoutMetrics.frame.origin.y, 130);
 }
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/core/tests/ShadowNodeTest.cpp

@@ -17,21 +17,7 @@
 
 using namespace facebook::react;
 
-class ShadowNodeTestFeatureFlags : public ReactNativeFeatureFlagsDefaults {
- public:
-  explicit ShadowNodeTestFeatureFlags(bool useRuntimeShadowNodeReferenceUpdate)
-      : useRuntimeShadowNodeReferenceUpdate_(
-            useRuntimeShadowNodeReferenceUpdate) {}
-
-  bool useRuntimeShadowNodeReferenceUpdate() override {
-    return useRuntimeShadowNodeReferenceUpdate_;
-  }
-
- private:
-  bool useRuntimeShadowNodeReferenceUpdate_;
-};
-
-class ShadowNodeTest : public testing::TestWithParam<bool> {
+class ShadowNodeTest : public testing::Test {
  protected:
   ShadowNodeTest()
       : eventDispatcher_(std::shared_ptr<const EventDispatcher>()),
@@ -155,9 +141,6 @@ class ShadowNodeTest : public testing::TestWithParam<bool> {
 
   void SetUp() override {
     ShadowNode::setUseRuntimeShadowNodeReferenceUpdateOnThread(true);
-
-    ReactNativeFeatureFlags::override(
-        std::make_unique<ShadowNodeTestFeatureFlags>(GetParam()));
   }
 
   void TearDown() override {
@@ -177,12 +160,7 @@ class ShadowNodeTest : public testing::TestWithParam<bool> {
   SurfaceId surfaceId_ = 1;
 };
 
-INSTANTIATE_TEST_CASE_P(
-    ShadowNodeTestTogglingRuntimeShadowNodeReferenceUpdate,
-    ShadowNodeTest,
-    ::testing::Values(true, false));
-
-TEST_P(ShadowNodeTest, handleShadowNodeCreation) {
+TEST_F(ShadowNodeTest, handleShadowNodeCreation) {
   EXPECT_FALSE(nodeZ_->getSealed());
   EXPECT_STREQ(nodeZ_->getComponentName(), "Test");
   EXPECT_EQ(nodeZ_->getTag(), 18);
@@ -191,13 +169,13 @@ TEST_P(ShadowNodeTest, handleShadowNodeCreation) {
   EXPECT_EQ(nodeZ_->getChildren().size(), 0);
 }
 
-TEST_P(ShadowNodeTest, handleSealRecusive) {
+TEST_F(ShadowNodeTest, handleSealRecusive) {
   nodeZ_->sealRecursive();
   EXPECT_TRUE(nodeZ_->getSealed());
   EXPECT_TRUE(nodeZ_->getProps()->getSealed());
 }
 
-TEST_P(ShadowNodeTest, handleShadowNodeSimpleCloning) {
+TEST_F(ShadowNodeTest, handleShadowNodeSimpleCloning) {
   auto nodeARevision2 =
       std::make_shared<TestShadowNode>(*nodeA_, ShadowNodeFragment{});
 
@@ -207,7 +185,7 @@ TEST_P(ShadowNodeTest, handleShadowNodeSimpleCloning) {
   EXPECT_EQ(nodeA_->getEventEmitter(), nodeARevision2->getEventEmitter());
 }
 
-TEST_P(ShadowNodeTest, handleShadowNodeMutation) {
+TEST_F(ShadowNodeTest, handleShadowNodeMutation) {
   auto nodeABChildren = nodeAB_->getChildren();
   EXPECT_EQ(nodeABChildren.size(), 2);
   EXPECT_EQ(nodeABChildren.at(0), nodeABA_);
@@ -228,7 +206,7 @@ TEST_P(ShadowNodeTest, handleShadowNodeMutation) {
   EXPECT_TRUE(nodeABB_->getSealed());
 }
 
-TEST_P(ShadowNodeTest, handleCloneFunction) {
+TEST_F(ShadowNodeTest, handleCloneFunction) {
   auto nodeABClone = nodeAB_->clone({});
 
   // Those two nodes are *not* same.
@@ -246,7 +224,7 @@ TEST_P(ShadowNodeTest, handleCloneFunction) {
   EXPECT_EQ(nodeAB_->getProps(), nodeABClone->getProps());
 }
 
-TEST_P(ShadowNodeTest, handleState) {
+TEST_F(ShadowNodeTest, handleState) {
   auto family = componentDescriptor_.createFamily(ShadowNodeFamilyFragment{
       /* .tag = */ 9,
       /* .surfaceId = */ surfaceId_,
@@ -301,29 +279,19 @@ TEST_P(ShadowNodeTest, handleState) {
       "Attempt to mutate a sealed object.");
 }
 
-TEST_P(ShadowNodeTest, handleRuntimeReferenceTransferOnClone) {
+TEST_F(ShadowNodeTest, handleRuntimeReferenceTransferOnClone) {
   auto nodeABRev1 = nodeAB_->clone({});
   auto wrappedShadowNode = std::make_shared<ShadowNodeWrapper>(nodeABRev1);
   nodeABRev1->setRuntimeShadowNodeReference(wrappedShadowNode);
 
   auto nodeABRev2 = nodeABRev1->clone({});
 
-  if (GetParam()) {
-    // The wrappedShadowNode should reference the new latest clone
-    EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev2);
-  } else {
-    // The wrappedShadowNode is still referencing the original shadow node
-    EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev1);
-  }
+  // The wrappedShadowNode should reference the new latest clone
+  EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev2);
 
   auto nodeABRev3 = componentDescriptor_.cloneShadowNode(
       *nodeABRev2, {.runtimeShadowNodeReference = false});
 
-  if (GetParam()) {
-    // The wrappedShadowNode should still reference nodeABRev2
-    EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev2);
-  } else {
-    // The wrappedShadowNode is still referencing the original shadow node
-    EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev1);
-  }
+  // The wrappedShadowNode should still reference nodeABRev2
+  EXPECT_EQ(wrappedShadowNode->shadowNode, nodeABRev2);
 }

package/ReactCommon/react/renderer/css/CMakeLists.txt

@@ -0,0 +1,36 @@
+# 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.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+add_compile_options(
+        -fexceptions
+        -frtti
+        -std=c++20
+        -Wall
+        -Wpedantic
+        -DLOG_TAG=\"Fabric\")
+
+file(GLOB react_renderer_css_SRC CONFIGURE_DEPENDS *.cpp)
+
+# We need to create library as INTERFACE if it is header only
+if("${react_renderer_css_SRC}" STREQUAL "")
+  add_library(react_renderer_css INTERFACE)
+
+  target_include_directories(react_renderer_css INTERFACE ${REACT_COMMON_DIR})
+  target_link_libraries(react_renderer_css INTERFACE
+        glog
+        react_debug
+        react_utils)
+else()
+  add_library(react_renderer_css OBJECT ${react_renderer_css_SRC})
+
+  target_include_directories(react_renderer_css PUBLIC ${REACT_COMMON_DIR})
+  target_link_libraries(react_renderer_css
+        glog
+        react_debug
+        react_utils)
+endif()

package/ReactCommon/react/renderer/css/CSSAngle.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 <optional>
+
+#include <react/renderer/css/CSSAngleUnit.h>
+#include <react/renderer/css/CSSDataType.h>
+
+namespace facebook::react {
+
+/**
+ * Representation of CSS <angle> data type
+ * https://www.w3.org/TR/css-values-4/#angles
+ */
+struct CSSAngle {
+  float degrees{};
+
+  constexpr bool operator==(const CSSAngle& rhs) const = default;
+};
+
+template <>
+struct CSSDataTypeParser<CSSAngle> {
+  static constexpr auto consumePreservedToken(const CSSPreservedToken& token)
+      -> std::optional<CSSAngle> {
+    if (token.type() == CSSTokenType::Dimension) {
+      if (auto unit = parseCSSAngleUnit(token.unit())) {
+        return CSSAngle{canonicalize(token.numericValue(), *unit)};
+      }
+    }
+    return {};
+  }
+};
+
+static_assert(CSSDataType<CSSAngle>);
+
+} // namespace facebook::react

package/ReactCommon/react/renderer/css/CSSColor.h

@@ -0,0 +1,59 @@
+/*
+ * 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 <optional>
+
+#include <react/renderer/css/CSSColorFunction.h>
+#include <react/renderer/css/CSSDataType.h>
+#include <react/renderer/css/CSSHexColor.h>
+#include <react/renderer/css/CSSNamedColor.h>
+
+namespace facebook::react {
+
+/**
+ * Representation of CSS <color> data type
+ * https://www.w3.org/TR/css-color-5/#typedef-color
+ */
+struct CSSColor {
+  uint8_t r{};
+  uint8_t g{};
+  uint8_t b{};
+  uint8_t a{};
+
+  constexpr bool operator==(const CSSColor& rhs) const = default;
+
+  static constexpr CSSColor black() {
+    return {0, 0, 0, 255};
+  }
+};
+
+template <>
+struct CSSDataTypeParser<CSSColor> {
+  static constexpr auto consumePreservedToken(const CSSPreservedToken& token)
+      -> std::optional<CSSColor> {
+    switch (token.type()) {
+      case CSSTokenType::Ident:
+        return parseCSSNamedColor<CSSColor>(token.stringValue());
+      case CSSTokenType::Hash:
+        return parseCSSHexColor<CSSColor>(token.stringValue());
+      default:
+        return {};
+    }
+  }
+
+  static constexpr auto consumeFunctionBlock(
+      const CSSFunctionBlock& func,
+      CSSSyntaxParser& parser) -> std::optional<CSSColor> {
+    return parseCSSColorFunction<CSSColor>(func.name, parser);
+  }
+};
+
+static_assert(CSSDataType<CSSColor>);
+
+} // namespace facebook::react