Skip to content

Fix percentage-based border radius (#56915) #56915

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
j-piasecki wants to merge 1 commit into from
Closed

Fix percentage-based border radius (#56915) #56915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 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 @@ -1044,7 +1044,7 @@ - (void)invalidateLayer
const bool useCoreAnimationBorderRendering =
borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
borderMetrics.borderStyles.isUniform() && borderMetrics.borderStyles.left == BorderStyle::Solid &&
borderMetrics.borderRadii.isUniform() &&
areBorderRadiiCircular(borderMetrics.borderRadii) &&
(
// iOS draws borders in front of the content whereas CSS draws them behind
// the content. For this reason, only use iOS border drawing when clipping
Expand Down Expand Up @@ -1126,7 +1126,7 @@ - (void)invalidateLayer
_outlineLayer.frame = CGRectInset(
layer.bounds, -_props->outlineOffset - _props->outlineWidth, -_props->outlineOffset - _props->outlineWidth);

if (borderMetrics.borderRadii.isUniform() && borderMetrics.borderRadii.topLeft.horizontal == 0) {
if (areBorderRadiiCircular(borderMetrics.borderRadii) && borderMetrics.borderRadii.topLeft.horizontal == 0) {
UIColor *outlineColor = RCTUIColorFromSharedColor(_props->outlineColor);
_outlineLayer.borderWidth = _props->outlineWidth;
_outlineLayer.borderColor = outlineColor.CGColor;
Expand Down Expand Up @@ -1302,7 +1302,7 @@ - (void)invalidateLayer
if (self.currentContainerView.clipsToBounds) {
BOOL clipToPaddingBox = ReactNativeFeatureFlags::enableIOSViewClipToPaddingBox();
if (!clipToPaddingBox) {
if (borderMetrics.borderRadii.isUniform()) {
if (areBorderRadiiCircular(borderMetrics.borderRadii)) {
self.currentContainerView.layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
} else {
CALayer *maskLayer =
Expand All @@ -1325,7 +1325,7 @@ - (void)invalidateLayer
}
} else if (
!borderMetrics.borderWidths.isUniform() || borderMetrics.borderWidths.left != 0 ||
!borderMetrics.borderRadii.isUniform()) {
!areBorderRadiiCircular(borderMetrics.borderRadii)) {
CALayer *maskLayer = [self createMaskLayer:RCTCGRectFromRect(_layoutMetrics.getPaddingFrame())
cornerInsets:RCTGetCornerInsets(
RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
Expand All @@ -1344,7 +1344,7 @@ - (void)shapeLayerToMatchView:(CALayer *)layer borderMetrics:(BorderMetrics)bord
// Bounds is needed here to account for scaling transforms properly and ensure
// we do not scale twice
layer.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
if (borderMetrics.borderRadii.isUniform()) {
if (areBorderRadiiCircular(borderMetrics.borderRadii)) {
layer.mask = nil;
layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);
Expand Down
5 changes: 5 additions & 0 deletions packages/react-native/ReactCommon/react/renderer/components/view/primitives.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,4 +248,9 @@ struct BorderMetrics {
bool operator==(const BorderMetrics &rhs) const = default;
};

inline bool areBorderRadiiCircular(const BorderRadii &borderRadii)
{
return borderRadii.isUniform() && borderRadii.topLeft.horizontal == borderRadii.topLeft.vertical;
}

} // namespace facebook::react
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -811,6 +811,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -810,6 +810,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -811,6 +811,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4052,6 +4052,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3677,6 +3677,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4052,6 +4052,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::isColorMeaningful(const facebook::react::SharedColor& color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -419,6 +419,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::isColorMeaningful(const facebook::react::SharedColor& color) noexcept;
Expand Down
1 change: 1 addition & 0 deletions scripts/cxx-api/api-snapshots/ReactCommonReleaseCxx.api
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
bool facebook::react::isColorMeaningful(const facebook::react::SharedColor& color) noexcept;
Expand Down
Loading