Skip to content

Commit b496612

Browse files
j-piaseckimeta-codesync[bot]
j-piasecki
authored and
meta-codesync[bot]
committed
Fix percentage-based border radius (#56915)
Summary: Pull Request resolved: #56915 Changelog: [IOS][FIXED] Fixed percentage-based border radius `isUniform` checks if all corners are equal, which is fine in most cases. When it comes to setting broderRadius, it also needs to be checked whether the corner is circular or not. Reviewed By: jorge-cab, javache Differential Revision: D105926696 fbshipit-source-id: f2d1cc7e7e2fc4a12b7964c7e06235f5a0d66bf7
1 parent 3d50561 commit b496612

11 files changed

Lines changed: 19 additions & 5 deletions

File tree

‎packages/react-native/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1044,7 +1044,7 @@ - (void)invalidateLayer
10441044
const bool useCoreAnimationBorderRendering =
10451045
borderMetrics.borderColors.isUniform() && borderMetrics.borderWidths.isUniform() &&
10461046
borderMetrics.borderStyles.isUniform() && borderMetrics.borderStyles.left == BorderStyle::Solid &&
1047-
borderMetrics.borderRadii.isUniform() &&
1047+
areBorderRadiiCircular(borderMetrics.borderRadii) &&
10481048
(
10491049
// iOS draws borders in front of the content whereas CSS draws them behind
10501050
// the content. For this reason, only use iOS border drawing when clipping
@@ -1126,7 +1126,7 @@ - (void)invalidateLayer
11261126
_outlineLayer.frame = CGRectInset(
11271127
layer.bounds, -_props->outlineOffset - _props->outlineWidth, -_props->outlineOffset - _props->outlineWidth);
11281128

1129-
if (borderMetrics.borderRadii.isUniform() && borderMetrics.borderRadii.topLeft.horizontal == 0) {
1129+
if (areBorderRadiiCircular(borderMetrics.borderRadii) && borderMetrics.borderRadii.topLeft.horizontal == 0) {
11301130
UIColor *outlineColor = RCTUIColorFromSharedColor(_props->outlineColor);
11311131
_outlineLayer.borderWidth = _props->outlineWidth;
11321132
_outlineLayer.borderColor = outlineColor.CGColor;
@@ -1302,7 +1302,7 @@ - (void)invalidateLayer
13021302
if (self.currentContainerView.clipsToBounds) {
13031303
BOOL clipToPaddingBox = ReactNativeFeatureFlags::enableIOSViewClipToPaddingBox();
13041304
if (!clipToPaddingBox) {
1305-
if (borderMetrics.borderRadii.isUniform()) {
1305+
if (areBorderRadiiCircular(borderMetrics.borderRadii)) {
13061306
self.currentContainerView.layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
13071307
} else {
13081308
CALayer *maskLayer =
@@ -1325,7 +1325,7 @@ - (void)invalidateLayer
13251325
}
13261326
} else if (
13271327
!borderMetrics.borderWidths.isUniform() || borderMetrics.borderWidths.left != 0 ||
1328-
!borderMetrics.borderRadii.isUniform()) {
1328+
!areBorderRadiiCircular(borderMetrics.borderRadii)) {
13291329
CALayer *maskLayer = [self createMaskLayer:RCTCGRectFromRect(_layoutMetrics.getPaddingFrame())
13301330
cornerInsets:RCTGetCornerInsets(
13311331
RCTCornerRadiiFromBorderRadii(borderMetrics.borderRadii),
@@ -1344,7 +1344,7 @@ - (void)shapeLayerToMatchView:(CALayer *)layer borderMetrics:(BorderMetrics)bord
13441344
// Bounds is needed here to account for scaling transforms properly and ensure
13451345
// we do not scale twice
13461346
layer.frame = CGRectMake(0, 0, self.layer.bounds.size.width, self.layer.bounds.size.height);
1347-
if (borderMetrics.borderRadii.isUniform()) {
1347+
if (areBorderRadiiCircular(borderMetrics.borderRadii)) {
13481348
layer.mask = nil;
13491349
layer.cornerRadius = borderMetrics.borderRadii.topLeft.horizontal;
13501350
layer.cornerCurve = CornerCurveFromBorderCurve(borderMetrics.borderCurves.topLeft);

‎packages/react-native/ReactCommon/react/renderer/components/view/primitives.h‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -248,4 +248,9 @@ struct BorderMetrics {
248248
bool operator==(const BorderMetrics &rhs) const = default;
249249
};
250250

251+
inline bool areBorderRadiiCircular(const BorderRadii &borderRadii)
252+
{
253+
return borderRadii.isUniform() && borderRadii.topLeft.horizontal == borderRadii.topLeft.vertical;
254+
}
255+
251256
} // namespace facebook::react

‎scripts/cxx-api/api-snapshots/ReactAndroidDebugCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -811,6 +811,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
811811
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
812812
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
813813
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
814+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
814815
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
815816
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
816817
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactAndroidNewarchCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -810,6 +810,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
810810
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
811811
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
812812
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
813+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
813814
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
814815
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
815816
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactAndroidReleaseCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -811,6 +811,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
811811
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
812812
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
813813
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
814+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
814815
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
815816
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
816817
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactAppleDebugCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4052,6 +4052,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
40524052
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
40534053
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
40544054
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
4055+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
40554056
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
40564057
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
40574058
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactAppleNewarchCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3677,6 +3677,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
36773677
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
36783678
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
36793679
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
3680+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
36803681
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
36813682
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
36823683
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactAppleReleaseCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4052,6 +4052,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
40524052
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
40534053
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
40544054
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
4055+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
40554056
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
40564057
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
40574058
bool facebook::react::hostPlatformColorIsColorMeaningful(facebook::react::Color color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactCommonDebugCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
420420
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
421421
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
422422
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
423+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
423424
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
424425
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
425426
bool facebook::react::isColorMeaningful(const facebook::react::SharedColor& color) noexcept;

‎scripts/cxx-api/api-snapshots/ReactCommonNewarchCxx.api‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -419,6 +419,7 @@ bool facebook::react::areAttributedStringFragmentsEquivalentDisplayWise(const fa
419419
bool facebook::react::areAttributedStringFragmentsEquivalentLayoutWise(const facebook::react::AttributedString::Fragment& lhs, const facebook::react::AttributedString::Fragment& rhs);
420420
bool facebook::react::areAttributedStringsEquivalentDisplayWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
421421
bool facebook::react::areAttributedStringsEquivalentLayoutWise(const facebook::react::AttributedString& lhs, const facebook::react::AttributedString& rhs);
422+
bool facebook::react::areBorderRadiiCircular(const facebook::react::BorderRadii& borderRadii);
422423
bool facebook::react::areTextAttributesEquivalentLayoutWise(const facebook::react::TextAttributes& lhs, const facebook::react::TextAttributes& rhs);
423424
bool facebook::react::hasAccurateCPUTimeNanosForBenchmarks();
424425
bool facebook::react::isColorMeaningful(const facebook::react::SharedColor& color) noexcept;

0 commit comments

Comments
 (0)