Skip to content

[Fabric] Enable ShadowProps for all Fabric Components #12108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 6, 2023
Merged

[Fabric] Enable ShadowProps for all Fabric Components #12108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bbfa5bb
extract shadow properties to baseComponentView
TatianaKapos Sep 5, 2023
a092e89
Change files
TatianaKapos Sep 5, 2023
a886a1b
Change to updateShadowProps
TatianaKapos Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-cc839d12-f772-4086-889e-cea33545830b.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "extract shadow properties to baseComponentView",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
32 changes: 19 additions & 13 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 4 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ImageComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ void ImageComponentView::updateProps(

ensureVisual();

updateShadowProps(oldImageProps, newImageProps, m_visual);
updateBorderProps(oldImageProps, newImageProps);

if (oldImageProps.backgroundColor != newImageProps.backgroundColor ||
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ParagraphComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ void ParagraphComponentView::updateProps(
updateTextAlignment(newViewProps.textAttributes.alignment);
}

updateShadowProps(oldViewProps, newViewProps, m_visual);
updateAccessibilityProps(oldViewProps, newViewProps);
updateBorderProps(oldViewProps, newViewProps);

Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion vnext/Microsoft.ReactNative/Fabric/Composition/ScrollViewComponentView.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Copy link
Contributor Author

@TatianaKapos TatianaKapos Sep 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@acoates-ms Every other component m_visual was a ISpriteVisual, so changed ScrollView's to match and it seemed to not affect anything on rnTester. Let me know if there was a reason for having this as a IVisual though and I can change it back!

winrt::Microsoft::ReactNative::Composition::IScrollVisual m_scrollVisual{nullptr};
winrt::Microsoft::ReactNative::Composition::IScrollVisual::ScrollPositionChanged_revoker
m_scrollPositionChangedRevoker{};
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/SwitchComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,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);
}
Expand Down
1 change: 1 addition & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -608,6 +608,7 @@ void WindowsTextInputComponentView::updateProps(

ensureVisual();

updateShadowProps(oldTextInputProps, newTextInputProps, m_visual);
updateBorderProps(oldTextInputProps, newTextInputProps);

if (!facebook::react::floatEquality(
Expand Down