From 39eed526c1f63db75273f00811b9aae6d6c3912b Mon Sep 17 00:00:00 2001
From: Dimitris-Rafail Katsampas <katsampasdr@gmail.com>
Date: Wed, 6 Sep 2023 18:17:29 +0300
Subject: [PATCH] feat(ios): improved shadow handling with background UI rework
 (#10374)

BREAKING CHANGES:

`CSSShadow` was renamed into `ShadowCSSValues`
---
 apps/toolbox/src/pages/box-shadow.ts          |    8 +-
 apps/toolbox/src/pages/box-shadow.xml         |  182 +--
 .../scroll-view/scrolling-and-sizing-page.css |    8 +
 .../scroll-view/scrolling-and-sizing-page.xml |   43 +-
 .../text-view/scrolling-and-sizing-page.css   |    8 +
 .../text-view/scrolling-and-sizing-page.xml   |   22 +-
 packages/core/ui/animation/index.ios.ts       |  262 +++-
 packages/core/ui/button/index.ios.ts          |   10 +-
 packages/core/ui/core/view-base/index.ts      |    6 +
 packages/core/ui/core/view/index.android.ts   |   12 +-
 packages/core/ui/core/view/index.d.ts         |    4 +-
 packages/core/ui/core/view/index.ios.ts       |  103 +-
 packages/core/ui/core/view/view-common.ts     |    6 +-
 packages/core/ui/label/index.ios.ts           |   19 +-
 .../core/ui/layouts/root-layout/index.ios.ts  |   10 +-
 packages/core/ui/list-picker/index.ios.ts     |    9 +-
 packages/core/ui/styling/background-common.ts |   12 +-
 packages/core/ui/styling/background.d.ts      |   17 +-
 packages/core/ui/styling/background.ios.ts    | 1232 +++++++++++------
 packages/core/ui/styling/box-shadow.ts        |    1 +
 packages/core/ui/styling/css-shadow.ts        |    6 +-
 packages/core/ui/styling/style-properties.ts  |   17 +-
 packages/core/ui/styling/style/index.ts       |    6 +-
 packages/core/ui/text-base/index.android.ts   |    4 +-
 packages/core/ui/text-base/index.d.ts         |    6 +-
 packages/core/ui/text-base/index.ios.ts       |   22 +-
 .../core/ui/text-base/text-base-common.ts     |    8 +-
 packages/core/ui/utils.d.ts                   |   35 +-
 packages/core/ui/utils.ios.ts                 |  103 +-
 packages/core/utils/ios/index.ts              |   82 --
 packages/core/utils/native-helper.d.ts        |    7 -
 packages/core/utils/number-utils.ts           |   21 +
 32 files changed, 1433 insertions(+), 858 deletions(-)

diff --git a/apps/toolbox/src/pages/box-shadow.ts b/apps/toolbox/src/pages/box-shadow.ts
index 5de8dd7b1..f9c156a9e 100644
--- a/apps/toolbox/src/pages/box-shadow.ts
+++ b/apps/toolbox/src/pages/box-shadow.ts
@@ -15,6 +15,7 @@ export class BoxShadowModel extends Observable {
 	// private _boxShadow: string = '5 5 5 10 rgba(255, 0, 0, .9)';
 
 	background: string;
+	borderColor: string;
 	borderWidth: number;
 	borderRadius: number;
 	appliedBoxShadow: string;
@@ -72,18 +73,23 @@ export class BoxShadowModel extends Observable {
 		this.notifyPropertyChange('selectedBorderType', value);
 		switch (value) {
 			case 'solid':
-				this.borderWidth = this.borderWidth ? 0 : 2;
+				this.borderWidth = this.borderWidth ? 0 : 5;
 				break;
 			case 'rounded':
 				this.borderRadius = this.borderRadius ? 0 : 10;
 				break;
+			case 'colorful':
+				this.borderColor = this.borderColor ? null : 'green blue pink yellow';
+				break;
 			case 'none':
+				this.borderColor = null;
 				this.borderRadius = 0;
 				this.borderWidth = 0;
 				break;
 			default:
 				break;
 		}
+		this.notifyPropertyChange('borderColor', this.borderColor);
 		this.notifyPropertyChange('borderRadius', this.borderRadius);
 		this.notifyPropertyChange('borderWidth', this.borderWidth);
 	}
diff --git a/apps/toolbox/src/pages/box-shadow.xml b/apps/toolbox/src/pages/box-shadow.xml
index f19aea34b..6724ea0d4 100644
--- a/apps/toolbox/src/pages/box-shadow.xml
+++ b/apps/toolbox/src/pages/box-shadow.xml
@@ -9,129 +9,48 @@
             <!-- layouts -->
             <ScrollView height="100%" visibility="{{ selectedComponentType === 'layouts' ? 'visible' : 'collapsed' }}">
                 <StackLayout padding="20">
-									<StackLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="StackLayout"></Label>
+									<StackLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="StackLayout" />
                     </StackLayout>
 
-                    <GridLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="GridLayout"></Label>
+                    <GridLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="GridLayout" />
                     </GridLayout>
 
-                    <AbsoluteLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="AbsoluteLayout"></Label>
+                    <AbsoluteLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="AbsoluteLayout" />
                     </AbsoluteLayout>
 
-                    <DockLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="DockLayout"></Label>
+                    <DockLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="DockLayout" />
                     </DockLayout>
 
-                    <FlexboxLayout
-                        width="300"
-                        height="100"
-                        class="demo-component"
-                        boxShadow="{{ appliedBoxShadow }}"
-                        borderWidth="{{ borderWidth }}"
-                        borderRadius="{{ borderRadius }}"
-                        background="{{ background }}"
-                        tap="{{ toggleAnimation }}"
-                    >
-                        <Label text="FlexboxLayout"></Label>
+                    <FlexboxLayout width="300" height="100" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}">
+                        <Label text="FlexboxLayout" />
                     </FlexboxLayout>
 
                 </StackLayout>
             </ScrollView>
 
             <!-- labels -->
-            <GridLayout
-                rows="*"
-                height="100%"
-                visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
+            <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'labels' ? 'visible' : 'collapsed' }}">
 
-                <Label
-                    horizontalAlignment="center"
-                    verticalAlignment="center"
-                    class="demo-component"
-                    boxShadow="{{ appliedBoxShadow }}"
-                    borderWidth="{{ borderWidth }}"
-                    borderRadius="{{ borderRadius }}"
-                    background="{{ background }}"
-                    tap="{{ toggleAnimation }}"
-                    text="Label"></Label>
+                <Label horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="Label" />
 
             </GridLayout>
 
             <!-- buttons -->
-            <GridLayout
-                rows="*"
-                height="100%"
-                visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
+            <GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'buttons' ? 'visible' : 'collapsed' }}">
 
-                <Button
-                    horizontalAlignment="center"
-                    verticalAlignment="center"
-                    class="demo-component"
-                    boxShadow="{{ appliedBoxShadow }}"
-                    borderWidth="{{ borderWidth }}"
-                    borderRadius="{{ borderRadius }}"
-                    background="{{ background }}"
-                    tap="{{ toggleAnimation }}"
-                    text="button"
-                ></Button>
+                <Button horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" background="{{ background }}" tap="{{ toggleAnimation }}" text="button" />
 
             </GridLayout>
 
 						<!-- images -->
-						<GridLayout
-							rows="*"
-							height="100%"
-							visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
+						<GridLayout rows="*" height="100%" visibility="{{ selectedComponentType === 'images' ? 'visible' : 'collapsed' }}">
 
-							<ContentView width="100"
-													 height="100"
-													 horizontalAlignment="center"
-													 verticalAlignment="center"
-													 class="demo-component"
-													 boxShadow="{{ appliedBoxShadow }}"
-													 borderWidth="{{ borderWidth }}"
-													 borderRadius="{{ borderRadius }}"
-													 tap="{{ toggleAnimation }}">
-								<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png"></Image>
+							<ContentView width="100" height="100" horizontalAlignment="center" verticalAlignment="center" class="demo-component" boxShadow="{{ appliedBoxShadow }}" borderColor="{{ borderColor }}" borderWidth="{{ borderWidth }}" borderRadius="{{ borderRadius }}" tap="{{ toggleAnimation }}">
+								<Image src="https://raw.githubusercontent.com/NativeScript/artwork/main/logo/export/NativeScript_Logo_Blue_Transparent.png" />
 							</ContentView>
 
 
@@ -139,61 +58,46 @@
 
         </StackLayout>
 
-        <GridLayout
-            row="1"
-            rows="auto"
-            columns="auto, *, auto"
-            class="box-shadow-prop-controls">
-            <Label
-                col="0"
-                verticalAlignment="center"
-                text="box-shadow:"></Label>
-            <TextField
-                col="1"
-                placeholder="box-shadow"
-								text="{{ boxShadow }}"
-                textChange="{{ textChange }}"
-            >
+        <GridLayout row="1" rows="auto" columns="auto, *, auto" class="box-shadow-prop-controls">
+            <Label col="0" verticalAlignment="center" text="box-shadow:" />
+            <TextField col="1" placeholder="box-shadow" text="{{ boxShadow }}" textChange="{{ textChange }}">
             </TextField>
-            <Button
-                col="2"
-                text="APPLY"
-                class="btn-apply"
-                tap="{{ applyBoxShadow }}"></Button>
+            <Button col="2" text="APPLY" class="btn-apply" tap="{{ applyBoxShadow }}" />
         </GridLayout>
         <ScrollView row="2">
             <StackLayout padding="10" class="controls">
-                <Label text="Components"></Label>
+                <Label text="Components" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}"></Button>
-                    <Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}"></Button>
+                    <Button text="Layouts" componentType="layouts" tap="{{ selectComponentType }}" />
+                    <Button text="Labels" componentType="labels" selectedAttr="{{ selectedComponentType }}" tap="{{ selectComponentType }}" />
+                    <Button text="Buttons" componentType="buttons" selectedAttr="{{ selectedComponentType == 'buttons' }}" tap="{{ selectComponentType }}" />
+                    <Button text="Images" componentType="images" selectedAttr="{{ selectedComponentType == 'images' }}" tap="{{ selectComponentType }}" />
                 </FlexboxLayout>
 
-                <Label text="Background"></Label>
+                <Label text="Background" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}"></Button>
-                    <Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}"></Button>
-                    <Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}"></Button>
+                    <Button text="Solid" backgroundType="solid" tap="{{ selectBackgroundType }}" />
+                    <Button text="Transparent" backgroundType="transparent" tap="{{ selectBackgroundType }}" />
+                    <Button text="Gradient" backgroundType="gradient" tap="{{ selectBackgroundType }}" />
                 </FlexboxLayout>
 
-                <Label text="Borders"></Label>
+                <Label text="Borders" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Solid" borderType="solid" tap="{{ selectBorderType }}"></Button>
-                    <Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}"></Button>
-                    <Button text="None" borderType="none" tap="{{ selectBorderType }}"></Button>
+                    <Button text="Solid" borderType="solid" tap="{{ selectBorderType }}" />
+                    <Button text="Rounded" borderType="rounded" tap="{{ selectBorderType }}" />
+                    <Button text="Colorful" borderType="colorful" tap="{{ selectBorderType }}" />
+                    <Button text="None" borderType="none" tap="{{ selectBorderType }}" />
                 </FlexboxLayout>
 
-                <Label text="Animations"></Label>
-                <Label text="Tap on the component to start and stop animation" class="description"></Label>
+                <Label text="Animations" />
+                <Label text="Tap on the component to start and stop animation" class="description" />
                 <FlexboxLayout flexDirection="row" flexWrap="wrap">
-                    <Button text="Width" animationType="width" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Height" animationType="height" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}"></Button>
-                    <Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}"></Button>
+                    <Button text="Width" animationType="width" tap="{{ selectAnimationType }}" />
+                    <Button text="Height" animationType="height" tap="{{ selectAnimationType }}" />
+                    <Button text="Opacity" animationType="opacity" tap="{{ selectAnimationType }}" />
+                    <Button text="Translate" animationType="translate" tap="{{ selectAnimationType }}" />
+                    <Button text="Scale" animationType="scale" tap="{{ selectAnimationType }}" />
+                    <Button text="Rotate" animationType="rotate" tap="{{ selectAnimationType }}" />
                 </FlexboxLayout>
 
             </StackLayout>
diff --git a/apps/ui/src/scroll-view/scrolling-and-sizing-page.css b/apps/ui/src/scroll-view/scrolling-and-sizing-page.css
index 14689fa9f..352b6aea0 100644
--- a/apps/ui/src/scroll-view/scrolling-and-sizing-page.css
+++ b/apps/ui/src/scroll-view/scrolling-and-sizing-page.css
@@ -42,6 +42,14 @@ ScrollView {
     border-left-width: 20;
 }
 
+.gradient {
+    background: linear-gradient(to bottom, orangered, green, lightblue);
+}
+
+.shadow {
+    box-shadow: inset 0 0 5 5 #000000;
+}
+
 .body {
     font-size: 11;
 }
diff --git a/apps/ui/src/scroll-view/scrolling-and-sizing-page.xml b/apps/ui/src/scroll-view/scrolling-and-sizing-page.xml
index b9fe7ed4a..064f5d8e3 100644
--- a/apps/ui/src/scroll-view/scrolling-and-sizing-page.xml
+++ b/apps/ui/src/scroll-view/scrolling-and-sizing-page.xml
@@ -6,7 +6,7 @@
     </Page.actionBar>
 
     <StackLayout>
-        <StackLayout class="p-10" row="0">
+        <StackLayout class="p-10">
             <Label text="Default style = scrolls out of container" class="body m-b-10" />
             <ScrollView height="40">
                 <StackLayout>
@@ -17,7 +17,7 @@
             </ScrollView>
         </StackLayout>
 
-        <StackLayout class="p-10" row="1">
+        <StackLayout class="p-10">
             <Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
             <ScrollView class="bordered" height="40">
                 <StackLayout>
@@ -28,7 +28,7 @@
             </ScrollView>
         </StackLayout>
 
-        <StackLayout class="p-10" row="2">
+        <StackLayout class="p-10">
             <Label text="border-radius" class="body m-b-10" />
             <ScrollView class="bordered fixed-height border-radius">
                 <StackLayout>
@@ -39,7 +39,7 @@
             </ScrollView>
         </StackLayout>
 
-        <StackLayout class="p-10" row="2">
+        <StackLayout class="p-10">
             <Label text="border-radius = weird" class="body m-b-10" />
             <ScrollView class="bordered fixed-height border-radius-nonuniform">
                 <StackLayout>
@@ -50,7 +50,7 @@
             </ScrollView>
         </StackLayout>
 
-        <StackLayout class="p-10" row="3">
+        <StackLayout class="p-10">
             <Label text="border-width = weird" class="body m-b-10" />
             <ScrollView class="bordered-nonuniform fixed-height">
                 <StackLayout>
@@ -61,5 +61,38 @@
             </ScrollView>
         </StackLayout>
 
+        <StackLayout class="p-10">
+            <Label text="border-width = rounded weird" class="body m-b-10" />
+            <ScrollView class="bordered-nonuniform fixed-height border-radius">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10">
+            <Label text="background = gradient" class="body m-b-10" />
+            <ScrollView class="fixed-height gradient">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
+        <StackLayout class="p-10">
+            <Label text="box-shadow" class="body m-b-10" />
+            <ScrollView class="fixed-height shadow">
+                <StackLayout>
+                    <GridLayout width="30" height="30" backgroundColor="red" />
+                    <GridLayout width="30" height="30" backgroundColor="yellow" />
+                    <GridLayout width="30" height="30" backgroundColor="green" />
+                </StackLayout>
+            </ScrollView>
+        </StackLayout>
+
     </StackLayout>
 </Page>
diff --git a/apps/ui/src/text-view/scrolling-and-sizing-page.css b/apps/ui/src/text-view/scrolling-and-sizing-page.css
index 9a74612cd..2cbc719a4 100644
--- a/apps/ui/src/text-view/scrolling-and-sizing-page.css
+++ b/apps/ui/src/text-view/scrolling-and-sizing-page.css
@@ -42,6 +42,14 @@ TextView {
     border-left-width: 20;
 }
 
+.gradient {
+    background: linear-gradient(to bottom, orangered, green, lightblue);
+}
+
+.shadow {
+    box-shadow: inset 0 0 5 5 #000000;
+}
+
 .body {
     font-size: 11;
 }
diff --git a/apps/ui/src/text-view/scrolling-and-sizing-page.xml b/apps/ui/src/text-view/scrolling-and-sizing-page.xml
index cfebcb4f5..be32029ca 100644
--- a/apps/ui/src/text-view/scrolling-and-sizing-page.xml
+++ b/apps/ui/src/text-view/scrolling-and-sizing-page.xml
@@ -6,27 +6,39 @@
     </Page.actionBar>
 
     <StackLayout>
-        <StackLayout class="p-10" row="0">
+        <StackLayout class="p-10">
             <Label text="Default style = scrolls out of container" class="body m-b-10" />
             <TextView hint="Add your comment..." />
         </StackLayout>
 
-        <StackLayout class="p-10" row="1">
+        <StackLayout class="p-10">
             <Label text="Adding border changes the height but fixes scrolling" textWrap="true" class="body m-b-10" />
             <TextView hint="Add your comment..." class="bordered" />
         </StackLayout>
 
-        <StackLayout class="p-10" row="2">
+        <StackLayout class="p-10">
             <TextView hint="bordered fixed-height border-radius" class="bordered fixed-height border-radius" />
         </StackLayout>
 
-        <StackLayout class="p-10" row="2">
+        <StackLayout class="p-10">
             <TextView hint="bordered fixed-height border-radius-nonuniform" class="bordered fixed-height border-radius-nonuniform" />
         </StackLayout>
 
-        <StackLayout class="p-10" row="3">
+        <StackLayout class="p-10">
             <TextView hint="bordered-nonuniform fixed-height" class="bordered-nonuniform fixed-height" />
         </StackLayout>
 
+        <StackLayout class="p-10">
+            <TextView hint="bordered-nonuniform fixed-height border-radius" class="bordered-nonuniform fixed-height border-radius" />
+        </StackLayout>
+
+        <StackLayout class="p-10">
+            <TextView hint="fixed-height gradient" class="fixed-height gradient" />
+        </StackLayout>
+
+        <StackLayout class="p-10">
+            <TextView hint="fixed-height shadow" class="fixed-height shadow" />
+        </StackLayout>
+
     </StackLayout>
 </Page>
diff --git a/packages/core/ui/animation/index.ios.ts b/packages/core/ui/animation/index.ios.ts
index c238a7e40..38e2a00ac 100644
--- a/packages/core/ui/animation/index.ios.ts
+++ b/packages/core/ui/animation/index.ios.ts
@@ -6,6 +6,8 @@ import { View } from '../core/view';
 import { AnimationBase, Properties, CubicBezierAnimationCurve } from './animation-common';
 import { Trace } from '../../trace';
 import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
+import { ios as iosBackground } from '../styling/background';
+import { ios as iosViewUtils, NativeScriptUIView } from '../utils';
 
 import { ios as iosHelper } from '../../utils/native-helper';
 
