Parse raw box shadow props (facebook#44882)

Summary:
Pull Request resolved: facebook#44882

tsia, nothing too fancy here. Just taking the box shadows from raw props and throwing them into a struct so we can read it.

[Changelog]: Internal

Reviewed By: NickGerleman

Differential Revision: D57617028

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.cpp

@@ -150,6 +150,14 @@ BaseViewProps::BaseViewProps(
                                                        "cursor",
                                                        sourceProps.cursor,
                                                        {})),
+      boxShadow(
+          CoreFeatures::enablePropIteratorSetter ? sourceProps.boxShadow
+                                                 : convertRawProp(
+                                                       context,
+                                                       rawProps,
+                                                       "experimental_boxShadow",
+                                                       sourceProps.boxShadow,
+                                                       {})),
       filter(
           CoreFeatures::enablePropIteratorSetter ? sourceProps.filter
                                                  : convertRawProp(

packages/react-native/ReactCommon/react/renderer/components/view/BaseViewProps.h

@@ -13,6 +13,7 @@
 #include <react/renderer/core/LayoutMetrics.h>
 #include <react/renderer/core/Props.h>
 #include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/graphics/BoxShadow.h>
 #include <react/renderer/graphics/Color.h>
 #include <react/renderer/graphics/Filter.h>
 #include <react/renderer/graphics/Transform.h>
@@ -55,6 +56,9 @@ class BaseViewProps : public YogaStylableProps, public AccessibilityProps {
 
   Cursor cursor{};
 
+  // Box shadow
+  std::vector<BoxShadow> boxShadow{};
+
   // Filter
   std::vector<FilterPrimitive> filter{};
 

packages/react-native/ReactCommon/react/renderer/components/view/conversions.h

@@ -15,7 +15,9 @@
 #include <react/renderer/core/LayoutMetrics.h>
 #include <react/renderer/core/PropsParserContext.h>
 #include <react/renderer/core/RawProps.h>
+#include <react/renderer/graphics/BoxShadow.h>
 #include <react/renderer/graphics/Filter.h>
+#include <react/renderer/graphics/PlatformColorParser.h>
 #include <react/renderer/graphics/Transform.h>
 #include <react/renderer/graphics/ValueUnit.h>
 #include <stdlib.h>
@@ -929,6 +931,102 @@ inline void fromRawValue(
   react_native_expect(false);
 }
 
+inline void fromRawValue(
+    const PropsParserContext& context,
+    const RawValue& value,
+    std::vector<BoxShadow>& result) {
+  react_native_expect(value.hasType<std::vector<RawValue>>());
+  if (!value.hasType<std::vector<RawValue>>()) {
+    result = {};
+    return;
+  }
+
+  std::vector<BoxShadow> boxShadows{};
+  auto rawBoxShadows = static_cast<std::vector<RawValue>>(value);
+  for (const auto& rawBoxShadow : rawBoxShadows) {
+    bool isMap =
+        rawBoxShadow.hasType<std::unordered_map<std::string, RawValue>>();
+    react_native_expect(isMap);
+    if (!isMap) {
+      // If any box shadow is malformed then we should not apply any of them
+      // which is the web behavior.
+      result = {};
+      return;
+    }
+
+    auto rawBoxShadowMap =
+        static_cast<std::unordered_map<std::string, RawValue>>(rawBoxShadow);
+    BoxShadow boxShadow{};
+    auto offsetX = rawBoxShadowMap.find("offsetX");
+    react_native_expect(offsetX != rawBoxShadowMap.end());
+    if (offsetX == rawBoxShadowMap.end()) {
+      result = {};
+      return;
+    }
+    react_native_expect(offsetX->second.hasType<Float>());
+    if (!offsetX->second.hasType<Float>()) {
+      result = {};
+      return;
+    }
+    boxShadow.offsetX = (Float)offsetX->second;
+
+    auto offsetY = rawBoxShadowMap.find("offsetY");
+    react_native_expect(offsetY != rawBoxShadowMap.end());
+    if (offsetY == rawBoxShadowMap.end()) {
+      result = {};
+      return;
+    }
+    react_native_expect(offsetY->second.hasType<Float>());
+    if (!offsetY->second.hasType<Float>()) {
+      result = {};
+      return;
+    }
+    boxShadow.offsetY = (Float)offsetY->second;
+
+    auto blurRadius = rawBoxShadowMap.find("blurRadius");
+    if (blurRadius != rawBoxShadowMap.end()) {
+      react_native_expect(blurRadius->second.hasType<Float>());
+      if (!blurRadius->second.hasType<Float>()) {
+        result = {};
+        return;
+      }
+      boxShadow.blurRadius = (Float)blurRadius->second;
+    }
+
+    auto spreadRadius = rawBoxShadowMap.find("spreadRadius");
+    if (spreadRadius != rawBoxShadowMap.end()) {
+      react_native_expect(spreadRadius->second.hasType<Float>());
+      if (!spreadRadius->second.hasType<Float>()) {
+        result = {};
+        return;
+      }
+      boxShadow.spreadRadius = (Float)spreadRadius->second;
+    }
+
+    auto inset = rawBoxShadowMap.find("inset");
+    if (inset != rawBoxShadowMap.end()) {
+      react_native_expect(inset->second.hasType<bool>());
+      if (!inset->second.hasType<bool>()) {
+        result = {};
+        return;
+      }
+      boxShadow.inset = (bool)inset->second;
+    }
+
+    auto color = rawBoxShadowMap.find("color");
+    if (color != rawBoxShadowMap.end()) {
+      fromRawValue(
+          context.contextContainer,
+          context.surfaceId,
+          color->second,
+          boxShadow.color);
+    }
+
+    boxShadows.push_back(boxShadow);
+  }
+
+  result = boxShadows;
+}
 inline void fromRawValue(
     const PropsParserContext& /*context*/,
     const RawValue& value,

packages/react-native/ReactCommon/react/renderer/graphics/BoxShadow.h

@@ -0,0 +1,25 @@
+/*
+ * 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 <react/renderer/graphics/Color.h>
+#include <react/renderer/graphics/Float.h>
+
+namespace facebook::react {
+
+struct BoxShadow {
+  bool operator==(const BoxShadow& other) const = default;
+
+  Float offsetX{};
+  Float offsetY{};
+  Float blurRadius{};
+  Float spreadRadius{};
+  SharedColor color{};
+  bool inset{};
+};
+} // namespace facebook::react