Skip to content
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

fix(iOS): displaying irregular borders on iOS old architecture #46091

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

fix(iOS): displaying irregular borders on iOS old architecture #46091

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
f83a589
fix drawing borders on old arch, RCTCreateMaskLayer refactoring
coado Aug 19, 2024
7d711c1
splitting background and border into separate layers on Fabric
coado Aug 20, 2024
5c19d1d
background layer refactor
coado Aug 20, 2024
c9ab37b
remove transparent background color
coado Aug 21, 2024
127f7fd
Update packages/react-native/React/Fabric/Mounting/ComponentViews/Vie…
coado Aug 22, 2024
4b0902c
remove border drawing updates on fabric
coado Aug 23, 2024
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
13 changes: 2 additions & 11 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 @@ -814,7 +814,7 @@ - (void)invalidateLayer
} else {
RCTCornerInsets cornerInsets =
RCTGetCornerInsets(RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii), UIEdgeInsetsZero);
maskLayer = [self createMaskLayer:self.bounds cornerInsets:cornerInsets];
maskLayer = RCTCreateMaskLayer(self.bounds, cornerInsets);
}
}

Expand All @@ -829,7 +829,7 @@ - (void)invalidateLayer

// If the subview is an image view, we have to apply the mask directly to the image view's layer,
// otherwise the image might overflow with the border radius.
subview.layer.mask = [self createMaskLayer:subview.bounds cornerInsets:cornerInsets];
subview.layer.mask = RCTCreateMaskLayer(subview.bounds, cornerInsets);
}
}
}
Expand Down Expand Up @@ -927,15 +927,6 @@ - (void)invalidateLayer
}
}

- (CAShapeLayer *)createMaskLayer:(CGRect)bounds cornerInsets:(RCTCornerInsets)cornerInsets
{
CGPathRef path = RCTPathCreateWithRoundedRect(bounds, cornerInsets, nil);
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path;
CGPathRelease(path);
return maskLayer;
}

- (void)clearExistingGradientLayers
{
if (_gradientLayers == nil) {
Expand Down
6 changes: 6 additions & 0 deletions packages/react-native/React/Views/RCTBorderDrawing.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,3 +65,9 @@ RCT_EXTERN UIImage *RCTGetBorderImage(
RCTBorderColors borderColors,
CGColorRef backgroundColor,
BOOL drawToEdge);

/**
* Create a CAShapeLayer that contains a path with specified bounds and corner insets without
* any affine transformations.
*/
RCT_EXTERN CAShapeLayer *RCTCreateMaskLayer(CGRect bounds, RCTCornerInsets cornerInsets);
13 changes: 13 additions & 0 deletions packages/react-native/React/Views/RCTBorderDrawing.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -530,3 +530,16 @@ static CGPathRef RCTPathCreateOuterOutline(BOOL drawToEdge, CGRect rect, RCTCorn

return nil;
}

CAShapeLayer *RCTCreateMaskLayer(CGRect bounds, RCTCornerInsets cornerInsets)
{
CGPathRef path = RCTPathCreateWithRoundedRect(
bounds,
cornerInsets,
nil);
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = path;
CGPathRelease(path);
return maskLayer;
}

52 changes: 33 additions & 19 deletions packages/react-native/React/Views/RCTView.m
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,26 +923,40 @@ static void RCTUpdateHoverStyleForView(RCTView *view)

- (void)updateClippingForLayer:(CALayer *)layer
{
CALayer *mask = nil;
CGFloat cornerRadius = 0;

if (self.clipsToBounds) {
const RCTCornerRadii cornerRadii = [self cornerRadii];
if (RCTCornerRadiiAreEqual(cornerRadii)) {
cornerRadius = cornerRadii.topLeft;

} else {
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
CGPathRef path =
RCTPathCreateWithRoundedRect(self.bounds, RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero), NULL);
shapeLayer.path = path;
CGPathRelease(path);
mask = shapeLayer;
CALayer *mask = nil;
CGFloat cornerRadius = 0;

if (self.clipsToBounds) {
const RCTCornerRadii cornerRadii = [self cornerRadii];
if (RCTCornerRadiiAreEqual(cornerRadii)) {
cornerRadius = cornerRadii.topLeft;

} else {
RCTCornerInsets cornerInsets = RCTGetCornerInsets(cornerRadii, UIEdgeInsetsZero);
mask = RCTCreateMaskLayer(self.bounds, cornerInsets);
}
}

layer.cornerRadius = cornerRadius;
layer.mask = mask;

for (UIView *subview in self.subviews) {
if ([subview isKindOfClass:[UIImageView class]]) {
Copy link
Contributor

Choose a reason for hiding this comment

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

There has been a suggestion from @NickGerleman to try and look for a more general approach.
It's not just images that should present this behavior, but all the components that have as tyle with overflow: hidden. Images have that style by default.

Do you think we can find a way to check if the style applied has the overflow property set to hidden, rather than checking if the subview is an Image?

Copy link
Contributor Author

@coado coado Aug 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Seems like the overflow property is used here to set clipsToBounds on the old architecture.

const RCTCornerRadii cornerRadii = [self cornerRadii];
const UIEdgeInsets borderInsets = [self bordersAsInsets];
RCTCornerInsets cornerInsets = RCTGetCornerInsets(cornerRadii, borderInsets);

// If the subview is an image view, we have to apply the mask directly to the image view's layer,
// otherwise the image might overflow with the border radius.
CGRect pathBounds = subview.bounds;
pathBounds.size.width -= borderInsets.left + borderInsets.right;
pathBounds.size.height -= borderInsets.top + borderInsets.bottom;
pathBounds.origin.x += borderInsets.left;
pathBounds.origin.y += borderInsets.top;

subview.layer.mask = RCTCreateMaskLayer(pathBounds, cornerInsets);
}
}
}

layer.cornerRadius = cornerRadius;
layer.mask = mask;
}

#pragma mark Border Color
Expand Down