@@ -712,6 +712,7 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeScriptUIView, backgroun
712712// TODO: use sublayer if its applied to a layout
713713function 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
752763function 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