From 3c3cbf200098124624d949cd5dceff1973d1e59b Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 30 Mar 2026 15:41:50 -0700 Subject: [PATCH 1/3] Do not create m_childrenContainer when using a custom visual to mount children into --- vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp | 5 +++++ vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h | 1 + .../Fabric/Composition/CompositionViewComponentView.cpp | 4 ++++ .../IReactCompositionViewComponentBuilder.idl | 2 ++ vnext/Microsoft.ReactNative/ViewProps.idl | 9 +++++++++ 5 files changed, 21 insertions(+) diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp index ceeb6b2693b..a793684fe37 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp @@ -226,6 +226,11 @@ winrt::hstring ViewProps::AccessibilityLabel() noexcept { return m_viewProps ? winrt::to_hstring(m_viewProps->accessibilityLabel) : winrt::hstring{}; } +winrt::Microsoft::ReactNative::Overflow ViewProps::Overflow() noexcept { + return m_viewProps ? static_cast(m_viewProps.yogaStyle.overflow()) + : winrt::Microsoft::ReactNative::Overflow::Visible; +} + ImageProps::ImageProps(facebook::react::SharedViewProps props) noexcept : Super(props) {} winrt::Windows::Foundation::Collections::IVectorView diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h index 3e2335484a9..fba28480b20 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h @@ -99,6 +99,7 @@ struct ViewProps : ViewPropsT { winrt::Microsoft::ReactNative::Color BackgroundColor() noexcept; winrt::hstring TestId() noexcept; winrt::hstring AccessibilityLabel() noexcept; + winrt::Microsoft::ReactNative::Overflow Overflow() noexcept; protected: facebook::react::SharedViewProps m_props; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index f7c1dd44817..237434cdf61 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -1348,6 +1348,10 @@ void ViewComponentView::updateLayoutMetrics( void ViewComponentView::updateChildrenClippingPath( facebook::react::LayoutMetrics const &layoutMetrics, const facebook::react::ViewProps &viewProps) noexcept { + // Views with a custom visual to mount children into should to do their own handling of children clipping path + if (m_builder && m_builder->VisualToMountChildrenIntoHandler()) + return; + const float scale = layoutMetrics.pointScaleFactor; const float viewWidth = layoutMetrics.frame.size.width * scale; const float viewHeight = layoutMetrics.frame.size.height * scale; diff --git a/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl b/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl index 68b04789aa4..09c75b0b815 100644 --- a/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl +++ b/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl @@ -73,6 +73,8 @@ namespace Microsoft.ReactNative.Composition void SetCreateVisualHandler(CreateVisualDelegate impl); void SetViewFeatures(ComponentViewFeatures viewFeatures); void SetUpdateLayoutMetricsHandler(UpdateLayoutMetricsDelegate impl); + + DOC_STRING("Provides a customized ContainerVisual that this components children will be mounted into. When overriding this, a clip is no longer automatically applied for overflow:\"hidden\"") void SetVisualToMountChildrenIntoHandler(VisualToMountChildrenIntoDelegate impl); }; diff --git a/vnext/Microsoft.ReactNative/ViewProps.idl b/vnext/Microsoft.ReactNative/ViewProps.idl index a22cab0648a..814a2836aaf 100644 --- a/vnext/Microsoft.ReactNative/ViewProps.idl +++ b/vnext/Microsoft.ReactNative/ViewProps.idl @@ -30,6 +30,14 @@ namespace Microsoft.ReactNative { static void WriteValue(IJSValueWriter writer, Color color); }; + [experimental] + enum Overflow + { + Visible, + Hidden, + Scroll, + }; + [webhosthidden] [experimental] DOC_STRING("Interface to implement custom view component properties.") @@ -51,6 +59,7 @@ namespace Microsoft.ReactNative { Color BackgroundColor { get; }; String TestId { get; }; String AccessibilityLabel { get; }; + Overflow Overflow { get; }; // TODO add accessors to all the properties on ViewProps }; From 01129fa2f2412d092da45205ca98cc42de1fd103 Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 30 Mar 2026 15:42:05 -0700 Subject: [PATCH 2/3] Change files --- ...ative-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json diff --git a/change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json b/change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json new file mode 100644 index 00000000000..2905fa90fb8 --- /dev/null +++ b/change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Do not create m_childrenContainer when using a custom visual to mount children into", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} From 7913d724446f12ef0aff1f7773c78847da917d29 Mon Sep 17 00:00:00 2001 From: Andrew Coates <30809111+acoates-ms@users.noreply.github.com> Date: Mon, 30 Mar 2026 16:34:00 -0700 Subject: [PATCH 3/3] fix --- vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp index a793684fe37..200166c715b 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp @@ -227,7 +227,7 @@ winrt::hstring ViewProps::AccessibilityLabel() noexcept { } winrt::Microsoft::ReactNative::Overflow ViewProps::Overflow() noexcept { - return m_viewProps ? static_cast(m_viewProps.yogaStyle.overflow()) + return m_viewProps ? static_cast(m_viewProps->yogaStyle.overflow()) : winrt::Microsoft::ReactNative::Overflow::Visible; }