@@ -214,7 +216,6 @@ export class Animation extends AnimationBase {
 	public cancel(): void {
 		if (!this.isPlaying) {
 			Trace.write('Animation is not currently playing.', Trace.categories.Animation, Trace.messageType.warn);
-
 			return;
 		}
 
@@ -222,8 +223,54 @@ export class Animation extends AnimationBase {
 			for (let i = 0; i < this._mergedPropertyAnimations.length; i++) {
 				const propertyAnimation = this._mergedPropertyAnimations[i];
 				if (propertyAnimation) {
-					if (propertyAnimation.target?.nativeViewProtected?.layer) {
-						propertyAnimation.target.nativeViewProtected.layer.removeAllAnimations();
+					if (propertyAnimation.target?.nativeViewProtected) {
+						const nativeView: NativeScriptUIView = propertyAnimation.target.nativeViewProtected;
+						if (nativeView.layer.mask) {
+							nativeView.layer.mask.removeAllAnimations();
+						}
+						nativeView.layer.removeAllAnimations();
+
+						// Gradient background animations
+						if (nativeView.gradientLayer) {
+							nativeView.gradientLayer.removeAllAnimations();
+						}
+
+						// Border animations
+						if (nativeView.borderLayer) {
+							if (nativeView.borderLayer.mask) {
+								nativeView.borderLayer.mask.removeAllAnimations();
+							}
+
+							const borderLayers = nativeView.borderLayer.sublayers;
+							if (borderLayers?.count) {
+								for (let i = 0, count = borderLayers.count; i < count; i++) {
+									borderLayers[i].removeAllAnimations();
+								}
+							}
+
+							nativeView.borderLayer.removeAllAnimations();
+						}
+
+						// Shadow animations
+						if (nativeView.outerShadowContainerLayer) {
+							if (nativeView.outerShadowContainerLayer.mask) {
+								nativeView.outerShadowContainerLayer.mask.removeAllAnimations();
+							}
+
+							const outerShadowLayers = nativeView.outerShadowContainerLayer.sublayers;
+							if (outerShadowLayers?.count) {
+								for (let i = 0, count = outerShadowLayers.count; i < count; i++) {
+									const shadowLayer = outerShadowLayers[i];
+
+									if (shadowLayer.mask) {
+										shadowLayer.mask.removeAllAnimations();
+									}
+									shadowLayer.removeAllAnimations();
+								}
+							}
+
+							nativeView.outerShadowContainerLayer.removeAllAnimations();
+						}
 					}
 					if (propertyAnimation._propertyResetCallback) {
 						propertyAnimation._propertyResetCallback(propertyAnimation._originalValue, this._valueSource);
@@ -262,14 +309,14 @@ export class Animation extends AnimationBase {
 	private static _getNativeAnimationArguments(animation: PropertyAnimationInfo, valueSource: 'animation' | 'keyframe'): AnimationInfo {
 		const view = animation.target;
 		const style = view.style;
-		const nativeView = <UIView>view.nativeViewProtected;
+		const nativeView: NativeScriptUIView = view.nativeViewProtected;
 		const parent = view.parent as View;
 
 		let propertyNameToAnimate = animation.property;
 		let subPropertyNameToAnimate;
 		let toValue = animation.value;
 		let fromValue;
-		if (nativeView?.layer) {
+		if (nativeView) {
 			const setLocal = valueSource === 'animation';
 
 			switch (animation.property) {
@@ -279,10 +326,11 @@ export class Animation extends AnimationBase {
 						style[setLocal ? backgroundColorProperty.name : backgroundColorProperty.keyframe] = value;
 					};
 					fromValue = nativeView.layer.backgroundColor;
+
 					if (nativeView instanceof UILabel) {
 						nativeView.setValueForKey(UIColor.clearColor, 'backgroundColor');
 					}
-					toValue = toValue.CGColor;
+					toValue = toValue?.ios?.CGColor;
 					break;
 				case Properties.opacity:
 					animation._originalValue = view.opacity;
@@ -395,7 +443,7 @@ export class Animation extends AnimationBase {
 					const extentY = isHeight ? asNumber : currentBounds.size.height;
 					fromValue = NSValue.valueWithCGRect(currentBounds);
 					toValue = NSValue.valueWithCGRect(CGRectMake(currentBounds.origin.x, currentBounds.origin.y, extentX, extentY));
-					animation._originalValue = view.height;
+					animation._originalValue = view[isHeight ? 'height' : 'width'];
 					animation._propertyResetCallback = (value, valueSource) => {
 						const prop = isHeight ? heightProperty : widthProperty;
 						style[setLocal ? prop.name : prop.keyframe] = value;
@@ -438,7 +486,7 @@ export class Animation extends AnimationBase {
 	}
 
 	private static _createNativeAnimation(propertyAnimations: Array<PropertyAnimation>, index: number, playSequentially: boolean, args: AnimationInfo, animation: PropertyAnimation, valueSource: 'animation' | 'keyframe', finishedCallback: (cancelled?: boolean) => void) {
-		const nativeView = <UIView>animation.target.nativeViewProtected;
+		const nativeView: NativeScriptUIView = animation.target.nativeViewProtected;
 
 		let nativeAnimation;
 
@@ -450,8 +498,16 @@ export class Animation extends AnimationBase {
 
 		const animationDelegate = AnimationDelegateImpl.initWithFinishedCallback(finishedCallback, animation, valueSource);
 		nativeAnimation.setValueForKey(animationDelegate, 'delegate');
-		if (nativeView?.layer) {
+		if (nativeView) {
 			nativeView.layer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate);
+			if (args.propertyNameToAnimate === 'bounds') {
+				this.animateNestedLayerSizeUsingBasicAnimation(nativeView, args.toValue.CGRectValue, animation, args, nativeAnimation);
+			}
+
+			// Shadow layers do not inherit from animating view layer
+			if (nativeView.outerShadowContainerLayer) {
+				nativeView.outerShadowContainerLayer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate);
+			}
 		}
 		let callback = undefined;
 		if (index + 1 < propertyAnimations.length) {
@@ -512,7 +568,7 @@ export class Animation extends AnimationBase {
 	}
 
 	private static _createNativeSpringAnimation(propertyAnimations: Array<PropertyAnimationInfo>, index: number, playSequentially: boolean, args: AnimationInfo, animation: PropertyAnimationInfo, valueSource: 'animation' | 'keyframe', finishedCallback: (cancelled?: boolean) => void) {
-		const nativeView = <UIView>animation.target.nativeViewProtected;
+		const nativeView: NativeScriptUIView = animation.target.nativeViewProtected;
 
 		let callback = undefined;
 		let nextAnimation;
@@ -552,6 +608,10 @@ export class Animation extends AnimationBase {
 					case Properties.width:
 						animation._originalValue = animation.target[animation.property];
 						nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
+
+						// Resize background during animation
+						iosBackground.drawBackgroundVisualEffects(animation.target);
+
 						animation._propertyResetCallback = function (value) {
 							animation.target[animation.property] = value;
 						};
@@ -559,6 +619,12 @@ export class Animation extends AnimationBase {
 					case _transform:
 						animation._originalValue = nativeView.layer.transform;
 						nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
+
+						// Shadow layers do not inherit from animating view layer
+						if (nativeView.outerShadowContainerLayer) {
+							nativeView.outerShadowContainerLayer.setValueForKey(args.toValue, args.propertyNameToAnimate);
+						}
+
 						animation._propertyResetCallback = function (value) {
 							nativeView.layer.transform = value;
 						};
@@ -687,6 +753,182 @@ export class Animation extends AnimationBase {
 
 		return result;
 	}
+
+	private static animateNestedLayerSizeUsingBasicAnimation(nativeView: NativeScriptUIView, bounds: CGRect, animation: PropertyAnimation, args: AnimationInfo, nativeAnimation: CABasicAnimation) {
+		const view: View = animation.target;
+
+		// Gradient background animation
+		if (nativeView.gradientLayer) {
+			nativeView.gradientLayer.addAnimationForKey(nativeAnimation, 'bounds');
+		}
+
+		let clipPath; // This is also used for animating shadow
+
+		// Clipping mask animation
+		if (nativeView.layer.mask instanceof CAShapeLayer) {
+			let toValue;
+
+			if (nativeView.maskType === iosViewUtils.LayerMask.BORDER) {
+				toValue = iosBackground.generateNonUniformBorderOuterClipRoundedPath(view, bounds);
+			} else if (nativeView.maskType === iosViewUtils.LayerMask.CLIP_PATH) {
+				clipPath = iosBackground.generateClipPath(view, bounds);
+				toValue = clipPath;
+			} else {
+				Trace.write('Unknown mask on animating view: ' + view, Trace.categories.Animation, Trace.messageType.info);
+			}
+
+			if (toValue) {
+				nativeView.layer.mask.addAnimationForKey(
+					this._createBasicAnimation(
+						{
+							...args,
+							propertyNameToAnimate: 'path',
+							fromValue: nativeView.layer.mask.path,
+							toValue,
+						},
+						animation
+					),
+					'path'
+				);
+			}
+		}
+
+		// Border animations (uniform and non-uniform)
+		if (nativeView.hasNonUniformBorder) {
+			if (nativeView.borderLayer) {
+				const innerClipPath = iosBackground.generateNonUniformBorderInnerClipRoundedPath(animation.target, bounds);
+
+				if (nativeView.hasNonUniformBorderColor) {
+					const borderMask = nativeView.borderLayer.mask;
+					if (borderMask instanceof CAShapeLayer) {
+						borderMask.addAnimationForKey(
+							this._createBasicAnimation(
+								{
+									...args,
+									propertyNameToAnimate: 'path',
+									fromValue: borderMask.path,
+									toValue: innerClipPath,
+								},
+								animation
+							),
+							'path'
+						);
+					}
+
+					const borderLayers = nativeView.borderLayer.sublayers;
+					if (borderLayers?.count) {
+						const paths = iosBackground.generateNonUniformMultiColorBorderRoundedPaths(animation.target, bounds);
+
+						for (let i = 0, count = borderLayers.count; i < count; i++) {
+							const layer = nativeView.borderLayer.sublayers[i];
+							if (layer instanceof CAShapeLayer) {
+								layer.addAnimationForKey(
+									this._createBasicAnimation(
+										{
+											...args,
+											propertyNameToAnimate: 'path',
+											fromValue: layer.path,
+											toValue: paths[i],
+										},
+										animation
+									),
+									'path'
+								);
+							}
+						}
+					}
+				} else {
+					nativeView.borderLayer.addAnimationForKey(
+						this._createBasicAnimation(
+							{
+								...args,
+								propertyNameToAnimate: 'path',
+								fromValue: nativeView.borderLayer.path,
+								toValue: innerClipPath,
+							},
+							animation
+						),
+						'path'
+					);
+				}
+			}
+		} else {
+			// TODO: Animate border width when borders get support for percentage values
+			// Uniform corner radius also relies on view size
+			if (nativeView.layer.cornerRadius) {
+				nativeView.layer.addAnimationForKey(
+					this._createBasicAnimation(
+						{
+							...args,
+							propertyNameToAnimate: 'cornerRadius',
+							fromValue: nativeView.layer.cornerRadius,
+							toValue: iosBackground.getUniformBorderRadius(animation.target, bounds),
+						},
+						animation
+					),
+					'cornerRadius'
+				);
+			}
+		}
+
+		// Shadow layers do not inherit from animating view layer
+		if (nativeView.outerShadowContainerLayer) {
+			const shadowClipMask = nativeView.outerShadowContainerLayer.mask;
+
+			// This is for animating view clip path on shadow
+			if (clipPath && shadowClipMask instanceof CAShapeLayer) {
+				shadowClipMask.addAnimationForKey(
+					this._createBasicAnimation(
+						{
+							...args,
+							propertyNameToAnimate: 'path',
+							fromValue: shadowClipMask.path,
+							toValue: clipPath,
+						},
+						animation
+					),
+					'path'
+				);
+			}
+
+			const outerShadowLayers = nativeView.outerShadowContainerLayer.sublayers;
+			if (outerShadowLayers?.count) {
+				const { maskPath, shadowPath } = iosBackground.generateShadowLayerPaths(view, bounds);
+
+				for (let i = 0, count = outerShadowLayers.count; i < count; i++) {
+					const shadowLayer = outerShadowLayers[i];
+
+					shadowLayer.addAnimationForKey(
+						this._createBasicAnimation(
+							{
+								...args,
+								propertyNameToAnimate: 'shadowPath',
+								fromValue: shadowLayer.shadowPath,
+								toValue: shadowPath,
+							},
+							animation
+						),
+						'shadowPath'
+					);
+
+					if (shadowLayer.mask instanceof CAShapeLayer) {
+						shadowLayer.mask.addAnimationForKey(
+							this._createBasicAnimation(
+								{
+									...args,
+									propertyNameToAnimate: 'path',
+									fromValue: shadowLayer.mask.path,
+									toValue: maskPath,
+								},
+								animation
+							),
+							'path'
+						);
+					}
+				}
+			}
+		}
+	}
 }
 
 export function _getTransformMismatchErrorMessage(view: View): string {
diff --git a/packages/core/ui/button/index.ios.ts b/packages/core/ui/button/index.ios.ts
index 1c049de8e..b67e8ca69 100644
--- a/packages/core/ui/button/index.ios.ts
+++ b/packages/core/ui/button/index.ios.ts
@@ -1,7 +1,7 @@
 import { ControlStateChangeListener } from '../core/control-state-change';
 import { ButtonBase } from './button-common';
 import { View, PseudoClassHandler } from '../core/view';
-import { backgroundColorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties';
+import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties';
 import { textAlignmentProperty, whiteSpaceProperty, textOverflowProperty } from '../text-base';
 import { layout } from '../../utils';
 import { CoreTypes } from '../../core-types';
@@ -56,14 +56,6 @@ export class Button extends ButtonBase {
 		}
 	}
 
-	[backgroundColorProperty.getDefault](): UIColor {
-		return this.nativeViewProtected.backgroundColor;
-	}
-
-	[backgroundColorProperty.setNative](value: UIColor | Color) {
-		this.nativeViewProtected.backgroundColor = value instanceof Color ? value.ios : value;
-	}
-
 	[borderTopWidthProperty.getDefault](): CoreTypes.LengthType {
 		return {
 			value: this.nativeViewProtected.contentEdgeInsets.top,
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
index 02772c567..8ed2bdc1a 100644
--- a/packages/core/ui/core/view-base/index.ts
+++ b/packages/core/ui/core/view-base/index.ts
@@ -957,6 +957,12 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	 * Clean up references to the native view.
 	 */
 	public disposeNativeView() {
+		// Unset those values so that view will check for resize after being removed and re-added to view-tree
+		this._oldLeft = 0;
+		this._oldTop = 0;
+		this._oldRight = 0;
+		this._oldBottom = 0;
+
 		this.notify({
 			eventName: ViewBase.disposeNativeViewEvent,
 			object: this,
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 86f8406c2..04fbf6938 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -24,7 +24,7 @@ import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilit
 import { AccessibilityLiveRegion, AccessibilityRole, AndroidAccessibilityEvent, isAccessibilityServiceEnabled, sendAccessibilityEvent, updateAccessibilityProperties, updateContentDescription, AccessibilityState } from '../../../accessibility';
 import * as Utils from '../../../utils';
 import { SDK_VERSION } from '../../../utils/constants';
-import { CSSShadow } from '../../styling/css-shadow';
+import { BoxShadow } from '../../styling/box-shadow';
 import { _setAndroidFragmentTransitions, _getAnimatedEntries, _updateTransitions, _reverseTransitions, _clearEntry, _clearFragment, addNativeTransitionListener } from '../../frame/fragment.transitions';
 
 export * from './view-common';
@@ -1150,15 +1150,15 @@ export class View extends ViewCommon {
 		}
 	}
 
-	protected _drawBoxShadow(boxShadow: CSSShadow) {
+	protected _drawBoxShadow(boxShadow: BoxShadow) {
 		const nativeView = this.nativeViewProtected;
 		const config = {
 			shadowColor: boxShadow.color.android,
 			cornerRadius: Length.toDevicePixels(this.borderRadius as CoreTypes.LengthType, 0.0),
-			spreadRadius: Length.toDevicePixels(boxShadow.spreadRadius, 0.0),
-			blurRadius: Length.toDevicePixels(boxShadow.blurRadius, 0.0),
-			offsetX: Length.toDevicePixels(boxShadow.offsetX, 0.0),
-			offsetY: Length.toDevicePixels(boxShadow.offsetY, 0.0),
+			spreadRadius: boxShadow.spreadRadius,
+			blurRadius: boxShadow.blurRadius,
+			offsetX: boxShadow.offsetX,
+			offsetY: boxShadow.offsetY,
 		};
 		org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
 	}
diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts
index 583249209..c462b8e1c 100644
--- a/packages/core/ui/core/view/index.d.ts
+++ b/packages/core/ui/core/view/index.d.ts
@@ -7,7 +7,7 @@ import { GestureTypes, GesturesObserver } from '../../gestures';
 import { LinearGradient } from '../../styling/linear-gradient';
 import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait, AccessibilityEventOptions } from '../../../accessibility/accessibility-types';
 import { CoreTypes } from '../../../core-types';
-import { CSSShadow } from '../../styling/css-shadow';
+import { ShadowCSSValues } from '../../styling/css-shadow';
 import { ViewCommon } from './view-common';
 
 export * from './view-common';
@@ -332,7 +332,7 @@ export abstract class View extends ViewCommon {
 	/**
 	 * Gets or sets the box shadow of the view.
 	 */
-	boxShadow: string | CSSShadow;
+	boxShadow: string | ShadowCSSValues;
 
 	/**
 	 * Gets or sets the minimum width the view may grow to.
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 6aa6a451a..03ef018a4 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -8,8 +8,8 @@ import { Trace } from '../../../trace';
 import { layout, iOSNativeHelper } from '../../../utils';
 import { isNumber } from '../../../utils/types';
 import { IOSHelper } from './view-helper';
-import { ios as iosBackground, Background } from '../../styling/background';
-import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, clipPathProperty } from '../../styling/style-properties';
+import { ios as iosBackground, Background, BackgroundClearFlags } from '../../styling/background';
+import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty } from '../../styling/style-properties';
 import { profile } from '../../../profiling';
 import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
 import { IOSPostAccessibilityNotificationType, isAccessibilityServiceEnabled, updateAccessibilityProperties, AccessibilityEventOptions, AccessibilityRole, AccessibilityState } from '../../../accessibility';
@@ -17,6 +17,7 @@ import { CoreTypes } from '../../../core-types';
 import type { ModalTransition } from '../../transition/modal-transition';
 import { SharedTransition } from '../../transition/shared-transition';
 import { GestureStateTypes, PanGestureEventData } from '../../gestures';
+import { NativeScriptUIView } from '../../utils';
 
 export * from './view-common';
 // helpers (these are okay re-exported here)
@@ -72,6 +73,12 @@ export class View extends ViewCommon implements ViewDefinition {
 		this._isLaidOut = false;
 		this._hasTransform = false;
 		this._hasPendingTransform = false;
+
+		// Make sure shadows get removed
+		this.style.backgroundInternal.clearFlags |= BackgroundClearFlags.CLEAR_BOX_SHADOW;
+
+		// Perform background cleanup
+		iosBackground.clearBackgroundVisualEffects(this);
 	}
 
 	public requestLayout(): void {
@@ -116,7 +123,8 @@ export class View extends ViewCommon implements ViewDefinition {
 			this.layoutNativeView(left, top, right, bottom);
 		}
 
-		if (boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED) {
+		const needsLayout = boundsChanged || (this._privateFlags & PFLAG_LAYOUT_REQUIRED) === PFLAG_LAYOUT_REQUIRED;
+		if (needsLayout) {
 			let position = { left, top, right, bottom };
 			if (this.nativeViewProtected && majorVersion > 10) {
 				// on iOS 11+ it is possible to have a changed layout frame due to safe area insets
@@ -129,7 +137,7 @@ export class View extends ViewCommon implements ViewDefinition {
 			this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
 		}
 
-		this.updateBackground(sizeChanged);
+		this.updateBackground(sizeChanged, needsLayout);
 		if (this._hasPendingTransform) {
 			this.updateNativeTransform();
 			this._hasPendingTransform = false;
@@ -137,12 +145,36 @@ export class View extends ViewCommon implements ViewDefinition {
 		this._privateFlags &= ~PFLAG_FORCE_LAYOUT;
 	}
 
-	private updateBackground(sizeChanged: boolean): void {
+	private updateBackground(sizeChanged: boolean, needsLayout: boolean): void {
 		if (sizeChanged) {
 			this._onSizeChanged();
 		} else if (this._nativeBackgroundState === 'invalid') {
 			const background = this.style.backgroundInternal;
 			this._redrawNativeBackground(background);
+		} else {
+			// Update layers that don't belong to view's layer (e.g. shadow layers)
+			if (needsLayout) {
+				this.layoutOuterShadows();
+			}
+		}
+	}
+
+	private layoutOuterShadows(): void {
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
+		if (nativeView) {
+			const frame = nativeView.frame;
+			const needsUpdate: boolean = nativeView.outerShadowContainerLayer != null;
+
+			if (needsUpdate) {
+				CATransaction.setDisableActions(true);
+
+				if (nativeView.outerShadowContainerLayer) {
+					nativeView.outerShadowContainerLayer.bounds = nativeView.bounds;
+					nativeView.outerShadowContainerLayer.position = CGPointMake(frame.origin.x + frame.size.width / 2, frame.origin.y + frame.size.height / 2);
+				}
+
+				CATransaction.setDisableActions(false);
+			}
 		}
 	}
 
@@ -272,8 +304,8 @@ export class View extends ViewCommon implements ViewDefinition {
 		this._privateFlags &= ~PFLAG_FORCE_LAYOUT;
 		this.setMeasuredDimension(width, height);
 
-		const { sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
-		this.updateBackground(sizeChanged);
+		const { boundsChanged, sizeChanged } = this._setCurrentLayoutBounds(left, top, right, bottom);
+		this.updateBackground(sizeChanged, boundsChanged);
 		this._privateFlags &= ~PFLAG_LAYOUT_REQUIRED;
 	}
 
@@ -365,16 +397,11 @@ export class View extends ViewCommon implements ViewDefinition {
 		}
 
 		const background = this.style.backgroundInternal;
-		const backgroundDependsOnSize = (background.image && background.image !== 'none') || !background.hasUniformBorder() || background.hasBorderRadius();
+		const backgroundDependsOnSize = (background.image && background.image !== 'none') || background.clipPath || !background.hasUniformBorder() || background.hasBorderRadius() || background.hasBoxShadow();
 
 		if (this._nativeBackgroundState === 'invalid' || (this._nativeBackgroundState === 'drawn' && backgroundDependsOnSize)) {
 			this._redrawNativeBackground(background);
 		}
-
-		const clipPath = this.style.clipPath;
-		if (clipPath !== '' && this[clipPathProperty.setNative]) {
-			this[clipPathProperty.setNative](clipPath);
-		}
 	}
 
 	public updateNativeTransform() {
@@ -386,6 +413,7 @@ export class View extends ViewCommon implements ViewDefinition {
 		const scaleX = this.scaleX || 1e-6;
 		const scaleY = this.scaleY || 1e-6;
 		const perspective = this.perspective || 300;
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
 
 		let transform = new CATransform3D(CATransform3DIdentity);
 
@@ -397,13 +425,24 @@ export class View extends ViewCommon implements ViewDefinition {
 		transform = CATransform3DTranslate(transform, this.translateX, this.translateY, 0);
 		transform = iOSNativeHelper.applyRotateTransform(transform, this.rotateX, this.rotateY, this.rotate);
 		transform = CATransform3DScale(transform, scaleX, scaleY, 1);
-		if (!CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform)) {
+
+		const needsTransform: boolean = !CATransform3DEqualToTransform(this.nativeViewProtected.layer.transform, transform) || (nativeView.outerShadowContainerLayer && !CATransform3DEqualToTransform(nativeView.outerShadowContainerLayer.transform, transform));
+
+		if (needsTransform) {
 			const updateSuspended = this._isPresentationLayerUpdateSuspended();
 			if (!updateSuspended) {
 				CATransaction.begin();
 			}
+			// Disable CALayer animatable property changes
+			CATransaction.setDisableActions(true);
+
 			this.nativeViewProtected.layer.transform = transform;
+			if (nativeView.outerShadowContainerLayer) {
+				nativeView.outerShadowContainerLayer.transform = transform;
+			}
 			this._hasTransform = this.nativeViewProtected && !CATransform3DEqualToTransform(this.nativeViewProtected.transform3D, CATransform3DIdentity);
+
+			CATransaction.setDisableActions(false);
 			if (!updateSuspended) {
 				CATransaction.commit();
 			}
@@ -721,29 +760,45 @@ export class View extends ViewCommon implements ViewDefinition {
 		return this.nativeViewProtected.hidden ? CoreTypes.Visibility.collapse : CoreTypes.Visibility.visible;
 	}
 	[visibilityProperty.setNative](value: CoreTypes.VisibilityType) {
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
+
 		switch (value) {
 			case CoreTypes.Visibility.visible:
-				this.nativeViewProtected.hidden = false;
+				nativeView.hidden = false;
 				break;
 			case CoreTypes.Visibility.hidden:
 			case CoreTypes.Visibility.collapse:
-				this.nativeViewProtected.hidden = true;
+				nativeView.hidden = true;
 				break;
 			default:
 				throw new Error(`Invalid visibility value: ${value}. Valid values are: "${CoreTypes.Visibility.visible}", "${CoreTypes.Visibility.hidden}", "${CoreTypes.Visibility.collapse}".`);
 		}
+
+		// Apply visibility value to shadows as well
+		if (nativeView.outerShadowContainerLayer) {
+			nativeView.outerShadowContainerLayer.hidden = nativeView.hidden;
+		}
 	}
 
 	[opacityProperty.getDefault](): number {
 		return this.nativeViewProtected.alpha;
 	}
 	[opacityProperty.setNative](value: number) {
-		const nativeView = this.nativeViewProtected;
+		const nativeView: NativeScriptUIView = <NativeScriptUIView>this.nativeViewProtected;
 		const updateSuspended = this._isPresentationLayerUpdateSuspended();
 		if (!updateSuspended) {
 			CATransaction.begin();
 		}
+		// Disable CALayer animatable property changes
+		CATransaction.setDisableActions(true);
+
 		nativeView.alpha = value;
+		// Apply opacity value to shadows as well
+		if (nativeView.outerShadowContainerLayer) {
+			nativeView.outerShadowContainerLayer.opacity = value;
+		}
+
+		CATransaction.setDisableActions(false);
 		if (!updateSuspended) {
 			CATransaction.commit();
 		}
@@ -899,18 +954,22 @@ export class View extends ViewCommon implements ViewDefinition {
 		if (!updateSuspended) {
 			CATransaction.begin();
 		}
-		const view = this.nativeViewProtected;
-		if (view) {
+		// Disable CALayer animatable property changes
+		CATransaction.setDisableActions(true);
+
+		const nativeView = this.nativeViewProtected;
+		if (nativeView) {
 			if (value instanceof UIColor) {
-				view.backgroundColor = value;
+				nativeView.backgroundColor = value;
 			} else {
 				iosBackground.createBackgroundUIColor(this, (color: UIColor) => {
-					view.backgroundColor = color;
+					nativeView.backgroundColor = color;
 				});
 				this._setNativeClipToBounds();
 			}
 		}
 
+		CATransaction.setDisableActions(false);
 		if (!updateSuspended) {
 			CATransaction.commit();
 		}
@@ -922,7 +981,7 @@ export class View extends ViewCommon implements ViewDefinition {
 		const view = this.nativeViewProtected;
 		if (view) {
 			const backgroundInternal = this.style.backgroundInternal;
-			view.clipsToBounds = (view instanceof UIScrollView || backgroundInternal.hasBorderWidth() || backgroundInternal.hasBorderRadius()) && !backgroundInternal.hasBoxShadow();
+			view.clipsToBounds = view instanceof UIScrollView || backgroundInternal.hasBorderWidth() || backgroundInternal.hasBorderRadius();
 		}
 	}
 
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index 601f579a6..58adce944 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/packages/core/ui/core/view/view-common.ts
@@ -26,7 +26,7 @@ import * as am from '../../animation';
 import { AccessibilityEventOptions, AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait } from '../../../accessibility/accessibility-types';
 import { accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
 import { accessibilityBlurEvent, accessibilityFocusChangedEvent, accessibilityFocusEvent, accessibilityPerformEscapeEvent, getCurrentFontScale } from '../../../accessibility';
-import { CSSShadow } from '../../styling/css-shadow';
+import { ShadowCSSValues } from '../../styling/css-shadow';
 import { SharedTransition, SharedTransitionInteractiveOptions } from '../../transition/shared-transition';
 
 // helpers (these are okay re-exported here)
@@ -646,10 +646,10 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		this.style.backgroundRepeat = value;
 	}
 
-	get boxShadow(): CSSShadow {
+	get boxShadow(): ShadowCSSValues {
 		return this.style.boxShadow;
 	}
-	set boxShadow(value: CSSShadow) {
+	set boxShadow(value: ShadowCSSValues) {
 		this.style.boxShadow = value;
 	}
 
diff --git a/packages/core/ui/label/index.ios.ts b/packages/core/ui/label/index.ios.ts
index 680e06d6f..bf35b3269 100644
--- a/packages/core/ui/label/index.ios.ts
+++ b/packages/core/ui/label/index.ios.ts
@@ -150,14 +150,17 @@ export class Label extends TextBase implements LabelDefinition {
 
 	_redrawNativeBackground(value: UIColor | Background): void {
 		if (value instanceof Background) {
-			ios.createBackgroundUIColor(
-				this,
-				(color: UIColor) => {
-					const cgColor = color ? color.CGColor : null;
-					this.nativeTextViewProtected.layer.backgroundColor = cgColor;
-				},
-				true
-			);
+			const nativeView = this.nativeTextViewProtected;
+			if (nativeView) {
+				ios.createBackgroundUIColor(
+					this,
+					(color: UIColor) => {
+						const cgColor = color ? color.CGColor : null;
+						nativeView.layer.backgroundColor = cgColor;
+					},
+					true
+				);
+			}
 		}
 
 		this._setNativeClipToBounds();
diff --git a/packages/core/ui/layouts/root-layout/index.ios.ts b/packages/core/ui/layouts/root-layout/index.ios.ts
index 461963bbb..b96f92960 100644
--- a/packages/core/ui/layouts/root-layout/index.ios.ts
+++ b/packages/core/ui/layouts/root-layout/index.ios.ts
@@ -41,7 +41,10 @@ export class RootLayout extends RootLayoutBase {
 					if (options.color !== this._currentGradient) {
 						this._currentGradient = options.color;
 						const parsedGradient = parseLinearGradient(options.color);
-						this._gradientLayer = iosViewUtils.drawGradient(view.nativeViewProtected, LinearGradient.parse(parsedGradient.value), 0);
+
+						this._gradientLayer = CAGradientLayer.new();
+						iosViewUtils.drawGradient(view.nativeViewProtected, this._gradientLayer, LinearGradient.parse(parsedGradient.value));
+						view.nativeViewProtected.layer.insertSublayerAtIndex(this._gradientLayer, 0);
 					}
 				}
 				UIView.animateWithDurationAnimationsCompletion(
@@ -92,7 +95,10 @@ export class RootLayout extends RootLayoutBase {
 
 	protected _cleanupPlatformShadeCover(): void {
 		this._currentGradient = null;
-		this._gradientLayer = null;
+		if (this._gradientLayer != null) {
+			this._gradientLayer.removeFromSuperlayer();
+			this._gradientLayer = null;
+		}
 	}
 
 	private _applyAnimationProperties(view: View, shadeCoverAnimation: TransitionAnimation): void {
diff --git a/packages/core/ui/list-picker/index.ios.ts b/packages/core/ui/list-picker/index.ios.ts
index 6d6455d24..fbb11fbaf 100644
--- a/packages/core/ui/list-picker/index.ios.ts
+++ b/packages/core/ui/list-picker/index.ios.ts
@@ -1,6 +1,6 @@
 import { ListPickerBase, selectedIndexProperty, itemsProperty, ItemsSource } from './list-picker-common';
 import { Color } from '../../color';
-import { backgroundColorProperty, colorProperty } from '../styling/style-properties';
+import { colorProperty } from '../styling/style-properties';
 import { profile } from '../../profiling';
 
 export * from './list-picker-common';
@@ -52,13 +52,6 @@ export class ListPicker extends ListPickerBase {
 		selectedIndexProperty.coerce(this);
 	}
 
-	[backgroundColorProperty.getDefault](): UIColor {
-		return this.ios.backgroundColor;
-	}
-	[backgroundColorProperty.setNative](value: UIColor | Color) {
-		this.ios.backgroundColor = value instanceof Color ? value.ios : value;
-	}
-
 	[colorProperty.getDefault](): UIColor {
 		return this.ios.tintColor;
 	}
diff --git a/packages/core/ui/styling/background-common.ts b/packages/core/ui/styling/background-common.ts
index 10929e553..4d52da76c 100644
--- a/packages/core/ui/styling/background-common.ts
+++ b/packages/core/ui/styling/background-common.ts
@@ -2,7 +2,7 @@ import { CoreTypes } from '../../core-types';
 import { LinearGradient } from './linear-gradient';
 // Types.
 import { Color } from '../../color';
-import { CSSShadow } from './css-shadow';
+import { BoxShadow } from './box-shadow';
 
 /**
  * Flags used to hint the background handler if it has to clear a specific property
@@ -40,7 +40,7 @@ export class Background {
 	public borderBottomLeftRadius = 0;
 	public borderBottomRightRadius = 0;
 	public clipPath: string;
-	public boxShadow: CSSShadow;
+	public boxShadow: BoxShadow;
 	public clearFlags: number = BackgroundClearFlags.NONE;
 
 	private clone(): Background {
@@ -199,7 +199,7 @@ export class Background {
 		return clone;
 	}
 
-	public withBoxShadow(value: CSSShadow): Background {
+	public withBoxShadow(value: BoxShadow): Background {
 		const clone = this.clone();
 		clone.boxShadow = value;
 		if (!value) {
@@ -266,6 +266,10 @@ export class Background {
 		return this.borderTopLeftRadius > 0 || this.borderTopRightRadius > 0 || this.borderBottomRightRadius > 0 || this.borderBottomLeftRadius > 0;
 	}
 
+	public hasBorder(): boolean {
+		return (this.hasBorderColor() && this.hasBorderWidth()) || this.hasBorderRadius();
+	}
+
 	public hasUniformBorderColor(): boolean {
 		return Color.equals(this.borderTopColor, this.borderRightColor) && Color.equals(this.borderTopColor, this.borderBottomColor) && Color.equals(this.borderTopColor, this.borderLeftColor);
 	}
@@ -310,7 +314,7 @@ export class Background {
 		return !!this.boxShadow;
 	}
 
-	public getBoxShadow(): CSSShadow {
+	public getBoxShadow(): BoxShadow {
 		return this.boxShadow;
 	}
 
diff --git a/packages/core/ui/styling/background.d.ts b/packages/core/ui/styling/background.d.ts
index 797a2dc14..086d64a94 100644
--- a/packages/core/ui/styling/background.d.ts
+++ b/packages/core/ui/styling/background.d.ts
@@ -2,7 +2,7 @@ import { Color } from '../../color';
 import { View } from '../core/view';
 import { BackgroundRepeat } from '../../css/parser';
 import { LinearGradient } from '../styling/linear-gradient';
-import { CSSShadow } from './css-shadow';
+import { BoxShadow } from './box-shadow';
 
 export * from './background-common';
 
@@ -32,7 +32,7 @@ export enum CacheMode {
 // 	public borderBottomRightRadius: number;
 // 	public borderBottomLeftRadius: number;
 // 	public clipPath: string;
-// 	public boxShadow: string | CSSShadow;
+// 	public boxShadow: string | BoxShadow;
 // 	public clearFlags: number;
 
 // 	public withColor(value: Color): Background;
@@ -53,7 +53,7 @@ export enum CacheMode {
 // 	public withBorderBottomRightRadius(value: number): Background;
 // 	public withBorderBottomLeftRadius(value: number): Background;
 // 	public withClipPath(value: string): Background;
-// 	public withBoxShadow(value: CSSShadow): Background;
+// 	public withBoxShadow(value: BoxShadow): Background;
 
 // 	public isEmpty(): boolean;
 
@@ -62,6 +62,7 @@ export enum CacheMode {
 // 	public hasBorderColor(): boolean;
 // 	public hasBorderWidth(): boolean;
 // 	public hasBorderRadius(): boolean;
+//	public hasBorder(): boolean;
 // 	public hasUniformBorderColor(): boolean;
 // 	public hasUniformBorderWidth(): boolean;
 // 	public hasUniformBorderRadius(): boolean;
@@ -70,11 +71,19 @@ export enum CacheMode {
 // 	public getUniformBorderWidth(): number;
 // 	public getUniformBorderRadius(): number;
 // 	public hasBoxShadow(): boolean;
-// 	public getBoxShadow(): CSSShadow;
+// 	public getBoxShadow(): BoxShadow;
 // }
 
 export namespace ios {
 	export function createBackgroundUIColor(view: View, callback: (uiColor: any /* UIColor */) => void, flip?: boolean): void;
+	export function drawBackgroundVisualEffects(view: View): void;
+	export function clearBackgroundVisualEffects(view: View): void;
+	export function generateClipPath(view: View, bounds: CGRect): any;
+	export function generateShadowLayerPaths(view: View, bounds: CGRect): { maskPath: any; shadowPath: any };
+	export function getUniformBorderRadius(view: View, bounds: CGRect): number;
+	export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: CGRect): any;
+	export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: CGRect): any;
+	export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: CGRect): Array<any>;
 }
 
 export namespace ad {
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
index 8aeba7e9c..a6e2756b6 100644
--- a/packages/core/ui/styling/background.ios.ts
+++ b/packages/core/ui/styling/background.ios.ts
@@ -4,24 +4,43 @@ import { Background as BackgroundDefinition } from './background';
 import { View, Point } from '../core/view';
 import { LinearGradient } from './linear-gradient';
 import { Color } from '../../color';
-import { iOSNativeHelper, isDataURI, isFileOrResourcePath, layout } from '../../utils';
+import { Screen } from '../../platform';
+import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
+import { extendPointsToTargetY } from '../../utils/number-utils';
 import { ios as iosViewUtils, NativeScriptUIView } from '../utils';
 import { ImageSource } from '../../image-source';
 import { CSSValue, parse as cssParse } from '../../css-value';
-import { CSSShadow } from './css-shadow';
+import { BoxShadow } from './box-shadow';
 import { Length } from './style-properties';
 import { BackgroundClearFlags } from './background-common';
 
 export * from './background-common';
 
-interface Rect {
-	left: number;
+interface Position {
 	top: number;
 	right: number;
 	bottom: number;
+	left: number;
+}
+
+interface BackgroundDrawParams {
+	repeatX: boolean;
+	repeatY: boolean;
+	posX: number;
+	posY: number;
+	sizeX?: number;
+	sizeY?: number;
+}
+
+interface CappedOuterRadii {
+	topLeft: number;
+	topRight: number;
+	bottomLeft: number;
+	bottomRight: number;
 }
 
 const clearCGColor = UIColor.clearColor.CGColor;
+const uriPattern = /url\(('|")(.*?)\1\)/;
 const symbolUrl = Symbol('backgroundImageUrl');
 
 export enum CacheMode {
@@ -37,63 +56,305 @@ export namespace ios {
 			return;
 		}
 
-		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) {
-			// clear box shadow if it has been removed!
-			view.setProperty('clipToBounds', true);
-			clearBoxShadow(nativeView);
-		}
+		// Unset this in case another layer handles background color (e.g. gradient)
+		nativeView.layer.backgroundColor = null;
 
-		if (nativeView.hasNonUniformBorder) {
-			unsubscribeFromScrollNotifications(view);
-			clearNonUniformBorders(nativeView);
-		}
+		// Cleanup of previous values
+		clearBackgroundVisualEffects(view);
 
-		iosViewUtils.clearGradient(nativeView);
+		// Borders, shadows, etc
+		drawBackgroundVisualEffects(view);
+
+		if (!background.image) {
+			callback(background?.color?.ios);
+		} else {
+			if (!(background.image instanceof LinearGradient)) {
+				setUIColorFromImage(view, nativeView, callback, flip);
+			}
+		}
+	}
+
+	export function drawBackgroundVisualEffects(view: View): void {
+		const background = view.style.backgroundInternal;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
+		const layer: CALayer = nativeView.layer;
+
+		let needsLayerAdjustmentOnScroll = false;
+
+		// Add new gradient layer or update existing one
 		if (background.image instanceof LinearGradient) {
-			iosViewUtils.drawGradient(nativeView, background.image);
+			if (!nativeView.gradientLayer) {
+				nativeView.gradientLayer = CAGradientLayer.new();
+				layer.insertSublayerAtIndex(nativeView.gradientLayer, 0);
+			}
+			iosViewUtils.drawGradient(nativeView, nativeView.gradientLayer, background.image);
+			needsLayerAdjustmentOnScroll = true;
 		}
 
-		const hasNonUniformBorderWidths = background.hasBorderWidth() && !background.hasUniformBorder();
-		const hasNonUniformBorderRadiuses = background.hasBorderRadius() && !background.hasUniformBorderRadius();
-		if (background.hasUniformBorderColor() && (hasNonUniformBorderWidths || hasNonUniformBorderRadiuses)) {
-			drawUniformColorNonUniformBorders(nativeView, background);
-			subscribeForScrollNotifications(view);
-		} else if (background.hasUniformBorder()) {
-			const layer = nativeView.layer;
+		// Initialize clipping mask (usually for clip-path and non-uniform rounded borders)
+		maskLayerIfNeeded(nativeView, background);
+
+		if (background.hasUniformBorder()) {
 			const borderColor = background.getUniformBorderColor();
-			layer.borderColor = !borderColor ? undefined : borderColor.ios.CGColor;
+			layer.borderColor = borderColor?.ios?.CGColor;
 			layer.borderWidth = layout.toDeviceIndependentPixels(background.getUniformBorderWidth());
-			const renderSize = view.getActualSize() || { width: 0, height: 0 };
-			const cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius());
-			layer.cornerRadius = Math.min(Math.min(renderSize.width / 2, renderSize.height / 2), cornerRadius);
+			layer.cornerRadius = getUniformBorderRadius(view, layer.bounds);
 		} else {
-			drawNoRadiusNonUniformBorders(nativeView, background);
-			subscribeForScrollNotifications(view);
+			drawNonUniformBorders(nativeView, background);
+			needsLayerAdjustmentOnScroll = true;
 		}
 
-		// Clip-path should be called after borders are applied.
-		// It will eventually move them to different layer if uniform.
-		if (background.clipPath) {
-			drawClipPath(nativeView, background);
-		}
-
-		if (!background.image || background.image instanceof LinearGradient) {
-			const uiColor = background.color ? background.color.ios : undefined;
-			callback(uiColor);
-		} else {
-			setUIColorFromImage(view, nativeView, callback, flip);
+		// Clip-path should be called after borders are applied
+		if (nativeView.maskType === iosViewUtils.LayerMask.CLIP_PATH && layer.mask instanceof CAShapeLayer) {
+			layer.mask.path = generateClipPath(view, layer.bounds);
 		}
 
 		if (background.hasBoxShadow()) {
-			drawBoxShadow(nativeView, view, background.getBoxShadow(), background);
+			drawBoxShadow(view);
+			needsLayerAdjustmentOnScroll = true;
 		}
 
-		// reset clear flags
+		if (needsLayerAdjustmentOnScroll) {
+			registerAdjustLayersOnScrollListener(view);
+		}
+	}
+
+	export function clearBackgroundVisualEffects(view: View): void {
+		const nativeView: NativeScriptUIView = view.nativeViewProtected;
+		if (!nativeView) {
+			return;
+		}
+
+		const background: BackgroundDefinition = view.style.backgroundInternal;
+		const hasGradientBackground: boolean = background.image && background.image instanceof LinearGradient;
+
+		// Remove mask if there is no clip path or non-uniform border with radius
+		let needsMask;
+		switch (nativeView.maskType) {
+			case iosViewUtils.LayerMask.BORDER:
+				needsMask = !background.hasUniformBorder() && background.hasBorderRadius();
+				break;
+			case iosViewUtils.LayerMask.CLIP_PATH:
+				needsMask = !!background.clipPath;
+				break;
+			default:
+				needsMask = false;
+				break;
+		}
+
+		if (!needsMask) {
+			clearLayerMask(nativeView, background);
+		}
+
+		// Clear box shadow if it's no longer needed
+		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) {
+			clearBoxShadow(nativeView);
+		}
+
+		// Non-uniform borders cleanup
+		if (nativeView.hasNonUniformBorder) {
+			if (nativeView.hasNonUniformBorderColor && background.hasUniformBorderColor()) {
+				clearNonUniformColorBorders(nativeView);
+			}
+
+			if (background.hasUniformBorder()) {
+				clearNonUniformBorders(nativeView);
+			}
+		}
+
+		if (nativeView.gradientLayer && !hasGradientBackground) {
+			nativeView.gradientLayer.removeFromSuperlayer();
+			nativeView.gradientLayer = null;
+		}
+
+		// Force unset scroll listener
+		unregisterAdjustLayersOnScrollListener(view);
+
+		// Reset clear flags
 		background.clearFlags = BackgroundClearFlags.NONE;
 	}
+
+	export function generateShadowLayerPaths(view: View, bounds: CGRect): { maskPath: any; shadowPath: any } {
+		const background = view.style.backgroundInternal;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
+		const layer = nativeView.layer;
+
+		const boxShadow: BoxShadow = background.getBoxShadow();
+		const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+
+		const { width, height } = bounds.size;
+
+		let innerPath, shadowPath;
+
+		// Generate more detailed paths if view has border radius
+		if (background.hasBorderRadius()) {
+			if (background.hasUniformBorder()) {
+				const cornerRadius = layer.cornerRadius;
+				const cappedRadius = getBorderCapRadius(cornerRadius, width / 2, height / 2);
+				const cappedOuterRadii: CappedOuterRadii = {
+					topLeft: cappedRadius,
+					topRight: cappedRadius,
+					bottomLeft: cappedRadius,
+					bottomRight: cappedRadius,
+				};
+				const cappedOuterRadiiWithSpread: CappedOuterRadii = {
+					topLeft: cappedRadius + spreadRadius,
+					topRight: cappedRadius + spreadRadius,
+					bottomLeft: cappedRadius + spreadRadius,
+					bottomRight: cappedRadius + spreadRadius,
+				};
+
+				innerPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+				shadowPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadiiWithSpread, spreadRadius);
+			} else {
+				const outerTopLeftRadius = layout.toDeviceIndependentPixels(background.borderTopLeftRadius);
+				const outerTopRightRadius = layout.toDeviceIndependentPixels(background.borderTopRightRadius);
+				const outerBottomRightRadius = layout.toDeviceIndependentPixels(background.borderBottomRightRadius);
+				const outerBottomLeftRadius = layout.toDeviceIndependentPixels(background.borderBottomLeftRadius);
+
+				const topRadii = outerTopLeftRadius + outerTopRightRadius;
+				const rightRadii = outerTopRightRadius + outerBottomRightRadius;
+				const bottomRadii = outerBottomRightRadius + outerBottomLeftRadius;
+				const leftRadii = outerBottomLeftRadius + outerTopLeftRadius;
+				const cappedOuterRadii: CappedOuterRadii = {
+					topLeft: getBorderCapRadius(outerTopLeftRadius, (outerTopLeftRadius / topRadii) * width, (outerTopLeftRadius / leftRadii) * height),
+					topRight: getBorderCapRadius(outerTopRightRadius, (outerTopRightRadius / topRadii) * width, (outerTopRightRadius / rightRadii) * height),
+					bottomLeft: getBorderCapRadius(outerBottomLeftRadius, (outerBottomLeftRadius / bottomRadii) * width, (outerBottomLeftRadius / leftRadii) * height),
+					bottomRight: getBorderCapRadius(outerBottomRightRadius, (outerBottomRightRadius / bottomRadii) * width, (outerBottomRightRadius / rightRadii) * height),
+				};
+
+				// Add spread radius to corners that actually have radius as shadow has grown larger
+				// than view itself and needs to be rounded accordingly
+				const cappedOuterRadiiWithSpread: CappedOuterRadii = {
+					topLeft: cappedOuterRadii.topLeft > 0 ? cappedOuterRadii.topLeft + spreadRadius : cappedOuterRadii.topLeft,
+					topRight: cappedOuterRadii.topRight > 0 ? cappedOuterRadii.topRight + spreadRadius : cappedOuterRadii.topRight,
+					bottomLeft: cappedOuterRadii.bottomLeft > 0 ? cappedOuterRadii.bottomLeft + spreadRadius : cappedOuterRadii.bottomLeft,
+					bottomRight: cappedOuterRadii.bottomRight > 0 ? cappedOuterRadii.bottomRight + spreadRadius : cappedOuterRadii.bottomRight,
+				};
+
+				innerPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+				shadowPath = generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadiiWithSpread, spreadRadius);
+			}
+		} else {
+			innerPath = CGPathCreateWithRect(bounds, null);
+			shadowPath = CGPathCreateWithRect(CGRectInset(bounds, -spreadRadius, -spreadRadius), null);
+		}
+
+		return {
+			maskPath: generateShadowMaskPath(bounds, boxShadow, innerPath),
+			shadowPath,
+		};
+	}
+
+	export function generateClipPath(view: View, bounds: CGRect): UIBezierPath {
+		const background = view.style.backgroundInternal;
+		const { origin, size } = bounds;
+
+		const position = {
+			left: origin.x,
+			top: origin.y,
+			bottom: size.height,
+			right: size.width,
+		};
+
+		if (position.right === 0 || position.bottom === 0) {
+			return;
+		}
+
+		let path: UIBezierPath;
+		const clipPath = background.clipPath;
+
+		const functionName: string = clipPath.substring(0, clipPath.indexOf('('));
+		const value: string = clipPath.replace(`${functionName}(`, '').replace(')', '');
+
+		switch (functionName) {
+			case 'rect':
+				path = rectPath(value, position);
+				break;
+
+			case 'inset':
+				path = insetPath(value, position);
+				break;
+
+			case 'circle':
+				path = circlePath(value, position);
+				break;
+
+			case 'ellipse':
+				path = ellipsePath(value, position);
+				break;
+
+			case 'polygon':
+				path = polygonPath(value, position);
+				break;
+		}
+		return path;
+	}
+
+	export function getUniformBorderRadius(view: View, bounds: CGRect): number {
+		const background = view.style.backgroundInternal;
+		const { width, height } = bounds.size;
+		const cornerRadius = layout.toDeviceIndependentPixels(background.getUniformBorderRadius());
+
+		return Math.min(Math.min(width / 2, height / 2), cornerRadius);
+	}
+
+	export function generateNonUniformBorderInnerClipRoundedPath(view: View, bounds: CGRect): any {
+		const background = view.style.backgroundInternal;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
+
+		const cappedOuterRadii = calculateNonUniformBorderCappedRadii(bounds, background);
+		return generateNonUniformBorderInnerClipPath(bounds, background, cappedOuterRadii);
+	}
+
+	export function generateNonUniformBorderOuterClipRoundedPath(view: View, bounds: CGRect): any {
+		const background = view.style.backgroundInternal;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
+
+		const cappedOuterRadii = calculateNonUniformBorderCappedRadii(bounds, background);
+		return generateNonUniformBorderOuterClipPath(bounds, cappedOuterRadii);
+	}
+
+	export function generateNonUniformMultiColorBorderRoundedPaths(view: View, bounds: CGRect): Array<any> {
+		const background = view.style.backgroundInternal;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
+
+		const cappedOuterRadii = calculateNonUniformBorderCappedRadii(bounds, background);
+		return generateNonUniformMultiColorBorderPaths(bounds, background, cappedOuterRadii);
+	}
 }
 
-function onScroll(this: void, args: ScrollEventData): void {
+function maskLayerIfNeeded(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
+	const layer: CALayer = nativeView.layer;
+
+	// Check if layer should be masked
+	if (!(layer.mask instanceof CAShapeLayer)) {
+		// Since layers can only accept up to a single mask at a time, clip path is given more priority
+		if (background.clipPath) {
+			nativeView.maskType = iosViewUtils.LayerMask.CLIP_PATH;
+		} else if (!background.hasUniformBorder() && background.hasBorderRadius()) {
+			nativeView.maskType = iosViewUtils.LayerMask.BORDER;
+		} else {
+			nativeView.maskType = null;
+		}
+
+		if (nativeView.maskType != null) {
+			nativeView.originalMask = layer.mask;
+			layer.mask = CAShapeLayer.new();
+		}
+	}
+}
+
+function clearLayerMask(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
+	if (nativeView.outerShadowContainerLayer) {
+		nativeView.outerShadowContainerLayer.mask = null;
+	}
+	nativeView.layer.mask = nativeView.originalMask;
+	nativeView.originalMask = null;
+	nativeView.maskType = null;
+}
+
+function onBackgroundViewScroll(args: ScrollEventData): void {
 	const view = <View>args.object;
 	const nativeView = view.nativeViewProtected;
 	if (nativeView instanceof UIScrollView) {
@@ -102,71 +363,70 @@ function onScroll(this: void, args: ScrollEventData): void {
 }
 
 function adjustLayersForScrollView(nativeView: UIScrollView & NativeScriptUIView) {
-	const layer = nativeView.borderLayer;
-	if (layer instanceof CALayer) {
-		// Compensates with transition for the background layers for scrolling in ScrollView based controls.
-		CATransaction.begin();
-		CATransaction.setValueForKey(kCFBooleanTrue, kCATransactionDisableActions);
-		const offset = nativeView.contentOffset;
-		const transform = {
-			a: 1,
-			b: 0,
-			c: 0,
-			d: 1,
-			tx: offset.x,
-			ty: offset.y,
-		};
-		layer.setAffineTransform(transform);
-		if (nativeView.layer.mask) {
-			nativeView.layer.mask.setAffineTransform(transform);
-		}
-		CATransaction.commit();
+	// Compensates with transition for the background layers for scrolling in ScrollView based controls.
+	CATransaction.begin();
+	CATransaction.setDisableActions(true);
+	const offset = nativeView.contentOffset;
+	const transform = {
+		a: 1,
+		b: 0,
+		c: 0,
+		d: 1,
+		tx: offset.x,
+		ty: offset.y,
+	};
+
+	if (nativeView.layer.mask) {
+		nativeView.layer.mask.setAffineTransform(transform);
+	}
+
+	// Nested layers
+	if (nativeView.gradientLayer) {
+		nativeView.gradientLayer.setAffineTransform(transform);
+	}
+	if (nativeView.borderLayer) {
+		nativeView.borderLayer.setAffineTransform(transform);
+	}
+	if (nativeView.outerShadowContainerLayer) {
+		// Update bounds of shadow layer as it belongs to parent view
+		nativeView.outerShadowContainerLayer.bounds = nativeView.bounds;
+		nativeView.outerShadowContainerLayer.setAffineTransform(transform);
+	}
+
+	CATransaction.setDisableActions(false);
+	CATransaction.commit();
+}
+
+function unregisterAdjustLayersOnScrollListener(view: View) {
+	if (view.nativeViewProtected instanceof UIScrollView) {
+		view.off('scroll', onBackgroundViewScroll);
 	}
 }
 
-function unsubscribeFromScrollNotifications(view: View) {
+function registerAdjustLayersOnScrollListener(view: View) {
 	if (view.nativeViewProtected instanceof UIScrollView) {
-		view.off('scroll', onScroll);
-	}
-}
-
-function subscribeForScrollNotifications(view: View) {
-	if (view.nativeViewProtected instanceof UIScrollView) {
-		view.on('scroll', onScroll);
+		view.off('scroll', onBackgroundViewScroll);
+		view.on('scroll', onBackgroundViewScroll);
 		adjustLayersForScrollView(<any>view.nativeViewProtected);
 	}
 }
 
+function clearNonUniformColorBorders(nativeView: NativeScriptUIView): void {
+	if (nativeView.borderLayer) {
+		nativeView.borderLayer.mask = null;
+		nativeView.borderLayer.sublayers = null;
+	}
+	nativeView.hasNonUniformBorderColor = false;
+}
+
 function clearNonUniformBorders(nativeView: NativeScriptUIView): void {
 	if (nativeView.borderLayer) {
 		nativeView.borderLayer.removeFromSuperlayer();
+		nativeView.borderLayer = null;
 	}
-
-	if (nativeView.hasBorderMask) {
-		nativeView.layer.mask = nativeView.borderOriginalMask;
-		nativeView.hasBorderMask = false;
-		nativeView.borderOriginalMask = null;
-	}
-
-	if (nativeView.topBorderLayer) {
-		nativeView.topBorderLayer.removeFromSuperlayer();
-	}
-
-	if (nativeView.rightBorderLayer) {
-		nativeView.rightBorderLayer.removeFromSuperlayer();
-	}
-
-	if (nativeView.bottomBorderLayer) {
-		nativeView.bottomBorderLayer.removeFromSuperlayer();
-	}
-
-	if (nativeView.leftBorderLayer) {
-		nativeView.leftBorderLayer.removeFromSuperlayer();
-	}
+	nativeView.hasNonUniformBorder = false;
 }
 
-const pattern = /url\(('|")(.*?)\1\)/;
-
 function setUIColorFromImage(view: View, nativeView: UIView, callback: (uiColor: UIColor) => void, flip?: boolean): void {
 	const frame = nativeView.frame;
 	const boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
@@ -179,7 +439,7 @@ function setUIColorFromImage(view: View, nativeView: UIView, callback: (uiColor:
 	const background = style.backgroundInternal;
 	let imageUri = background.image as string;
 	if (imageUri) {
-		const match = imageUri.match(pattern);
+		const match = imageUri.match(uriPattern);
 		if (match && match[2]) {
 			imageUri = match[2];
 		}
@@ -209,15 +469,6 @@ function setUIColorFromImage(view: View, nativeView: UIView, callback: (uiColor:
 	uiColorFromImage(bitmap, view, callback, flip);
 }
 
-interface BackgroundDrawParams {
-	repeatX: boolean;
-	repeatY: boolean;
-	posX: number;
-	posY: number;
-	sizeX?: number;
-	sizeY?: number;
-}
-
 function parsePosition(pos: string): { x: CSSValue; y: CSSValue } {
 	const values = cssParse(pos);
 	if (values.length === 2) {
@@ -365,14 +616,14 @@ function getDrawParams(this: void, image: UIImage, background: BackgroundDefinit
 
 function uiColorFromImage(img: UIImage, view: View, callback: (uiColor: UIColor) => void, flip?: boolean): void {
 	const background = view.style.backgroundInternal;
+	const nativeView: NativeScriptUIView = view.nativeViewProtected;
 
-	if (!img || !view.nativeViewProtected) {
+	if (!img || !nativeView) {
 		callback(background.color && background.color.ios);
 
 		return;
 	}
 
-	const nativeView = view.nativeViewProtected as UIView;
 	const frame = nativeView.frame;
 	const boundsWidth = view.scaleX ? frame.size.width / view.scaleX : frame.size.width;
 	const boundsHeight = view.scaleY ? frame.size.height / view.scaleY : frame.size.height;
@@ -449,35 +700,13 @@ function cssValueToDeviceIndependentPixels(source: string, total: number): numbe
 	}
 }
 
-function drawUniformColorNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
-	const layer = nativeView.layer;
-	layer.backgroundColor = undefined;
-	layer.borderColor = undefined;
-	layer.borderWidth = 0;
-	layer.cornerRadius = 0;
+function getBorderCapRadius(a: number, b: number, c: number): number {
+	return a && Math.min(a, Math.min(b, c));
+}
 
-	const { width, height } = layer.bounds.size;
-	const { x, y } = layer.bounds.origin;
-
-	const left = x;
-	const top = y;
-	const right = x + width;
-	const bottom = y + height;
-
-	const { min, max } = Math;
-
-	const borderTopWidth = max(0, layout.toDeviceIndependentPixels(background.borderTopWidth));
-	const borderRightWidth = max(0, layout.toDeviceIndependentPixels(background.borderRightWidth));
-	const borderBottomWidth = max(0, layout.toDeviceIndependentPixels(background.borderBottomWidth));
-	const borderLeftWidth = max(0, layout.toDeviceIndependentPixels(background.borderLeftWidth));
-
-	const borderVWidth = borderTopWidth + borderBottomWidth;
-	const borderHWidth = borderLeftWidth + borderRightWidth;
-
-	const cappedBorderTopWidth = borderTopWidth && borderTopWidth * min(1, height / borderVWidth);
-	const cappedBorderRightWidth = borderRightWidth && borderRightWidth * min(1, width / borderHWidth);
-	const cappedBorderBottomWidth = borderBottomWidth && borderBottomWidth * min(1, height / borderVWidth);
-	const cappedBorderLeftWidth = borderLeftWidth && borderLeftWidth * min(1, width / borderHWidth);
+function calculateNonUniformBorderCappedRadii(bounds: CGRect, background: BackgroundDefinition): CappedOuterRadii {
+	const { width, height } = bounds.size;
+	const { x, y } = bounds.origin;
 
 	const outerTopLeftRadius = layout.toDeviceIndependentPixels(background.borderTopLeftRadius);
 	const outerTopRightRadius = layout.toDeviceIndependentPixels(background.borderTopRightRadius);
@@ -489,371 +718,496 @@ function drawUniformColorNonUniformBorders(nativeView: NativeScriptUIView, backg
 	const bottomRadii = outerBottomRightRadius + outerBottomLeftRadius;
 	const leftRadii = outerBottomLeftRadius + outerTopLeftRadius;
 
-	function capRadius(a: number, b: number, c: number): number {
-		return a && Math.min(a, Math.min(b, c));
-	}
-
-	const cappedOuterTopLeftRadius = capRadius(outerTopLeftRadius, (outerTopLeftRadius / topRadii) * width, (outerTopLeftRadius / leftRadii) * height);
-	const cappedOuterTopRightRadius = capRadius(outerTopRightRadius, (outerTopRightRadius / topRadii) * width, (outerTopRightRadius / rightRadii) * height);
-	const cappedOuterBottomRightRadius = capRadius(outerBottomRightRadius, (outerBottomRightRadius / bottomRadii) * width, (outerBottomRightRadius / rightRadii) * height);
-	const cappedOuterBottomLeftRadius = capRadius(outerBottomLeftRadius, (outerBottomLeftRadius / bottomRadii) * width, (outerBottomLeftRadius / leftRadii) * height);
-
-	// Outer contour
-	const clipPath = CGPathCreateMutable();
-	CGPathMoveToPoint(clipPath, null, left + cappedOuterTopLeftRadius, top);
-	CGPathAddArcToPoint(clipPath, null, right, top, right, top + cappedOuterTopRightRadius, cappedOuterTopRightRadius);
-	CGPathAddArcToPoint(clipPath, null, right, bottom, right - cappedOuterBottomRightRadius, bottom, cappedOuterBottomRightRadius);
-	CGPathAddArcToPoint(clipPath, null, left, bottom, left, bottom - cappedOuterBottomLeftRadius, cappedOuterBottomLeftRadius);
-	CGPathAddArcToPoint(clipPath, null, left, top, left + cappedOuterTopLeftRadius, top, cappedOuterTopLeftRadius);
-	CGPathCloseSubpath(clipPath);
-
-	nativeView.borderOriginalMask = layer.mask;
-	const clipShapeLayer = CAShapeLayer.layer();
-	clipShapeLayer.path = clipPath;
-	layer.mask = clipShapeLayer;
-	nativeView.hasBorderMask = true;
-
-	if (cappedBorderLeftWidth > 0 || cappedBorderTopWidth > 0 || cappedBorderRightWidth > 0 || cappedBorderBottomWidth > 0) {
-		const borderPath = CGPathCreateMutable();
-		CGPathAddRect(borderPath, null, CGRectMake(left, top, width, height));
-
-		// Inner contour
-		if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
-			CGPathMoveToPoint(borderPath, null, left + cappedOuterTopLeftRadius, top + cappedBorderTopWidth);
-		} else {
-			CGPathMoveToPoint(borderPath, null, left, top);
-		}
-
-		if (cappedBorderTopWidth > 0 || cappedBorderRightWidth > 0) {
-			const innerTopRightWRadius = max(0, cappedOuterTopRightRadius - cappedBorderRightWidth);
-			const innerTopRightHRadius = max(0, cappedOuterTopRightRadius - cappedBorderTopWidth);
-			const innerTopRightMaxRadius = max(innerTopRightWRadius, innerTopRightHRadius);
-			const innerTopRightTransform: any = CGAffineTransformMake(innerTopRightMaxRadius && innerTopRightWRadius / innerTopRightMaxRadius, 0, 0, innerTopRightMaxRadius && innerTopRightHRadius / innerTopRightMaxRadius, right - cappedBorderRightWidth - innerTopRightWRadius, top + cappedBorderTopWidth + innerTopRightHRadius);
-			CGPathAddArc(borderPath, innerTopRightTransform, 0, 0, innerTopRightMaxRadius, (Math.PI * 3) / 2, 0, false);
-		} else {
-			CGPathMoveToPoint(borderPath, null, right, top);
-		}
-
-		if (cappedBorderBottomWidth > 0 || cappedBorderRightWidth > 0) {
-			const innerBottomRightWRadius = max(0, cappedOuterBottomRightRadius - cappedBorderRightWidth);
-			const innerBottomRightHRadius = max(0, cappedOuterBottomRightRadius - cappedBorderBottomWidth);
-			const innerBottomRightMaxRadius = max(innerBottomRightWRadius, innerBottomRightHRadius);
-			const innerBottomRightTransform: any = CGAffineTransformMake(innerBottomRightMaxRadius && innerBottomRightWRadius / innerBottomRightMaxRadius, 0, 0, innerBottomRightMaxRadius && innerBottomRightHRadius / innerBottomRightMaxRadius, right - cappedBorderRightWidth - innerBottomRightWRadius, bottom - cappedBorderBottomWidth - innerBottomRightHRadius);
-			CGPathAddArc(borderPath, innerBottomRightTransform, 0, 0, innerBottomRightMaxRadius, 0, Math.PI / 2, false);
-		} else {
-			CGPathAddLineToPoint(borderPath, null, right, bottom);
-		}
-
-		if (cappedBorderBottomWidth > 0 || cappedBorderLeftWidth > 0) {
-			const innerBottomLeftWRadius = max(0, cappedOuterBottomLeftRadius - cappedBorderLeftWidth);
-			const innerBottomLeftHRadius = max(0, cappedOuterBottomLeftRadius - cappedBorderBottomWidth);
-			const innerBottomLeftMaxRadius = max(innerBottomLeftWRadius, innerBottomLeftHRadius);
-			const innerBottomLeftTransform: any = CGAffineTransformMake(innerBottomLeftMaxRadius && innerBottomLeftWRadius / innerBottomLeftMaxRadius, 0, 0, innerBottomLeftMaxRadius && innerBottomLeftHRadius / innerBottomLeftMaxRadius, left + cappedBorderLeftWidth + innerBottomLeftWRadius, bottom - cappedBorderBottomWidth - innerBottomLeftHRadius);
-			CGPathAddArc(borderPath, innerBottomLeftTransform, 0, 0, innerBottomLeftMaxRadius, Math.PI / 2, Math.PI, false);
-		} else {
-			CGPathAddLineToPoint(borderPath, null, left, bottom);
-		}
-
-		if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
-			const innerTopLeftWRadius = max(0, cappedOuterTopLeftRadius - cappedBorderLeftWidth);
-			const innerTopLeftHRadius = max(0, cappedOuterTopLeftRadius - cappedBorderTopWidth);
-			const innerTopLeftMaxRadius = max(innerTopLeftWRadius, innerTopLeftHRadius);
-			const innerTopLeftTransform: any = CGAffineTransformMake(innerTopLeftMaxRadius && innerTopLeftWRadius / innerTopLeftMaxRadius, 0, 0, innerTopLeftMaxRadius && innerTopLeftHRadius / innerTopLeftMaxRadius, left + cappedBorderLeftWidth + innerTopLeftWRadius, top + cappedBorderTopWidth + innerTopLeftHRadius);
-			CGPathAddArc(borderPath, innerTopLeftTransform, 0, 0, innerTopLeftMaxRadius, Math.PI, (Math.PI * 3) / 2, false);
-		} else {
-			CGPathAddLineToPoint(borderPath, null, left, top);
-		}
-
-		CGPathCloseSubpath(borderPath);
-
-		const borderLayer = CAShapeLayer.layer();
-		borderLayer.fillColor = (background.borderTopColor && background.borderTopColor.ios.CGColor) || UIColor.blackColor.CGColor;
-		borderLayer.fillRule = kCAFillRuleEvenOdd;
-		borderLayer.path = borderPath;
-		layer.addSublayer(borderLayer);
-		nativeView.borderLayer = borderLayer;
-	}
-
-	nativeView.hasNonUniformBorder = true;
-}
-
-function drawNoRadiusNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
-	const borderLayer = CALayer.layer();
-	nativeView.layer.addSublayer(borderLayer);
-	nativeView.borderLayer = borderLayer;
-
-	borderLayer.borderColor = undefined;
-	borderLayer.borderWidth = 0;
-	borderLayer.cornerRadius = 0;
-
-	const layerBounds = nativeView.layer.bounds;
-	const layerOrigin = layerBounds.origin;
-	const layerSize = layerBounds.size;
-
-	const nativeViewLayerBounds = {
-		left: layerOrigin.x,
-		top: layerOrigin.y,
-		bottom: layerSize.height,
-		right: layerSize.width,
+	const cappedOuterRadii: CappedOuterRadii = {
+		topLeft: getBorderCapRadius(outerTopLeftRadius, (outerTopLeftRadius / topRadii) * width, (outerTopLeftRadius / leftRadii) * height),
+		topRight: getBorderCapRadius(outerTopRightRadius, (outerTopRightRadius / topRadii) * width, (outerTopRightRadius / rightRadii) * height),
+		bottomLeft: getBorderCapRadius(outerBottomLeftRadius, (outerBottomLeftRadius / bottomRadii) * width, (outerBottomLeftRadius / leftRadii) * height),
+		bottomRight: getBorderCapRadius(outerBottomRightRadius, (outerBottomRightRadius / bottomRadii) * width, (outerBottomRightRadius / rightRadii) * height),
 	};
 
-	const top = layout.toDeviceIndependentPixels(background.borderTopWidth);
-	const right = layout.toDeviceIndependentPixels(background.borderRightWidth);
-	const bottom = layout.toDeviceIndependentPixels(background.borderBottomWidth);
-	const left = layout.toDeviceIndependentPixels(background.borderLeftWidth);
+	return cappedOuterRadii;
+}
+
+function drawNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition): void {
+	const layer: CALayer = nativeView.layer;
+	const layerBounds = layer.bounds;
+
+	layer.borderColor = null;
+	layer.borderWidth = 0;
+	layer.cornerRadius = 0;
+
+	const cappedOuterRadii = calculateNonUniformBorderCappedRadii(layerBounds, background);
+	if (nativeView.maskType === iosViewUtils.LayerMask.BORDER && layer.mask instanceof CAShapeLayer) {
+		layer.mask.path = generateNonUniformBorderOuterClipPath(layerBounds, cappedOuterRadii);
+	}
+
+	if (background.hasBorderWidth()) {
+		if (!nativeView.hasNonUniformBorder) {
+			nativeView.borderLayer = CAShapeLayer.new();
+			nativeView.borderLayer.fillRule = kCAFillRuleEvenOdd;
+			layer.addSublayer(nativeView.borderLayer);
+			nativeView.hasNonUniformBorder = true;
+		}
+
+		if (background.hasUniformBorderColor()) {
+			nativeView.borderLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+			nativeView.borderLayer.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
+		} else {
+			// Non-uniform borders need more layers in order to display multiple colors at the same time
+			let borderTopLayer, borderRightLayer, borderBottomLayer, borderLeftLayer;
+
+			if (!nativeView.hasNonUniformBorderColor) {
+				const maskLayer = CAShapeLayer.new();
+				maskLayer.fillRule = kCAFillRuleEvenOdd;
+				nativeView.borderLayer.mask = maskLayer;
+
+				borderTopLayer = CAShapeLayer.new();
+				borderRightLayer = CAShapeLayer.new();
+				borderBottomLayer = CAShapeLayer.new();
+				borderLeftLayer = CAShapeLayer.new();
+
+				nativeView.borderLayer.addSublayer(borderTopLayer);
+				nativeView.borderLayer.addSublayer(borderRightLayer);
+				nativeView.borderLayer.addSublayer(borderBottomLayer);
+				nativeView.borderLayer.addSublayer(borderLeftLayer);
+
+				nativeView.hasNonUniformBorderColor = true;
+			} else {
+				borderTopLayer = nativeView.borderLayer.sublayers[0];
+				borderRightLayer = nativeView.borderLayer.sublayers[1];
+				borderBottomLayer = nativeView.borderLayer.sublayers[2];
+				borderLeftLayer = nativeView.borderLayer.sublayers[3];
+			}
+
+			const paths = generateNonUniformMultiColorBorderPaths(layerBounds, background, cappedOuterRadii);
+
+			borderTopLayer.fillColor = background.borderTopColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+			borderTopLayer.path = paths[0];
+			borderRightLayer.fillColor = background.borderRightColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+			borderRightLayer.path = paths[1];
+			borderBottomLayer.fillColor = background.borderBottomColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+			borderBottomLayer.path = paths[2];
+			borderLeftLayer.fillColor = background.borderLeftColor?.ios?.CGColor || UIColor.blackColor.CGColor;
+			borderLeftLayer.path = paths[3];
+
+			// Clip inner area to create borders
+			if (nativeView.borderLayer.mask instanceof CAShapeLayer) {
+				nativeView.borderLayer.mask.path = generateNonUniformBorderInnerClipPath(layerBounds, background, cappedOuterRadii);
+			}
+		}
+	}
+}
+
+function calculateInnerBorderClipRadius(radius: number, insetX: number, insetY: number): { xRadius: number; yRadius: number; maxRadius: number } {
+	const innerXRadius = Math.max(0, radius - insetX);
+	const innerYRadius = Math.max(0, radius - insetY);
+	const innerMaxRadius = Math.max(innerXRadius, innerYRadius);
+
+	return {
+		xRadius: innerXRadius,
+		yRadius: innerYRadius,
+		maxRadius: innerMaxRadius,
+	};
+}
+
+/**
+ * Generates a path that represents the rounded view area.
+ *
+ * @param bounds
+ * @param cappedRadii
+ * @param offset
+ * @returns
+ */
+export function generateNonUniformBorderOuterClipPath(bounds: CGRect, cappedRadii: CappedOuterRadii, offset: number = 0): any {
+	const { width, height } = bounds.size;
+	const { x, y } = bounds.origin;
+
+	const left = x - offset;
+	const top = y - offset;
+	const right = x + width + offset;
+	const bottom = y + height + offset;
+
+	const clipPath = CGPathCreateMutable();
+
+	CGPathMoveToPoint(clipPath, null, left + cappedRadii.topLeft, top);
+	CGPathAddArcToPoint(clipPath, null, right, top, right, top + cappedRadii.topRight, cappedRadii.topRight);
+	CGPathAddArcToPoint(clipPath, null, right, bottom, right - cappedRadii.bottomRight, bottom, cappedRadii.bottomRight);
+	CGPathAddArcToPoint(clipPath, null, left, bottom, left, bottom - cappedRadii.bottomLeft, cappedRadii.bottomLeft);
+	CGPathAddArcToPoint(clipPath, null, left, top, left + cappedRadii.topLeft, top, cappedRadii.topLeft);
+	CGPathCloseSubpath(clipPath);
+
+	return clipPath;
+}
+
+/**
+ * Generates a path that represents the area inside borders.
+ *
+ * @param bounds
+ * @param background
+ * @param cappedOuterRadii
+ * @returns
+ */
+function generateNonUniformBorderInnerClipPath(bounds: CGRect, background: BackgroundDefinition, cappedOuterRadii: CappedOuterRadii): any {
+	const { width, height } = bounds.size;
+	const { x, y } = bounds.origin;
+
+	const position: Position = {
+		left: x,
+		top: y,
+		bottom: y + height,
+		right: x + width,
+	};
+
+	const borderTopWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderTopWidth));
+	const borderRightWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderRightWidth));
+	const borderBottomWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderBottomWidth));
+	const borderLeftWidth = Math.max(0, layout.toDeviceIndependentPixels(background.borderLeftWidth));
+
+	const borderVWidth = borderTopWidth + borderBottomWidth;
+	const borderHWidth = borderLeftWidth + borderRightWidth;
+
+	const cappedBorderTopWidth = borderTopWidth && borderTopWidth * Math.min(1, height / borderVWidth);
+	const cappedBorderRightWidth = borderRightWidth && borderRightWidth * Math.min(1, width / borderHWidth);
+	const cappedBorderBottomWidth = borderBottomWidth && borderBottomWidth * Math.min(1, height / borderVWidth);
+	const cappedBorderLeftWidth = borderLeftWidth && borderLeftWidth * Math.min(1, width / borderHWidth);
+
+	const clipPath = CGPathCreateMutable();
+	CGPathAddRect(clipPath, null, CGRectMake(x, y, width, height));
+
+	// Inner clip paths
+	if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
+		CGPathMoveToPoint(clipPath, null, position.left + cappedOuterRadii.topLeft, position.top + cappedBorderTopWidth);
+	} else {
+		CGPathMoveToPoint(clipPath, null, position.left, position.top);
+	}
+
+	if (cappedBorderTopWidth > 0 || cappedBorderRightWidth > 0) {
+		const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.topRight, cappedBorderRightWidth, cappedBorderTopWidth);
+		const innerTopRightTransform: any = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.right - cappedBorderRightWidth - xRadius, position.top + cappedBorderTopWidth + yRadius);
+		CGPathAddArc(clipPath, innerTopRightTransform, 0, 0, maxRadius, (Math.PI * 3) / 2, 0, false);
+	} else {
+		CGPathAddLineToPoint(clipPath, null, position.right, position.top);
+	}
+
+	if (cappedBorderBottomWidth > 0 || cappedBorderRightWidth > 0) {
+		const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.bottomRight, cappedBorderRightWidth, cappedBorderBottomWidth);
+		const innerBottomRightTransform: any = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.right - cappedBorderRightWidth - xRadius, position.bottom - cappedBorderBottomWidth - yRadius);
+		CGPathAddArc(clipPath, innerBottomRightTransform, 0, 0, maxRadius, 0, Math.PI / 2, false);
+	} else {
+		CGPathAddLineToPoint(clipPath, null, position.right, position.bottom);
+	}
+
+	if (cappedBorderBottomWidth > 0 || cappedBorderLeftWidth > 0) {
+		const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.bottomLeft, cappedBorderLeftWidth, cappedBorderBottomWidth);
+		const innerBottomLeftTransform: any = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.left + cappedBorderLeftWidth + xRadius, position.bottom - cappedBorderBottomWidth - yRadius);
+		CGPathAddArc(clipPath, innerBottomLeftTransform, 0, 0, maxRadius, Math.PI / 2, Math.PI, false);
+	} else {
+		CGPathAddLineToPoint(clipPath, null, position.left, position.bottom);
+	}
+
+	if (cappedBorderTopWidth > 0 || cappedBorderLeftWidth > 0) {
+		const { xRadius, yRadius, maxRadius } = calculateInnerBorderClipRadius(cappedOuterRadii.topLeft, cappedBorderLeftWidth, cappedBorderTopWidth);
+		const innerTopLeftTransform: any = CGAffineTransformMake(maxRadius && xRadius / maxRadius, 0, 0, maxRadius && yRadius / maxRadius, position.left + cappedBorderLeftWidth + xRadius, position.top + cappedBorderTopWidth + yRadius);
+		CGPathAddArc(clipPath, innerTopLeftTransform, 0, 0, maxRadius, Math.PI, (Math.PI * 3) / 2, false);
+	} else {
+		CGPathAddLineToPoint(clipPath, null, position.left, position.top);
+	}
+
+	CGPathCloseSubpath(clipPath);
+	return clipPath;
+}
+
+/**
+ * Generates paths for visualizing borders with different color per side.
+ * This is achieved by extending all borders enough to consume entire view size and
+ * use an inner path along with even-odd fill rule to render borders according to their corresponding width.
+ *
+ * @param bounds
+ * @param background
+ * @param cappedOuterRadii
+ * @returns
+ */
+function generateNonUniformMultiColorBorderPaths(bounds: CGRect, background: BackgroundDefinition, cappedOuterRadii: CappedOuterRadii): Array<any> {
+	const { width, height } = bounds.size;
+	const { x, y } = bounds.origin;
+
+	const position: Position = {
+		left: x,
+		top: y,
+		bottom: y + height,
+		right: x + width,
+	};
+
+	const topWidth: number = layout.toDeviceIndependentPixels(background.borderTopWidth);
+	const rightWidth: number = layout.toDeviceIndependentPixels(background.borderRightWidth);
+	const bottomWidth: number = layout.toDeviceIndependentPixels(background.borderBottomWidth);
+	const leftWidth: number = layout.toDeviceIndependentPixels(background.borderLeftWidth);
+
+	// These values have 1 as fallback in order to handler borders with zero values
+	const safeTopWidth: number = Math.max(topWidth, 1);
+	const safeRightWidth: number = Math.max(rightWidth, 1);
+	const safeBottomWidth: number = Math.max(bottomWidth, 1);
+	const safeLeftWidth: number = Math.max(leftWidth, 1);
+
+	const paths = new Array(4);
 
 	const lto: Point = {
-		x: nativeViewLayerBounds.left,
-		y: nativeViewLayerBounds.top,
+		x: position.left,
+		y: position.top,
 	}; // left-top-outside
 	const lti: Point = {
-		x: nativeViewLayerBounds.left + left,
-		y: nativeViewLayerBounds.top + top,
+		x: position.left + safeLeftWidth,
+		y: position.top + safeTopWidth,
 	}; // left-top-inside
 
 	const rto: Point = {
-		x: nativeViewLayerBounds.right,
-		y: nativeViewLayerBounds.top,
+		x: position.right,
+		y: position.top,
 	}; // right-top-outside
 	const rti: Point = {
-		x: nativeViewLayerBounds.right - right,
-		y: nativeViewLayerBounds.top + top,
+		x: position.right - safeRightWidth,
+		y: position.top + safeTopWidth,
 	}; // right-top-inside
 
 	const rbo: Point = {
-		x: nativeViewLayerBounds.right,
-		y: nativeViewLayerBounds.bottom,
+		x: position.right,
+		y: position.bottom,
 	}; // right-bottom-outside
 	const rbi: Point = {
-		x: nativeViewLayerBounds.right - right,
-		y: nativeViewLayerBounds.bottom - bottom,
+		x: position.right - safeRightWidth,
+		y: position.bottom - safeBottomWidth,
 	}; // right-bottom-inside
 
 	const lbo: Point = {
-		x: nativeViewLayerBounds.left,
-		y: nativeViewLayerBounds.bottom,
+		x: position.left,
+		y: position.bottom,
 	}; // left-bottom-outside
 	const lbi: Point = {
-		x: nativeViewLayerBounds.left + left,
-		y: nativeViewLayerBounds.bottom - bottom,
+		x: position.left + safeLeftWidth,
+		y: position.bottom - safeBottomWidth,
 	}; // left-bottom-inside
 
-	let hasNonUniformBorder: boolean;
+	const centerX: number = position.right / 2;
+	const centerY: number = position.bottom / 2;
+
+	// These values help calculate the size that each border shape should consume
+	const averageHorizontalBorderWidth: number = Math.max((leftWidth + rightWidth) / 2, 1);
+	const averageVerticalBorderWidth: number = Math.max((topWidth + bottomWidth) / 2, 1);
+	const viewRatioMultiplier: number = width > 0 && height > 0 ? width / height : 1;
 
 	const borderTopColor = background.borderTopColor;
-	if (top > 0 && borderTopColor && borderTopColor.ios) {
+	const borderRightColor = background.borderRightColor;
+	const borderBottomColor = background.borderBottomColor;
+	const borderLeftColor = background.borderLeftColor;
+
+	let borderTopY: number = centerY * (safeTopWidth / averageHorizontalBorderWidth) * viewRatioMultiplier;
+	let borderRightX: number = position.right - (centerX * (safeRightWidth / averageVerticalBorderWidth)) / viewRatioMultiplier;
+	let borderBottomY: number = position.bottom - centerY * (safeBottomWidth / averageHorizontalBorderWidth) * viewRatioMultiplier;
+	let borderLeftX: number = (centerX * (safeLeftWidth / averageVerticalBorderWidth)) / viewRatioMultiplier;
+
+	// Adjust border triangle width in case of borders colliding between each other or borders being less than 4
+	const hasHorizontalIntersection: boolean = borderLeftX > borderRightX;
+	const hasVerticalIntersection: boolean = borderTopY > borderBottomY;
+	if (hasVerticalIntersection) {
+		borderTopY = extendPointsToTargetY(lto.y, lto.x, lti.y, lti.x, borderLeftX);
+		borderBottomY = extendPointsToTargetY(lbo.y, lbo.x, lbi.y, lbi.x, borderLeftX);
+	} else if (hasHorizontalIntersection) {
+		borderLeftX = extendPointsToTargetY(lto.x, lto.y, lti.x, lti.y, borderTopY);
+		borderRightX = extendPointsToTargetY(rto.x, rto.y, rti.x, rti.y, borderTopY);
+	}
+
+	if (topWidth > 0 && borderTopColor?.ios) {
 		const topBorderPath = CGPathCreateMutable();
+		const borderTopLeftX: number = extendPointsToTargetY(lto.x, lto.y, lti.x, lti.y, borderTopY);
+		const borderTopRightX: number = extendPointsToTargetY(rto.x, rto.y, rti.x, rti.y, borderTopY);
+
 		CGPathMoveToPoint(topBorderPath, null, lto.x, lto.y);
 		CGPathAddLineToPoint(topBorderPath, null, rto.x, rto.y);
-		CGPathAddLineToPoint(topBorderPath, null, rti.x, rti.y);
-		CGPathAddLineToPoint(topBorderPath, null, lti.x, lti.y);
+		CGPathAddLineToPoint(topBorderPath, null, borderTopRightX, borderTopY);
+		if (borderTopRightX !== borderTopLeftX) {
+			CGPathAddLineToPoint(topBorderPath, null, borderTopLeftX, borderTopY);
+		}
 		CGPathAddLineToPoint(topBorderPath, null, lto.x, lto.y);
 
-		const topBorderLayer = CAShapeLayer.layer();
-		topBorderLayer.fillColor = background.borderTopColor.ios.CGColor;
-		topBorderLayer.path = topBorderPath;
-
-		borderLayer.addSublayer(topBorderLayer);
-		nativeView.topBorderLayer = topBorderLayer;
-		hasNonUniformBorder = true;
+		paths[0] = topBorderPath;
 	}
-
-	const borderRightColor = background.borderRightColor;
-	if (right > 0 && borderRightColor && borderRightColor.ios) {
+	if (rightWidth > 0 && borderRightColor?.ios) {
 		const rightBorderPath = CGPathCreateMutable();
+		const borderRightBottomY: number = extendPointsToTargetY(rbo.y, rbo.x, rbi.y, rbi.x, borderRightX);
+		const borderRightTopY: number = extendPointsToTargetY(rto.y, rto.x, rti.y, rti.x, borderRightX);
+
 		CGPathMoveToPoint(rightBorderPath, null, rto.x, rto.y);
 		CGPathAddLineToPoint(rightBorderPath, null, rbo.x, rbo.y);
-		CGPathAddLineToPoint(rightBorderPath, null, rbi.x, rbi.y);
-		CGPathAddLineToPoint(rightBorderPath, null, rti.x, rti.y);
+		CGPathAddLineToPoint(rightBorderPath, null, borderRightX, borderRightBottomY);
+		if (borderRightBottomY !== borderRightTopY) {
+			CGPathAddLineToPoint(rightBorderPath, null, borderRightX, borderRightTopY);
+		}
 		CGPathAddLineToPoint(rightBorderPath, null, rto.x, rto.y);
 
-		const rightBorderLayer = CAShapeLayer.layer();
-		rightBorderLayer.fillColor = background.borderRightColor.ios.CGColor;
-		rightBorderLayer.path = rightBorderPath;
-
-		borderLayer.addSublayer(rightBorderLayer);
-		nativeView.rightBorderLayer = rightBorderLayer;
-		hasNonUniformBorder = true;
+		paths[1] = rightBorderPath;
 	}
-
-	const borderBottomColor = background.borderBottomColor;
-	if (bottom > 0 && borderBottomColor && borderBottomColor.ios) {
+	if (bottomWidth > 0 && borderBottomColor?.ios) {
 		const bottomBorderPath = CGPathCreateMutable();
+		const borderBottomLeftX: number = extendPointsToTargetY(lbo.x, lbo.y, lbi.x, lbi.y, borderBottomY);
+		const borderBottomRightX: number = extendPointsToTargetY(rbo.x, rbo.y, rbi.x, rbi.y, borderBottomY);
+
 		CGPathMoveToPoint(bottomBorderPath, null, rbo.x, rbo.y);
 		CGPathAddLineToPoint(bottomBorderPath, null, lbo.x, lbo.y);
-		CGPathAddLineToPoint(bottomBorderPath, null, lbi.x, lbi.y);
-		CGPathAddLineToPoint(bottomBorderPath, null, rbi.x, rbi.y);
+		CGPathAddLineToPoint(bottomBorderPath, null, borderBottomLeftX, borderBottomY);
+		if (borderBottomLeftX !== borderBottomRightX) {
+			CGPathAddLineToPoint(bottomBorderPath, null, borderBottomRightX, borderBottomY);
+		}
 		CGPathAddLineToPoint(bottomBorderPath, null, rbo.x, rbo.y);
 
-		const bottomBorderLayer = CAShapeLayer.layer();
-		bottomBorderLayer.fillColor = background.borderBottomColor.ios.CGColor;
-		bottomBorderLayer.path = bottomBorderPath;
-
-		borderLayer.addSublayer(bottomBorderLayer);
-		nativeView.bottomBorderLayer = bottomBorderLayer;
-		hasNonUniformBorder = true;
+		paths[2] = bottomBorderPath;
 	}
-
-	const borderLeftColor = background.borderLeftColor;
-	if (left > 0 && borderLeftColor && borderLeftColor.ios) {
+	if (leftWidth > 0 && borderLeftColor?.ios) {
 		const leftBorderPath = CGPathCreateMutable();
+		const borderLeftTopY: number = extendPointsToTargetY(lto.y, lto.x, lti.y, lti.x, borderLeftX);
+		const borderLeftBottomY: number = extendPointsToTargetY(lbo.y, lbo.x, lbi.y, lbi.x, borderLeftX);
+
 		CGPathMoveToPoint(leftBorderPath, null, lbo.x, lbo.y);
 		CGPathAddLineToPoint(leftBorderPath, null, lto.x, lto.y);
-		CGPathAddLineToPoint(leftBorderPath, null, lti.x, lti.y);
-		CGPathAddLineToPoint(leftBorderPath, null, lbi.x, lbi.y);
+		CGPathAddLineToPoint(leftBorderPath, null, borderLeftX, borderLeftTopY);
+		if (borderLeftTopY !== borderLeftBottomY) {
+			CGPathAddLineToPoint(leftBorderPath, null, borderLeftX, borderLeftBottomY);
+		}
 		CGPathAddLineToPoint(leftBorderPath, null, lbo.x, lbo.y);
 
-		const leftBorderLayer = CAShapeLayer.layer();
-		leftBorderLayer.fillColor = background.borderLeftColor.ios.CGColor;
-		leftBorderLayer.path = leftBorderPath;
-
-		borderLayer.addSublayer(leftBorderLayer);
-		nativeView.leftBorderLayer = leftBorderLayer;
-		hasNonUniformBorder = true;
+		paths[3] = leftBorderPath;
 	}
 
-	nativeView.hasNonUniformBorder = hasNonUniformBorder;
+	return paths;
 }
 
-// TODO: use sublayer if its applied to a layout
-function drawBoxShadow(nativeView: NativeScriptUIView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
-	const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow');
-
-	layer.masksToBounds = false;
-	nativeView.clipsToBounds = false;
-
-	// this is required (if not, shadow will get cutoff at parent's dimensions)
-	// nativeView.clipsToBounds doesn't work
-	view.setProperty('clipToBounds', false);
-
-	if (!background.color?.a) {
-		// add white background if view has a transparent background
-		layer.backgroundColor = UIColor.whiteColor.CGColor;
-	}
-	// shadow opacity is handled on the shadow's color instance
-	layer.shadowOpacity = boxShadow.color?.a ? boxShadow.color?.a / 255 : 1;
-	layer.shadowRadius = Length.toDevicePixels(boxShadow.blurRadius, 0.0);
-	layer.shadowColor = boxShadow.color.ios.CGColor;
-
-	// prettier-ignore
-	layer.shadowOffset = CGSizeMake(
-		Length.toDevicePixels(boxShadow.offsetX, 0.0),
-		Length.toDevicePixels(boxShadow.offsetY, 0.0)
-	);
-
-	// this should match the view's border radius
-	let cornerRadius: number;
-	if (typeof view.style.borderRadius !== 'number') {
-		cornerRadius = Length.toDevicePixels(<CoreTypes.LengthType>view.style.borderRadius, 0.0);
-	} else {
-		cornerRadius = view.style.borderRadius;
-	}
-
-	// apply spreadRadius by expanding shadow layer bounds
-	// prettier-ignore
-	const bounds = CGRectInset(nativeView.bounds,
-		-Length.toDevicePixels(boxShadow.spreadRadius, 0.0),
-		-Length.toDevicePixels(boxShadow.spreadRadius, 0.0)
-	);
-
-	// This has the nice glow with box shadow of 0,0
-	layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(bounds, cornerRadius).CGPath;
-}
-
-function clearBoxShadow(nativeView: NativeScriptUIView) {
-	nativeView.clipsToBounds = true;
-	const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow', false);
-	if (!layer) {
-		return;
-	}
-	layer.masksToBounds = true;
-	layer.shadowOffset = CGSizeMake(0, 0);
-	layer.shadowColor = UIColor.clearColor.CGColor;
-	layer.cornerRadius = 0.0;
-	layer.shadowRadius = 0.0;
-	layer.shadowOpacity = 0.0;
-}
-
-function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
+function drawBoxShadow(view: View): void {
+	const background = view.style.backgroundInternal;
+	const nativeView = <NativeScriptUIView>view.nativeViewProtected;
 	const layer = nativeView.layer;
-	const layerBounds = layer.bounds;
-	const layerOrigin = layerBounds.origin;
-	const layerSize = layerBounds.size;
 
-	const bounds = {
-		left: layerOrigin.x,
-		top: layerOrigin.y,
-		bottom: layerSize.height,
-		right: layerSize.width,
-	};
-
-	if (bounds.right === 0 || bounds.bottom === 0) {
+	// There is no parent to add shadow to
+	if (!layer.superlayer) {
 		return;
 	}
 
-	let path: UIBezierPath;
-	const clipPath = background.clipPath;
+	const bounds = nativeView.bounds;
+	const viewFrame = nativeView.frame;
+	const boxShadow: BoxShadow = background.getBoxShadow();
 
-	const functionName = clipPath.substring(0, clipPath.indexOf('('));
-	const value = clipPath.replace(`${functionName}(`, '').replace(')', '');
+	// Initialize outer shadows
+	let outerShadowContainerLayer: CALayer;
+	if (nativeView.outerShadowContainerLayer) {
+		outerShadowContainerLayer = nativeView.outerShadowContainerLayer;
+	} else {
+		outerShadowContainerLayer = CALayer.new();
 
-	switch (functionName) {
-		case 'rect':
-			path = rectPath(value, bounds);
-			break;
+		// TODO: Make this dynamic when views get support for multiple shadows
+		const shadowLayer = CALayer.new();
+		// This mask is necessary to maintain transparent background
+		const maskLayer = CAShapeLayer.new();
+		maskLayer.fillRule = kCAFillRuleEvenOdd;
 
-		case 'inset':
-			path = insetPath(value, bounds);
-			break;
+		shadowLayer.mask = maskLayer;
+		outerShadowContainerLayer.addSublayer(shadowLayer);
 
-		case 'circle':
-			path = circlePath(value, bounds);
-			break;
-
-		case 'ellipse':
-			path = ellipsePath(value, bounds);
-			break;
-
-		case 'polygon':
-			path = polygonPath(value, bounds);
-			break;
+		// Instead of nesting it, add shadow container layer underneath view so that it's not affected by border masking
+		layer.superlayer.insertSublayerBelow(outerShadowContainerLayer, layer);
+		nativeView.outerShadowContainerLayer = outerShadowContainerLayer;
 	}
 
-	if (path) {
-		const shape = CAShapeLayer.layer();
-		shape.path = path;
-		layer.mask = shape;
-		nativeView.clipsToBounds = true;
+	// Apply clip path to shadow
+	if (nativeView.maskType === iosViewUtils.LayerMask.CLIP_PATH && layer.mask instanceof CAShapeLayer) {
+		if (!outerShadowContainerLayer.mask) {
+			outerShadowContainerLayer.mask = CAShapeLayer.new();
+		}
+		if (outerShadowContainerLayer.mask instanceof CAShapeLayer) {
+			outerShadowContainerLayer.mask.path = layer.mask.path;
+		}
+	}
 
-		const borderWidth = background.getUniformBorderWidth();
-		const borderColor = background.getUniformBorderColor();
+	// Since shadow layer is added to view layer's superlayer, we have to be more specific about shadow layer position
+	outerShadowContainerLayer.bounds = bounds;
+	outerShadowContainerLayer.position = CGPointMake(viewFrame.origin.x + viewFrame.size.width / 2, viewFrame.origin.y + viewFrame.size.height / 2);
 
-		if (borderWidth > 0 && borderColor instanceof Color) {
-			const borderLayer = CAShapeLayer.layer();
-			borderLayer.path = path;
-			borderLayer.lineWidth = borderWidth * 2;
-			borderLayer.strokeColor = borderColor.ios.CGColor;
-			borderLayer.fillColor = clearCGColor;
-			borderLayer.frame = nativeView.bounds;
+	// Inherit view visibility values
+	outerShadowContainerLayer.opacity = layer.opacity;
+	outerShadowContainerLayer.hidden = layer.hidden;
 
-			layer.borderColor = undefined;
-			layer.borderWidth = 0;
-			layer.addSublayer(borderLayer);
+	const outerShadowLayers = outerShadowContainerLayer.sublayers;
+	if (outerShadowLayers?.count) {
+		for (let i = 0, count = outerShadowLayers.count; i < count; i++) {
+			const shadowLayer = outerShadowLayers[i];
+			const shadowRadius = layout.toDeviceIndependentPixels(boxShadow.blurRadius);
+			const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+			const offsetX = layout.toDeviceIndependentPixels(boxShadow.offsetX);
+			const offsetY = layout.toDeviceIndependentPixels(boxShadow.offsetY);
+			const { maskPath, shadowPath } = ios.generateShadowLayerPaths(view, bounds);
+
+			shadowLayer.allowsEdgeAntialiasing = true;
+			shadowLayer.contentsScale = Screen.mainScreen.scale;
+
+			// Shadow opacity is handled on the shadow's color instance
+			shadowLayer.shadowOpacity = boxShadow.color?.a ? boxShadow.color.a / 255 : 1;
+			shadowLayer.shadowRadius = shadowRadius;
+			shadowLayer.shadowColor = boxShadow.color?.ios?.CGColor;
+			shadowLayer.shadowOffset = CGSizeMake(offsetX, offsetY);
+
+			// Apply spread radius by expanding shadow layer bounds (this has a nice glow with radii set to 0)
+			shadowLayer.shadowPath = shadowPath;
+
+			// A mask that ensures that view maintains transparent background
+			if (shadowLayer.mask instanceof CAShapeLayer) {
+				shadowLayer.mask.path = maskPath;
+			}
 		}
 	}
 }
 
-function rectPath(value: string, bounds: Rect): UIBezierPath {
+function clearBoxShadow(nativeView: NativeScriptUIView) {
+	if (nativeView.outerShadowContainerLayer) {
+		nativeView.outerShadowContainerLayer.removeFromSuperlayer();
+		nativeView.outerShadowContainerLayer = null;
+	}
+}
+
+/**
+ * Creates a mask that ensures no shadow will be displayed underneath transparent backgrounds.
+ *
+ * @param bounds
+ * @param boxShadow
+ * @param bordersClipPath
+ * @returns
+ */
+function generateShadowMaskPath(bounds: CGRect, boxShadow: BoxShadow, innerClipPath: any): any {
+	const shadowRadius = layout.toDeviceIndependentPixels(boxShadow.blurRadius);
+	const spreadRadius = layout.toDeviceIndependentPixels(boxShadow.spreadRadius);
+	const offsetX = layout.toDeviceIndependentPixels(boxShadow.offsetX);
+	const offsetY = layout.toDeviceIndependentPixels(boxShadow.offsetY);
+
+	// This value has to be large enough to avoid clipping shadow halo effect
+	const outerRectRadius: number = shadowRadius * 3 + spreadRadius;
+
+	const maskPath = CGPathCreateMutable();
+	// Proper clip position and size
+	const outerRect = CGRectOffset(CGRectInset(bounds, -outerRectRadius, -outerRectRadius), offsetX, offsetY);
+
+	CGPathAddPath(maskPath, null, innerClipPath);
+	CGPathAddRect(maskPath, null, outerRect);
+
+	return maskPath;
+}
+
+function rectPath(value: string, position: Position): UIBezierPath {
 	const arr = value.split(/[\s]+/);
-	const top = cssValueToDeviceIndependentPixels(arr[0], bounds.top);
-	const right = cssValueToDeviceIndependentPixels(arr[1], bounds.right);
-	const bottom = cssValueToDeviceIndependentPixels(arr[2], bounds.bottom);
-	const left = cssValueToDeviceIndependentPixels(arr[3], bounds.left);
+	const top = cssValueToDeviceIndependentPixels(arr[0], position.top);
+	const right = cssValueToDeviceIndependentPixels(arr[1], position.right);
+	const bottom = cssValueToDeviceIndependentPixels(arr[2], position.bottom);
+	const left = cssValueToDeviceIndependentPixels(arr[3], position.left);
 
 	return UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
 }
 
-function insetPath(value: string, bounds: Rect): UIBezierPath {
+function insetPath(value: string, position: Position): UIBezierPath {
 	const arr = value.split(/[\s]+/);
 
 	let topString: string;
@@ -876,30 +1230,30 @@ function insetPath(value: string, bounds: Rect): UIBezierPath {
 		leftString = arr[3];
 	}
 
-	const top = cssValueToDeviceIndependentPixels(topString, bounds.bottom);
-	const right = cssValueToDeviceIndependentPixels('100%', bounds.right) - cssValueToDeviceIndependentPixels(rightString, bounds.right);
-	const bottom = cssValueToDeviceIndependentPixels('100%', bounds.bottom) - cssValueToDeviceIndependentPixels(bottomString, bounds.bottom);
-	const left = cssValueToDeviceIndependentPixels(leftString, bounds.right);
+	const top = cssValueToDeviceIndependentPixels(topString, position.bottom);
+	const right = cssValueToDeviceIndependentPixels('100%', position.right) - cssValueToDeviceIndependentPixels(rightString, position.right);
+	const bottom = cssValueToDeviceIndependentPixels('100%', position.bottom) - cssValueToDeviceIndependentPixels(bottomString, position.bottom);
+	const left = cssValueToDeviceIndependentPixels(leftString, position.right);
 
 	return UIBezierPath.bezierPathWithRect(CGRectMake(left, top, right - left, bottom - top)).CGPath;
 }
 
-function circlePath(value: string, bounds: Rect): UIBezierPath {
+function circlePath(value: string, position: Position): UIBezierPath {
 	const arr = value.split(/[\s]+/);
-	const radius = cssValueToDeviceIndependentPixels(arr[0], (bounds.right > bounds.bottom ? bounds.bottom : bounds.right) / 2);
-	const y = cssValueToDeviceIndependentPixels(arr[2], bounds.bottom);
-	const x = cssValueToDeviceIndependentPixels(arr[3], bounds.right);
+	const radius = cssValueToDeviceIndependentPixels(arr[0], (position.right > position.bottom ? position.bottom : position.right) / 2);
+	const y = cssValueToDeviceIndependentPixels(arr[2], position.bottom);
+	const x = cssValueToDeviceIndependentPixels(arr[3], position.right);
 
 	return UIBezierPath.bezierPathWithArcCenterRadiusStartAngleEndAngleClockwise(CGPointMake(x, y), radius, 0, 360, true).CGPath;
 }
 
-function ellipsePath(value: string, bounds: Rect): UIBezierPath {
+function ellipsePath(value: string, position: Position): UIBezierPath {
 	const arr = value.split(/[\s]+/);
 
-	const rX = cssValueToDeviceIndependentPixels(arr[0], bounds.right);
-	const rY = cssValueToDeviceIndependentPixels(arr[1], bounds.bottom);
-	const cX = cssValueToDeviceIndependentPixels(arr[3], bounds.right);
-	const cY = cssValueToDeviceIndependentPixels(arr[4], bounds.bottom);
+	const rX = cssValueToDeviceIndependentPixels(arr[0], position.right);
+	const rY = cssValueToDeviceIndependentPixels(arr[1], position.bottom);
+	const cX = cssValueToDeviceIndependentPixels(arr[3], position.right);
+	const cY = cssValueToDeviceIndependentPixels(arr[4], position.bottom);
 
 	const left = cX - rX;
 	const top = cY - rY;
@@ -909,7 +1263,7 @@ function ellipsePath(value: string, bounds: Rect): UIBezierPath {
 	return UIBezierPath.bezierPathWithOvalInRect(CGRectMake(left, top, width, height)).CGPath;
 }
 
-function polygonPath(value: string, bounds: Rect): UIBezierPath {
+function polygonPath(value: string, position: Position): UIBezierPath {
 	const path = CGPathCreateMutable();
 
 	let firstPoint: Point;
@@ -917,8 +1271,8 @@ function polygonPath(value: string, bounds: Rect): UIBezierPath {
 	for (let i = 0; i < arr.length; i++) {
 		const xy = arr[i].trim().split(/[\s]+/);
 		const point: Point = {
-			x: cssValueToDeviceIndependentPixels(xy[0], bounds.right),
-			y: cssValueToDeviceIndependentPixels(xy[1], bounds.bottom),
+			x: cssValueToDeviceIndependentPixels(xy[0], position.right),
+			y: cssValueToDeviceIndependentPixels(xy[1], position.bottom),
 		};
 
 		if (!firstPoint) {
diff --git a/packages/core/ui/styling/box-shadow.ts b/packages/core/ui/styling/box-shadow.ts
index a2427a64f..677e88b71 100644
--- a/packages/core/ui/styling/box-shadow.ts
+++ b/packages/core/ui/styling/box-shadow.ts
@@ -1,6 +1,7 @@
 import { Color } from '../../color';
 
 export class BoxShadow {
+	public inset: boolean;
 	public offsetX: number;
 	public offsetY: number;
 	public blurRadius: number;
diff --git a/packages/core/ui/styling/css-shadow.ts b/packages/core/ui/styling/css-shadow.ts
index e24a9d29c..c35d1362e 100644
--- a/packages/core/ui/styling/css-shadow.ts
+++ b/packages/core/ui/styling/css-shadow.ts
@@ -2,7 +2,7 @@ import { CoreTypes } from '../../core-types';
 import { Color } from '../../color';
 import { Length } from './style-properties';
 
-export interface CSSShadow {
+export interface ShadowCSSValues {
 	inset: boolean;
 	offsetX: CoreTypes.LengthType;
 	offsetY: CoreTypes.LengthType;
@@ -27,14 +27,14 @@ const LENGTH_RE = /^-?[0-9]+[a-zA-Z%]*?$/;
 const isLength = (v) => v === '0' || LENGTH_RE.test(v);
 
 /**
- * Parse a string into a CSSShadow
+ * Parse a string into ShadowCSSValues
  * Supports any valid css box/text shadow combination.
  *
  * inspired by https://github.com/jxnblk/css-box-shadow/blob/master/index.js (MIT License)
  *
  * @param value
  */
-export function parseCSSShadow(value: string): CSSShadow {
+export function parseCSSShadow(value: string): ShadowCSSValues {
 	const parts = value.trim().split(PARTS_RE);
 	const inset = parts.includes('inset');
 	const first = parts[0];
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
index a1062d058..0ee71247a 100644
--- a/packages/core/ui/styling/style-properties.ts
+++ b/packages/core/ui/styling/style-properties.ts
@@ -16,7 +16,7 @@ import { CoreTypes } from '../../core-types';
 
 import { parseBackground } from '../../css/parser';
 import { LinearGradient } from './linear-gradient';
-import { CSSShadow, parseCSSShadow } from './css-shadow';
+import { parseCSSShadow, ShadowCSSValues } from './css-shadow';
 
 function equalsCommon(a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean;
 function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean;
@@ -1226,11 +1226,22 @@ export const borderBottomLeftRadiusProperty = new CssProperty<Style, CoreTypes.L
 });
 borderBottomLeftRadiusProperty.register(Style);
 
-const boxShadowProperty = new CssProperty<Style, CSSShadow>({
+const boxShadowProperty = new CssProperty<Style, ShadowCSSValues>({
 	name: 'boxShadow',
 	cssName: 'box-shadow',
 	valueChanged: (target, oldValue, newValue) => {
-		target.backgroundInternal = target.backgroundInternal.withBoxShadow(newValue);
+		target.backgroundInternal = target.backgroundInternal.withBoxShadow(
+			newValue
+				? {
+						inset: newValue.inset,
+						offsetX: Length.toDevicePixels(newValue.offsetX, 0),
+						offsetY: Length.toDevicePixels(newValue.offsetY, 0),
+						blurRadius: Length.toDevicePixels(newValue.blurRadius, 0),
+						spreadRadius: Length.toDevicePixels(newValue.spreadRadius, 0),
+						color: newValue.color,
+				  }
+				: null
+		);
 	},
 	valueConverter: (value) => {
 		return parseCSSShadow(value);
diff --git a/packages/core/ui/styling/style/index.ts b/packages/core/ui/styling/style/index.ts
index c84b5b4e7..dbb6d2d73 100644
--- a/packages/core/ui/styling/style/index.ts
+++ b/packages/core/ui/styling/style/index.ts
@@ -10,7 +10,7 @@ import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, Orde
 import { Trace } from '../../../trace';
 import { CoreTypes } from '../../../core-types';
 import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState } from '../../../accessibility/accessibility-types';
-import { CSSShadow } from '../css-shadow';
+import { ShadowCSSValues } from '../css-shadow';
 
 export interface CommonLayoutParams {
 	width: number;
@@ -149,7 +149,7 @@ export class Style extends Observable implements StyleDefinition {
 	public borderBottomRightRadius: CoreTypes.LengthType;
 	public borderBottomLeftRadius: CoreTypes.LengthType;
 
-	public boxShadow: CSSShadow;
+	public boxShadow: ShadowCSSValues;
 
 	public fontSize: number;
 	public fontFamily: string;
@@ -170,7 +170,7 @@ export class Style extends Observable implements StyleDefinition {
 	public textAlignment: CoreTypes.TextAlignmentType;
 	public textDecoration: CoreTypes.TextDecorationType;
 	public textTransform: CoreTypes.TextTransformType;
-	public textShadow: CSSShadow;
+	public textShadow: ShadowCSSValues;
 	public whiteSpace: CoreTypes.WhiteSpaceType;
 	public textOverflow: CoreTypes.TextOverflowType;
 
diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
index 2bb8af5b0..25ddad5cf 100644
--- a/packages/core/ui/text-base/index.android.ts
+++ b/packages/core/ui/text-base/index.android.ts
@@ -1,6 +1,6 @@
 // Types
 import { getClosestPropertyValue, maxLinesProperty, textOverflowProperty } from './text-base-common';
-import { CSSShadow } from '../styling/css-shadow';
+import { ShadowCSSValues } from '../styling/css-shadow';
 
 // Requires
 import { Font } from '../styling/font';
@@ -419,7 +419,7 @@ export class TextBase extends TextBaseCommon {
 		};
 	}
 
-	[textShadowProperty.setNative](value: CSSShadow) {
+	[textShadowProperty.setNative](value: ShadowCSSValues) {
 		// prettier-ignore
 		this.nativeTextViewProtected.setShadowLayer(
 			Length.toDevicePixels(value.blurRadius, java.lang.Float.MIN_VALUE),
diff --git a/packages/core/ui/text-base/index.d.ts b/packages/core/ui/text-base/index.d.ts
index e3533e8c4..9d3f41c7c 100644
--- a/packages/core/ui/text-base/index.d.ts
+++ b/packages/core/ui/text-base/index.d.ts
@@ -4,7 +4,7 @@ import { Style } from '../styling/style';
 import { Length } from '../styling/style-properties';
 import { Property, CssProperty, InheritedCssProperty } from '../core/properties';
 import { CoreTypes } from '../../core-types';
-import { CSSShadow } from '../styling/css-shadow';
+import { ShadowCSSValues } from '../styling/css-shadow';
 
 export class TextBase extends View implements AddChildFromBuilder {
 	/**
@@ -56,7 +56,7 @@ export class TextBase extends View implements AddChildFromBuilder {
 	/**
 	 * Gets or sets text shadow style property.
 	 */
-	textShadow: CSSShadow;
+	textShadow: ShadowCSSValues;
 
 	/**
 	 * Gets or sets white space style property.
@@ -137,7 +137,7 @@ export const maxLinesProperty: InheritedCssProperty<Style, number>;
 export const textAlignmentProperty: InheritedCssProperty<Style, CoreTypes.TextAlignmentType>;
 export const textDecorationProperty: CssProperty<Style, CoreTypes.TextDecorationType>;
 export const textTransformProperty: CssProperty<Style, CoreTypes.TextTransformType>;
-export const textShadowProperty: CssProperty<Style, CSSShadow>;
+export const textShadowProperty: CssProperty<Style, ShadowCSSValues>;
 export const whiteSpaceProperty: CssProperty<Style, CoreTypes.WhiteSpaceType>;
 export const textOverflowProperty: CssProperty<Style, CoreTypes.TextOverflowType>;
 export const letterSpacingProperty: CssProperty<Style, number>;
diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts
index ee4907e2c..f6eb53111 100644
--- a/packages/core/ui/text-base/index.ios.ts
+++ b/packages/core/ui/text-base/index.ios.ts
@@ -1,6 +1,6 @@
 // Types
 import { getClosestPropertyValue } from './text-base-common';
-import { CSSShadow } from '../styling/css-shadow';
+import { ShadowCSSValues } from '../styling/css-shadow';
 
 // Requires
 import { Font } from '../styling/font';
@@ -11,7 +11,7 @@ import { FormattedString } from './formatted-string';
 import { Span } from './span';
 import { colorProperty, fontInternalProperty, fontScaleInternalProperty, Length } from '../styling/style-properties';
 import { isString, isNullOrUndefined } from '../../utils/types';
-import { iOSNativeHelper } from '../../utils';
+import { iOSNativeHelper, layout } from '../../utils';
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
 
@@ -255,7 +255,7 @@ export class TextBase extends TextBaseCommon {
 		this._setNativeText();
 	}
 
-	[textShadowProperty.setNative](value: CSSShadow) {
+	[textShadowProperty.setNative](value: ShadowCSSValues) {
 		this._setShadow(value);
 	}
 
@@ -404,12 +404,8 @@ export class TextBase extends TextBaseCommon {
 		}
 	}
 
-	_setShadow(value: CSSShadow): void {
-		const layer = iOSNativeHelper.getShadowLayer(this.nativeTextViewProtected, 'ns-text-shadow');
-		if (!layer) {
-			Trace.write('text-shadow not applied, no layer.', Trace.categories.Style, Trace.messageType.info);
-			return;
-		}
+	_setShadow(value: ShadowCSSValues): void {
+		const layer: CALayer = this.nativeTextViewProtected.layer;
 
 		if (isNullOrUndefined(value)) {
 			// clear the text shadow
@@ -421,14 +417,14 @@ export class TextBase extends TextBaseCommon {
 		}
 
 		// shadow opacity is handled on the shadow's color instance
-		layer.shadowOpacity = value.color?.a ? value.color?.a / 255 : 1;
+		layer.shadowOpacity = value.color?.a ? value.color.a / 255 : 1;
 		layer.shadowColor = value.color.ios.CGColor;
-		layer.shadowRadius = Length.toDevicePixels(value.blurRadius, 0.0);
+		layer.shadowRadius = layout.toDeviceIndependentPixels(Length.toDevicePixels(value.blurRadius, 0));
 
 		// prettier-ignore
 		layer.shadowOffset = CGSizeMake(
-			Length.toDevicePixels(value.offsetX, 0.0),
-			Length.toDevicePixels(value.offsetY, 0.0)
+			layout.toDeviceIndependentPixels(Length.toDevicePixels(value.offsetX, 0)),
+			layout.toDeviceIndependentPixels(Length.toDevicePixels(value.offsetY, 0))
 		);
 
 		layer.masksToBounds = false;
diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts
index ab737a941..359aef7c8 100644
--- a/packages/core/ui/text-base/text-base-common.ts
+++ b/packages/core/ui/text-base/text-base-common.ts
@@ -13,7 +13,7 @@ import { Observable } from '../../data/observable';
 import { CoreTypes } from '../../core-types';
 import { TextBase as TextBaseDefinition } from '.';
 import { Color } from '../../color';
-import { CSSShadow, parseCSSShadow } from '../styling/css-shadow';
+import { ShadowCSSValues, parseCSSShadow } from '../styling/css-shadow';
 
 const CHILD_SPAN = 'Span';
 const CHILD_FORMATTED_TEXT = 'formattedText';
@@ -118,10 +118,10 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
 		this.style.textTransform = value;
 	}
 
-	get textShadow(): CSSShadow {
+	get textShadow(): ShadowCSSValues {
 		return this.style.textShadow;
 	}
-	set textShadow(value: CSSShadow) {
+	set textShadow(value: ShadowCSSValues) {
 		this.style.textShadow = value;
 	}
 
@@ -278,7 +278,7 @@ export const textTransformProperty = new CssProperty<Style, CoreTypes.TextTransf
 });
 textTransformProperty.register(Style);
 
-export const textShadowProperty = new CssProperty<Style, string | CSSShadow>({
+export const textShadowProperty = new CssProperty<Style, string | ShadowCSSValues>({
 	name: 'textShadow',
 	cssName: 'text-shadow',
 	affectsLayout: global.isIOS,
diff --git a/packages/core/ui/utils.d.ts b/packages/core/ui/utils.d.ts
index aff6f4070..a48305c18 100644
--- a/packages/core/ui/utils.d.ts
+++ b/packages/core/ui/utils.d.ts
@@ -1,19 +1,22 @@
 export interface NativeScriptUIView extends UIView {
 	hasNonUniformBorder: boolean;
-	borderLayer: CALayer;
+	hasNonUniformBorderColor: boolean;
+	borderLayer: CAShapeLayer;
 
-	hasBorderMask: boolean;
-	borderOriginalMask: CALayer;
-
-	topBorderLayer: CALayer;
-	rightBorderLayer: CALayer;
-	bottomBorderLayer: CALayer;
-	leftBorderLayer: CALayer;
+	maskType: ios.LayerMaskType;
+	originalMask: CALayer;
 
 	gradientLayer: CAGradientLayer;
-	boxShadowLayer: CALayer;
+	outerShadowContainerLayer: CALayer;
 }
+
 export namespace ios {
+	export type LayerMaskType = 'BORDER' | 'CLIP_PATH';
+	export namespace LayerMask {
+		export const BORDER = 'BORDER';
+		export const CLIP_PATH = 'CLIP_PATH';
+	}
+
 	/**
 	 * Gets actual height of a [UIView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/) widget in device pixels.
 	 * @param uiView - An instance of UIView.
@@ -27,17 +30,11 @@ export namespace ios {
 	export function getStatusBarHeight(viewController?: any): number;
 
 	/**
-	 * draw gradient using CAGradientLayer and insert into UIView sublayer
-	 * @param nativeView UIView
+	 * Draw gradient using CAGradientLayer and insert into UIView sublayer
+	 * @param nativeView NativeScriptUIView
+	 * @param gradientLayer CAGradientLayer
 	 * @param gradient Parsed LinearGradient
 	 * @param gradientLayerOpacity Initial layer opacity (in case you'd like to use with animation sequence)
-	 * @param index sublayer index to insert layer at (defaults to 0)
 	 */
-	export function drawGradient(uiView: any /* UIView */, gradient: LinearGradient, gradientLayerOpacity?: number, index?: number): any; /* CAGradientLayer */
-
-	/**
-	 * clear gradientLayer if found on provided UIView
-	 * @param nativeView UIView
-	 */
-	export function clearGradient(uiView: any /* UIView */): void;
+	export function drawGradient(uiView: NativeScriptUIView, gradientLayer: CAGradientLayer, gradient: LinearGradient, gradientLayerOpacity?: number): void;
 }
diff --git a/packages/core/ui/utils.ios.ts b/packages/core/ui/utils.ios.ts
index fe6e370e9..2ee51bb54 100644
--- a/packages/core/ui/utils.ios.ts
+++ b/packages/core/ui/utils.ios.ts
@@ -1,23 +1,26 @@
-import * as utils from '../utils';
+import { Screen } from '../platform';
+import * as utils from '../utils';
 import { LinearGradient } from './styling/linear-gradient';
 
 interface NativeScriptUIView extends UIView {
 	hasNonUniformBorder: boolean;
-	borderLayer: CALayer;
+	hasNonUniformBorderColor: boolean;
+	borderLayer: CAShapeLayer;
 
-	hasBorderMask: boolean;
-	borderOriginalMask: CALayer;
-
-	topBorderLayer: CALayer;
-	rightBorderLayer: CALayer;
-	bottomBorderLayer: CALayer;
-	leftBorderLayer: CALayer;
+	maskType: ios.LayerMaskType;
+	originalMask: CALayer;
 
 	gradientLayer: CAGradientLayer;
-	boxShadowLayer: CALayer;
+	outerShadowContainerLayer: CALayer;
 }
 
 export namespace ios {
+	export type LayerMaskType = 'BORDER' | 'CLIP_PATH';
+	export namespace LayerMask {
+		export const BORDER = 'BORDER';
+		export const CLIP_PATH = 'CLIP_PATH';
+	}
+
 	export function getActualHeight(view: UIView): number {
 		if (view.window && !view.hidden) {
 			return utils.layout.toDevicePixels(view.frame.size.height);
@@ -42,50 +45,46 @@ export namespace ios {
 		return utils.layout.toDevicePixels(min);
 	}
 
-	export function drawGradient(nativeView: NativeScriptUIView, gradient: LinearGradient, gradientLayerOpacity?: number, index?: number): CAGradientLayer {
-		let gradientLayer: CAGradientLayer;
-		if (nativeView && gradient) {
-			gradientLayer = CAGradientLayer.layer();
-			if (typeof gradientLayerOpacity === 'number') {
-				gradientLayer.opacity = gradientLayerOpacity;
-			}
-			gradientLayer.frame = nativeView.bounds;
-			nativeView.gradientLayer = gradientLayer;
-
-			const iosColors = NSMutableArray.alloc().initWithCapacity(gradient.colorStops.length);
-			const iosStops = NSMutableArray.alloc<number>().initWithCapacity(gradient.colorStops.length);
-			let hasStops = false;
-
-			gradient.colorStops.forEach((stop) => {
-				iosColors.addObject(stop.color.ios.CGColor);
-				if (stop.offset) {
-					iosStops.addObject(stop.offset.value);
-					hasStops = true;
-				}
-			});
-
-			gradientLayer.colors = iosColors;
-
-			if (hasStops) {
-				gradientLayer.locations = iosStops;
-			}
-
-			const alpha = gradient.angle / (Math.PI * 2);
-			const startX = Math.pow(Math.sin(Math.PI * (alpha + 0.75)), 2);
-			const startY = Math.pow(Math.sin(Math.PI * (alpha + 0.5)), 2);
-			const endX = Math.pow(Math.sin(Math.PI * (alpha + 0.25)), 2);
-			const endY = Math.pow(Math.sin(Math.PI * alpha), 2);
-			gradientLayer.startPoint = { x: startX, y: startY };
-			gradientLayer.endPoint = { x: endX, y: endY };
-
-			nativeView.layer.insertSublayerAtIndex(gradientLayer, index || 0);
+	export function drawGradient(nativeView: NativeScriptUIView, gradientLayer: CAGradientLayer, gradient: LinearGradient, gradientLayerOpacity?: number): void {
+		if (!nativeView || !gradient) {
+			return;
 		}
-		return gradientLayer;
-	}
 
-	export function clearGradient(nativeView: NativeScriptUIView): void {
-		if (nativeView?.gradientLayer) {
-			nativeView.gradientLayer.removeFromSuperlayer();
+		if (typeof gradientLayerOpacity === 'number') {
+			gradientLayer.opacity = gradientLayerOpacity;
 		}
+
+		// Update these properties instead of layer frame as the latter messes with animations
+		gradientLayer.bounds = nativeView.bounds;
+		gradientLayer.anchorPoint = CGPointMake(0, 0);
+
+		gradientLayer.allowsEdgeAntialiasing = true;
+		gradientLayer.contentsScale = Screen.mainScreen.scale;
+
+		const iosColors = NSMutableArray.alloc().initWithCapacity(gradient.colorStops.length);
+		const iosStops = NSMutableArray.alloc<number>().initWithCapacity(gradient.colorStops.length);
+		let hasStops = false;
+
+		gradient.colorStops.forEach((stop) => {
+			iosColors.addObject(stop.color.ios.CGColor);
+			if (stop.offset) {
+				iosStops.addObject(stop.offset.value);
+				hasStops = true;
+			}
+		});
+
+		gradientLayer.colors = iosColors;
+
+		if (hasStops) {
+			gradientLayer.locations = iosStops;
+		}
+
+		const alpha = gradient.angle / (Math.PI * 2);
+		const startX = Math.pow(Math.sin(Math.PI * (alpha + 0.75)), 2);
+		const startY = Math.pow(Math.sin(Math.PI * (alpha + 0.5)), 2);
+		const endX = Math.pow(Math.sin(Math.PI * (alpha + 0.25)), 2);
+		const endY = Math.pow(Math.sin(Math.PI * alpha), 2);
+		gradientLayer.startPoint = { x: startX, y: startY };
+		gradientLayer.endPoint = { x: endX, y: endY };
 	}
 }
diff --git a/packages/core/utils/ios/index.ts b/packages/core/utils/ios/index.ts
index f50999637..c8a79beb7 100644
--- a/packages/core/utils/ios/index.ts
+++ b/packages/core/utils/ios/index.ts
@@ -149,88 +149,6 @@ export function applyRotateTransform(transform: CATransform3D, x: number, y: num
 	return transform;
 }
 
-export function getShadowLayer(nativeView: UIView, name: string = 'ns-shadow-layer', create: boolean = true): CALayer {
-	return nativeView.layer;
-
-	console.log(`--- ${create ? 'CREATE' : 'READ'}`);
-
-	/**
-	 * UIView
-	 *  -> Shadow
-	 *
-	 *
-	 *  UIView
-	 *   -> UIView
-	 *   -> Shadow
-	 */
-
-	if (!nativeView) {
-		return null;
-	}
-
-	if (!nativeView.layer) {
-		// should never hit this?
-		console.log('- no layer! -');
-		return null;
-	}
-
-	// if the nativeView's layer is the shadow layer?
-	if (nativeView.layer.name === name) {
-		console.log('- found shadow layer - reusing.');
-		return nativeView.layer;
-	}
-
-	console.log('>> layer                :', nativeView.layer);
-	if (nativeView.layer.sublayers?.count) {
-		const count = nativeView.layer.sublayers.count;
-		for (let i = 0; i < count; i++) {
-			const subLayer = nativeView.layer.sublayers.objectAtIndex(i);
-
-			console.log(`>> subLayer ${i + 1}/${count}         :`, subLayer);
-			console.log(`>> subLayer ${i + 1}/${count} name    :`, subLayer.name);
-
-			if (subLayer.name === name) {
-				console.log('- found shadow sublayer - reusing.');
-				return subLayer;
-			}
-		}
-		// if (nativeView instanceof UITextView) {
-		// 	return nativeView.layer.sublayers.objectAtIndex(1);
-		// } else {
-		// 	return nativeView.layer.sublayers.objectAtIndex(nativeView.layer.sublayers.count - 1);
-		// }
-	}
-	// else {
-	// 		layer = nativeView.layer;
-	// }
-
-	// we're not interested in creating a new layer
-	if (!create) {
-		return null;
-	}
-
-	console.log(`- adding a new layer for - ${name}`);
-
-	const viewLayer = nativeView.layer;
-	const newLayer = CALayer.layer();
-
-	newLayer.name = name;
-	newLayer.zPosition = 0.0;
-	// nativeView.layer.insertSublayerBelow(newLayer, nativeView.layer)
-	// newLayer.insertSublayerAtIndex(nativeView.layer, 0)
-	// nativeView.layer.zPosition = 1.0;
-	// nativeView.layer.addSublayer(newLayer);
-
-	// nativeView.layer = CALayer.layer()
-
-	nativeView.layer.insertSublayerAtIndex(newLayer, 0);
-	// nativeView.layer.insertSublayerAtIndex(viewLayer, 1)
-
-	// nativeView.layer.replaceSublayerWith(newLayer, nativeView.layer);
-
-	return newLayer;
-}
-
 export function createUIDocumentInteractionControllerDelegate(): NSObject {
 	@NativeClass
 	class UIDocumentInteractionControllerDelegateImpl extends NSObject implements UIDocumentInteractionControllerDelegate {
diff --git a/packages/core/utils/native-helper.d.ts b/packages/core/utils/native-helper.d.ts
index 9d1756eaa..c89d7d26c 100644
--- a/packages/core/utils/native-helper.d.ts
+++ b/packages/core/utils/native-helper.d.ts
@@ -216,13 +216,6 @@ export function dataDeserialize(nativeData?: any): any;
 // 	 */
 // 	export function applyRotateTransform(transform: any /* CATransform3D*/, x: number, y: number, z: number): any; /* CATransform3D*/
 
-// 	/**
-// 	 * @param nativeView UIView to find shadow layer with
-// 	 * @param name Name of the shadow layer if looking for specifically named layer
-// 	 * @param create should we create a new layer if not found
-// 	 */
-// 	export function getShadowLayer(nativeView: any /* UIView */, name?: string, create?: boolean): any; /* CALayer */
-
 // 	/**
 // 	 * Create a UIDocumentInteractionControllerDelegate implementation for use with UIDocumentInteractionController
 // 	 */
diff --git a/packages/core/utils/number-utils.ts b/packages/core/utils/number-utils.ts
index 5deeb085f..86ea3b7e5 100644
--- a/packages/core/utils/number-utils.ts
+++ b/packages/core/utils/number-utils.ts
@@ -44,3 +44,24 @@ export const degreesToRadians = (a: number) => a * (Math.PI / 180);
 export function valueMap(val: number, in_min: number, in_max: number, out_min: number, out_max: number) {
 	return ((val - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
 }
+
+/**
+ * A method that calculates the target X based on the angle of 2 points and target Y.
+ *
+ * @param x1
+ * @param y1
+ * @param x2
+ * @param y2
+ * @param yTarget
+ * @returns
+ */
+export function extendPointsToTargetY(x1: number, y1: number, x2: number, y2: number, yTarget: number) {
+	const deltaX: number = x2 - x1;
+	const deltaY: number = y2 - y1;
+	const angleRadians: number = Math.atan2(deltaY, deltaX);
+
+	const targetDeltaY: number = yTarget - y1;
+	const targetDeltaX: number = targetDeltaY / Math.tan(angleRadians);
+
+	return x1 + targetDeltaX;
+}