diff --git a/change/react-native-windows-cc839d12-f772-4086-889e-cea33545830b.json b/change/react-native-windows-cc839d12-f772-4086-889e-cea33545830b.json new file mode 100644 index 00000000000..9a84324f956 --- /dev/null +++ b/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" +} diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index 238f3be134b..e523e991802 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/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( diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h index 54d0acf465b..ce4df0e792f 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h +++ b/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; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp index 9ba850d67aa..427feeba7a2 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp @@ -107,6 +107,7 @@ void ImageComponentView::updateProps( ensureVisual(); + updateShadowProps(oldImageProps, newImageProps, m_visual); updateBorderProps(oldImageProps, newImageProps); if (oldImageProps.backgroundColor != newImageProps.backgroundColor || diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp index 6fa60640f8e..840b92b9037 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp @@ -54,6 +54,7 @@ void ParagraphComponentView::updateProps( updateTextAlignment(newViewProps.textAttributes.alignment); } + updateShadowProps(oldViewProps, newViewProps, m_visual); updateAccessibilityProps(oldViewProps, newViewProps); updateBorderProps(oldViewProps, newViewProps); diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp index 336fae9cbd4..9e24ab227f1 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp +++ b/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(props); } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h index 74e7d5ab635..94733d8f964 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h +++ b/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{}; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp index 05642ac0a26..dfae29a8f96 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp @@ -55,6 +55,7 @@ void SwitchComponentView::updateProps( m_drawingSurface = nullptr; } + updateShadowProps(oldViewProps, newViewProps, m_visual); updateBorderProps(oldViewProps, newViewProps); m_props = std::static_pointer_cast(props); } diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp index a29f77e5ff6..ce5aad294fe 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp @@ -608,6 +608,7 @@ void WindowsTextInputComponentView::updateProps( ensureVisual(); + updateShadowProps(oldTextInputProps, newTextInputProps, m_visual); updateBorderProps(oldTextInputProps, newTextInputProps); if (!facebook::react::floatEquality(