Add very basic box-shadow support (#14028)

* Add very basic box-shadow support * Change files
microsoft · Oct 24, 2024 · 19b6aba · 19b6aba
1 parent 96f969e
commit 19b6aba
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/change/react-native-windows-7edd982f-196f-4feb-a824-cbf08e0a2c96.json b/change/react-native-windows-7edd982f-196f-4feb-a824-cbf08e0a2c96.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add very basic box-shadow support",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
@@ -1245,18 +1245,26 @@ void ComponentView::updateShadowProps(
   // Shadow Properties
   if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
       oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
-      oldViewProps.shadowRadius != newViewProps.shadowRadius) {
+      oldViewProps.shadowRadius != newViewProps.shadowRadius || oldViewProps.boxShadow != newViewProps.boxShadow) {
     applyShadowProps(newViewProps);
   }
 }
 
 void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps) noexcept {
   auto shadow = m_compContext.CreateDropShadow();
-  shadow.Offset({viewProps.shadowOffset.width, viewProps.shadowOffset.height, 0});
-  shadow.Opacity(viewProps.shadowOpacity);
-  shadow.BlurRadius(viewProps.shadowRadius);
-  if (viewProps.shadowColor)
-    shadow.Color(theme()->Color(*viewProps.shadowColor));
+  if (!viewProps.boxShadow.empty()) {
+    shadow.Offset({viewProps.boxShadow[0].offsetX, viewProps.boxShadow[0].offsetY, 0});
+    shadow.Opacity(1);
+    shadow.BlurRadius(viewProps.boxShadow[0].blurRadius);
+    shadow.Color(theme()->Color(*viewProps.boxShadow[0].color));
+  } else {
+    shadow.Offset({viewProps.shadowOffset.width, viewProps.shadowOffset.height, 0});
+    shadow.Opacity(viewProps.shadowOpacity);
+    shadow.BlurRadius(viewProps.shadowRadius);
+    if (viewProps.shadowColor)
+      shadow.Color(theme()->Color(*viewProps.shadowColor));
+  }
+
   Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
 }