[Fabric] Enable ShadowProps for all Fabric Components (#12108)

* extract shadow properties to baseComponentView

* Change files

* Change to updateShadowProps

Co-authored-by: Jon Thysell <thysell@gmail.com>

---------

Co-authored-by: Jon Thysell <thysell@gmail.com>

change/react-native-windows-cc839d12-f772-4086-889e-cea33545830b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "extract shadow properties to baseComponentView",
+  "packageName": "react-native-windows",
+  "email": "tatianakapos@microsoft.com",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp

@@ -1060,6 +1060,24 @@ void CompositionBaseComponentView::updateBorderProps(
   }
 }
 
+void CompositionBaseComponentView::updateShadowProps(
+    const facebook::react::ViewProps &oldViewProps,
+    const facebook::react::ViewProps &newViewProps,
+    winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept {
+  // Shadow Properties
+  if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
+      oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
+      oldViewProps.shadowRadius != newViewProps.shadowRadius) {
+    auto shadow = m_compContext.CreateDropShadow();
+    shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
+    shadow.Opacity(newViewProps.shadowOpacity);
+    shadow.BlurRadius(newViewProps.shadowRadius);
+    if (newViewProps.shadowColor)
+      shadow.Color(newViewProps.shadowColor.AsWindowsColor());
+    m_visual.Shadow(shadow);
+  }
+}
+
 void CompositionBaseComponentView::updateAccessibilityProps(
     const facebook::react::ViewProps &oldViewProps,
     const facebook::react::ViewProps &newViewProps) noexcept {
@@ -1288,19 +1306,7 @@ void CompositionViewComponentView::updateProps(
 
   updateAccessibilityProps(oldViewProps, newViewProps);
   updateBorderProps(oldViewProps, newViewProps);
-
-  // Shadow
-  if (oldViewProps.shadowOffset != newViewProps.shadowOffset || oldViewProps.shadowColor != newViewProps.shadowColor ||
-      oldViewProps.shadowOpacity != newViewProps.shadowOpacity ||
-      oldViewProps.shadowRadius != newViewProps.shadowRadius) {
-    auto shadow = m_compContext.CreateDropShadow();
-    shadow.Offset({newViewProps.shadowOffset.width, newViewProps.shadowOffset.height, 0});
-    shadow.Opacity(newViewProps.shadowOpacity);
-    shadow.BlurRadius(newViewProps.shadowRadius);
-    if (newViewProps.shadowColor)
-      shadow.Color(newViewProps.shadowColor.AsWindowsColor());
-    m_visual.Shadow(shadow);
-  }
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
 
   if (oldViewProps.backfaceVisibility != newViewProps.backfaceVisibility) {
     static_assert(

vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h

@@ -50,6 +50,10 @@ struct CompositionBaseComponentView : public IComponentView,
   void updateBorderProps(
       const facebook::react::ViewProps &oldViewProps,
       const facebook::react::ViewProps &newViewProps) noexcept;
+  void updateShadowProps(
+      const facebook::react::ViewProps &oldViewProps,
+      const facebook::react::ViewProps &newViewProps,
+      winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual) noexcept;
   void updateAccessibilityProps(
       const facebook::react::ViewProps &oldView,
       const facebook::react::ViewProps &newViewProps) noexcept;

vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp

@@ -108,6 +108,7 @@ void ImageComponentView::updateProps(
 
   ensureVisual();
 
+  updateShadowProps(oldImageProps, newImageProps, m_visual);
   updateBorderProps(oldImageProps, newImageProps);
 
   if (oldImageProps.backgroundColor != newImageProps.backgroundColor ||

vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp

@@ -55,6 +55,7 @@ void ParagraphComponentView::updateProps(
     updateTextAlignment(newViewProps.textAttributes.alignment);
   }
 
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateAccessibilityProps(oldViewProps, newViewProps);
   updateBorderProps(oldViewProps, newViewProps);
 

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp

@@ -169,6 +169,7 @@ void ScrollViewComponentView::updateProps(
   }
   */
 
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateBorderProps(oldViewProps, newViewProps);
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }

vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h

@@ -90,7 +90,7 @@ struct ScrollInteractionTrackerOwner : public winrt::implements<
   void updateContentVisualSize() noexcept;
 
   facebook::react::Size m_contentSize;
-  winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::ISpriteVisual m_visual{nullptr};
   winrt::Microsoft::ReactNative::Composition::IScrollVisual m_scrollVisual{nullptr};
   winrt::Microsoft::ReactNative::Composition::IScrollVisual::ScrollPositionChanged_revoker
       m_scrollPositionChangedRevoker{};

vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp

@@ -56,6 +56,7 @@ void SwitchComponentView::updateProps(
     m_drawingSurface = nullptr;
   }
 
+  updateShadowProps(oldViewProps, newViewProps, m_visual);
   updateBorderProps(oldViewProps, newViewProps);
   m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
 }

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

@@ -609,6 +609,7 @@ void WindowsTextInputComponentView::updateProps(
 
   ensureVisual();
 
+  updateShadowProps(oldTextInputProps, newTextInputProps, m_visual);
   updateBorderProps(oldTextInputProps, newTextInputProps);
 
   if (!facebook::react::floatEquality(