Skip to content
Open
Show file tree
Hide file tree
Changes from 3 commits
Commits
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Implement overflow property support for Fabric architecture",
"packageName": "react-native-windows",
"email": "[email protected]",
"dependentChangeType": "patch"
}
Original file line number Diff line number Diff line change
Expand Up @@ -1142,6 +1142,21 @@ void ViewComponentView::updateProps(
// update BaseComponentView props
updateAccessibilityProps(oldViewProps, newViewProps);
updateTransformProps(oldViewProps, newViewProps, Visual());

// Handle overflow property changes
if (oldViewProps.yogaStyle.overflow() != newViewProps.yogaStyle.overflow()) {
auto compVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
Visual());
if (compVisual) {
if (newViewProps.yogaStyle.overflow() == facebook::yoga::Overflow::Hidden) {
compVisual.Clip(Compositor().CreateInsetClip(0.0f, 0.0f, 0.0f, 0.0f));
} else {
compVisual.Clip(nullptr);
}
}
}

base_type::updateProps(props, oldProps);

m_props = std::static_pointer_cast<facebook::react::ViewProps const>(props);
Expand Down Expand Up @@ -1319,6 +1334,23 @@ void ViewComponentView::updateLayoutMetrics(
Visual().Size(
{layoutMetrics.frame.size.width * layoutMetrics.pointScaleFactor,
layoutMetrics.frame.size.height * layoutMetrics.pointScaleFactor});

// Apply overflow clipping
if (m_props && m_props->yogaStyle.overflow() == facebook::yoga::Overflow::Hidden) {
Copy link
Contributor

Choose a reason for hiding this comment

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

What about other overflow types?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

getClipsContentToBounds check this

auto compVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
Visual());
if (compVisual) {
compVisual.Clip(Compositor().CreateInsetClip(0.0f, 0.0f, 0.0f, 0.0f));
}
} else if (m_props) {
auto compVisual =
winrt::Microsoft::ReactNative::Composition::Experimental::MicrosoftCompositionContextHelper::InnerVisual(
Visual());
if (compVisual) {
compVisual.Clip(nullptr);
Copy link
Contributor

Choose a reason for hiding this comment

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

This is as good as doing nothing, right?
If no clip was ever applied, this line is redundant.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Re-review the code.

}
}
}

void ViewComponentView::prepareForRecycle() noexcept {}
Expand Down
Loading