Search code examples
iosnativescriptshadowborder-radius

Nativescript 8 IOS shadow cornerRadius bug

enter image description here

Here is an example with test shadow (black) for element(white) with cornerRadius 17dpi But the shadow takes on a radius that is larger than the element it belongs to and visually it looks like the shadow becomes cornerRadius 50% but should be 17 dpi.

Expected result: the cornerRadius on the shadow should match the cornerRadius on the element

This is reproduced in the case of applying a shadow through styles:

box-shadow: 0 20 0 #000;

To element with:

border-radius: 17;

package.json

"@nativescript/core": "8.3.6",
"@nativescript/ios": "8.2.3",

If you apply the shadow directly, it works as it should

const nsView = args.object;
const nsColorShadow = new Color('black');
const nsColorBg = new Color('white');

const iosView = nsView.ios;

iosView.layer.masksToBounds = false;
iosView.layer.shadowColor = nsColorShadow.ios.CGColor;
iosView.layer.shadowOpacity = 1;
iosView.layer.shadowRadius = 0;
iosView.layer.cornerRadius = 17;
iosView.layer.backgroundColor = nsColorBg.ios.CGColor;
iosView.layer.shadowOffset = CGSizeMake(0, 20);
Solution

  • I think that this is fix in core@8.4.2 https://github.com/NativeScript/NativeScript/pull/10142