Skip to content

[iOS] Fixes strange gradient appears when using borderTopLeftRadius (or similar) not uniform #49531

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

Closed
wants to merge 2 commits into from
Closed

[iOS] Fixes strange gradient appears when using borderTopLeftRadius (or similar) not uniform #49531

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e61e1fc
[iOS] Fixes strange gradient appears when using borderTopLeftRadius (…
zhongwuzw Feb 19, 2025
3030b9d
Let View to use shouldRasterizeIOS
zhongwuzw Feb 24, 2025
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 packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -911,6 +911,13 @@ - (void)invalidateLayer
_borderLayer = borderLayer;
}

if (_props->shouldRasterize) {
_borderLayer.shouldRasterize = YES;
_borderLayer.rasterizationScale = self.traitCollection.displayScale;
} else {
_borderLayer.shouldRasterize = NO;
}
Comment on lines +914 to +919
Copy link
Contributor

Choose a reason for hiding this comment

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

It might be a bit unintuitive that this magic border layer receives the effects of this prop, yet nothing else does. Does rasterizing the view-backing layer fix this issue too?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Does rasterizing the view-backing layer fix this issue too?

@joevilches Yes, the paper arch uses a view-backing layer for border rendering https://github.com/facebook/react-native/blob/main/packages/react-native/React/Views/RCTView.m#L859-L862, also if user set shouldRasterizeIOS to enable rasterizing, it works.

Copy link
Contributor

Choose a reason for hiding this comment

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

My question was more around, can we fix this issue with the weird gradient on the border if we JUST set shouldRasterize on the view-backing layer, and not on the border layer.

Originally I thought we were only using shouldRasterize on the border layer here (which I found confusing), but I see that the code does indeed already exist at https://github.com/facebook/react-native/blob/main/packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm#L285 so we set it on the view-backing layer too.

So now I am wondering is this fixable by just setting shouldRasterizeIOS which maps to the view backing layer currently and wondering if you tested that beforehand (in a case where this border layer is present). If it does not then I think we are good to merge this!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@joevilches Yes, you're right, #49615 also fixes this issue, we don't need to set it on the border layer. I'm going to close this. Thank you.


layer.borderWidth = 0;
layer.borderColor = nil;
layer.cornerRadius = 0;
Expand Down
Loading