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..629795f543d --- /dev/null +++ b/change/react-native-windows-46ca81e4-fac5-4ff2-a5b5-3bda74d01df7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "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" +} \ No newline at end of file diff --git a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp index 3751d99862b..28c5f1004bb 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 c5391b6d92c..99c914fb274 100644 --- a/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h +++ b/vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h @@ -101,6 +101,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 9b2ddbfbd22..f5a81a0d72f 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -1350,6 +1350,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 4ddbdc43b54..4dc7ba61383 100644 --- a/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl +++ b/vnext/Microsoft.ReactNative/IReactCompositionViewComponentBuilder.idl @@ -72,6 +72,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 577bb33af71..b762a56b01f 100644 --- a/vnext/Microsoft.ReactNative/ViewProps.idl +++ b/vnext/Microsoft.ReactNative/ViewProps.idl @@ -32,6 +32,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.") @@ -53,6 +61,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 };