Skip to content

Commit bff9575

Browse files
CatchABusNathanWalker
authored andcommitted
fix(ios): apply proper border radius to box shadow and view sublayers (#9881)
1 parent 8b22bb2 commit bff9575

1 file changed

Lines changed: 22 additions & 3 deletions

File tree

‎packages/core/ui/styling/background.ios.ts‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -712,6 +712,7 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeScriptUIView, backgroun
712712
// TODO: use sublayer if its applied to a layout
713713
function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
714714
const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow');
715+
const renderSize = view.getActualSize() || { width: 0, height: 0 };
715716

716717
layer.masksToBounds = false;
717718
nativeView.clipsToBounds = false;
@@ -720,10 +721,23 @@ function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CS
720721
// nativeView.clipsToBounds doesn't work
721722
view.setProperty('clipToBounds', false);
722723

724+
// This should match the view's border radius (only uniform radius is supported for now)
725+
let cornerRadius = layout.toDeviceIndependentPixels(background.borderTopLeftRadius);
726+
cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), cornerRadius);
727+
728+
// Apply corner radius to sub layers as clipToBounds and masksToBounds are now set to false
729+
const sublayers = nativeView.layer?.sublayers;
730+
if (sublayers) {
731+
for (let i = 0; i < sublayers.count; i++) {
732+
sublayers.objectAtIndex(i).cornerRadius = cornerRadius;
733+
}
734+
}
735+
723736
if (!background.color?.a) {
724737
// add white background if view has a transparent background
725738
layer.backgroundColor = UIColor.whiteColor.CGColor;
726739
}
740+
727741
// shadow opacity is handled on the shadow's color instance
728742
layer.shadowOpacity = boxShadow.color?.a ? boxShadow.color?.a / 255 : 1;
729743
layer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius, 0.0);
@@ -735,9 +749,6 @@ function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CS
735749
Length.toDevicePixels(boxShadow.offsetY, 0.0)
736750
);
737751

738-
// this should match the view's border radius
739-
const cornerRadius = Length.toDevicePixels(<CoreTypes.LengthType>view.style.borderRadius, 0.0);
740-
741752
// apply spreadRadius by expanding shadow layer bounds
742753
// prettier-ignore
743754
const bounds = CGRectInset(nativeView.bounds,
@@ -751,10 +762,18 @@ function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CS
751762

752763
function clearBoxShadow(nativeView: NativeScriptUIView) {
753764
nativeView.clipsToBounds = true;
765+
const sublayers = nativeView.layer?.sublayers;
766+
if (sublayers) {
767+
for (let i = 0; i < sublayers.count; i++) {
768+
sublayers.objectAtIndex(i).cornerRadius = 0.0;
769+
}
770+
}
771+
754772
const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow', false);
755773
if (!layer) {
756774
return;
757775
}
776+
758777
layer.masksToBounds = true;
759778
layer.shadowOffset = CGSizeMake(0, 0);
760779
layer.shadowColor = UIColor.clearColor.CGColor;

0 commit comments

Comments
 (0)