Skip to content

Fixing box with corner radius doesn't have shadow #15614

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

Open
protikbiswas100 wants to merge 6 commits into
base: 0.82-stable
Choose a base branch
from
+110 −2
Open

Fixing box with corner radius doesn't have shadow #15614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d1beae9
adding fix for shadow in rounded box
protikbiswas100 Feb 2, 2026
3014680
Change files
protikbiswas100 Feb 2, 2026
79a8d10
Merge branch '0.82-stable' into 15604-shadowbox-0.82
protikbiswas100 Feb 2, 2026
eee85f8
Merge branch '0.82-stable' into 15604-shadowbox-0.82
protikbiswas100 Feb 2, 2026
3e9c5dd
Skip Xaml WinUI3 component in e2e visitAllPages test
protikbiswas100 Feb 3, 2026
84d9cfe
Merge branch '0.82-stable' into 15604-shadowbox-0.82
protikbiswas100 Feb 11, 2026
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-7ee31594-04e3-459a-8d85-f305644d691c.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"comment": "adding fix for shadow in rounded box",
"type": "prerelease",
"packageName": "react-native-windows",
"email": "protikbiswas@microsoft.com",
"dependentChangeType": "patch"
}
9 changes: 8 additions & 1 deletion vnext/Microsoft.ReactNative/CompositionSwitcher.idl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,16 @@ enum SnapPointsAlignment {
void Opacity(Single value);
void BlurRadius(Single value);
void Color(Windows.UI.Color value);
void Mask(IBrush mask);
void SourcePolicy(CompositionDropShadowSourcePolicy policy);
}

[webhosthidden][experimental] interface IVisual {
[webhosthidden][experimental] enum CompositionDropShadowSourcePolicy {
Default = 0,
InheritedOnly = 1
};

[webhosthidden][experimental] interface IVisual {
void InsertAt(IVisual visual, Int32 index);
void Remove(IVisual visual);
IVisual GetAt(UInt32 index);
Expand Down
15 changes: 15 additions & 0 deletions vnext/Microsoft.ReactNative/Fabric/Composition/CompositionContextHelper.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ struct CompositionTypeTraits<WindowsTypeTag> {
using CompositionStretch = winrt::Windows::UI::Composition::CompositionStretch;
using CompositionStrokeCap = winrt::Windows::UI::Composition::CompositionStrokeCap;
using CompositionSurfaceBrush = winrt::Windows::UI::Composition::CompositionSurfaceBrush;
using CompositionDropShadowSourcePolicy = winrt::Windows::UI::Composition::CompositionDropShadowSourcePolicy;
using Compositor = winrt::Windows::UI::Composition::Compositor;
using ContainerVisual = winrt::Windows::UI::Composition::ContainerVisual;
using CubicBezierEasingFunction = winrt::Windows::UI::Composition::CubicBezierEasingFunction;
Expand Down Expand Up @@ -122,6 +123,7 @@ struct CompositionTypeTraits<MicrosoftTypeTag> {
using CompositionStretch = winrt::Microsoft::UI::Composition::CompositionStretch;
using CompositionStrokeCap = winrt::Microsoft::UI::Composition::CompositionStrokeCap;
using CompositionSurfaceBrush = winrt::Microsoft::UI::Composition::CompositionSurfaceBrush;
using CompositionDropShadowSourcePolicy = winrt::Microsoft::UI::Composition::CompositionDropShadowSourcePolicy;
using Compositor = winrt::Microsoft::UI::Composition::Compositor;
using ContainerVisual = winrt::Microsoft::UI::Composition::ContainerVisual;
using CubicBezierEasingFunction = winrt::Microsoft::UI::Composition::CubicBezierEasingFunction;
Expand Down Expand Up @@ -218,6 +220,19 @@ struct CompDropShadow : public winrt::implements<
m_shadow.Color(color);
}

void Mask(winrt::Microsoft::ReactNative::Composition::Experimental::IBrush const &mask) noexcept {
if (mask) {
m_shadow.Mask(mask.as<typename TTypeRedirects::IInnerCompositionBrush>()->InnerBrush());
} else {
m_shadow.Mask(nullptr);
}
}

void SourcePolicy(
winrt::Microsoft::ReactNative::Composition::Experimental::CompositionDropShadowSourcePolicy policy) noexcept {
m_shadow.SourcePolicy(static_cast<typename TTypeRedirects::CompositionDropShadowSourcePolicy>(policy));
}

private:
typename TTypeRedirects::DropShadow m_shadow;
};
Expand Down
81 changes: 80 additions & 1 deletion vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -708,7 +708,86 @@ void ComponentView::applyShadowProps(const facebook::react::ViewProps &viewProps
shadow.Color(theme()->Color(*viewProps.shadowColor));
}

Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
// Check if any border radius is set
auto borderMetrics = BorderPrimitive::resolveAndAlignBorderMetrics(m_layoutMetrics, viewProps);
bool hasBorderRadius = borderMetrics.borderRadii.topLeft.horizontal != 0 ||
borderMetrics.borderRadii.topRight.horizontal != 0 || borderMetrics.borderRadii.bottomLeft.horizontal != 0 ||
borderMetrics.borderRadii.bottomRight.horizontal != 0 || borderMetrics.borderRadii.topLeft.vertical != 0 ||
borderMetrics.borderRadii.topRight.vertical != 0 || borderMetrics.borderRadii.bottomLeft.vertical != 0 ||
borderMetrics.borderRadii.bottomRight.vertical != 0;

if (hasBorderRadius) {
// When borderRadius is set, we need to create a shadow mask that follows the rounded rectangle shape.
// Use CompositionVisualSurface to capture the clipped visual's appearance as the shadow mask.
bool maskSet = false;

// Try Microsoft (WinUI3) Composition first
auto msCompositor =
winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerCompositor(
m_compContext);
if (msCompositor) {
auto innerVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
Visual());
if (innerVisual) {
// Create a VisualSurface that captures the visual (with its clip applied)
auto visualSurface = msCompositor.CreateVisualSurface();
Copy link
Contributor

@acoates-ms acoates-ms Feb 3, 2026

Choose a reason for hiding this comment

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

Are we doing this even for views that do not have a shadow? Looks expensive.

Copy link
Contributor Author

@protikbiswas100 protikbiswas100 Feb 11, 2026

Choose a reason for hiding this comment

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

No, this is not happening for views without a shadow. The applyShadowProps function is only called from updateShadowProps, which has a guard that checks if any shadow-related properties have changed. So the expensive operation is guarded by two conditions - shadow properties must have changed, and there must be a border radius present.

visualSurface.SourceVisual(innerVisual);
visualSurface.SourceSize(
{m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});

// Create a brush from the visual surface to use as shadow mask
auto maskBrush = msCompositor.CreateSurfaceBrush(visualSurface);
maskBrush.Stretch(winrt::Microsoft::UI::Composition::CompositionStretch::Fill);

// Get the inner shadow and set the mask
auto innerShadow = winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::
InnerDropShadow(shadow);
if (innerShadow) {
innerShadow.Mask(maskBrush);
maskSet = true;
}
}
}

// Fallback to System (Windows.UI) Composition if Microsoft Composition is not available
if (!maskSet) {
auto sysCompositor =
winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerCompositor(
m_compContext);
if (sysCompositor) {
auto innerVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerVisual(
Visual());
if (innerVisual) {
auto visualSurface = sysCompositor.CreateVisualSurface();
visualSurface.SourceVisual(innerVisual);
visualSurface.SourceSize(
{m_layoutMetrics.frame.size.width * m_layoutMetrics.pointScaleFactor,
m_layoutMetrics.frame.size.height * m_layoutMetrics.pointScaleFactor});

auto maskBrush = sysCompositor.CreateSurfaceBrush(visualSurface);
maskBrush.Stretch(winrt::Windows::UI::Composition::CompositionStretch::Fill);

auto innerShadow =
winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerDropShadow(
shadow);
if (innerShadow) {
innerShadow.Mask(maskBrush);
}
}
}
}

// Apply shadow to OuterVisual (which is not clipped) so the shadow can extend beyond the clip
OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
} else {
// No border radius - apply shadow directly to Visual (original behavior)
Visual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(shadow);
OuterVisual().as<winrt::Microsoft::ReactNative::Composition::Experimental::ISpriteVisual>().Shadow(nullptr);
}
}

void ComponentView::updateTransformProps(
Expand Down
Loading