diff --git a/.gitignore b/.gitignore
index c29b090ad0..d4301c9280 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,6 +42,7 @@ apps/**/*/*.map
 apps/**/*/platforms
 apps/**/*/webpack.*.js
 *.tgz
+.npmrc
 
 # System Files
 .DS_Store
diff --git a/apps/automated/package.json b/apps/automated/package.json
index 414312b7d2..b4db4a536b 100644
--- a/apps/automated/package.json
+++ b/apps/automated/package.json
@@ -14,10 +14,10 @@
     "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "alpha",
+    "@nativescript/ios": "alpha",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.3.5"
+    "typescript": "4.5.4"
   },
   "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
   "readme": "NativeScript Application"
diff --git a/apps/automated/src/color/color-tests.ts b/apps/automated/src/color/color-tests.ts
index 5e8c455dfe..e229769854 100644
--- a/apps/automated/src/color/color-tests.ts
+++ b/apps/automated/src/color/color-tests.ts
@@ -72,6 +72,24 @@ export var test_rgb_Color_CSS = function () {
 	TKUnit.assertEqual(color.argb, 0xffff6464, 'Color.argb not properly parsed');
 };
 
+export var test_rgb_Color_CSS_lvl4 = function () {
+	var alpha = 0.5;
+	var expected = 0x80;
+	// <snippet module="color" title="color">
+	// ### Creating a Color from four RGB values
+	// ``` JavaScript
+	// Creates the color with 255 red, 100 green, 100 blue
+	var color = new Color(`rgb(255 100 100 / ${alpha})`);
+	// ```
+	// </snippet>
+	TKUnit.assertEqual(color.a, expected, 'Color.a not properly parsed');
+	TKUnit.assertEqual(color.r, 255, 'Color.r not properly parsed');
+	TKUnit.assertEqual(color.g, 100, 'Color.g not properly parsed');
+	TKUnit.assertEqual(color.b, 100, 'Color.b not properly parsed');
+	TKUnit.assertEqual(color.hex, '#FF646480', 'Color.hex not properly parsed');
+	TKUnit.assertEqual(color.argb, 0x80ff6464, 'Color.argb not properly parsed');
+};
+
 export var test_rgba_Color_CSS = function () {
 	var alpha = 0.5;
 	var expected = 0x80;
diff --git a/apps/automated/src/http/http-string-worker.ts b/apps/automated/src/http/http-string-worker.ts
index a45ebb62d3..e18e5d6840 100644
--- a/apps/automated/src/http/http-string-worker.ts
+++ b/apps/automated/src/http/http-string-worker.ts
@@ -1,13 +1,13 @@
 // todo: figure out why this worker is including the whole core and not just the Http module
 // ie. tree-shaking is not working as expected here. (same setup works in a separate app)
-import { initGlobal } from '@nativescript/core/globals/index';
-initGlobal();
+// import { initGlobal } from '@nativescript/core/globals/index';
+// initGlobal();
 
-import { Http } from '@nativescript/core';
+import { getString } from '@nativescript/core/http';
 
 declare var postMessage: any;
 
-Http.getString('https://httpbin.org/get').then(
+getString('https://httpbin.org/get').then(
 	function (r) {
 		postMessage(r);
 	},
diff --git a/apps/automated/src/ui/core/bindable/bindable-tests.ts b/apps/automated/src/ui/core/bindable/bindable-tests.ts
index 10e6b6edb3..c181c868a8 100644
--- a/apps/automated/src/ui/core/bindable/bindable-tests.ts
+++ b/apps/automated/src/ui/core/bindable/bindable-tests.ts
@@ -659,17 +659,19 @@ export function test_BindingConverterCalledEvenWithNullValue() {
 	const testPropertyValue = null;
 	const expectedValue = 'collapsed';
 	pageViewModel.set('testProperty', testPropertyValue);
-	appModule.getResources()['converter'] = function (value) {
-		if (value) {
-			return 'visible';
-		} else {
-			return 'collapsed';
-		}
+	appModule.getResources()['converter'] = {
+		toView: function (value) {
+			if (value) {
+				return 'visible';
+			} else {
+				return 'collapsed';
+			}
+		},
 	};
 
 	const testFunc = function (views: Array<View>) {
 		const testLabel = <Label>views[0];
-		testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter' });
+		testLabel.bind({ sourceProperty: 'testProperty', targetProperty: 'text', expression: 'testProperty | converter()' });
 
 		const page = <Page>views[1];
 		page.bindingContext = pageViewModel;
diff --git a/apps/automated/src/ui/frame/frame-tests.android.ts b/apps/automated/src/ui/frame/frame-tests.android.ts
index 27a049a890..24bef8128b 100644
--- a/apps/automated/src/ui/frame/frame-tests.android.ts
+++ b/apps/automated/src/ui/frame/frame-tests.android.ts
@@ -1,10 +1,10 @@
-import { Frame } from '@nativescript/core/ui/frame';
+import { Frame, GridLayout, Label, Page, Trace, View } from '@nativescript/core';
 import * as TKUnit from '../../tk-unit';
 import { unsetValue } from '@nativescript/core/ui/core/view';
 import { PercentLength } from '@nativescript/core/ui/styling/style-properties';
+import { buildUIAndRunTest } from '../../ui-helper';
 export * from './frame-tests-common';
 
-
 export function test_percent_width_and_height_set_to_page_support() {
 	let topFrame = Frame.topmost();
 	let currentPage = topFrame.currentPage;
@@ -65,3 +65,140 @@ export function test_percent_margin_set_to_page_support() {
 	TKUnit.assertTrue(PercentLength.equals(currentPage.marginRight, 0));
 	TKUnit.assertTrue(PercentLength.equals(currentPage.marginBottom, 0));
 }
+
+export function test_nested_frames() {
+	let topFrame = Frame.topmost();
+	let currentPage = topFrame.currentPage;
+	console.log(Frame.topmost(), currentPage);
+	class PageAbstraction {
+		page: Page;
+		root: GridLayout;
+		setContent(content: View) {
+			this.root.insertChild(content, 0);
+			content.marginTop = 30;
+		}
+	}
+
+	const pageFactory = (color: string) => {
+		const page = new Page();
+		page.backgroundColor = color;
+		const gl = new GridLayout();
+		const label = new Label();
+		page.on('navigatedTo', () => {
+			let depth = 0;
+			let parent = label.parent;
+			let parentFrame: Frame = null;
+			while (parent) {
+				if (parent instanceof Frame) {
+					parentFrame = parentFrame || parent;
+					depth++;
+				}
+				parent = parent.parent;
+			}
+			label.text = `Depth: ${depth} - Page: ${parentFrame?.backStack.length}`;
+		});
+		label.style.zIndex = 999;
+		gl.insertChild(label, 0);
+		page.content = gl;
+		const abs = new PageAbstraction();
+		abs.root = gl;
+		abs.page = page;
+
+		return abs;
+	};
+
+	const page1 = pageFactory('red');
+	const page2 = pageFactory('blue');
+	const page3 = pageFactory('green');
+	const parentPage2 = pageFactory('yellow');
+
+	const frameFactory = () => {
+		const frame = new Frame();
+		frame._popFromFrameStack();
+		frame.navigate = function (...args) {
+			// console.log('navigateTo', args, args[0].create().backgroundColor);
+			Frame.prototype.navigate.call(frame, ...args);
+			this._popFromFrameStack();
+		};
+		frame.goBack = function (...args) {
+			// console.log('goBack', args);
+			Frame.prototype.goBack.call(frame, ...args);
+			this._popFromFrameStack();
+		};
+		frame.on('navigatingTo', () => ((frame as any).__midNav = true));
+		frame.on('navigatedTo', () => ((frame as any).__midNav = false));
+		return frame;
+	};
+
+	const innerFrame = frameFactory();
+	const innerFrame2 = frameFactory();
+	page1.setContent(innerFrame2);
+
+	innerFrame.navigate({
+		create: () => {
+			return page1.page;
+		},
+	});
+
+	innerFrame2.navigate({
+		create: () => {
+			return page2.page;
+		},
+	});
+	function validateState(frame: Frame) {
+		TKUnit.waitUntilReady(() => (frame as any).__midNav === false, 1);
+		TKUnit.assertTrue(frame._executingContext == null);
+		TKUnit.assertTrue(frame._currentEntry != null);
+		if (frame.isLoaded) {
+			TKUnit.assertTrue(frame._currentEntry.fragment != null);
+		}
+	}
+	// TKUnit.wait(1);
+	buildUIAndRunTest(innerFrame, ([parentFrame, parentPage]) => {
+		Trace.enable();
+		Trace.setCategories(Trace.categories.concat(Trace.categories.NativeLifecycle, Trace.categories.Transition));
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame2.navigate({
+			create: () => {
+				return page3.page;
+			},
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.navigate({
+			create: () => parentPage2.page,
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame2.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.navigate({
+			create: () => parentPage2.page,
+		});
+		validateState(innerFrame);
+		validateState(innerFrame2);
+		innerFrame.goBack();
+		validateState(innerFrame);
+		validateState(innerFrame2);
+
+		// innerFrame.navigate({
+		// 	create: () => parentPage2.page,
+		// });
+		// TKUnit.wait(1);
+		// innerFrame.goBack();
+		// TKUnit.wait(1);
+		// TKUnit.assertTrue(innerFrame2._currentEntry.fragment != null);
+		// TKUnit.wait(5);
+	});
+
+	// TKUnit.waitUntilReady(() => {
+	// 	return innerFrame.isLayoutValid;
+	// }, 1);
+
+	TKUnit.wait(10);
+}
diff --git a/apps/automated/src/ui/list-view/list-view-tests.ts b/apps/automated/src/ui/list-view/list-view-tests.ts
index 4e32eeef06..f5f83dc3d7 100644
--- a/apps/automated/src/ui/list-view/list-view-tests.ts
+++ b/apps/automated/src/ui/list-view/list-view-tests.ts
@@ -437,15 +437,17 @@ export class ListViewTest extends UITest<ListView> {
 	public test_usingAppLevelConvertersInListViewItems() {
 		var listView = this.testView;
 
-		var dateConverter = function (value, format) {
-			var result = format;
-			var day = value.getDate();
-			result = result.replace('DD', day < 10 ? '0' + day : day);
-			var month = value.getMonth() + 1;
-			result = result.replace('MM', month < 10 ? '0' + month : month);
-			result = result.replace('YYYY', value.getFullYear());
-
-			return result;
+		var dateConverter = {
+			toView: function (value, format) {
+				var result = format;
+				var day = value.getDate();
+				result = result.replace('DD', day < 10 ? '0' + day : day);
+				var month = value.getMonth() + 1;
+				result = result.replace('MM', month < 10 ? '0' + month : month);
+				result = result.replace('YYYY', value.getFullYear());
+
+				return result;
+			},
 		};
 
 		Application.getResources()['dateConverter'] = dateConverter;
@@ -565,10 +567,12 @@ export class ListViewTest extends UITest<ListView> {
 		var listView = this.testView;
 		var converterCalledCounter = 0;
 
-		var testConverter = function (value) {
-			converterCalledCounter++;
+		var testConverter = {
+			toView: function (value) {
+				converterCalledCounter++;
 
-			return value;
+				return value;
+			},
 		};
 
 		Application.getResources()['testConverter'] = testConverter;
@@ -578,7 +582,7 @@ export class ListViewTest extends UITest<ListView> {
 		listView.bindingContext = listViewModel;
 
 		listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
-		listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter }}" />';
+		listView.itemTemplate = '<Label id="testLabel" text="{{ $value, $value | testConverter() }}" />';
 
 		this.waitUntilListViewReady();
 
@@ -589,10 +593,12 @@ export class ListViewTest extends UITest<ListView> {
 		var listView = this.testView;
 		var converterCalledCounter = 0;
 
-		var testConverter = function (value) {
-			converterCalledCounter++;
+		var testConverter = {
+			toView: function (value) {
+				converterCalledCounter++;
 
-			return value;
+				return value;
+			},
 		};
 
 		Application.getResources()['testConverter'] = testConverter;
@@ -602,7 +608,7 @@ export class ListViewTest extends UITest<ListView> {
 		listView.bindingContext = listViewModel;
 
 		listView.bind({ sourceProperty: 'items', targetProperty: 'items' });
-		listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter }}" /></StackLayout>';
+		listView.itemTemplate = '<StackLayout><Label id="testLabel" text="{{ $value, $value | testConverter() }}" /></StackLayout>';
 
 		this.waitUntilListViewReady();
 
diff --git a/apps/automated/src/ui/repeater/repeater-tests.ts b/apps/automated/src/ui/repeater/repeater-tests.ts
index 33b47c00ea..cfb1a6f913 100644
--- a/apps/automated/src/ui/repeater/repeater-tests.ts
+++ b/apps/automated/src/ui/repeater/repeater-tests.ts
@@ -252,15 +252,17 @@ export function test_splice_observable_array_refreshes_the_Repeater() {
 export function test_usingAppLevelConvertersInRepeaterItems() {
 	var repeater = new Repeater();
 
-	var dateConverter = function (value, format) {
-		var result = format;
-		var day = value.getDate();
-		result = result.replace('DD', month < 10 ? '0' + day : day);
-		var month = value.getMonth() + 1;
-		result = result.replace('MM', month < 10 ? '0' + month : month);
-		result = result.replace('YYYY', value.getFullYear());
-
-		return result;
+	var dateConverter = {
+		toView: function (value, format) {
+			var result = format;
+			var day = value.getDate();
+			result = result.replace('DD', month < 10 ? '0' + day : day);
+			var month = value.getMonth() + 1;
+			result = result.replace('MM', month < 10 ? '0' + month : month);
+			result = result.replace('YYYY', value.getFullYear());
+
+			return result;
+		},
 	};
 
 	Application.getResources()['dateConverter'] = dateConverter;
@@ -275,7 +277,7 @@ export function test_usingAppLevelConvertersInRepeaterItems() {
 
 		TKUnit.waitUntilReady(() => repeater.isLayoutValid);
 
-		TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter(new Date(), 'DD.MM.YYYY'), 'element');
+		TKUnit.assertEqual(getChildAtText(repeater, 0), dateConverter.toView(new Date(), 'DD.MM.YYYY'), 'element');
 	}
 
 	helper.buildUIAndRunTest(repeater, testAction);
diff --git a/apps/automated/src/ui/styling/style-properties-tests.ts b/apps/automated/src/ui/styling/style-properties-tests.ts
index a643400f15..63a6fd3df5 100644
--- a/apps/automated/src/ui/styling/style-properties-tests.ts
+++ b/apps/automated/src/ui/styling/style-properties-tests.ts
@@ -59,6 +59,10 @@ export function test_setting_borderColorRGB_property_from_CSS_is_applied_to_Styl
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255, 0, 0)');
 }
 
+export function test_setting_borderColorRGBLvl4_property_from_CSS_is_applied_to_Style() {
+	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgb(255 0 0 / 1)');
+}
+
 export function test_setting_borderColorRGBA_property_from_CSS_is_applied_to_Style() {
 	test_property_from_CSS_is_applied_to_style('borderColor', 'border-color', new Color('#FF0000'), 'rgba(255,0,0,1)');
 }
diff --git a/apps/toolbox/package.json b/apps/toolbox/package.json
index 778084d249..5854202d0c 100644
--- a/apps/toolbox/package.json
+++ b/apps/toolbox/package.json
@@ -11,9 +11,9 @@
     "nativescript-theme-core": "file:../../node_modules/nativescript-theme-core"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "alpha",
+    "@nativescript/ios": "alpha",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.3.5"
+    "typescript": "4.5.4"
   }
 }
diff --git a/apps/toolbox/src/app.css b/apps/toolbox/src/app.css
index e52432cd14..8589cefaaa 100644
--- a/apps/toolbox/src/app.css
+++ b/apps/toolbox/src/app.css
@@ -5,6 +5,9 @@
 The following CSS rule changes the font size of all UI
 components that have the btn class name.
 */
+Button {
+    text-transform: none;
+}
 .btn-view-demo {
   background-color: #65ADF1;
   border-radius: 5;
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index 152bbd68f6..667e9e9a53 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -6,14 +6,15 @@
   <StackLayout class="p-20">
     <ScrollView class="h-full">
       <StackLayout>
-        <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
-        <Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="list-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="image-async" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="vector-image" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="touch-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
       </StackLayout>
     </ScrollView>
   </StackLayout>
diff --git a/apps/toolbox/src/pages/root-layout.ts b/apps/toolbox/src/pages/root-layout.ts
index 99a31db848..13531edd10 100644
--- a/apps/toolbox/src/pages/root-layout.ts
+++ b/apps/toolbox/src/pages/root-layout.ts
@@ -11,7 +11,7 @@ export class RootLayoutModel extends Observable {
 			view: this.getPopup('#EA5936', 110, -30),
 			options: {
 				shadeCover: {
-					color: '#FFF',
+					color: 'linear-gradient(to bottom, red, blue)',
 					opacity: 0.7,
 					tapToClose: true,
 				},
diff --git a/apps/toolbox/src/pages/touch-animations.ts b/apps/toolbox/src/pages/touch-animations.ts
new file mode 100644
index 0000000000..259b91ee4e
--- /dev/null
+++ b/apps/toolbox/src/pages/touch-animations.ts
@@ -0,0 +1,314 @@
+import { Observable, EventData, Page, CoreTypes, TouchManager, TouchAnimationOptions, Color, View } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+	page = <Page>args.object;
+	page.bindingContext = new TouchAnimationsModel(page);
+}
+
+export class TouchAnimationsModel extends Observable {
+	touchAnimation: TouchAnimationOptions = {
+		down: {
+			scale: { x: 0.95, y: 0.95 },
+			backgroundColor: new Color('purple'),
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+		up: {
+			scale: { x: 1, y: 1 },
+			backgroundColor: new Color('#30bcff'),
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+	};
+
+	touchAnimationLabel: TouchAnimationOptions = {
+		down: {
+			scale: { x: 0.85, y: 0.85 },
+			duration: 150,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+		up: {
+			scale: { x: 1, y: 1 },
+			duration: 150,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+	};
+
+	touchAnimationLayout: TouchAnimationOptions = {
+		down: {
+			scale: { x: 0.85, y: 0.85 },
+			opacity: 0.7,
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+		up: {
+			scale: { x: 1, y: 1 },
+			opacity: 1,
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+	};
+
+	touchAnimationNative: TouchAnimationOptions = {
+		down: (view: View) => {
+			const shakeIt = () => {
+				// shake when all the way down
+				view
+					.animate({ translate: { x: -20, y: 0 }, scale: { x: 0.95, y: 0.95 }, duration: 60, curve: CoreTypes.AnimationCurve.linear })
+					.then(function () {
+						return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: -20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: 20, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: -10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: 10, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: -5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: 5, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {
+						return view.animate({ translate: { x: 0, y: 0 }, duration: 60, curve: CoreTypes.AnimationCurve.linear });
+					})
+					.then(function () {});
+			};
+			if (global.isIOS) {
+				UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
+					0.4,
+					0,
+					0.5,
+					3,
+					UIViewAnimationOptions.CurveEaseInOut,
+					() => {
+						view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
+						view.opacity = 0.5;
+						view.ios.backgroundColor = new Color('red').ios;
+						view.color = new Color('white');
+					},
+					() => {
+						shakeIt();
+					}
+				);
+			} else {
+				view
+					.animate({
+						scale: { x: 0.95, y: 0.95 },
+						opacity: 0.5,
+						backgroundColor: new Color('red'),
+						duration: 400,
+					})
+					.then(() => {
+						view.color = new Color('white');
+						shakeIt();
+					})
+					.catch(() => {});
+			}
+		},
+		up: (view: View) => {
+			if (global.isIOS) {
+				UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
+					0.4,
+					0,
+					0.5,
+					3,
+					UIViewAnimationOptions.CurveEaseInOut,
+					() => {
+						view.ios.transform = CGAffineTransformMakeScale(1.2, 1.2);
+					},
+					() => {
+						UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
+							0.2,
+							0,
+							0.5,
+							3,
+							UIViewAnimationOptions.CurveEaseInOut,
+							() => {
+								view.ios.transform = CGAffineTransformIdentity;
+								view.opacity = 1;
+								view.ios.backgroundColor = new Color('#aee406').ios;
+								view.color = new Color('black');
+							},
+							() => {
+								// complete
+							}
+						);
+					}
+				);
+			} else {
+				view
+					.animate({
+						scale: { x: 1.2, y: 1.2 },
+						duration: 400,
+					})
+					.then(() => {
+						view.color = new Color('black');
+						view
+							.animate({
+								scale: { x: 1, y: 1 },
+								opacity: 1,
+								backgroundColor: new Color('#aee406'),
+								duration: 200,
+							})
+							.then(() => {})
+							.catch(() => {});
+					})
+					.catch(() => {});
+			}
+		},
+	};
+
+	touchAnimationRotate: TouchAnimationOptions = {
+		down: {
+			scale: { x: 0.85, y: 0.85 },
+			rotate: 6,
+			opacity: 0.7,
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+		up: {
+			scale: { x: 1, y: 1 },
+			rotate: 0,
+			opacity: 1,
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+	};
+
+	touchAnimationGrow: TouchAnimationOptions = {
+		down: {
+			scale: { x: 1.2, y: 1.2 },
+			backgroundColor: new Color('#325279'),
+			rotate: -4,
+			duration: 250,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+		up: {
+			scale: { x: 1, y: 1 },
+			backgroundColor: new Color('#006968'),
+			rotate: 0,
+			duration: 900,
+			curve: CoreTypes.AnimationCurve.easeInOut,
+		},
+	};
+
+	touchAnimationBlowAway: TouchAnimationOptions = {
+		down: (view: View) => {
+			let rotate = 3;
+			const shiftAway = (viewInstance: View, delay = 0) => {
+				setTimeout(() => {
+					viewInstance.animate({ translate: { x: 0, y: -10 }, scale: { x: 1.1, y: 1.1 }, opacity: 0.8, rotate, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
+					rotate = rotate * -1;
+				}, delay);
+			};
+			let cnt = 0;
+			for (const id of this.elementIds) {
+				shiftAway(this.page.getViewById(id), cnt);
+				cnt += 10;
+			}
+			if (global.isIOS) {
+				UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
+					0.4,
+					0,
+					0.5,
+					3,
+					UIViewAnimationOptions.CurveEaseInOut,
+					() => {
+						view.ios.transform = CGAffineTransformMakeScale(0.95, 0.95);
+						view.opacity = 0.5;
+					},
+					() => {}
+				);
+			} else {
+				view
+					.animate({
+						scale: { x: 0.95, y: 0.95 },
+						opacity: 0.5,
+						duration: 400,
+					})
+					.catch(() => {});
+			}
+		},
+		up: (view: View) => {
+			const shiftBack = (viewInstance: View, delay = 0) => {
+				setTimeout(() => {
+					viewInstance.animate({ translate: { x: 0, y: 0 }, scale: { x: 1, y: 1 }, opacity: 1, rotate: 0, duration: 200, curve: CoreTypes.AnimationCurve.easeInOut }).catch(function () {});
+				}, delay);
+			};
+			let cnt = 0;
+			for (const id of this.elementIds) {
+				shiftBack(this.page.getViewById(id), cnt);
+				cnt += 10;
+			}
+			if (global.isIOS) {
+				UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
+					0.3,
+					0,
+					0.5,
+					3,
+					UIViewAnimationOptions.CurveEaseInOut,
+					() => {
+						view.ios.transform = CGAffineTransformIdentity;
+					},
+					() => {}
+				);
+			} else {
+				view
+					.animate({
+						scale: { x: 1, y: 1 },
+						opacity: 1,
+						duration: 300,
+					})
+					.catch(() => {});
+			}
+		},
+	};
+
+	elementIds = ['label', 'buttonTop', 'grid1', 'buttonShake', 'stack1', 'button2', 'button3', 'button4', 'button5'];
+
+	constructor(private page: Page) {
+		super();
+		TouchManager.enableGlobalTapAnimations = true;
+		this.page.on('navigatingFrom', () => {
+			TouchManager.enableGlobalTapAnimations = false;
+		});
+
+		// reuse instance level animations but customize to ensure they are different
+		TouchManager.animations = {
+			down: {
+				...this.touchAnimation.down,
+				backgroundColor: new Color('rgba(48, 188, 255, .7)'),
+				duration: 150,
+			},
+			up: {
+				...this.touchAnimation.up,
+				duration: 150,
+			},
+		};
+	}
+
+	loadedContainer(args) {
+		if (global.isAndroid) {
+			if (args.object.android.setClipToPadding) {
+				args.object.android.setClipToPadding(false);
+			}
+			if (args.object.android.setClipChildren) {
+				args.object.android.setClipChildren(false);
+			}
+		}
+	}
+
+	onTapAnything() {
+		console.log('onTapAnything');
+	}
+}
diff --git a/apps/toolbox/src/pages/touch-animations.xml b/apps/toolbox/src/pages/touch-animations.xml
new file mode 100644
index 0000000000..dd82af16fe
--- /dev/null
+++ b/apps/toolbox/src/pages/touch-animations.xml
@@ -0,0 +1,40 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="Touch Animations" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <!-- <ScrollView> -->
+    
+      <StackLayout class="p-x-20" loaded="{{ loadedContainer }}">
+          <Label id="label" tap="{{ onTapAnything }}" text="Touchable label" class="t-18 c-black text-center m-t-5" touchAnimation="{{ touchAnimationLabel }}" />
+          <Button id="buttonTop" text="Touch me for puple vibes" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="{{ touchAnimation }}" />
+          <GridLayout id="grid1" rows="auto" columns="*,auto,auto,*" class="p-10 m-y-10" tap="{{ onTapAnything }}" touchAnimation="{{ touchAnimationLayout }}" borderRadius="8" borderWidth="1" borderColor="#999">
+              <ContentView col="1" backgroundColor="gray" borderRadius="15" width="30" height="30" verticalAlignment="middle" />
+              <Label col="2" text="Touchable GridLayout" class="t-18 m-l-10" verticalAlignment="middle" />
+          </GridLayout>
+
+          <Button id="buttonShake" text="Tap to shake, rattle n' pop" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-lime" touchAnimation="{{ touchAnimationNative }}" />
+          <StackLayout id="stack1" rows="auto" columns="*,auto,auto,*" class="p-10 m-y-10" tap="{{ onTapAnything }}" touchAnimation="{{ touchAnimationLayout }}" borderRadius="8" borderWidth="1" borderColor="#999">
+              <ContentView col="1" backgroundColor="orange" borderRadius="10" width="20" height="20" verticalAlignment="middle" />
+              <Label col="2" text="Touchable StackLayout" class="t-18 text-center" verticalAlignment="middle" />
+          </StackLayout>
+          <Button id="button2" text="Auto animation w/ TouchManager" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button id="button3" text="Touch animation ignored" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" ignoreTouchAnimation="true" isEnabled="false" />
+          <Button id="button4" text="Touch rotate" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-ruby" touchAnimation="{{ touchAnimationRotate }}" />
+          <Button id="button5" text="Touch grow, slow return" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-forest" touchAnimation="{{ touchAnimationGrow }}" />
+          <Button id="button6" text="Touch me, I'm a lil' shifty!" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo btn-orange" touchAnimation="{{ touchAnimationBlowAway }}" />
+
+          <!-- uncomment the following along with ScrollView to test behavior in ScrollView -->
+          <!-- <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" />
+          <Button text="TAP" tap="{{ onTapAnything }}" class="btn btn-primary btn-view-demo" touchAnimation="true" /> -->
+          
+      </StackLayout>
+    <!-- </ScrollView> -->
+</Page>
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 4ea1009e32..87c29d5caa 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -11,10 +11,10 @@
     "@nativescript/core": "file:../../packages/core"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "alpha",
+    "@nativescript/ios": "alpha",
     "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
-    "typescript": "4.3.5"
+    "typescript": "4.5.4"
   },
   "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
   "readme": "NativeScript Application",
diff --git a/package.json b/package.json
index d26207c7af..949ec4f169 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "8.1.5",
   "license": "MIT",
   "scripts": {
-    "clean": "git clean -f -X -d --exclude=!.idea/ --exclude=!.vscode/*",
+    "clean": "git clean -f -X -d --exclude=!.idea/ --exclude=!.vscode/* --exclude=!.npmrc",
     "setup": "npm run clean && npm install --legacy-peer-deps",
     "setup:yarn": "yarn clean && yarn",
     "setup:pnpm": "pnpm run clean && pnpm install",
@@ -23,13 +23,13 @@
     "@nativescript/eslint-plugin": "~0.0.4",
     "@nativescript/hook": "^2.0.0",
     "@nativescript/nx": "~2.0.8",
-    "@nrwl/cli": "13.3.12",
-    "@nrwl/eslint-plugin-nx": "13.3.12",
-    "@nrwl/jest": "13.3.12",
-    "@nrwl/node": "13.3.12",
-    "@nrwl/tao": "13.3.12",
-    "@nrwl/workspace": "13.3.12",
-    "@nstudio/focus": "~13.0.1",
+    "@nrwl/cli": "13.4.1",
+    "@nrwl/eslint-plugin-nx": "13.4.1",
+    "@nrwl/jest": "13.4.1",
+    "@nrwl/node": "13.4.1",
+    "@nrwl/tao": "13.4.1",
+    "@nrwl/workspace": "13.4.1",
+    "@nstudio/focus": "^13.4.1",
     "@nstudio/nps-i": "~1.1.0",
     "@prettier/plugin-xml": "^0.13.1",
     "@types/chai": "^4.2.11",
@@ -60,7 +60,7 @@
     "parserlib": "^1.1.1",
     "prettier": "2.5.1",
     "reduce-css-calc": "~2.1.7",
-    "sass": "~1.32.8",
+    "sass": "^1.45.2",
     "shady-css-parser": "^0.1.0",
     "terser-webpack-plugin": "~3.0.6",
     "tree-kill": "^1.2.2",
@@ -69,7 +69,7 @@
     "ts-patch": "^1.3.0",
     "tslint": "6.1.3",
     "typedoc": "^0.20.14",
-    "typescript": "4.3.5",
+    "typescript": "4.5.4",
     "webpack": "~4.44.1",
     "webpack-cli": "~3.3.12",
     "zx": "^4.2.0"
diff --git a/packages/core/__tests__/css/parser.ts b/packages/core/__tests__/css/parser.ts
index 80d89e6cd9..5e1826d4aa 100644
--- a/packages/core/__tests__/css/parser.ts
+++ b/packages/core/__tests__/css/parser.ts
@@ -44,6 +44,8 @@ describe('css', () => {
 				test(parseColor, '  #456789 ', { start: 0, end: 10, value: new Color(0xff456789) });
 				test(parseColor, '  #45678985 ', { start: 0, end: 12, value: new Color(0x45678985) });
 				test(parseColor, '  rgb(255, 8, 128) ', { start: 0, end: 18, value: new Color(0xffff0880) });
+				test(parseColor, '  rgb(255 8 128 / .5) ', { start: 0, end: 22, value: new Color(0x80ff0880) });
+				test(parseColor, '  rgb(255 8 128/0.5)', { start: 0, end: 20, value: new Color(0x80ff0880) });
 				test(parseColor, '  rgba(255, 8, 128, 0.5) ', { start: 0, end: 24, value: new Color(0x80ff0880) });
 				test(parseColor, '  hsl(330.9, 100%, 51.6%) ', { start: 0, end: 25, value: new Color(0xffff0880) });
 				test(parseColor, '  hsla(330.9, 100%, 51.6%, 0.5) ', { start: 0, end: 31, value: new Color(0x80ff0880) });
diff --git a/packages/core/__tests__/tsconfig.json b/packages/core/__tests__/tsconfig.json
index 48350c360b..030ad9a41a 100644
--- a/packages/core/__tests__/tsconfig.json
+++ b/packages/core/__tests__/tsconfig.json
@@ -1,45 +1,23 @@
 {
-    "compilerOptions": {
-        "noEmitOnError": false,
-        "noEmitHelpers": true,
-        "target": "es5",
-        "module": "commonjs",
-        "noImplicitUseStrict": true,
-        "removeComments": true,
-        "experimentalDecorators": true,
-        "diagnostics": true,
-        "sourceMap": true,
-        "inlineSourceMap": false,
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "types": [
-            "node",
-            "chai",
-            "mocha"
-        ],
-        "baseUrl": ".",
-        "paths": {
-            "@nativescript/core": [
-              "../index.ts"
-            ],
-            "@nativescript/core/*": [
-                "../*"
-            ],  
-        }
-    },
-    "include": [
-        "../global-types.d.ts",
-        "./**/*.ts"
-    ],
-    "exclude": [
-        "../**/*.android.ts",
-        "../**/*.android.d.ts",
-        "../**/*.ios.ts",
-        "../**/*.ios.d.ts",
-        "../node-modules",
-        "../references.d.ts",
-        "../platforms"
-    ]
-}
\ No newline at end of file
+	"compilerOptions": {
+		"noEmitOnError": false,
+		"noEmitHelpers": true,
+		"target": "es5",
+		"module": "commonjs",
+		"noImplicitUseStrict": true,
+		"removeComments": true,
+		"experimentalDecorators": true,
+		"diagnostics": true,
+		"sourceMap": true,
+		"inlineSourceMap": false,
+		"lib": ["es6", "dom"],
+		"types": ["node", "chai", "mocha"],
+		"baseUrl": ".",
+		"paths": {
+			"@nativescript/core": ["../index.ts"],
+			"@nativescript/core/*": ["../*"]
+		}
+	},
+	"include": ["../global-types.d.ts", "./**/*.ts"],
+	"exclude": ["../**/*.android.ts", "../**/*.android.d.ts", "../**/*.ios.ts", "../**/*.ios.d.ts", "../node-modules", "../references.d.ts", "../platforms"]
+}
diff --git a/packages/core/application/index.android.ts b/packages/core/application/index.android.ts
index b9ea5c926f..5184e22204 100644
--- a/packages/core/application/index.android.ts
+++ b/packages/core/application/index.android.ts
@@ -46,9 +46,15 @@ export class AndroidApplication extends Observable implements AndroidApplication
 	private _systemAppearance: 'light' | 'dark';
 	public paused: boolean;
 	public nativeApp: android.app.Application;
+	/**
+	 * @deprecated Use Utils.android.getApplicationContext() instead.
+	 */
 	public context: android.content.Context;
 	public foregroundActivity: androidx.appcompat.app.AppCompatActivity;
 	public startActivity: androidx.appcompat.app.AppCompatActivity;
+	/**
+	 * @deprecated Use Utils.android.getPackageName() instead.
+	 */
 	public packageName: string;
 	// we are using these property to store the callbacks to avoid early GC collection which would trigger MarkReachableObjects
 	private callbacks: any = {};
@@ -159,14 +165,22 @@ export interface AndroidApplication {
 	on(event: 'activityRequestPermissions', callback: (args: AndroidActivityRequestPermissionsEventData) => void, thisArg?: any);
 }
 
-const androidApp = new AndroidApplication();
+let androidApp: AndroidApplication;
 export { androidApp as android };
-appCommon.setApplication(androidApp);
 
 let mainEntry: NavigationEntry;
 let started = false;
 
+export function ensureNativeApplication() {
+	if (!androidApp) {
+		androidApp = new AndroidApplication();
+		appCommon.setApplication(androidApp);
+	}
+}
+
 export function run(entry?: NavigationEntry | string) {
+	ensureNativeApplication();
+
 	if (started) {
 		throw new Error('Application is already started.');
 	}
@@ -199,6 +213,7 @@ export function addCss(cssText: string, attributeScoped?: boolean): void {
 const CALLBACKS = '_callbacks';
 
 export function _resetRootView(entry?: NavigationEntry | string): void {
+	ensureNativeApplication();
 	const activity = androidApp.foregroundActivity || androidApp.startActivity;
 	if (!activity) {
 		throw new Error('Cannot find android activity.');
@@ -217,6 +232,7 @@ export function getMainEntry() {
 }
 
 export function getRootView(): View {
+	ensureNativeApplication();
 	// Use start activity as a backup when foregroundActivity is still not set
 	// in cases when we are getting the root view before activity.onResumed event is fired
 	const activity = androidApp.foregroundActivity || androidApp.startActivity;
@@ -229,6 +245,8 @@ export function getRootView(): View {
 }
 
 export function getNativeApplication(): android.app.Application {
+	ensureNativeApplication();
+
 	// Try getting it from module - check whether application.android.init has been explicitly called
 	let nativeApp = androidApp.nativeApp;
 	if (!nativeApp) {
@@ -259,14 +277,17 @@ export function getNativeApplication(): android.app.Application {
 }
 
 export function orientation(): 'portrait' | 'landscape' | 'unknown' {
+	ensureNativeApplication();
 	return androidApp.orientation;
 }
 
 export function systemAppearance(): 'dark' | 'light' {
+	ensureNativeApplication();
 	return androidApp.systemAppearance;
 }
 
 global.__onLiveSync = function __onLiveSync(context?: ModuleContext) {
+	ensureNativeApplication();
 	if (androidApp && androidApp.paused) {
 		return;
 	}
diff --git a/packages/core/application/index.d.ts b/packages/core/application/index.d.ts
index 0db88fdab1..37c63cbba5 100644
--- a/packages/core/application/index.d.ts
+++ b/packages/core/application/index.d.ts
@@ -360,6 +360,13 @@ export function systemAppearance(): 'dark' | 'light' | null;
  */
 export let android: AndroidApplication;
 
+/**
+ * Used internally for backwards compatibility, will be removed in the future.
+ * Allowed Application.android.context to work (or Application.ios). Instead use Utils.android.getApplicationContext() or Utils.android.getPackageName()
+ * @internal
+ */
+export function ensureNativeApplication(): void;
+
 /**
  * This is the iOS-specific application object instance.
  * Encapsulates methods and properties specific to the iOS platform.
@@ -468,6 +475,7 @@ export class AndroidApplication extends Observable {
 
 	/**
 	 * The application's [android Context](http://developer.android.com/reference/android/content/Context.html) object instance.
+	 * @deprecated Use Utils.android.getApplicationContext() instead.
 	 */
 	context: any /* android.content.Context */;
 
@@ -495,6 +503,7 @@ export class AndroidApplication extends Observable {
 
 	/**
 	 * The name of the application package.
+	 * @deprecated Use Utils.android.getPackageName() instead.
 	 */
 	packageName: string;
 
diff --git a/packages/core/application/index.ios.ts b/packages/core/application/index.ios.ts
index cf9e847517..d06766c3a8 100644
--- a/packages/core/application/index.ios.ts
+++ b/packages/core/application/index.ios.ts
@@ -349,13 +349,20 @@ export class iOSApplication implements iOSApplicationDefinition {
 }
 
 /* tslint:disable */
-const iosApp = new iOSApplication();
+let iosApp: iOSApplication;
 /* tslint:enable */
 export { iosApp as ios };
-setApplication(iosApp);
+
+export function ensureNativeApplication() {
+	if (!iosApp) {
+		iosApp = new iOSApplication();
+		setApplication(iosApp);
+	}
+}
 
 // attach on global, so it can be overwritten in NativeScript Angular
 (<any>global).__onLiveSyncCore = function (context?: ModuleContext) {
+	ensureNativeApplication();
 	iosApp._onLivesync(context);
 };
 
@@ -384,11 +391,14 @@ export function getMainEntry() {
 }
 
 export function getRootView() {
+	ensureNativeApplication();
 	return iosApp.rootView;
 }
 
 let started = false;
 export function run(entry?: string | NavigationEntry) {
+	ensureNativeApplication();
+
 	mainEntry = typeof entry === 'string' ? { moduleName: entry } : entry;
 	started = true;
 
@@ -457,11 +467,13 @@ export function addCss(cssText: string, attributeScoped?: boolean): void {
 }
 
 export function _resetRootView(entry?: NavigationEntry | string) {
+	ensureNativeApplication();
 	mainEntry = typeof entry === 'string' ? { moduleName: entry } : entry;
 	iosApp.setWindowContent();
 }
 
 export function getNativeApplication(): UIApplication {
+	ensureNativeApplication();
 	return iosApp.nativeApp;
 }
 
@@ -502,6 +514,7 @@ function setViewControllerView(view: View): void {
 }
 
 function setRootViewsCssClasses(rootView: View): void {
+	ensureNativeApplication();
 	const deviceType = Device.deviceType.toLowerCase();
 
 	CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${IOS_PLATFORM}`);
@@ -514,6 +527,7 @@ function setRootViewsCssClasses(rootView: View): void {
 }
 
 function setRootViewsSystemAppearanceCssClass(rootView: View): void {
+	ensureNativeApplication();
 	if (majorVersion >= 13) {
 		const systemAppearanceCssClass = `${CSSUtils.CLASS_PREFIX}${iosApp.systemAppearance}`;
 		CSSUtils.pushToSystemCssClasses(systemAppearanceCssClass);
@@ -522,10 +536,12 @@ function setRootViewsSystemAppearanceCssClass(rootView: View): void {
 }
 
 export function orientation(): 'portrait' | 'landscape' | 'unknown' {
+	ensureNativeApplication();
 	return iosApp.orientation;
 }
 
 export function systemAppearance(): 'dark' | 'light' {
+	ensureNativeApplication();
 	return iosApp.systemAppearance;
 }
 
diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts
index 9e522a1c53..060d0e5167 100644
--- a/packages/core/color/color-common.ts
+++ b/packages/core/color/color-common.ts
@@ -406,12 +406,14 @@ function isHsvOrHsva(value: string): boolean {
 }
 
 function parseColorWithAlpha(value: string): any {
+	const separator = value.indexOf(',') !== -1 ? ',' : ' ';
 	const parts = value
 		.replace(/(rgb|hsl|hsv)a?\(/, '')
 		.replace(')', '')
+		.replace(/\//, ' ')
 		.replace(/%/g, '')
-		.trim()
-		.split(',');
+		.split(separator)
+		.filter((part) => Boolean(part.length));
 
 	let f = 255;
 	let s = 255;
diff --git a/packages/core/css/parser.ts b/packages/core/css/parser.ts
index e13411158d..b3669b7c7f 100644
--- a/packages/core/css/parser.ts
+++ b/packages/core/css/parser.ts
@@ -135,7 +135,6 @@ export function parseColorKeyword(value, start: number, keyword = parseKeyword(v
 	const parseColor = keyword && getKnownColor(keyword.value);
 	if (parseColor != null) {
 		const end = keyword.end;
-		const value = parseColor;
 		return { start, end, value: new Color(parseColor) };
 	}
 	return null;
diff --git a/packages/core/index.d.ts b/packages/core/index.d.ts
index ffd3b5a7d6..212b44862a 100644
--- a/packages/core/index.d.ts
+++ b/packages/core/index.d.ts
@@ -8,7 +8,7 @@
 export type { NativeScriptConfig } from './config';
 export { iOSApplication, AndroidApplication } from './application';
 export type { ApplicationEventData, LaunchEventData, OrientationChangedEventData, UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData, AndroidActivityEventData, AndroidActivityBundleEventData, AndroidActivityRequestPermissionsEventData, AndroidActivityResultEventData, AndroidActivityNewIntentEventData, AndroidActivityBackPressedEventData, SystemAppearanceChangedEventData } from './application';
-import { systemAppearanceChanged, getMainEntry, getRootView, _resetRootView, getResources, setResources, setCssFileName, getCssFileName, loadAppCss, addCss, on, off, notify, hasListeners, run, orientation, getNativeApplication, hasLaunched, systemAppearance, setAutoSystemAppearanceChanged } from './application';
+import { AndroidApplication, iOSApplication, systemAppearanceChanged, getMainEntry, getRootView, _resetRootView, getResources, setResources, setCssFileName, getCssFileName, loadAppCss, addCss, on, off, notify, hasListeners, run, orientation, getNativeApplication, hasLaunched, systemAppearance, setAutoSystemAppearanceChanged } from './application';
 export declare const Application: {
 	launchEvent: string;
 	displayedEvent: string;
@@ -41,8 +41,8 @@ export declare const Application: {
 	hasLaunched: typeof hasLaunched;
 	systemAppearance: typeof systemAppearance;
 	setAutoSystemAppearanceChanged: typeof setAutoSystemAppearanceChanged;
-	android: import('./application').AndroidApplication;
-	ios: import('./application').iOSApplication;
+	android: AndroidApplication;
+	ios: iOSApplication;
 };
 import { setString, getString, clear, flush, getAllKeys, getBoolean, getNumber, hasKey, remove, setBoolean, setNumber } from './application-settings';
 export declare const ApplicationSettings: {
diff --git a/packages/core/index.ts b/packages/core/index.ts
index 32aae19fe2..c84bb82965 100644
--- a/packages/core/index.ts
+++ b/packages/core/index.ts
@@ -5,7 +5,7 @@ import './globals';
 export { iOSApplication, AndroidApplication } from './application';
 export type { ApplicationEventData, LaunchEventData, OrientationChangedEventData, UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData, AndroidActivityEventData, AndroidActivityBundleEventData, AndroidActivityRequestPermissionsEventData, AndroidActivityResultEventData, AndroidActivityNewIntentEventData, AndroidActivityBackPressedEventData, SystemAppearanceChangedEventData } from './application';
 
-import { fontScaleChangedEvent, launchEvent, displayedEvent, uncaughtErrorEvent, discardedErrorEvent, suspendEvent, resumeEvent, exitEvent, lowMemoryEvent, orientationChangedEvent, systemAppearanceChanged, systemAppearanceChangedEvent, getMainEntry, getRootView, _resetRootView, getResources, setResources, setCssFileName, getCssFileName, loadAppCss, addCss, on, off, notify, hasListeners, run, orientation, getNativeApplication, hasLaunched, android as appAndroid, ios as iosApp, systemAppearance, setAutoSystemAppearanceChanged } from './application';
+import { fontScaleChangedEvent, launchEvent, displayedEvent, uncaughtErrorEvent, discardedErrorEvent, suspendEvent, resumeEvent, exitEvent, lowMemoryEvent, orientationChangedEvent, systemAppearanceChanged, systemAppearanceChangedEvent, getMainEntry, getRootView, _resetRootView, getResources, setResources, setCssFileName, getCssFileName, loadAppCss, addCss, on, off, notify, hasListeners, run, orientation, getNativeApplication, hasLaunched, android as appAndroid, ios as iosApp, systemAppearance, setAutoSystemAppearanceChanged, ensureNativeApplication } from './application';
 export const Application = {
 	launchEvent,
 	displayedEvent,
@@ -39,9 +39,14 @@ export const Application = {
 	hasLaunched,
 	systemAppearance,
 	setAutoSystemAppearanceChanged,
-
-	android: appAndroid,
-	ios: iosApp,
+	get android() {
+		ensureNativeApplication();
+		return appAndroid;
+	},
+	get ios() {
+		ensureNativeApplication();
+		return iosApp;
+	},
 };
 
 // Export all methods from "application-settings" as ApplicationSettings
diff --git a/packages/core/js-libs/esprima/LICENSE.BSD b/packages/core/js-libs/esprima/LICENSE.BSD
deleted file mode 100644
index 3e580c355a..0000000000
--- a/packages/core/js-libs/esprima/LICENSE.BSD
+++ /dev/null
@@ -1,19 +0,0 @@
-Redistribution and use in source and binary forms, with or without
-modification, are permitted provided that the following conditions are met:
-
-  * Redistributions of source code must retain the above copyright
-    notice, this list of conditions and the following disclaimer.
-  * Redistributions in binary form must reproduce the above copyright
-    notice, this list of conditions and the following disclaimer in the
-    documentation and/or other materials provided with the distribution.
-
-THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
-DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
-THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/core/js-libs/esprima/README.md b/packages/core/js-libs/esprima/README.md
deleted file mode 100644
index 0ccc1fa7cd..0000000000
--- a/packages/core/js-libs/esprima/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-**Esprima** ([esprima.org](http://esprima.org), BSD license) is a high performance,
-standard-compliant [ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm)
-parser written in ECMAScript (also popularly known as
-[JavaScript](http://en.wikipedia.org/wiki/JavaScript).
-Esprima is created and maintained by [Ariya Hidayat](http://twitter.com/ariyahidayat),
-with the help of [many contributors](https://github.com/ariya/esprima/contributors).
-
-### Features
-
-- Full support for ECMAScript 5.1 ([ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm))
-- Sensible [syntax tree format](http://esprima.org/doc/index.html#ast) compatible with Mozilla
-[Parser AST](https://web.archive.org/web/20201119095346/https://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API)
-- Optional tracking of syntax node location (index-based and line-column)
-- Heavily tested (> 700 [unit tests](http://esprima.org/test/) with [full code coverage](http://esprima.org/test/coverage.html))
-- [Partial support](http://esprima.org/doc/es6.html) for ECMAScript 6
-
-Esprima serves as a **building block** for some JavaScript
-language tools, from [code instrumentation](http://esprima.org/demo/functiontrace.html)
-to [editor autocompletion](http://esprima.org/demo/autocomplete.html).
-
-Esprima runs on many popular web browsers, as well as other ECMAScript platforms such as
-[Rhino](https://github.com/mozilla/rhino), [Nashorn](http://openjdk.java.net/projects/nashorn/), and [Node.js](https://npmjs.org/package/esprima).
-
-For more information, check the web site [esprima.org](http://esprima.org).
diff --git a/packages/core/js-libs/esprima/esprima.d.ts b/packages/core/js-libs/esprima/esprima.d.ts
deleted file mode 100644
index 69dffe728a..0000000000
--- a/packages/core/js-libs/esprima/esprima.d.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-/* tslint:disable */
-
-// Type definitions for Esprima v1.2.0
-// Project: http://esprima.org
-// Definitions by: teppeis <https://github.com/teppeis/>
-// Definitions: https://github.com/borisyankov/DefinitelyTyped
-
-export const version: string;
-export function parse(code: string, options?: Options): Syntax.Program;
-export function tokenize(code: string, options?: Options): Array<Token>;
-
-export interface Token {
-    type: string
-    value: string
-}
-
-export interface Options {
-    loc?: boolean
-    range?: boolean
-    raw?: boolean
-    tokens?: boolean
-    comment?: boolean
-    attachComment?: boolean
-    tolerant?: boolean
-    source?: boolean
-}
-
-export namespace Syntax {
-    // Node
-    interface Node {
-        type: string
-        loc?: LineLocation
-        range?: number[]
-        leadingComments?: Comment[]
-        trailingComments?: Comment[]
-    }
-    interface LineLocation {
-        start: Position
-        end: Position
-    }
-    interface Position {
-        line: number
-        column: number
-    }
-
-    // Comment
-    interface Comment extends Node {
-        value: string
-    }
-
-    // Program
-    interface Program extends Node {
-        body: SomeStatement[]
-        comments?: Comment[]
-    }
-
-    // Function
-    interface Function extends Node {
-        id: Identifier // | null
-        params: Identifier[]
-        defaults: SomeExpression[]
-        rest: Identifier // | null
-        body: BlockStatementOrExpression
-        generator: boolean
-        expression: boolean
-    }
-    interface BlockStatementOrExpression extends Array<SomeStatement>, BlockStatement, SomeExpression {
-        body: BlockStatementOrExpression
-    }
-
-    // Statement
-    type Statement = Node
-    type EmptyStatement = Statement
-    interface BlockStatement extends Statement {
-        body: SomeStatement[]
-    }
-    interface ExpressionStatement extends Statement {
-        expression: SomeExpression
-    }
-    interface IfStatement extends Statement {
-        test: SomeExpression
-        consequent: SomeStatement
-        alternate: SomeStatement
-    }
-    interface LabeledStatement extends Statement {
-        label: Identifier
-        body: SomeStatement
-    }
-    interface BreakStatement extends Statement {
-        label: Identifier // | null
-    }
-    interface ContinueStatement extends Statement {
-        label: Identifier // | null
-    }
-    interface WithStatement extends Statement {
-        object: SomeExpression
-        body: SomeStatement
-    }
-    interface SwitchStatement extends Statement {
-        discriminant: SomeExpression
-        cases: SwitchCase[]
-        lexical: boolean
-    }
-    interface ReturnStatement extends Statement {
-        argument: SomeExpression // | null
-    }
-    interface ThrowStatement extends Statement {
-        argument: SomeExpression
-    }
-    interface TryStatement extends Statement {
-        block: BlockStatement
-        handler: CatchClause // | null
-        guardedHandlers: CatchClause[]
-        finalizer: BlockStatement // | null
-    }
-    interface WhileStatement extends Statement {
-        test: SomeExpression
-        body: SomeStatement
-    }
-    interface DoWhileStatement extends Statement {
-        body: SomeStatement
-        test: SomeExpression
-    }
-    interface ForStatement extends Statement {
-        init: VariableDeclaratorOrExpression // | null
-        test: SomeExpression // | null
-        update: SomeExpression // | null
-        body: SomeStatement
-    }
-    interface ForInStatement extends Statement {
-        left: VariableDeclaratorOrExpression
-        right: SomeExpression
-        body: SomeStatement
-        each: boolean
-    }
-    interface VariableDeclaratorOrExpression extends VariableDeclarator, SomeExpression {
-    }
-    type DebuggerStatement = Statement
-    interface SomeStatement extends
-        EmptyStatement, ExpressionStatement, BlockStatement, IfStatement,
-        LabeledStatement, BreakStatement, ContinueStatement, WithStatement,
-        SwitchStatement, ReturnStatement, ThrowStatement, TryStatement,
-        WhileStatement, DoWhileStatement, ForStatement, ForInStatement, DebuggerStatement {
-        body: SomeStatementOrList
-    }
-    interface SomeStatementOrList extends Array<SomeStatement>, SomeStatement {
-    }
-
-    // Declration
-    type Declration = Statement
-    interface FunctionDeclration extends Declration {
-        id: Identifier
-        params: Identifier[] // Pattern
-        defaults: SomeExpression[]
-        rest: Identifier
-        body: BlockStatementOrExpression
-        generator: boolean
-        expression: boolean
-    }
-    interface VariableDeclaration extends Declration {
-        declarations: VariableDeclarator[]
-        kind: string // "var" | "let" | "const"
-    }
-    interface VariableDeclarator extends Node {
-        id: Identifier // Pattern
-        init: SomeExpression
-    }
-
-    // Expression
-    type Expression = Node
-    interface SomeExpression extends
-        ThisExpression, ArrayExpression, ObjectExpression, FunctionExpression,
-        ArrowFunctionExpression, SequenceExpression, UnaryExpression, BinaryExpression,
-        AssignmentExpression, UpdateExpression, LogicalExpression, ConditionalExpression,
-        NewExpression, CallExpression, MemberExpression {
-    }
-    type ThisExpression = Expression
-    interface ArrayExpression extends Expression {
-        elements: SomeExpression[] // [ Expression | null ]
-    }
-    interface ObjectExpression extends Expression {
-        properties: Property[]
-    }
-    interface Property extends Node {
-        key: LiteralOrIdentifier // Literal | Identifier
-        value: SomeExpression
-        kind: string // "init" | "get" | "set"
-    }
-    interface LiteralOrIdentifier extends Literal, Identifier {
-    }
-    interface FunctionExpression extends Function, Expression {
-    }
-    interface ArrowFunctionExpression extends Function, Expression {
-    }
-    interface SequenceExpression extends Expression {
-        expressions: SomeExpression[]
-    }
-    interface UnaryExpression extends Expression {
-        operator: string // UnaryOperator
-        prefix: boolean
-        argument: SomeExpression
-    }
-    interface BinaryExpression extends Expression {
-        operator: string // BinaryOperator
-        left: SomeExpression
-        right: SomeExpression
-    }
-    interface AssignmentExpression extends Expression {
-        operator: string // AssignmentOperator
-        left: SomeExpression
-        right: SomeExpression
-    }
-    interface UpdateExpression extends Expression {
-        operator: string // UpdateOperator
-        argument: SomeExpression
-        prefix: boolean
-    }
-    interface LogicalExpression extends Expression {
-        operator: string // LogicalOperator
-        left: SomeExpression
-        right: SomeExpression
-    }
-    interface ConditionalExpression extends Expression {
-        test: SomeExpression
-        alternate: SomeExpression
-        consequent: SomeExpression
-    }
-    interface NewExpression extends Expression {
-        callee: SomeExpression
-        arguments: SomeExpression[]
-    }
-    interface CallExpression extends Expression {
-        callee: SomeExpression
-        arguments: SomeExpression[]
-    }
-    interface MemberExpression extends Expression {
-        object: SomeExpression
-        property: IdentifierOrExpression // Identifier | Expression
-        computed: boolean
-    }
-    interface IdentifierOrExpression extends Identifier, SomeExpression {
-    }
-
-    // Pattern
-    // interface Pattern extends Node {
-    // }
-
-    // Clauses
-    interface SwitchCase extends Node {
-        test: SomeExpression
-        consequent: SomeStatement[]
-    }
-    interface CatchClause extends Node {
-        param: Identifier // Pattern
-        guard: SomeExpression
-        body: BlockStatement
-    }
-
-    // Misc
-    interface Identifier extends Node, Expression { // | Pattern
-        name: string
-    }
-    interface Literal extends Node, Expression {
-        value: any // string | boolean | null | number | RegExp
-    }
-}
diff --git a/packages/core/js-libs/esprima/esprima.js b/packages/core/js-libs/esprima/esprima.js
deleted file mode 100644
index d509cff068..0000000000
--- a/packages/core/js-libs/esprima/esprima.js
+++ /dev/null
@@ -1,1042 +0,0 @@
-/*
-  Copyright (C) 2013 Ariya Hidayat <ariya.hidayat@gmail.com>
-  Copyright (C) 2013 Thaddee Tyl <thaddee.tyl@gmail.com>
-  Copyright (C) 2012 Ariya Hidayat <ariya.hidayat@gmail.com>
-  Copyright (C) 2012 Mathias Bynens <mathias@qiwi.be>
-  Copyright (C) 2012 Joost-Wim Boekesteijn <joost-wim@boekesteijn.nl>
-  Copyright (C) 2012 Kris Kowal <kris.kowal@cixar.com>
-  Copyright (C) 2012 Yusuke Suzuki <utatane.tea@gmail.com>
-  Copyright (C) 2012 Arpad Borsos <arpad.borsos@googlemail.com>
-  Copyright (C) 2011 Ariya Hidayat <ariya.hidayat@gmail.com>
-
-  Redistribution and use in source and binary forms, with or without
-  modification, are permitted provided that the following conditions are met:
-
-    * Redistributions of source code must retain the above copyright
-      notice, this list of conditions and the following disclaimer.
-    * Redistributions in binary form must reproduce the above copyright
-      notice, this list of conditions and the following disclaimer in the
-      documentation and/or other materials provided with the distribution.
-
-  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
-  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
-  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-*/
-
-(function (global) {
-    'use strict';
-
-    var Token,
-        TokenName,
-        Syntax,
-        Messages,
-        source,
-        index,
-        length,
-        delegate,
-        lookahead,
-        state;
-
-    Token = {
-        BooleanLiteral: 1,
-        EOF: 2,
-        Identifier: 3,
-        Keyword: 4,
-        NullLiteral: 5,
-        NumericLiteral: 6,
-        Punctuator: 7,
-        StringLiteral: 8
-    };
-
-    TokenName = {};
-    TokenName[Token.BooleanLiteral] = 'Boolean';
-    TokenName[Token.EOF] = '<end>';
-    TokenName[Token.Identifier] = 'Identifier';
-    TokenName[Token.Keyword] = 'Keyword';
-    TokenName[Token.NullLiteral] = 'Null';
-    TokenName[Token.NumericLiteral] = 'Numeric';
-    TokenName[Token.Punctuator] = 'Punctuator';
-    TokenName[Token.StringLiteral] = 'String';
-
-    Syntax = {
-        ArrayExpression: 'ArrayExpression',
-        BinaryExpression: 'BinaryExpression',
-        CallExpression: 'CallExpression',
-        ConditionalExpression: 'ConditionalExpression',
-        EmptyStatement: 'EmptyStatement',
-        ExpressionStatement: 'ExpressionStatement',
-        Identifier: 'Identifier',
-        Literal: 'Literal',
-        LabeledStatement: 'LabeledStatement',
-        LogicalExpression: 'LogicalExpression',
-        MemberExpression: 'MemberExpression',
-        ObjectExpression: 'ObjectExpression',
-        Program: 'Program',
-        Property: 'Property',
-        ThisExpression: 'ThisExpression',
-        UnaryExpression: 'UnaryExpression'
-    };
-
-    // Error messages should be identical to V8.
-    Messages = {
-        UnexpectedToken: 'Unexpected token %0',
-        UnknownLabel: 'Undefined label \'%0\'',
-        Redeclaration: '%0 \'%1\' has already been declared'
-    };
-
-    // Ensure the condition is true, otherwise throw an error.
-    // This is only to have a better contract semantic, i.e. another safety net
-    // to catch a logic error. The condition shall be fulfilled in normal case.
-    // Do NOT use this to enforce a certain condition on any user input.
-
-    function assert(condition, message) {
-        if (!condition) {
-            throw new Error('ASSERT: ' + message);
-        }
-    }
-
-    function isDecimalDigit(ch) {
-        return (ch >= 48 && ch <= 57);   // 0..9
-    }
-
-
-    // 7.2 White Space
-
-    function isWhiteSpace(ch) {
-        return (ch === 32) ||  // space
-            (ch === 9) ||      // tab
-            (ch === 0xB) ||
-            (ch === 0xC) ||
-            (ch === 0xA0) ||
-            (ch >= 0x1680 && '\u1680\u180E\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\uFEFF'.indexOf(String.fromCharCode(ch)) > 0);
-    }
-
-    // 7.3 Line Terminators
-
-    function isLineTerminator(ch) {
-        return (ch === 10) || (ch === 13) || (ch === 0x2028) || (ch === 0x2029);
-    }
-
-    // 7.6 Identifier Names and Identifiers
-
-    function isIdentifierStart(ch) {
-        return (ch === 36) || (ch === 95) ||  // $ (dollar) and _ (underscore)
-            (ch >= 65 && ch <= 90) ||         // A..Z
-            (ch >= 97 && ch <= 122);          // a..z
-    }
-
-    function isIdentifierPart(ch) {
-        return (ch === 36) || (ch === 95) ||  // $ (dollar) and _ (underscore)
-            (ch >= 65 && ch <= 90) ||         // A..Z
-            (ch >= 97 && ch <= 122) ||        // a..z
-            (ch >= 48 && ch <= 57);           // 0..9
-    }
-
-    // 7.6.1.1 Keywords
-
-    function isKeyword(id) {
-        return (id === 'this')
-    }
-
-    // 7.4 Comments
-
-    function skipWhitespace() {
-        while (index < length && isWhiteSpace(source.charCodeAt(index))) {
-            ++index;
-        }
-    }
-
-    function getIdentifier() {
-        var start, ch;
-
-        start = index++;
-        while (index < length) {
-            ch = source.charCodeAt(index);
-            if (isIdentifierPart(ch)) {
-                ++index;
-            } else {
-                break;
-            }
-        }
-
-        return source.slice(start, index);
-    }
-
-    function scanIdentifier() {
-        var start, id, type;
-
-        start = index;
-
-        id = getIdentifier();
-
-        // There is no keyword or literal with only one character.
-        // Thus, it must be an identifier.
-        if (id.length === 1) {
-            type = Token.Identifier;
-        } else if (isKeyword(id)) {
-            type = Token.Keyword;
-        } else if (id === 'null') {
-            type = Token.NullLiteral;
-        } else if (id === 'true' || id === 'false') {
-            type = Token.BooleanLiteral;
-        } else {
-            type = Token.Identifier;
-        }
-
-        return {
-            type: type,
-            value: id,
-            range: [start, index]
-        };
-    }
-
-
-    // 7.7 Punctuators
-
-    function scanPunctuator() {
-        var start = index,
-            code = source.charCodeAt(index),
-            code2,
-            ch1 = source[index],
-            ch2;
-
-        switch (code) {
-
-            // Check for most common single-character punctuators.
-            case 46:   // . dot
-            case 40:   // ( open bracket
-            case 41:   // ) close bracket
-            case 59:   // ; semicolon
-            case 44:   // , comma
-            case 123:  // { open curly brace
-            case 125:  // } close curly brace
-            case 91:   // [
-            case 93:   // ]
-            case 58:   // :
-            case 63:   // ?
-                ++index;
-                return {
-                    type: Token.Punctuator,
-                    value: String.fromCharCode(code),
-                    range: [start, index]
-                };
-
-            default:
-                code2 = source.charCodeAt(index + 1);
-
-                // '=' (char #61) marks an assignment or comparison operator.
-                if (code2 === 61) {
-                    switch (code) {
-                        case 37:  // %
-                        case 38:  // &
-                        case 42:  // *:
-                        case 43:  // +
-                        case 45:  // -
-                        case 47:  // /
-                        case 60:  // <
-                        case 62:  // >
-                        case 124: // |
-                            index += 2;
-                            return {
-                                type: Token.Punctuator,
-                                value: String.fromCharCode(code) + String.fromCharCode(code2),
-                                range: [start, index]
-                            };
-
-                        case 33: // !
-                        case 61: // =
-                            index += 2;
-
-                            // !== and ===
-                            if (source.charCodeAt(index) === 61) {
-                                ++index;
-                            }
-                            return {
-                                type: Token.Punctuator,
-                                value: source.slice(start, index),
-                                range: [start, index]
-                            };
-                        default:
-                            break;
-                    }
-                }
-                break;
-        }
-
-        // Peek more characters.
-
-        ch2 = source[index + 1];
-
-        // Other 2-character punctuators: && ||
-
-        if (ch1 === ch2 && ('&|'.indexOf(ch1) >= 0)) {
-            index += 2;
-            return {
-                type: Token.Punctuator,
-                value: ch1 + ch2,
-                range: [start, index]
-            };
-        }
-
-        if ('<>=!+-*%&|^/'.indexOf(ch1) >= 0) {
-            ++index;
-            return {
-                type: Token.Punctuator,
-                value: ch1,
-                range: [start, index]
-            };
-        }
-
-        throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
-    }
-
-    // 7.8.3 Numeric Literals
-    function scanNumericLiteral() {
-        var number, start, ch;
-
-        ch = source[index];
-        assert(isDecimalDigit(ch.charCodeAt(0)) || (ch === '.'),
-            'Numeric literal must start with a decimal digit or a decimal point');
-
-        start = index;
-        number = '';
-        if (ch !== '.') {
-            number = source[index++];
-            ch = source[index];
-
-            // Hex number starts with '0x'.
-            // Octal number starts with '0'.
-            if (number === '0') {
-                // decimal number starts with '0' such as '09' is illegal.
-                if (ch && isDecimalDigit(ch.charCodeAt(0))) {
-                    throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
-                }
-            }
-
-            while (isDecimalDigit(source.charCodeAt(index))) {
-                number += source[index++];
-            }
-            ch = source[index];
-        }
-
-        if (ch === '.') {
-            number += source[index++];
-            while (isDecimalDigit(source.charCodeAt(index))) {
-                number += source[index++];
-            }
-            ch = source[index];
-        }
-
-        if (ch === 'e' || ch === 'E') {
-            number += source[index++];
-
-            ch = source[index];
-            if (ch === '+' || ch === '-') {
-                number += source[index++];
-            }
-            if (isDecimalDigit(source.charCodeAt(index))) {
-                while (isDecimalDigit(source.charCodeAt(index))) {
-                    number += source[index++];
-                }
-            } else {
-                throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
-            }
-        }
-
-        if (isIdentifierStart(source.charCodeAt(index))) {
-            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
-        }
-
-        return {
-            type: Token.NumericLiteral,
-            value: parseFloat(number),
-            range: [start, index]
-        };
-    }
-
-    // 7.8.4 String Literals
-
-    function scanStringLiteral() {
-        var str = '', quote, start, ch, octal = false;
-
-        quote = source[index];
-        assert((quote === '\'' || quote === '"'),
-            'String literal must starts with a quote');
-
-        start = index;
-        ++index;
-
-        while (index < length) {
-            ch = source[index++];
-
-            if (ch === quote) {
-                quote = '';
-                break;
-            } else if (ch === '\\') {
-                ch = source[index++];
-                if (!ch || !isLineTerminator(ch.charCodeAt(0))) {
-                    switch (ch) {
-                        case 'n':
-                            str += '\n';
-                            break;
-                        case 'r':
-                            str += '\r';
-                            break;
-                        case 't':
-                            str += '\t';
-                            break;
-                        case 'b':
-                            str += '\b';
-                            break;
-                        case 'f':
-                            str += '\f';
-                            break;
-                        case 'v':
-                            str += '\x0B';
-                            break;
-
-                        default:
-                            str += ch;
-                            break;
-                    }
-                } else {
-                    if (ch === '\r' && source[index] === '\n') {
-                        ++index;
-                    }
-                }
-            } else if (isLineTerminator(ch.charCodeAt(0))) {
-                break;
-            } else {
-                str += ch;
-            }
-        }
-
-        if (quote !== '') {
-            throwError({}, Messages.UnexpectedToken, 'ILLEGAL');
-        }
-
-        return {
-            type: Token.StringLiteral,
-            value: str,
-            octal: octal,
-            range: [start, index]
-        };
-    }
-
-    function isIdentifierName(token) {
-        return token.type === Token.Identifier ||
-            token.type === Token.Keyword ||
-            token.type === Token.BooleanLiteral ||
-            token.type === Token.NullLiteral;
-    }
-
-    function advance() {
-        var ch;
-
-        skipWhitespace();
-
-        if (index >= length) {
-            return {
-                type: Token.EOF,
-                range: [index, index]
-            };
-        }
-
-        ch = source.charCodeAt(index);
-
-        // Very common: ( and ) and ;
-        if (ch === 40 || ch === 41 || ch === 58) {
-            return scanPunctuator();
-        }
-
-        // String literal starts with single quote (#39) or double quote (#34).
-        if (ch === 39 || ch === 34) {
-            return scanStringLiteral();
-        }
-
-        if (isIdentifierStart(ch)) {
-            return scanIdentifier();
-        }
-
-        // Dot (.) char #46 can also start a floating-point number, hence the need
-        // to check the next character.
-        if (ch === 46) {
-            if (isDecimalDigit(source.charCodeAt(index + 1))) {
-                return scanNumericLiteral();
-            }
-            return scanPunctuator();
-        }
-
-        if (isDecimalDigit(ch)) {
-            return scanNumericLiteral();
-        }
-
-        return scanPunctuator();
-    }
-
-    function lex() {
-        var token;
-
-        token = lookahead;
-        index = token.range[1];
-
-        lookahead = advance();
-
-        index = token.range[1];
-
-        return token;
-    }
-
-    function peek() {
-        var pos;
-
-        pos = index;
-        lookahead = advance();
-        index = pos;
-    }
-
-    // Throw an exception
-
-    function throwError(token, messageFormat) {
-        var error,
-            args = Array.prototype.slice.call(arguments, 2),
-            msg = messageFormat.replace(
-                /%(\d)/g,
-                function (whole, index) {
-                    assert(index < args.length, 'Message reference must be in range');
-                    return args[index];
-                }
-            );
-
-        error = new Error(msg);
-        error.index = index;
-        error.description = msg;
-        throw error;
-    }
-
-    // Throw an exception because of the token.
-
-    function throwUnexpected(token) {
-        throwError(token, Messages.UnexpectedToken, token.value);
-    }
-
-    // Expect the next token to match the specified punctuator.
-    // If not, an exception will be thrown.
-
-    function expect(value) {
-        var token = lex();
-        if (token.type !== Token.Punctuator || token.value !== value) {
-            throwUnexpected(token);
-        }
-    }
-
-    // Return true if the next token matches the specified punctuator.
-
-    function match(value) {
-        return lookahead.type === Token.Punctuator && lookahead.value === value;
-    }
-
-    // Return true if the next token matches the specified keyword
-
-    function matchKeyword(keyword) {
-        return lookahead.type === Token.Keyword && lookahead.value === keyword;
-    }
-
-    function consumeSemicolon() {
-        // Catch the very common case first: immediately a semicolon (char #59).
-        if (source.charCodeAt(index) === 59) {
-            lex();
-            return;
-        }
-
-        skipWhitespace();
-
-        if (match(';')) {
-            lex();
-            return;
-        }
-
-        if (lookahead.type !== Token.EOF && !match('}')) {
-            throwUnexpected(lookahead);
-        }
-    }
-
-    // 11.1.4 Array Initialiser
-
-    function parseArrayInitialiser() {
-        var elements = [];
-
-        expect('[');
-
-        while (!match(']')) {
-            if (match(',')) {
-                lex();
-                elements.push(null);
-            } else {
-                elements.push(parseExpression());
-
-                if (!match(']')) {
-                    expect(',');
-                }
-            }
-        }
-
-        expect(']');
-
-        return delegate.createArrayExpression(elements);
-    }
-
-    // 11.1.5 Object Initialiser
-
-    function parseObjectPropertyKey() {
-        var token;
-
-        skipWhitespace();
-        token = lex();
-
-        // Note: This function is called only from parseObjectProperty(), where
-        // EOF and Punctuator tokens are already filtered out.
-        if (token.type === Token.StringLiteral || token.type === Token.NumericLiteral) {
-            return delegate.createLiteral(token);
-        }
-
-        return delegate.createIdentifier(token.value);
-    }
-
-    function parseObjectProperty() {
-        var token, key;
-
-        token = lookahead;
-        skipWhitespace();
-
-        if (token.type === Token.EOF || token.type === Token.Punctuator) {
-            throwUnexpected(token);
-        }
-
-        key = parseObjectPropertyKey();
-        expect(':');
-        return delegate.createProperty('init', key, parseExpression());
-    }
-
-    function parseObjectInitialiser() {
-        var properties = [];
-
-        expect('{');
-
-        while (!match('}')) {
-            properties.push(parseObjectProperty());
-
-            if (!match('}')) {
-                expect(',');
-            }
-        }
-
-        expect('}');
-
-        return delegate.createObjectExpression(properties);
-    }
-
-    // 11.1.6 The Grouping Operator
-
-    function parseGroupExpression() {
-        var expr;
-
-        expect('(');
-
-        expr = parseExpression();
-
-        expect(')');
-
-        return expr;
-    }
-
-
-    // 11.1 Primary Expressions
-
-    function parsePrimaryExpression() {
-        var type, token, expr;
-
-        if (match('(')) {
-            return parseGroupExpression();
-        }
-
-        type = lookahead.type;
-
-        if (type === Token.Identifier) {
-            expr = delegate.createIdentifier(lex().value);
-        } else if (type === Token.StringLiteral || type === Token.NumericLiteral) {
-            expr = delegate.createLiteral(lex());
-        } else if (type === Token.Keyword) {
-            if (matchKeyword('this')) {
-                lex();
-                expr = delegate.createThisExpression();
-            }
-        } else if (type === Token.BooleanLiteral) {
-            token = lex();
-            token.value = (token.value === 'true');
-            expr = delegate.createLiteral(token);
-        } else if (type === Token.NullLiteral) {
-            token = lex();
-            token.value = null;
-            expr = delegate.createLiteral(token);
-        } else if (match('[')) {
-            expr = parseArrayInitialiser();
-        } else if (match('{')) {
-            expr = parseObjectInitialiser();
-        }
-
-        if (expr) {
-            return expr;
-        }
-
-        throwUnexpected(lex());
-    }
-
-    // 11.2 Left-Hand-Side Expressions
-
-    function parseArguments() {
-        var args = [];
-
-        expect('(');
-
-        if (!match(')')) {
-            while (index < length) {
-                args.push(parseExpression());
-                if (match(')')) {
-                    break;
-                }
-                expect(',');
-            }
-        }
-
-        expect(')');
-
-        return args;
-    }
-
-    function parseNonComputedProperty() {
-        var token;
-
-        token = lex();
-
-        if (!isIdentifierName(token)) {
-            throwUnexpected(token);
-        }
-
-        return delegate.createIdentifier(token.value);
-    }
-
-    function parseNonComputedMember() {
-        expect('.');
-
-        return parseNonComputedProperty();
-    }
-
-    function parseComputedMember() {
-        var expr;
-
-        expect('[');
-
-        expr = parseExpression();
-
-        expect(']');
-
-        return expr;
-    }
-
-    function parseLeftHandSideExpression() {
-        var expr, args, property;
-
-        expr = parsePrimaryExpression();
-
-        while (true) {
-            if (match('[')) {
-                property = parseComputedMember();
-                expr = delegate.createMemberExpression('[', expr, property);
-            } else if (match('.')) {
-                property = parseNonComputedMember();
-                expr = delegate.createMemberExpression('.', expr, property);
-            } else if (match('(')) {
-                args = parseArguments();
-                expr = delegate.createCallExpression(expr, args);
-            } else {
-                break;
-            }
-        }
-
-        return expr;
-    }
-
-    // 11.3 Postfix Expressions
-
-    var parsePostfixExpression = parseLeftHandSideExpression;
-
-    // 11.4 Unary Operators
-
-    function parseUnaryExpression() {
-        var token, expr;
-
-        if (lookahead.type !== Token.Punctuator && lookahead.type !== Token.Keyword) {
-            expr = parsePostfixExpression();
-        } else if (match('+') || match('-') || match('!')) {
-            token = lex();
-            expr = parseUnaryExpression();
-            expr = delegate.createUnaryExpression(token.value, expr);
-        } else if (matchKeyword('delete') || matchKeyword('void') || matchKeyword('typeof')) {
-            throwError({}, Messages.UnexpectedToken);
-        } else {
-            expr = parsePostfixExpression();
-        }
-
-        return expr;
-    }
-
-    function binaryPrecedence(token) {
-        var prec = 0;
-
-        if (token.type !== Token.Punctuator && token.type !== Token.Keyword) {
-            return 0;
-        }
-
-        switch (token.value) {
-            case '||':
-                prec = 1;
-                break;
-
-            case '&&':
-                prec = 2;
-                break;
-
-            case '==':
-            case '!=':
-            case '===':
-            case '!==':
-                prec = 6;
-                break;
-
-            case '<':
-            case '>':
-            case '<=':
-            case '>=':
-            case 'instanceof':
-                prec = 7;
-                break;
-
-            case 'in':
-                prec = 7;
-                break;
-
-            case '+':
-            case '-':
-                prec = 9;
-                break;
-
-            case '*':
-            case '/':
-            case '%':
-                prec = 11;
-                break;
-
-            default:
-                break;
-        }
-
-        return prec;
-    }
-
-    // 11.5 Multiplicative Operators
-    // 11.6 Additive Operators
-    // 11.7 Bitwise Shift Operators
-    // 11.8 Relational Operators
-    // 11.9 Equality Operators
-    // 11.10 Binary Bitwise Operators
-    // 11.11 Binary Logical Operators
-
-    function parseBinaryExpression() {
-        var expr, token, prec, stack, right, operator, left, i;
-
-        left = parseUnaryExpression();
-
-        token = lookahead;
-        prec = binaryPrecedence(token);
-        if (prec === 0) {
-            return left;
-        }
-        token.prec = prec;
-        lex();
-
-        right = parseUnaryExpression();
-
-        stack = [left, token, right];
-
-        while ((prec = binaryPrecedence(lookahead)) > 0) {
-
-            // Reduce: make a binary expression from the three topmost entries.
-            while ((stack.length > 2) && (prec <= stack[stack.length - 2].prec)) {
-                right = stack.pop();
-                operator = stack.pop().value;
-                left = stack.pop();
-                expr = delegate.createBinaryExpression(operator, left, right);
-                stack.push(expr);
-            }
-
-            // Shift.
-            token = lex();
-            token.prec = prec;
-            stack.push(token);
-            expr = parseUnaryExpression();
-            stack.push(expr);
-        }
-
-        // Final reduce to clean-up the stack.
-        i = stack.length - 1;
-        expr = stack[i];
-        while (i > 1) {
-            expr = delegate.createBinaryExpression(stack[i - 1].value, stack[i - 2], expr);
-            i -= 2;
-        }
-
-        return expr;
-    }
-
-
-    // 11.12 Conditional Operator
-
-    function parseConditionalExpression() {
-        var expr, consequent, alternate;
-
-        expr = parseBinaryExpression();
-
-        if (match('?')) {
-            lex();
-            consequent = parseConditionalExpression();
-            expect(':');
-            alternate = parseConditionalExpression();
-
-            expr = delegate.createConditionalExpression(expr, consequent, alternate);
-        }
-
-        return expr;
-    }
-
-    // Simplification since we do not support AssignmentExpression.
-    var parseExpression = parseConditionalExpression;
-
-    // Polymer Syntax extensions
-
-    // Filter ::
-    //   Identifier
-    //   Identifier "(" ")"
-    //   Identifier "(" FilterArguments ")"
-
-    function parseFilter() {
-        var identifier, args;
-
-        identifier = lex();
-
-        if (identifier.type !== Token.Identifier) {
-            throwUnexpected(identifier);
-        }
-
-        args = match('(') ? parseArguments() : [];
-
-        return delegate.createFilter(identifier.value, args);
-    }
-
-    // Filters ::
-    //   "|" Filter
-    //   Filters "|" Filter
-
-    function parseFilters() {
-        while (match('|')) {
-            lex();
-            parseFilter();
-        }
-    }
-
-    // TopLevel ::
-    //   LabelledExpressions
-    //   AsExpression
-    //   InExpression
-    //   FilterExpression
-
-    // AsExpression ::
-    //   FilterExpression as Identifier
-
-    // InExpression ::
-    //   Identifier, Identifier in FilterExpression
-    //   Identifier in FilterExpression
-
-    // FilterExpression ::
-    //   Expression
-    //   Expression Filters
-
-    function parseTopLevel() {
-        skipWhitespace();
-        peek();
-
-        var expr = parseExpression();
-        if (expr) {
-            if (lookahead.value === ',' || lookahead.value == 'in' &&
-                       expr.type === Syntax.Identifier) {
-                parseInExpression(expr);
-            } else {
-                parseFilters();
-                if (lookahead.value === 'as') {
-                    parseAsExpression(expr);
-                } else {
-                    delegate.createTopLevel(expr);
-                }
-            }
-        }
-
-        if (lookahead.type !== Token.EOF) {
-            throwUnexpected(lookahead);
-        }
-    }
-
-    function parseAsExpression(expr) {
-        lex();  // as
-        var identifier = lex().value;
-        delegate.createAsExpression(expr, identifier);
-    }
-
-    function parseInExpression(identifier) {
-        var indexName;
-        if (lookahead.value === ',') {
-            lex();
-            if (lookahead.type !== Token.Identifier)
-                throwUnexpected(lookahead);
-            indexName = lex().value;
-        }
-
-        lex();  // in
-        var expr = parseExpression();
-        parseFilters();
-        delegate.createInExpression(identifier.name, indexName, expr);
-    }
-
-    function parse(code, inDelegate) {
-        delegate = inDelegate;
-        source = code;
-        index = 0;
-        length = source.length;
-        lookahead = null;
-        state = {
-            labelSet: {}
-        };
-
-        return parseTopLevel();
-    }
-
-    global.esprima = {
-        parse: parse
-    };
-})(module.exports);
\ No newline at end of file
diff --git a/packages/core/js-libs/esprima/package.json b/packages/core/js-libs/esprima/package.json
deleted file mode 100644
index 3ee3e4bd7d..0000000000
--- a/packages/core/js-libs/esprima/package.json
+++ /dev/null
@@ -1,75 +0,0 @@
-{
-    "name": "esprima",
-    "description": "ECMAScript parsing infrastructure for multipurpose analysis",
-    "homepage": "http://esprima.org",
-    "main": "esprima",
-    "sideEffects": false,
-    "types": "esprima.d.ts",
-    "bin": {
-        "esparse": "./bin/esparse.js",
-        "esvalidate": "./bin/esvalidate.js"
-    },
-    "version": "2.0.0-dev",
-    "engines": {
-        "node": ">=0.4.0"
-    },
-    "author": {
-        "name": "Ariya Hidayat",
-        "email": "ariya.hidayat@gmail.com"
-    },
-    "maintainers": [
-        {
-            "name": "Ariya Hidayat",
-            "email": "ariya.hidayat@gmail.com",
-            "web": "http://ariya.ofilabs.com"
-        }
-    ],
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/ariya/esprima.git"
-    },
-    "bugs": {
-        "url": "http://issues.esprima.org"
-    },
-    "licenses": [
-        {
-            "type": "BSD",
-            "url": "https://github.com/ariya/esprima/raw/master/LICENSE.BSD"
-        }
-    ],
-    "devDependencies": {
-        "jslint": "~0.1.9",
-        "eslint": "~5.16.0",
-        "jscs": "~1.2.4",
-        "istanbul": "~0.2.6",
-        "complexity-report": "~0.6.1",
-        "regenerate": "~0.6.2",
-        "unicode-7.0.0": "~0.1.5",
-        "json-diff": "~0.3.1",
-        "optimist": "~0.6.0"
-    },
-    "keywords": [
-        "ast",
-        "ecmascript",
-        "javascript",
-        "parser",
-        "syntax"
-    ],
-    "scripts": {
-        "generate-regex": "node tools/generate-identifier-regex.js",
-        "test": "npm run-script lint && node test/run.js && npm run-script coverage && npm run-script complexity",
-        "lint": "npm run-script check-version && npm run-script eslint && npm run-script jscs && npm run-script jslint",
-        "check-version": "node tools/check-version.js",
-        "eslint": "node node_modules/eslint/bin/eslint.js esprima.js",
-        "jscs": "node node_modules/jscs/bin/jscs esprima.js",
-        "jslint": "node node_modules/jslint/bin/jslint.js esprima.js",
-        "coverage": "npm run-script analyze-coverage && npm run-script check-coverage",
-        "analyze-coverage": "node node_modules/istanbul/lib/cli.js cover test/runner.js",
-        "check-coverage": "node node_modules/istanbul/lib/cli.js check-coverage --statement 100 --branch 100 --function 100",
-        "complexity": "npm run-script analyze-complexity && npm run-script check-complexity",
-        "analyze-complexity": "node tools/list-complexity.js",
-        "check-complexity": "node node_modules/complexity-report/src/cli.js --maxcc 15 --silent -l -w esprima.js",
-        "benchmark": "node test/benchmarks.js",
-        "benchmark-quick": "node test/benchmarks.js quick"
-    }
-}
diff --git a/packages/core/js-libs/polymer-expressions/LICENSE b/packages/core/js-libs/polymer-expressions/LICENSE
deleted file mode 100644
index 95987bac86..0000000000
--- a/packages/core/js-libs/polymer-expressions/LICENSE
+++ /dev/null
@@ -1,27 +0,0 @@
-// Copyright (c) 2014 The Polymer Authors. All rights reserved.
-//
-// Redistribution and use in source and binary forms, with or without
-// modification, are permitted provided that the following conditions are
-// met:
-//
-//    * Redistributions of source code must retain the above copyright
-// notice, this list of conditions and the following disclaimer.
-//    * Redistributions in binary form must reproduce the above
-// copyright notice, this list of conditions and the following disclaimer
-// in the documentation and/or other materials provided with the
-// distribution.
-//    * Neither the name of Google Inc. nor the names of its
-// contributors may be used to endorse or promote products derived from
-// this software without specific prior written permission.
-//
-// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/packages/core/js-libs/polymer-expressions/README.md b/packages/core/js-libs/polymer-expressions/README.md
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/core/js-libs/polymer-expressions/package.json b/packages/core/js-libs/polymer-expressions/package.json
deleted file mode 100644
index 099137b475..0000000000
--- a/packages/core/js-libs/polymer-expressions/package.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "name": "polymer-expressions",
-  "main": "polymer-expressions",
-  "types": "polymer-expressions.d.ts"
-}
diff --git a/packages/core/js-libs/polymer-expressions/path-parser.js b/packages/core/js-libs/polymer-expressions/path-parser.js
deleted file mode 100644
index dbcd32ba16..0000000000
--- a/packages/core/js-libs/polymer-expressions/path-parser.js
+++ /dev/null
@@ -1,393 +0,0 @@
-/*
- * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
- */
-
-'use strict';
-
-function detectEval() {
-    // Don't test for eval if we're running in a Chrome App environment.
-    // We check for APIs set that only exist in a Chrome App context.
-    if (typeof chrome !== 'undefined' && chrome.app && chrome.app.runtime) {
-        return false;
-    }
-
-    // Firefox OS Apps do not allow eval. This feature detection is very hacky
-    // but even if some other platform adds support for this function this code
-    // will continue to work.
-    if (typeof navigator != 'undefined' && navigator.getDeviceStorage) {
-        return false;
-    }
-
-    try {
-        var f = new Function('', 'return true;');
-        return f();
-    } catch (ex) {
-        return false;
-    }
-}
-
-var hasEval = detectEval();
-
-function isIndex(s) {
-    return +s === s >>> 0 && s !== '';
-}
-
-function toNumber(s) {
-    return +s;
-}
-
-function isObject(obj) {
-    return obj === Object(obj);
-}
-
-var numberIsNaN = Number.isNaN || function (value) {
-    return typeof value === 'number' && isNaN(value);
-}
-
-function areSameValue(left, right) {
-    if (left === right)
-        return left !== 0 || 1 / left === 1 / right;
-    if (numberIsNaN(left) && numberIsNaN(right))
-        return true;
-
-    return left !== left && right !== right;
-}
-
-var createObject = ('__proto__' in {}) ?
-  function (obj) { return obj; } :
-  function (obj) {
-      var proto = obj.__proto__;
-      if (!proto)
-          return obj;
-      var newObject = Object.create(proto);
-      Object.getOwnPropertyNames(obj).forEach(function (name) {
-          Object.defineProperty(newObject, name,
-                               Object.getOwnPropertyDescriptor(obj, name));
-      });
-      return newObject;
-  };
-
-var identStart = '[\$_a-zA-Z]';
-var identPart = '[\$_a-zA-Z0-9]';
-var identRegExp = new RegExp('^' + identStart + '+' + identPart + '*' + '$');
-
-function getPathCharType(char) {
-    if (char === undefined)
-        return 'eof';
-
-    var code = char.charCodeAt(0);
-
-    switch (code) {
-        case 0x5B: // [
-        case 0x5D: // ]
-        case 0x2E: // .
-        case 0x22: // "
-        case 0x27: // '
-        case 0x30: // 0
-            return char;
-
-        case 0x5F: // _
-        case 0x24: // $
-            return 'ident';
-
-        case 0x20: // Space
-        case 0x09: // Tab
-        case 0x0A: // Newline
-        case 0x0D: // Return
-        case 0xA0:  // No-break space
-        case 0xFEFF:  // Byte Order Mark
-        case 0x2028:  // Line Separator
-        case 0x2029:  // Paragraph Separator
-            return 'ws';
-    }
-
-    // a-z, A-Z
-    if ((0x61 <= code && code <= 0x7A) || (0x41 <= code && code <= 0x5A))
-        return 'ident';
-
-    // 1-9
-    if (0x31 <= code && code <= 0x39)
-        return 'number';
-
-    return 'else';
-}
-
-var pathStateMachine = {
-    'beforePath': {
-        'ws': ['beforePath'],
-        'ident': ['inIdent', 'append'],
-        '[': ['beforeElement'],
-        'eof': ['afterPath']
-    },
-
-    'inPath': {
-        'ws': ['inPath'],
-        '.': ['beforeIdent'],
-        '[': ['beforeElement'],
-        'eof': ['afterPath']
-    },
-
-    'beforeIdent': {
-        'ws': ['beforeIdent'],
-        'ident': ['inIdent', 'append']
-    },
-
-    'inIdent': {
-        'ident': ['inIdent', 'append'],
-        '0': ['inIdent', 'append'],
-        'number': ['inIdent', 'append'],
-        'ws': ['inPath', 'push'],
-        '.': ['beforeIdent', 'push'],
-        '[': ['beforeElement', 'push'],
-        'eof': ['afterPath', 'push']
-    },
-
-    'beforeElement': {
-        'ws': ['beforeElement'],
-        '0': ['afterZero', 'append'],
-        'number': ['inIndex', 'append'],
-        "'": ['inSingleQuote', 'append', ''],
-        '"': ['inDoubleQuote', 'append', '']
-    },
-
-    'afterZero': {
-        'ws': ['afterElement', 'push'],
-        ']': ['inPath', 'push']
-    },
-
-    'inIndex': {
-        '0': ['inIndex', 'append'],
-        'number': ['inIndex', 'append'],
-        'ws': ['afterElement'],
-        ']': ['inPath', 'push']
-    },
-
-    'inSingleQuote': {
-        "'": ['afterElement'],
-        'eof': ['error'],
-        'else': ['inSingleQuote', 'append']
-    },
-
-    'inDoubleQuote': {
-        '"': ['afterElement'],
-        'eof': ['error'],
-        'else': ['inDoubleQuote', 'append']
-    },
-
-    'afterElement': {
-        'ws': ['afterElement'],
-        ']': ['inPath', 'push']
-    }
-}
-
-function noop() { }
-
-function parsePath(path) {
-    var keys = [];
-    var index = -1;
-    var c, newChar, key, type, transition, action, typeMap, mode = 'beforePath';
-
-    var actions = {
-        push: function () {
-            if (key === undefined)
-                return;
-
-            keys.push(key);
-            key = undefined;
-        },
-
-        append: function () {
-            if (key === undefined)
-                key = newChar
-            else
-                key += newChar;
-        }
-    };
-
-    function maybeUnescapeQuote() {
-        if (index >= path.length)
-            return;
-
-        var nextChar = path[index + 1];
-        if ((mode == 'inSingleQuote' && nextChar == "'") ||
-            (mode == 'inDoubleQuote' && nextChar == '"')) {
-            index++;
-            newChar = nextChar;
-            actions.append();
-            return true;
-        }
-    }
-
-    while (mode) {
-        index++;
-        c = path[index];
-
-        if (c == '\\' && maybeUnescapeQuote(mode))
-            continue;
-
-        type = getPathCharType(c);
-        typeMap = pathStateMachine[mode];
-        transition = typeMap[type] || typeMap['else'] || 'error';
-
-        if (transition == 'error')
-            return; // parse error;
-
-        mode = transition[0];
-        action = actions[transition[1]] || noop;
-        newChar = transition[2] === undefined ? c : transition[2];
-        action();
-
-        if (mode === 'afterPath') {
-            return keys;
-        }
-    }
-
-    return; // parse error
-}
-
-function isIdent(s) {
-    return identRegExp.test(s);
-}
-
-var constructorIsPrivate = {};
-
-function Path(parts, privateToken) {
-    if (privateToken !== constructorIsPrivate)
-        throw Error('Use Path.get to retrieve path objects');
-
-    for (var i = 0; i < parts.length; i++) {
-        this.push(String(parts[i]));
-    }
-
-    if (hasEval && this.length) {
-        this.getValueFrom = this.compiledGetValueFromFn();
-    }
-}
-
-// TODO(rafaelw): Make simple LRU cache
-var pathCache = {};
-
-function getPath(pathString) {
-    if (pathString instanceof Path)
-        return pathString;
-
-    if (pathString == null || pathString.length == 0)
-        pathString = '';
-
-    if (typeof pathString != 'string') {
-        if (isIndex(pathString.length)) {
-            // Constructed with array-like (pre-parsed) keys
-            return new Path(pathString, constructorIsPrivate);
-        }
-
-        pathString = String(pathString);
-    }
-
-    var path = pathCache[pathString];
-    if (path)
-        return path;
-
-    var parts = parsePath(pathString);
-    if (!parts)
-        return invalidPath;
-
-    var path = new Path(parts, constructorIsPrivate);
-    pathCache[pathString] = path;
-    return path;
-}
-
-Path.get = getPath;
-
-function formatAccessor(key) {
-    if (isIndex(key)) {
-        return '[' + key + ']';
-    } else {
-        return '["' + key.replace(/"/g, '\\"') + '"]';
-    }
-}
-
-Path.prototype = createObject({
-    __proto__: [],
-    valid: true,
-
-    toString: function () {
-        var pathString = '';
-        for (var i = 0; i < this.length; i++) {
-            var key = this[i];
-            if (isIdent(key)) {
-                pathString += i ? '.' + key : key;
-            } else {
-                pathString += formatAccessor(key);
-            }
-        }
-
-        return pathString;
-    },
-
-    getValueFrom: function (obj, directObserver) {
-        for (var i = 0; i < this.length; i++) {
-            if (obj == null)
-                return;
-            obj = obj[this[i]];
-        }
-        return obj;
-    },
-
-    iterateObjects: function (obj, observe) {
-        for (var i = 0; i < this.length; i++) {
-            if (i)
-                obj = obj[this[i - 1]];
-            if (!isObject(obj))
-                return;
-            observe(obj, this[i]);
-        }
-    },
-
-    compiledGetValueFromFn: function () {
-        var str = '';
-        var pathString = 'obj';
-        str += 'if (obj != null';
-        var i = 0;
-        var key;
-        for (; i < (this.length - 1) ; i++) {
-            key = this[i];
-            pathString += isIdent(key) ? '.' + key : formatAccessor(key);
-            str += ' &&\n     ' + pathString + ' != null';
-        }
-        str += ')\n';
-
-        var key = this[i];
-        pathString += isIdent(key) ? '.' + key : formatAccessor(key);
-
-        str += '  return ' + pathString + ';\nelse\n  return undefined;';
-        return new Function('obj', str);
-    },
-
-    setValueFrom: function (obj, value) {
-        if (!this.length)
-            return false;
-
-        for (var i = 0; i < this.length - 1; i++) {
-            if (!isObject(obj))
-                return false;
-            obj = obj[this[i]];
-        }
-
-        if (!isObject(obj))
-            return false;
-
-        obj[this[i]] = value;
-        return true;
-    }
-});
-
-var invalidPath = new Path('', constructorIsPrivate);
-invalidPath.valid = false;
-invalidPath.getValueFrom = invalidPath.setValueFrom = function () { };
-
-exports.Path = Path;
diff --git a/packages/core/js-libs/polymer-expressions/polymer-expressions.d.ts b/packages/core/js-libs/polymer-expressions/polymer-expressions.d.ts
deleted file mode 100644
index 444f06fc7c..0000000000
--- a/packages/core/js-libs/polymer-expressions/polymer-expressions.d.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-//@private
-export class PolymerExpressions {
-    static getExpression(expression: string): Expression;
-}
-
-export class Expression {
-    /**
-     * Evaluates a value for an expression.
-     * @param model - Context of the expression.
-     * @param isBackConvert - Denotes if the convertion is forward (from model to ui) or back (ui to model).
-     * @param changedModel - A property bag which contains all changed properties (in case of two way binding).
-     */
-    getValue(model, isBackConvert, changedModel);
-}
diff --git a/packages/core/js-libs/polymer-expressions/polymer-expressions.js b/packages/core/js-libs/polymer-expressions/polymer-expressions.js
deleted file mode 100644
index 1a1ddea977..0000000000
--- a/packages/core/js-libs/polymer-expressions/polymer-expressions.js
+++ /dev/null
@@ -1,541 +0,0 @@
-// Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-// This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-// The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-// The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-// Code distributed by Google as part of the polymer project is also
-// subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-
-// Hack to resolve https://github.com/webpack/enhanced-resolve/issues/197 . 
-// This issue causes an require like this (`../esprima`) to be resolved to (`esprima`) by the Angular webpack plugin
-var esprima = require("../../js-libs/esprima").esprima;
-
-var Path = require("./path-parser").Path;
-
-(function (global) {
-    'use strict';
-
-    // TODO(rafaelw): Implement simple LRU.
-    var expressionParseCache = Object.create(null);
-
-    function getExpression(expressionText) {
-        var expression = expressionParseCache[expressionText];
-        if (!expression) {
-            var delegate = new ASTDelegate();
-            esprima.parse(expressionText, delegate);
-            expression = new Expression(delegate);
-            expressionParseCache[expressionText] = expression;
-        }
-        return expression;
-    }
-
-    function Literal(value) {
-        this.value = value;
-        this.valueFn_ = undefined;
-    }
-
-    Literal.prototype = {
-        valueFn: function () {
-            if (!this.valueFn_) {
-                var value = this.value;
-                this.valueFn_ = function () {
-                    return value;
-                }
-            }
-
-            return this.valueFn_;
-        }
-    }
-
-    function IdentPath(name) {
-        this.name = name;
-        this.path = Path.get(name);
-    }
-
-    IdentPath.prototype = {
-        valueFn: function () {
-            if (!this.valueFn_) {
-                var name = this.name;
-                var path = this.path;
-                this.valueFn_ = function (model, observer, changedModel) {
-                    if (observer)
-                        observer.addPath(model, path);
-
-                    if (changedModel) {
-                        var result = path.getValueFrom(changedModel);
-                        if (result !== undefined) {
-                            return result;
-                        }
-                    }
-
-                    return path.getValueFrom(model);
-                }
-            }
-
-            return this.valueFn_;
-        },
-
-        setValue: function (model, newValue) {
-            if (this.path.length == 1) {
-                model = findScope(model, this.path[0]);
-            }
-
-            return this.path.setValueFrom(model, newValue);
-        }
-    };
-
-    function MemberExpression(object, property, accessor) {
-        this.computed = accessor == '[';
-
-        this.dynamicDeps = typeof object == 'function' ||
-                           object.dynamicDeps ||
-                           (this.computed && !(property instanceof Literal));
-
-        this.simplePath =
-            !this.dynamicDeps &&
-            (property instanceof IdentPath || property instanceof Literal) &&
-            (object instanceof MemberExpression || object instanceof IdentPath);
-
-        this.object = this.simplePath ? object : getFn(object);
-        this.property = !this.computed || this.simplePath ?
-            property : getFn(property);
-    }
-
-    MemberExpression.prototype = {
-        get fullPath() {
-            if (!this.fullPath_) {
-
-                var parts = this.object instanceof MemberExpression ?
-                    this.object.fullPath.slice() : [this.object.name];
-                parts.push(this.property instanceof IdentPath ?
-                    this.property.name : this.property.value);
-                this.fullPath_ = Path.get(parts);
-            }
-
-            return this.fullPath_;
-        },
-
-        valueFn: function () {
-            if (!this.valueFn_) {
-                var object = this.object;
-
-                if (this.simplePath) {
-                    var path = this.fullPath;
-
-                    this.valueFn_ = function (model, observer) {
-                        if (observer)
-                            observer.addPath(model, path);
-
-                        return path.getValueFrom(model);
-                    };
-                } else if (!this.computed) {
-                    var path = Path.get(this.property.name);
-
-                    this.valueFn_ = function (model, observer, filterRegistry) {
-                        var context = object(model, observer, filterRegistry);
-
-                        if (observer)
-                            observer.addPath(context, path);
-
-                        return path.getValueFrom(context);
-                    }
-                } else {
-                    // Computed property.
-                    var property = this.property;
-
-                    this.valueFn_ = function (model, observer, filterRegistry) {
-                        var context = object(model, observer, filterRegistry);
-                        var propName = property(model, observer, filterRegistry);
-                        if (observer)
-                            observer.addPath(context, [propName]);
-
-                        return context ? context[propName] : undefined;
-                    };
-                }
-            }
-            return this.valueFn_;
-        },
-
-        setValue: function (model, newValue) {
-            if (this.simplePath) {
-                this.fullPath.setValueFrom(model, newValue);
-                return newValue;
-            }
-
-            var object = this.object(model);
-            var propName = this.property instanceof IdentPath ? this.property.name :
-                this.property(model);
-            return object[propName] = newValue;
-        }
-    };
-
-    function Filter(name, args) {
-        this.name = name;
-        this.args = [];
-        for (var i = 0; i < args.length; i++) {
-            this.args[i] = getFn(args[i]);
-        }
-    }
-
-    Filter.prototype = {
-        transform: function (model, observer, filterRegistry, toModelDirection,
-                            initialArgs) {
-            var fn = filterRegistry[this.name];
-            var context = model;
-            if (fn) {
-                context = undefined;
-            } else {
-                fn = context[this.name];
-                if (!fn) {
-                    console.error('Cannot find function or filter: ' + this.name);
-                    return;
-                }
-            }
-
-            // If toModelDirection is falsey, then the "normal" (dom-bound) direction
-            // is used. Otherwise, it looks for a 'toModel' property function on the
-            // object.
-            if (toModelDirection) {
-                fn = fn.toModel;
-            } else if (typeof fn.toView == 'function') {
-                fn = fn.toView;
-            }
-
-            if (typeof fn != 'function') {
-                console.error('Cannot find function or filter: ' + this.name);
-                return;
-            }
-
-            var args = initialArgs || [];
-            for (var i = 0; i < this.args.length; i++) {
-                args.push(getFn(this.args[i])(model, observer, filterRegistry));
-            }
-
-            return fn.apply(context, args);
-        }
-    };
-
-    function notImplemented() { throw Error('Not Implemented'); }
-
-    var unaryOperators = {
-        '+': function (v) { return +v; },
-        '-': function (v) { return -v; },
-        '!': function (v) { return !v; }
-    };
-
-    var binaryOperators = {
-        '+': function (l, r) { return l + r; },
-        '-': function (l, r) { return l - r; },
-        '*': function (l, r) { return l * r; },
-        '/': function (l, r) { return l / r; },
-        '%': function (l, r) { return l % r; },
-        '<': function (l, r) { return l < r; },
-        '>': function (l, r) { return l > r; },
-        '<=': function (l, r) { return l <= r; },
-        '>=': function (l, r) { return l >= r; },
-        '==': function (l, r) { return l == r; },
-        '!=': function (l, r) { return l != r; },
-        '===': function (l, r) { return l === r; },
-        '!==': function (l, r) { return l !== r; },
-        '&&': function (l, r) { return l && r; },
-        '||': function (l, r) { return l || r; },
-    };
-
-    function getFn(arg) {
-        return typeof arg == 'function' ? arg : arg.valueFn();
-    }
-
-    function ASTDelegate() {
-        this.expression = null;
-        this.filters = [];
-        this.deps = {};
-        this.currentPath = undefined;
-        this.scopeIdent = undefined;
-        this.indexIdent = undefined;
-        this.dynamicDeps = false;
-    }
-
-    ASTDelegate.prototype = {
-        createUnaryExpression: function (op, argument) {
-            if (!unaryOperators[op])
-                throw Error('Disallowed operator: ' + op);
-
-            argument = getFn(argument);
-
-            return function (model, observer, filterRegistry) {
-                return unaryOperators[op](argument(model, observer, filterRegistry));
-            };
-        },
-
-        createBinaryExpression: function (op, left, right) {
-            if (!binaryOperators[op])
-                throw Error('Disallowed operator: ' + op);
-
-            left = getFn(left);
-            right = getFn(right);
-
-            switch (op) {
-                case '||':
-                    this.dynamicDeps = true;
-                    return function (model, observer, filterRegistry) {
-                        return left(model, observer, filterRegistry) ||
-                            right(model, observer, filterRegistry);
-                    };
-                case '&&':
-                    this.dynamicDeps = true;
-                    return function (model, observer, filterRegistry) {
-                        return left(model, observer, filterRegistry) &&
-                            right(model, observer, filterRegistry);
-                    };
-            }
-
-            return function (model, observer, filterRegistry) {
-                return binaryOperators[op](left(model, observer, filterRegistry),
-                                           right(model, observer, filterRegistry));
-            };
-        },
-
-        createConditionalExpression: function (test, consequent, alternate) {
-            test = getFn(test);
-            consequent = getFn(consequent);
-            alternate = getFn(alternate);
-
-            this.dynamicDeps = true;
-
-            return function (model, observer, filterRegistry) {
-                return test(model, observer, filterRegistry) ?
-                    consequent(model, observer, filterRegistry) :
-                    alternate(model, observer, filterRegistry);
-            }
-        },
-
-        createIdentifier: function (name) {
-            var ident = new IdentPath(name);
-            ident.type = 'Identifier';
-            return ident;
-        },
-
-        createMemberExpression: function (accessor, object, property) {
-            var ex = new MemberExpression(object, property, accessor);
-            if (ex.dynamicDeps)
-                this.dynamicDeps = true;
-            return ex;
-        },
-
-        createCallExpression: function (expression, args) {
-            if (!(expression instanceof IdentPath))
-                throw Error('Only identifier function invocations are allowed');
-
-            var filter = new Filter(expression.name, args);
-
-            return function (model, observer, filterRegistry) {
-                return filter.transform(model, observer, filterRegistry, false);
-            };
-        },
-
-        createLiteral: function (token) {
-            return new Literal(token.value);
-        },
-
-        createArrayExpression: function (elements) {
-            for (var i = 0; i < elements.length; i++)
-                elements[i] = getFn(elements[i]);
-
-            return function (model, observer, filterRegistry) {
-                var arr = []
-                for (var i = 0; i < elements.length; i++)
-                    arr.push(elements[i](model, observer, filterRegistry));
-                return arr;
-            }
-        },
-
-        createProperty: function (kind, key, value) {
-            return {
-                key: key instanceof IdentPath ? key.name : key.value,
-                value: value
-            };
-        },
-
-        createObjectExpression: function (properties) {
-            for (var i = 0; i < properties.length; i++)
-                properties[i].value = getFn(properties[i].value);
-
-            return function (model, observer, filterRegistry) {
-                var obj = {};
-                for (var i = 0; i < properties.length; i++)
-                    obj[properties[i].key] =
-                        properties[i].value(model, observer, filterRegistry);
-                return obj;
-            }
-        },
-
-        createFilter: function (name, args) {
-            this.filters.push(new Filter(name, args));
-        },
-
-        createAsExpression: function (expression, scopeIdent) {
-            this.expression = expression;
-            this.scopeIdent = scopeIdent;
-        },
-
-        createInExpression: function (scopeIdent, indexIdent, expression) {
-            this.expression = expression;
-            this.scopeIdent = scopeIdent;
-            this.indexIdent = indexIdent;
-        },
-
-        createTopLevel: function (expression) {
-            this.expression = expression;
-        },
-
-        createThisExpression: notImplemented
-    }
-
-    function Expression(delegate) {
-        this.scopeIdent = delegate.scopeIdent;
-        this.indexIdent = delegate.indexIdent;
-
-        if (!delegate.expression)
-            throw Error('No expression found.');
-
-        this.expression = delegate.expression;
-        getFn(this.expression); // forces enumeration of path dependencies
-
-        this.filters = delegate.filters;
-        this.dynamicDeps = delegate.dynamicDeps;
-    }
-
-    Expression.prototype = {
-        getValue: function (model, isBackConvert, changedModel, observer) {
-            var value = getFn(this.expression)(model.context, observer, changedModel);
-            for (var i = 0; i < this.filters.length; i++) {
-                value = this.filters[i].transform(model.context, observer, model.context, isBackConvert, [value]);
-            }
-
-            return value;
-        },
-
-        setValue: function (model, newValue, filterRegistry) {
-            var count = this.filters ? this.filters.length : 0;
-            while (count-- > 0) {
-                newValue = this.filters[count].transform(model, undefined,
-                    filterRegistry, true, [newValue]);
-            }
-
-            if (this.expression.setValue)
-                return this.expression.setValue(model, newValue);
-        }
-    }
-
-    /**
-     * Converts a style property name to a css property name. For example:
-     * "WebkitUserSelect" to "-webkit-user-select"
-     */
-    function convertStylePropertyName(name) {
-        return String(name).replace(/[A-Z]/g, function (c) {
-            return '-' + c.toLowerCase();
-        });
-    }
-
-    var parentScopeName = '@' + Math.random().toString(36).slice(2);
-
-    // Single ident paths must bind directly to the appropriate scope object.
-    // I.e. Pushed values in two-bindings need to be assigned to the actual model
-    // object.
-    function findScope(model, prop) {
-        while (model[parentScopeName] &&
-               !Object.prototype.hasOwnProperty.call(model, prop)) {
-            model = model[parentScopeName];
-        }
-
-        return model;
-    }
-
-    function isLiteralExpression(pathString) {
-        switch (pathString) {
-            case '':
-                return false;
-
-            case 'false':
-            case 'null':
-            case 'true':
-                return true;
-        }
-
-        if (!isNaN(Number(pathString)))
-            return true;
-
-        return false;
-    };
-
-    function PolymerExpressions() { }
-
-    PolymerExpressions.prototype = {
-        // "built-in" filters
-        styleObject: function (value) {
-            var parts = [];
-            for (var key in value) {
-                parts.push(convertStylePropertyName(key) + ': ' + value[key]);
-            }
-            return parts.join('; ');
-        },
-
-        tokenList: function (value) {
-            var tokens = [];
-            for (var key in value) {
-                if (value[key])
-                    tokens.push(key);
-            }
-            return tokens.join(' ');
-        },
-
-        // binding delegate API
-        prepareInstancePositionChanged: function (template) {
-            var indexIdent = template.polymerExpressionIndexIdent_;
-            if (!indexIdent)
-                return;
-
-            return function (templateInstance, index) {
-                templateInstance.model[indexIdent] = index;
-            };
-        },
-
-        prepareInstanceModel: function (template) {
-            var scopeName = template.polymerExpressionScopeIdent_;
-            if (!scopeName)
-                return;
-
-            var parentScope = template.templateInstance ?
-                template.templateInstance.model :
-                template.model;
-
-            var indexName = template.polymerExpressionIndexIdent_;
-
-            return function (model) {
-                return createScopeObject(parentScope, model, scopeName, indexName);
-            };
-        }
-    };
-
-    var createScopeObject = ('__proto__' in {}) ?
-      function (parentScope, model, scopeName, indexName) {
-          var scope = {};
-          scope[scopeName] = model;
-          scope[indexName] = undefined;
-          scope[parentScopeName] = parentScope;
-          scope.__proto__ = parentScope;
-          return scope;
-      } :
-      function (parentScope, model, scopeName, indexName) {
-          var scope = Object.create(parentScope);
-          Object.defineProperty(scope, scopeName,
-              { value: model, configurable: true, writable: true });
-          Object.defineProperty(scope, indexName,
-              { value: undefined, configurable: true, writable: true });
-          Object.defineProperty(scope, parentScopeName,
-              { value: parentScope, configurable: true, writable: true });
-          return scope;
-      };
-
-    global.PolymerExpressions = PolymerExpressions;
-    PolymerExpressions.getExpression = getExpression;
-})(module.exports);
\ No newline at end of file
diff --git a/packages/core/module-name-resolver/qualifier-matcher/index.ts b/packages/core/module-name-resolver/qualifier-matcher/index.ts
index 917a22024c..4dbaa612fc 100644
--- a/packages/core/module-name-resolver/qualifier-matcher/index.ts
+++ b/packages/core/module-name-resolver/qualifier-matcher/index.ts
@@ -119,20 +119,21 @@ const supportedQualifiers: Array<QualifierSpec> = [minWidthHeightQualifier, minW
 
 function checkQualifiers(path: string, context: PlatformContext): number {
 	let result = 0;
+	let value: number;
 	for (let i = 0; i < supportedQualifiers.length; i++) {
 		const qualifier = supportedQualifiers[i];
 		if (qualifier.isMatch(path)) {
 			const occurences = qualifier.getMatchOccurences(path);
 			// Always get the last qualifier among identical occurences
-			result = qualifier.getMatchValue(occurences[occurences.length - 1], context);
-			if (result < 0) {
+			value = qualifier.getMatchValue(occurences[occurences.length - 1], context);
+			if (value < 0) {
 				// Non of the supported qualifiers matched this or the match was not satisfied
 				return -1;
 			}
 
-			result += (supportedQualifiers.length - i) * PRIORITY_STEP;
-
-			return result;
+			if (value > 0) {
+				result += value + (supportedQualifiers.length - i) * PRIORITY_STEP;
+			}
 		}
 	}
 
diff --git a/packages/core/package.json b/packages/core/package.json
index dede394d60..b0a08935f0 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -3,11 +3,11 @@
   "main": "index",
   "types": "index.d.ts",
   "description": "A JavaScript library providing an easy to use api for interacting with iOS and Android platform APIs.",
-  "version": "8.1.5",
+  "version": "8.2.0-alpha.5",
   "homepage": "https://nativescript.org",
   "repository": {
-      "type": "git",
-      "url": "https://github.com/NativeScript/NativeScript"
+    "type": "git",
+    "url": "https://github.com/NativeScript/NativeScript"
   },
   "sideEffects": [
     "bundle-entry-points.js",
@@ -15,36 +15,37 @@
     "./globals"
   ],
   "files": [
-      "**/*.d.ts",
-      "**/*.js",
-      "**/*.map",
-      "**/platforms/ios/**",
-      "**/platforms/android/**",
-      "**/package.json"
+    "**/*.d.ts",
+    "**/*.js",
+    "**/*.map",
+    "**/platforms/ios/**",
+    "**/platforms/android/**",
+    "**/package.json"
   ],
   "license": "Apache-2.0",
   "scripts": {
-      "postinstall": "node cli-hooks/postinstall.js",
-      "preuninstall": "node cli-hooks/preuninstall.js"
+    "postinstall": "node cli-hooks/postinstall.js",
+    "preuninstall": "node cli-hooks/preuninstall.js"
   },
   "dependencies": {
-    "css-tree": "^1.1.2",
     "@nativescript/hook": "~2.0.0",
+    "acorn": "^8.7.0",
+    "css-tree": "^1.1.2",
     "reduce-css-calc": "^2.1.7",
     "tslib": "~2.0.0"
   },
   "nativescript": {
-      "platforms": {
-          "ios": "6.0.0",
-          "android": "6.0.0"
-      },
-      "hooks": [
-          {
-              "name": "nativescript-core",
-              "type": "before-checkForChanges",
-              "script": "cli-hooks/before-checkForChanges.js",
-              "inject": true
-          }
-      ]
+    "platforms": {
+      "ios": "6.0.0",
+      "android": "6.0.0"
+    },
+    "hooks": [
+      {
+        "name": "nativescript-core",
+        "type": "before-checkForChanges",
+        "script": "cli-hooks/before-checkForChanges.js",
+        "inject": true
+      }
+    ]
   }
 }
diff --git a/packages/core/ui/action-bar/index.android.ts b/packages/core/ui/action-bar/index.android.ts
index 137871df50..0a1bcdd15f 100644
--- a/packages/core/ui/action-bar/index.android.ts
+++ b/packages/core/ui/action-bar/index.android.ts
@@ -7,6 +7,9 @@ import { colorProperty } from '../styling/style-properties';
 import { ImageSource } from '../../image-source';
 import * as application from '../../application';
 import { isAccessibilityServiceEnabled, updateContentDescription } from '../../accessibility';
+import type { Background } from '../styling/background';
+import { Device } from '../../platform';
+import lazy from '../../utils/lazy';
 
 export * from './action-bar-common';
 
@@ -14,6 +17,8 @@ const R_ID_HOME = 0x0102002c;
 const ACTION_ITEM_ID_OFFSET = 10000;
 const DEFAULT_ELEVATION = 4;
 
+const sdkVersion = lazy(() => parseInt(Device.sdkVersion));
+
 let AppCompatTextView;
 let actionItemIdGenerator = ACTION_ITEM_ID_OFFSET;
 function generateItemId(): number {
@@ -59,7 +64,7 @@ function initializeMenuItemClickListener(): void {
 		return;
 	}
 
-	apiLevel = android.os.Build.VERSION.SDK_INT;
+	apiLevel = sdkVersion();
 
 	AppCompatTextView = androidx.appcompat.widget.AppCompatTextView;
 
@@ -216,6 +221,32 @@ export class ActionBar extends ActionBarBase {
 		this._updateNavigationButton();
 	}
 
+	public _applyBackground(background: Background, isBorderDrawable, onlyColor: boolean, backgroundDrawable: any) {
+		const nativeView = this.nativeViewProtected;
+		if (backgroundDrawable && onlyColor && sdkVersion() >= 21) {
+			if (isBorderDrawable && (<any>nativeView)._cachedDrawable) {
+				backgroundDrawable = (<any>nativeView)._cachedDrawable;
+				// we need to duplicate the drawable or we lose the "default" cached drawable
+				const constantState = backgroundDrawable.getConstantState();
+				if (constantState) {
+					try {
+						backgroundDrawable = constantState.newDrawable(nativeView.getResources());
+						// eslint-disable-next-line no-empty
+					} catch {}
+				}
+				nativeView.setBackground(backgroundDrawable);
+			}
+
+			const backgroundColor = ((<any>backgroundDrawable).backgroundColor = background.color.android);
+			backgroundDrawable.mutate();
+			backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
+			backgroundDrawable.invalidateSelf(); // Make sure the drawable is invalidated. Android forgets to invalidate it in some cases: toolbar
+			(<any>backgroundDrawable).backgroundColor = backgroundColor;
+		} else {
+			super._applyBackground(background, isBorderDrawable, onlyColor, backgroundDrawable);
+		}
+	}
+
 	public _onAndroidItemSelected(itemId: number): boolean {
 		// Handle home button
 		if (this.navigationButton && itemId === R_ID_HOME) {
diff --git a/packages/core/ui/button/index.android.ts b/packages/core/ui/button/index.android.ts
index 3dbdb738f0..66c6446670 100644
--- a/packages/core/ui/button/index.android.ts
+++ b/packages/core/ui/button/index.android.ts
@@ -7,6 +7,7 @@ import { profile } from '../../profiling';
 import { TouchGestureEventData, GestureTypes, TouchAction } from '../gestures';
 import { Device } from '../../platform';
 import lazy from '../../utils/lazy';
+import type { Background } from 'ui/styling/background';
 
 export * from './button-common';
 
@@ -58,6 +59,32 @@ export class Button extends ButtonBase {
 	private _stateListAnimator: any;
 	private _highlightedHandler: (args: TouchGestureEventData) => void;
 
+	public _applyBackground(background: Background, isBorderDrawable, onlyColor: boolean, backgroundDrawable: any) {
+		const nativeView = this.nativeViewProtected;
+		if (backgroundDrawable && onlyColor) {
+			if (isBorderDrawable && (<any>nativeView)._cachedDrawable) {
+				backgroundDrawable = (<any>nativeView)._cachedDrawable;
+				// we need to duplicate the drawable or we lose the "default" cached drawable
+				const constantState = backgroundDrawable.getConstantState();
+				if (constantState) {
+					try {
+						backgroundDrawable = constantState.newDrawable(nativeView.getResources());
+						// eslint-disable-next-line no-empty
+					} catch {}
+				}
+				nativeView.setBackground(backgroundDrawable);
+			}
+
+			const backgroundColor = ((<any>backgroundDrawable).backgroundColor = background.color.android);
+			backgroundDrawable.mutate();
+			backgroundDrawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
+			backgroundDrawable.invalidateSelf(); // Make sure the drawable is invalidated. Android forgets to invalidate it in some cases: toolbar
+			(<any>backgroundDrawable).backgroundColor = backgroundColor;
+		} else {
+			super._applyBackground(background, isBorderDrawable, onlyColor, backgroundDrawable);
+		}
+	}
+
 	@profile
 	public createNativeView() {
 		if (!AndroidButton) {
diff --git a/packages/core/ui/core/bindable/bindable-expressions.ts b/packages/core/ui/core/bindable/bindable-expressions.ts
new file mode 100644
index 0000000000..c1450e05dc
--- /dev/null
+++ b/packages/core/ui/core/bindable/bindable-expressions.ts
@@ -0,0 +1,215 @@
+import { parse } from 'acorn';
+import { isFunction, isNullOrUndefined, isObject } from '../../../utils/types';
+
+interface ASTExpression {
+	readonly type: string;
+	readonly [prop: string]: any;
+}
+
+const expressionsCache = {};
+
+// prettier-ignore
+const unaryOperators = {
+	'+': (v) => +v,
+	'-': (v) => -v,
+	'!': (v) => !v,
+	'void': (v) => void v,
+	'typeof': (v) => typeof v
+};
+
+// prettier-ignore
+const binaryOperators = {
+	'+': (l, r) => l + r,
+	'-': (l, r) => l - r,
+	'*': (l, r) => l * r,
+	'/': (l, r) => l / r,
+	'%': (l, r) => l % r,
+	'<': (l, r) => l < r,
+	'>': (l, r) => l > r,
+	'<=': (l, r) => l <= r,
+	'>=': (l, r) => l >= r,
+	'==': (l, r) => l == r,
+	'!=': (l, r) => l != r,
+	'===': (l, r) => l === r,
+	'!==': (l, r) => l !== r,
+	'|': (l, r) => l | r,
+	'in': (l, r) => l in r,
+	'instanceof': (l, r) => l instanceof r
+};
+
+// prettier-ignore
+const logicalOperators = {
+	'&&': (l, r) => l && r(),
+	'||': (l, r) => l || r(),
+	'??': (l, r) => l ?? r()
+};
+
+// prettier-ignore
+const expressionParsers = {
+	'ArrayExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const parsed = [];
+		for (let element of expression.elements) {
+			let value = convertExpressionToValue(element, model, isBackConvert, changedModel);
+			element.type == 'SpreadElement' ? parsed.push(...value) : parsed.push(value);
+		}
+		return parsed;
+	},
+	'BinaryExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		if (binaryOperators[expression.operator] == null) {
+			throw new Error('Disallowed binary operator: ' + expression.operator);
+		}
+
+		const left = convertExpressionToValue(expression.left, model, isBackConvert, changedModel);
+		const right = convertExpressionToValue(expression.right, model, isBackConvert, changedModel);
+
+		if (expression.operator == '|') {
+			if (right != null && isFunction(right.callback) && right.context != null && right.args != null) {
+				right.args.unshift(left);
+				return right.callback.apply(right.context, right.args);
+			}
+			throw new Error('Invalid converter after ' + expression.operator + ' operator');
+		}
+
+		return binaryOperators[expression.operator](left, right);
+	},
+	'CallExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		let object;
+		let property;
+		if (expression.callee.type == 'MemberExpression') {
+			object = convertExpressionToValue(expression.callee.object, model, isBackConvert, changedModel);
+			property = expression.callee.computed ? convertExpressionToValue(expression.callee.property, model, isBackConvert, changedModel) : expression.callee.property?.name;
+		} else {
+			object = getContext(expression.callee.name, model, changedModel);
+			property = expression.callee?.name;
+		}
+
+		const callback = expression.callee.optional ? object?.[property] : object[property];
+		if (isNullOrUndefined(callback)) {
+			throw new Error('Cannot perform a call using a null or undefined property');
+		}
+
+		const isConverter = isObject(callback) && (isFunction(callback.toModel) || isFunction(callback.toView));
+		if (!isFunction(callback) && !isConverter) {
+			throw new Error('Cannot perform a call using a non-callable property');
+		}
+
+		const parsedArgs = [];
+		for (let argument of expression.arguments) {
+			let value = convertExpressionToValue(argument, model, isBackConvert, changedModel);
+			argument.type == 'SpreadElement' ? parsedArgs.push(...value) : parsedArgs.push(value);
+		}
+		return isConverter ? getConverter(callback, object, parsedArgs, isBackConvert) : callback.apply(object, parsedArgs);
+	},
+	'ChainExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		return convertExpressionToValue(expression.expression, model, isBackConvert, changedModel);
+	},
+	'ConditionalExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const test = convertExpressionToValue(expression.test, model, isBackConvert, changedModel);
+		return convertExpressionToValue(expression[test ? 'consequent' : 'alternate'], model, isBackConvert, changedModel);
+	},
+	'Identifier': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const context = getContext(expression.name, model, changedModel);
+		return context[expression.name];
+	},
+	'Literal': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		return expression.regex != null ? new RegExp(expression.regex.pattern, expression.regex.flags) : expression.value;
+	},
+	'LogicalExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		if (logicalOperators[expression.operator] == null) {
+			throw new Error('Disallowed logical operator: ' + expression.operator);
+		}
+		const left = convertExpressionToValue(expression.left, model, isBackConvert, changedModel);
+		return logicalOperators[expression.operator](left, () => convertExpressionToValue(expression.right, model, isBackConvert, changedModel));
+	},
+	'MemberExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const object = convertExpressionToValue(expression.object, model, isBackConvert, changedModel);
+		const property = expression.computed ? convertExpressionToValue(expression.property, model, isBackConvert, changedModel) : expression.property?.name;
+		return expression.optional ? object?.[property] : object[property];
+	},
+	'NewExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const callback = convertExpressionToValue(expression.callee, model, isBackConvert, changedModel);
+		const parsedArgs = [];
+		for (let argument of expression.arguments) {
+			let value = convertExpressionToValue(argument, model, isBackConvert, changedModel);
+			argument.type == 'SpreadElement' ? parsedArgs.push(...value) : parsedArgs.push(value);
+		}
+		return new callback(...parsedArgs);
+	},
+	'ObjectExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const parsedObject = {};
+		for (let property of expression.properties) {
+			const value = convertExpressionToValue(property, model, isBackConvert, changedModel);
+			Object.assign(parsedObject, value);
+		}
+		return parsedObject;
+	},
+	'Property': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const key = expression.computed ? convertExpressionToValue(expression.key, model, isBackConvert, changedModel) : expression.key?.name;
+		const value = convertExpressionToValue(expression.value, model, isBackConvert, changedModel);
+		return {[key]: value};
+	},
+	'SpreadElement': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		const argument = convertExpressionToValue(expression.argument, model, isBackConvert, changedModel);
+		return argument;
+	},
+	'TemplateElement': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		return expression.value.cooked;
+	},
+	'TemplateLiteral': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		let parsedText = '';
+		for (let q of expression.quasis) {
+			parsedText += convertExpressionToValue(q, model, isBackConvert, changedModel);
+		}
+
+		for (let ex of expression.expressions) {
+			parsedText += convertExpressionToValue(ex, model, isBackConvert, changedModel);
+		}
+		return parsedText;
+	},
+	'UnaryExpression': (expression: ASTExpression, model, isBackConvert: boolean, changedModel) => {
+		if (unaryOperators[expression.operator] == null) {
+			throw Error('Disallowed unary operator: ' + expression.operator);
+		}
+
+		const argument = convertExpressionToValue(expression.argument, model, isBackConvert, changedModel);
+		return unaryOperators[expression.operator](argument);
+	}
+};
+
+function getContext(key, model, changedModel) {
+	let context = key in changedModel ? changedModel : model;
+	if (!(key in context)) {
+		context = global;
+	}
+	return context;
+}
+
+function getConverter(converterSchema, context, args, isBackConvert: boolean) {
+	const converter = { callback: null, context, args };
+	let callback = isBackConvert ? converterSchema.toModel : converterSchema.toView;
+	if (callback == null) {
+		callback = Function.prototype;
+	}
+	converter.callback = callback;
+	return converter;
+}
+
+export function parseExpression(expressionText: string): ASTExpression {
+	let expression = expressionsCache[expressionText];
+	if (expression == null) {
+		const program: any = parse(expressionText, { ecmaVersion: 2020 });
+		const statements = program.body;
+		for (let statement of statements) {
+			if (statement.type == 'ExpressionStatement') {
+				expression = statement.expression;
+				break;
+			}
+		}
+		expressionsCache[expressionText] = expression;
+	}
+	return expression;
+}
+
+export function convertExpressionToValue(expression: ASTExpression, model, isBackConvert: boolean, changedModel) {
+	return expressionParsers[expression.type](expression, model, isBackConvert, changedModel);
+}
diff --git a/packages/core/ui/core/bindable/index.ts b/packages/core/ui/core/bindable/index.ts
index d0dad11f60..1e22e04585 100644
--- a/packages/core/ui/core/bindable/index.ts
+++ b/packages/core/ui/core/bindable/index.ts
@@ -8,10 +8,9 @@ import { addWeakEventListener, removeWeakEventListener } from '../weak-event-lis
 import { bindingConstants, parentsRegex } from '../../builder/binding-builder';
 import { escapeRegexSymbols } from '../../../utils';
 import { Trace } from '../../../trace';
+import { parseExpression, convertExpressionToValue } from './bindable-expressions';
 import * as types from '../../../utils/types';
 import * as bindableResources from './bindable-resources';
-const polymerExpressions = require('../../../js-libs/polymer-expressions');
-import { PolymerExpressions } from '../../../js-libs/polymer-expressions';
 
 const contextKey = 'context';
 // this regex is used to get parameters inside [] for example:
@@ -360,7 +359,7 @@ export class Binding {
 			}
 
 			const updateExpression = this.prepareExpressionForUpdate();
-			this.prepareContextForExpression(changedModel, updateExpression, undefined);
+			this.prepareContextForExpression(changedModel, updateExpression);
 
 			const expressionValue = this._getExpressionValue(updateExpression, true, changedModel);
 			if (expressionValue instanceof Error) {
@@ -374,13 +373,21 @@ export class Binding {
 	}
 
 	private _getExpressionValue(expression: string, isBackConvert: boolean, changedModel: any): any {
+		let result: any = '';
+
 		if (!__UI_USE_EXTERNAL_RENDERER__) {
+			let context;
+			const addedProps = [];
 			try {
-				const exp = PolymerExpressions.getExpression(expression);
+				let exp;
+				try {
+					exp = parseExpression(expression);
+				} catch (e) {
+					result = e;
+				}
+
 				if (exp) {
-					const context = (this.source && this.source.get && this.source.get()) || global;
-					const model = {};
-					const addedProps = [];
+					context = (this.source && this.source.get && this.source.get()) || global;
 					const resources = bindableResources.get();
 					for (const prop in resources) {
 						if (resources.hasOwnProperty(prop) && !context.hasOwnProperty(prop)) {
@@ -389,26 +396,27 @@ export class Binding {
 						}
 					}
 
-					this.prepareContextForExpression(context, expression, addedProps);
-					model[contextKey] = context;
-					const result = exp.getValue(model, isBackConvert, changedModel ? changedModel : model);
-					// clear added props
-					const addedPropsLength = addedProps.length;
-					for (let i = 0; i < addedPropsLength; i++) {
-						delete context[addedProps[i]];
+					// For expressions, there are also cases when binding must be updated after component is loaded (e.g. ListView)
+					if (this.prepareContextForExpression(context, expression, addedProps)) {
+						result = convertExpressionToValue(exp, context, isBackConvert, changedModel ? changedModel : context);
+					} else {
+						const targetInstance = this.target.get();
+						targetInstance.off('loaded', this.loadedHandlerVisualTreeBinding, this);
+						targetInstance.on('loaded', this.loadedHandlerVisualTreeBinding, this);
 					}
-					addedProps.length = 0;
-
-					return result;
 				}
-
-				return new Error(expression + ' is not a valid expression.');
 			} catch (e) {
 				const errorMessage = 'Run-time error occured in file: ' + e.sourceURL + ' at line: ' + e.line + ' and column: ' + e.column;
+				result = new Error(errorMessage);
+			}
 
-				return new Error(errorMessage);
+			// Clear added props
+			for (let prop of addedProps) {
+				delete context[prop];
 			}
+			addedProps.length = 0;
 		}
+		return result;
 	}
 
 	public onSourcePropertyChanged(data: PropertyChangeData) {
@@ -472,24 +480,24 @@ export class Binding {
 		}
 	}
 
-	private prepareContextForExpression(model: Object, expression: string, newProps: Array<string>) {
+	private prepareContextForExpression(model: Object, expression: string, addedProps = []) {
+		const targetInstance = this.target.get();
+
+		let success = true;
 		let parentViewAndIndex: { view: ViewBase; index: number };
 		let parentView;
-		const addedProps = newProps || [];
 		let expressionCP = expression;
 		if (expressionCP.indexOf(bc.bindingValueKey) > -1) {
 			model[bc.bindingValueKey] = model;
 			addedProps.push(bc.bindingValueKey);
 		}
 
-		let success = true;
-
 		const parentsArray = expressionCP.match(parentsRegex);
 		if (parentsArray) {
 			for (let i = 0; i < parentsArray.length; i++) {
 				// This prevents later checks to mistake $parents[] for $parent
 				expressionCP = expressionCP.replace(parentsArray[i], '');
-				parentViewAndIndex = this.getParentView(this.target.get(), parentsArray[i]);
+				parentViewAndIndex = this.getParentView(targetInstance, parentsArray[i]);
 				if (parentViewAndIndex.view) {
 					model[bc.parentsValueKey] = model[bc.parentsValueKey] || {};
 					model[bc.parentsValueKey][parentViewAndIndex.index] = parentViewAndIndex.view.bindingContext;
@@ -501,7 +509,7 @@ export class Binding {
 		}
 
 		if (expressionCP.indexOf(bc.parentValueKey) > -1) {
-			parentView = this.getParentView(this.target.get(), bc.parentValueKey).view;
+			parentView = this.getParentView(targetInstance, bc.parentValueKey).view;
 			if (parentView) {
 				model[bc.parentValueKey] = parentView.bindingContext;
 				addedProps.push(bc.parentValueKey);
@@ -509,13 +517,7 @@ export class Binding {
 				success = false;
 			}
 		}
-
-		// For expressions, there are also cases when binding must be updated after component is loaded (e.g. ListView)
-		if (!success) {
-			const targetInstance = this.target.get();
-			targetInstance.off('loaded', this.loadedHandlerVisualTreeBinding, this);
-			targetInstance.on('loaded', this.loadedHandlerVisualTreeBinding, this);
-		}
+		return success;
 	}
 
 	private getSourcePropertyValue() {
diff --git a/packages/core/ui/core/view-base/index.d.ts b/packages/core/ui/core/view-base/index.d.ts
index b64af3aef1..056357e227 100644
--- a/packages/core/ui/core/view-base/index.d.ts
+++ b/packages/core/ui/core/view-base/index.d.ts
@@ -229,6 +229,16 @@ export abstract class ViewBase extends Observable {
 	 */
 	public static unloadedEvent: string;
 
+	/**
+	 * String value used when hooking to creation event
+	 */
+	public static createdEvent: string;
+
+	/**
+	 * String value used when hooking to disposeNativeView event
+	 */
+	public static disposeNativeViewEvent: string;
+
 	public ios: any;
 	public android: any;
 
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
index fcce724276..efca848ce9 100644
--- a/packages/core/ui/core/view-base/index.ts
+++ b/packages/core/ui/core/view-base/index.ts
@@ -248,6 +248,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	public static loadedEvent = 'loaded';
 	public static unloadedEvent = 'unloaded';
 	public static createdEvent = 'created';
+	public static disposeNativeViewEvent = 'disposeNativeView';
 
 	private _onLoadedCalled = false;
 	private _onUnloadedCalled = false;
@@ -763,7 +764,10 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	}
 
 	public disposeNativeView() {
-		//
+		this.notify({
+			eventName: ViewBase.disposeNativeViewEvent,
+			object: this,
+		});
 	}
 
 	public initNativeView(): void {
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 15f4645808..afbc20380f 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -4,7 +4,7 @@ import type { GestureTypes, GestureEventData } from '../../gestures';
 
 // Types.
 import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty } from './view-common';
-import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../../styling/style-properties';
 import { layout } from '../../../utils';
 import { Trace } from '../../../trace';
 import { ShowModalOptions, hiddenProperty } from '../view-base';
@@ -13,7 +13,7 @@ import { EventData } from '../../../data/observable';
 import { perspectiveProperty, visibilityProperty, opacityProperty, horizontalAlignmentProperty, verticalAlignmentProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, androidElevationProperty, androidDynamicElevationOffsetProperty } from '../../styling/style-properties';
 import { CoreTypes } from '../../../core-types';
 
-import { Background, ad as androidBackground } from '../../styling/background';
+import { Background, BackgroundClearFlags, refreshBorderDrawable } from '../../styling/background';
 import { profile } from '../../../profiling';
 import { topmost } from '../../frame/frame-stack';
 import { Screen } from '../../../platform';
@@ -23,6 +23,7 @@ import lazy from '../../../utils/lazy';
 import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty } from '../../../accessibility/accessibility-properties';
 import { AccessibilityLiveRegion, AccessibilityRole, AndroidAccessibilityEvent, setupAccessibleView, isAccessibilityServiceEnabled, sendAccessibilityEvent, updateAccessibilityProperties, updateContentDescription, AccessibilityState } from '../../../accessibility';
 import * as Utils from '../../../utils';
+import { CSSShadow } from '../../styling/css-shadow';
 
 export * from './view-common';
 // helpers (these are okay re-exported here)
@@ -56,6 +57,10 @@ const modalMap = new Map<number, DialogOptions>();
 let TouchListener: TouchListener;
 let DialogFragment: DialogFragment;
 
+interface AndroidView {
+	_cachedDrawable: android.graphics.drawable.Drawable.ConstantState | android.graphics.drawable.Drawable;
+}
+
 interface DialogOptions {
 	owner: View;
 	fullscreen: boolean;
@@ -307,6 +312,7 @@ export class View extends ViewCommon {
 
 	public _dialogFragment: androidx.fragment.app.DialogFragment;
 	public _manager: androidx.fragment.app.FragmentManager;
+	public _parentFragment: androidx.fragment.app.Fragment;
 	private _isClickable: boolean;
 	private touchListenerIsSet: boolean;
 	private touchListener: android.view.View.OnTouchListener;
@@ -354,6 +360,10 @@ export class View extends ViewCommon {
 		return null;
 	}
 
+	public _getFragment(): androidx.fragment.app.Fragment {
+		return null;
+	}
+
 	public _getRootFragmentManager(): androidx.fragment.app.FragmentManager {
 		if (!this._rootManager && this._context) {
 			this._rootManager = (<androidx.fragment.app.FragmentActivity>this._context).getSupportFragmentManager();
@@ -362,6 +372,14 @@ export class View extends ViewCommon {
 		return this._rootManager;
 	}
 
+	public _getFragmentLifecycle() {
+		// ensure we get the parent fragment
+		this._getFragmentManager();
+		if (this._parentFragment) {
+			return this._parentFragment.getLifecycle();
+		}
+	}
+
 	public _getFragmentManager(): androidx.fragment.app.FragmentManager {
 		let manager = this._manager;
 		if (!manager) {
@@ -377,6 +395,7 @@ export class View extends ViewCommon {
 				const dialogFragment = view._dialogFragment;
 				if (dialogFragment) {
 					manager = dialogFragment.getChildFragmentManager();
+					this._parentFragment = dialogFragment;
 					break;
 				}
 
@@ -387,6 +406,7 @@ export class View extends ViewCommon {
 				if (view._hasFragments) {
 					if (frameOrTabViewItemFound) {
 						manager = view._getChildFragmentManager();
+						this._parentFragment = view._getFragment();
 						break;
 					}
 
@@ -400,6 +420,7 @@ export class View extends ViewCommon {
 
 			if (!manager) {
 				manager = this._getRootFragmentManager();
+				this._parentFragment = null;
 			}
 
 			this._manager = manager;
@@ -1101,9 +1122,48 @@ export class View extends ViewCommon {
 		}
 	}
 
+	public _applyBackground(background: Background, isBorderDrawable: boolean, onlyColor: boolean, backgroundDrawable: any) {
+		const nativeView = this.nativeViewProtected;
+		if (!isBorderDrawable && onlyColor) {
+			if (backgroundDrawable && backgroundDrawable.setColor) {
+				// android.graphics.drawable.ColorDrawable
+				backgroundDrawable.setColor(background.color.android);
+				backgroundDrawable.invalidateSelf();
+			} else {
+				nativeView.setBackgroundColor(background.color.android);
+			}
+		} else if (!background.isEmpty()) {
+			if (isBorderDrawable) {
+				// org.nativescript.widgets.BorderDrawable
+				refreshBorderDrawable(this, backgroundDrawable);
+			} else {
+				backgroundDrawable = new org.nativescript.widgets.BorderDrawable(layout.getDisplayDensity(), this.toString());
+				refreshBorderDrawable(this, backgroundDrawable);
+				nativeView.setBackground(backgroundDrawable);
+			}
+		} else {
+			//empty background let's reset
+			const cachedDrawable = (<any>nativeView)._cachedDrawable;
+			nativeView.setBackground(cachedDrawable);
+		}
+	}
+
+	protected _drawBoxShadow(boxShadow: CSSShadow) {
+		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),
+		};
+		org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
+	}
+
 	_redrawNativeBackground(value: android.graphics.drawable.Drawable | Background): void {
 		if (value instanceof Background) {
-			androidBackground.onBackgroundOrBorderPropertyChanged(this);
+			this.onBackgroundOrBorderPropertyChanged();
 		} else {
 			const nativeView = this.nativeViewProtected;
 			nativeView.setBackground(value);
@@ -1119,9 +1179,61 @@ export class View extends ViewCommon {
 			} else {
 				nativeView.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);
 			}
+		}
+	}
+
+	protected onBackgroundOrBorderPropertyChanged() {
+		const nativeView = <android.view.View & { _cachedDrawable: android.graphics.drawable.Drawable.ConstantState | android.graphics.drawable.Drawable }>this.nativeViewProtected;
+		if (!nativeView) {
+			return;
+		}
+
+		const background = this.style.backgroundInternal;
+
+		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW || background.clearFlags & BackgroundClearFlags.CLEAR_BACKGROUND_COLOR) {
+			// clear background if we're clearing the box shadow
+			// or the background has been removed
+			nativeView.setBackground(null);
+		}
+
+		const drawable = nativeView.getBackground();
+		const androidView = (<any>this) as AndroidView;
+		// use undefined as not set. getBackground will never return undefined only Drawable or null;
+		if (androidView._cachedDrawable === undefined && drawable) {
+			const constantState = drawable.getConstantState();
+			androidView._cachedDrawable = constantState || drawable;
+		}
+		const isBorderDrawable = drawable instanceof org.nativescript.widgets.BorderDrawable;
+
+		// prettier-ignore
+		const onlyColor = !background.hasBorderWidth() 
+			&& !background.hasBorderRadius() 
+			&& !background.hasBoxShadow() 
+			&& !background.clipPath 
+			&& !background.image 
+			&& !!background.color;
+
+		this._applyBackground(background, isBorderDrawable, onlyColor, drawable);
 
-			(<any>nativeView).background = undefined;
+		if (background.hasBoxShadow()) {
+			this._drawBoxShadow(background.getBoxShadow());
 		}
+
+		// TODO: Can we move BorderWidths as separate native setter?
+		// This way we could skip setPadding if borderWidth is not changed.
+		const leftPadding = Math.ceil(this.effectiveBorderLeftWidth + this.effectivePaddingLeft);
+		const topPadding = Math.ceil(this.effectiveBorderTopWidth + this.effectivePaddingTop);
+		const rightPadding = Math.ceil(this.effectiveBorderRightWidth + this.effectivePaddingRight);
+		const bottomPadding = Math.ceil(this.effectiveBorderBottomWidth + this.effectivePaddingBottom);
+
+		if (this._isPaddingRelative) {
+			nativeView.setPaddingRelative(leftPadding, topPadding, rightPadding, bottomPadding);
+		} else {
+			nativeView.setPadding(leftPadding, topPadding, rightPadding, bottomPadding);
+		}
+
+		// reset clear flags
+		background.clearFlags = BackgroundClearFlags.NONE;
 	}
 
 	public accessibilityAnnouncement(message = this.accessibilityLabel): void {
diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts
index f4d6a24457..cfcdcf6c69 100644
--- a/packages/core/ui/core/view/index.d.ts
+++ b/packages/core/ui/core/view/index.d.ts
@@ -4,11 +4,13 @@ import { EventData } from '../../../data/observable';
 import { Color } from '../../../color';
 import { Animation, AnimationDefinition, AnimationPromise } from '../../animation';
 import { GestureTypes, GesturesObserver } from '../../gestures';
-import { LinearGradient } from '../../styling/gradient';
+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 { ViewCommon } from './view-common';
 
+export * from './view-common';
 // helpers (these are okay re-exported here)
 export * from './view-helper';
 
@@ -99,7 +101,7 @@ export interface ShownModallyData extends EventData {
  * This class is the base class for all UI components.
  * A View occupies a rectangular area on the screen and is responsible for drawing and layouting of all UI components within.
  */
-export abstract class View extends ViewBase {
+export abstract class View extends ViewCommon {
 	/**
 	 * String value used when hooking to layoutChanged event.
 	 */
@@ -828,6 +830,12 @@ export abstract class View extends ViewBase {
 	 * @private
 	 */
 	_redrawNativeBackground(value: any): void;
+	/**
+	 * @private
+	 *  method called on Android to apply the background. This allows custom handling
+	 */
+	_applyBackground(background: Background, isBorderDrawable: boolean, onlyColor: boolean, backgroundDrawable: any);
+
 	/**
 	 * @private
 	 */
@@ -840,6 +848,17 @@ export abstract class View extends ViewBase {
 	 * @private
 	 */
 	_getFragmentManager(): any; /* androidx.fragment.app.FragmentManager */
+
+	/**
+	 * @private
+	 */
+	_getFragmentLifecycle(): any; /* androidx.fragment.app.FragmentManager */
+
+	/**
+	 * @private
+	 */
+	_getFragment(): any; /* androidx.fragment.app.FragmentManager */
+
 	_handleLivesync(context?: { type: string; path: string }): boolean;
 
 	/**
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index 2b2ff610d4..6e3d300cfb 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/packages/core/ui/core/view/view-common.ts
@@ -4,6 +4,7 @@ import { View as ViewDefinition, Point, Size, ShownModallyData } from '.';
 import { booleanConverter, ShowModalOptions, ViewBase } from '../view-base';
 import { getEventOrGestureName } from '../bindable';
 import { layout } from '../../../utils';
+import { isObject } from '../../../utils/types';
 import { Color } from '../../../color';
 import { Property, InheritedProperty } from '../properties';
 import { EventData } from '../../../data/observable';
@@ -13,7 +14,7 @@ import { ViewHelper } from './view-helper';
 
 import { PercentLength } from '../../styling/style-properties';
 
-import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData, fromString as gestureFromString } from '../../gestures';
+import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEventData, fromString as gestureFromString, TouchManager, TouchAnimationOptions } from '../../gestures';
 
 import { CSSUtils } from '../../../css/system-classes';
 import { Builder } from '../../builder';
@@ -81,6 +82,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public accessibilityValue: string;
 	public accessibilityHint: string;
 
+	public touchAnimation: boolean | TouchAnimationOptions;
+	public ignoreTouchAnimation: boolean;
+
 	protected _closeModalCallback: Function;
 	public _manager: any;
 	public _modalParent: ViewCommon;
@@ -153,6 +157,17 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		}
 	}
 
+	onLoaded() {
+		if (!this.isLoaded) {
+			const enableTapAnimations = TouchManager.enableGlobalTapAnimations && (this.hasListeners('tap') || this.hasListeners('tapChange') || this.getGestureObservers(GestureTypes.tap));
+			if (!this.ignoreTouchAnimation && (this.touchAnimation || enableTapAnimations)) {
+				// console.log('view:', Object.keys((<any>this)._observers));
+				TouchManager.addAnimations(this);
+			}
+		}
+		super.onLoaded();
+	}
+
 	public _closeAllModalViewsInternal(): boolean {
 		if (_rootModalViews && _rootModalViews.length > 0) {
 			_rootModalViews.forEach((v) => {
@@ -309,6 +324,13 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		return undefined;
 	}
 
+	public _getFragmentLifecycle(): any {
+		return undefined;
+	}
+	public _getFragment(): any {
+		return undefined;
+	}
+
 	private getModalOptions(args: any[]): { view: ViewCommon; options: ShowModalOptions } {
 		if (args.length === 0) {
 			throw new Error('showModal without parameters is deprecated. Please call showModal on a view instance instead.');
@@ -399,7 +421,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		};
 	}
 
-	protected abstract _hideNativeModalView(parent: ViewCommon, whenClosedCallback: () => void);
+	protected _hideNativeModalView(parent: ViewCommon, whenClosedCallback: () => void) {}
 
 	protected _raiseLayoutChangedEvent() {
 		const args: EventData = {
@@ -1067,6 +1089,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public _redrawNativeBackground(value: any): void {
 		//
 	}
+	public _applyBackground(background, isBorderDrawable: boolean, onlyColor: boolean, backgroundDrawable: any) {
+		//
+	}
 
 	_onAttachedToWindow(): void {
 		//
@@ -1151,6 +1176,31 @@ export const iosIgnoreSafeAreaProperty = new InheritedProperty({
 	valueConverter: booleanConverter,
 });
 iosIgnoreSafeAreaProperty.register(ViewCommon);
+
+const touchAnimationProperty = new Property<ViewCommon, boolean | TouchAnimationOptions>({
+	name: 'touchAnimation',
+	valueChanged(view, oldValue, newValue) {
+		view.touchAnimation = newValue;
+	},
+	valueConverter(value) {
+		if (isObject(value)) {
+			return <TouchAnimationOptions>value;
+		} else {
+			return booleanConverter(value);
+		}
+	},
+});
+touchAnimationProperty.register(ViewCommon);
+
+const ignoreTouchAnimationProperty = new Property<ViewCommon, boolean>({
+	name: 'ignoreTouchAnimation',
+	valueChanged(view, oldValue, newValue) {
+		view.ignoreTouchAnimation = newValue;
+	},
+	valueConverter: booleanConverter,
+});
+ignoreTouchAnimationProperty.register(ViewCommon);
+
 accessibilityIdentifierProperty.register(ViewCommon);
 accessibilityLabelProperty.register(ViewCommon);
 accessibilityValueProperty.register(ViewCommon);
diff --git a/packages/core/ui/frame/fragment.android.ts b/packages/core/ui/frame/fragment.android.ts
index a7233f115c..2a01119f19 100644
--- a/packages/core/ui/frame/fragment.android.ts
+++ b/packages/core/ui/frame/fragment.android.ts
@@ -19,6 +19,10 @@ const FragmentClass = (<any>org.nativescript.widgets.FragmentBase).extend('com.t
 		this._callbacks.onPause(this, superProto.onPause);
 	},
 
+	onResume(): void {
+		this._callbacks.onResume(this, superProto.onResume);
+	},
+
 	onCreate(savedInstanceState: android.os.Bundle) {
 		if (!this._callbacks) {
 			setFragmentCallbacks(this);
diff --git a/packages/core/ui/frame/fragment.transitions.android.ts b/packages/core/ui/frame/fragment.transitions.android.ts
index 6fdc9bb132..61d2699127 100644
--- a/packages/core/ui/frame/fragment.transitions.android.ts
+++ b/packages/core/ui/frame/fragment.transitions.android.ts
@@ -51,6 +51,7 @@ export interface ExpandedEntry extends BackstackEntry {
 	frameId: number;
 
 	isNestedDefaultTransition: boolean;
+	isAnimationRunning: boolean;
 }
 
 export function _setAndroidFragmentTransitions(animated: boolean, navigationTransition: NavigationTransition, currentEntry: ExpandedEntry, newEntry: ExpandedEntry, frameId: number, fragmentTransaction: androidx.fragment.app.FragmentTransaction, isNestedDefaultTransition?: boolean): void {
@@ -60,6 +61,7 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
 	if (entries && entries.size > 0) {
 		throw new Error('Calling navigation before previous navigation finish.');
 	}
+	newEntry.isAnimationRunning = false;
 
 	allowTransitionOverlap(currentFragment);
 	allowTransitionOverlap(newFragment);
@@ -93,15 +95,25 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
 	if (name === 'none') {
 		const noTransition = new NoTransition(0, null);
 
-		// Setup empty/immediate animator when transitioning to nested frame for first time.
-		// Also setup empty/immediate transition to be executed when navigating back to this page.
-		// TODO: Consider removing empty/immediate animator when migrating to official androidx.fragment.app.Fragment:1.2.
-		if (isNestedDefaultTransition) {
-			fragmentTransaction.setCustomAnimations(animFadeIn, animFadeOut);
-			setupAllAnimation(newEntry, noTransition);
-			setupNewFragmentCustomTransition({ duration: 0, curve: null }, newEntry, noTransition);
+		if ((<any>androidx.fragment.app.FragmentManager).enableNewStateManager) {
+			// androidx.fragment 1.3.0+
+			if (isNestedDefaultTransition) {
+				setTimeout(() => {
+					addToWaitingQueue(newEntry);
+					transitionOrAnimationCompleted(newEntry, null);
+				});
+			}
 		} else {
-			setupNewFragmentCustomTransition({ duration: 0, curve: null }, newEntry, noTransition);
+			// Setup empty/immediate animator when transitioning to nested frame for first time.
+			// Also setup empty/immediate transition to be executed when navigating back to this page.
+			// TODO: Consider removing empty/immediate animator when migrating to official androidx.fragment.app.Fragment:1.2.
+			if (isNestedDefaultTransition) {
+				fragmentTransaction.setCustomAnimations(animFadeIn, animFadeOut);
+				setupAllAnimation(newEntry, noTransition);
+				setupNewFragmentCustomTransition({ duration: 0, curve: null }, newEntry, noTransition);
+			} else {
+				setupNewFragmentCustomTransition({ duration: 0, curve: null }, newEntry, noTransition);
+			}
 		}
 
 		newEntry.isNestedDefaultTransition = isNestedDefaultTransition;
@@ -227,6 +239,7 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
 				if (Trace.isEnabled()) {
 					Trace.write(`START ${animator.transitionType} for ${entry.fragmentTag}`, Trace.categories.Transition);
 				}
+				entry.isAnimationRunning = true;
 			}
 
 			onAnimationRepeat(animator: ExpandedAnimator): void {
@@ -239,6 +252,7 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
 				if (Trace.isEnabled()) {
 					Trace.write(`END ${animator.transitionType} for ${animator.entry.fragmentTag}`, Trace.categories.Transition);
 				}
+				animator.entry.isAnimationRunning = false;
 				transitionOrAnimationCompleted(animator.entry, animator.backEntry);
 			}
 
@@ -246,6 +260,7 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
 				if (Trace.isEnabled()) {
 					Trace.write(`CANCEL ${animator.transitionType} for ${animator.entry.fragmentTag}`, Trace.categories.Transition);
 				}
+				animator.entry.isAnimationRunning = false;
 			}
 		}
 
@@ -664,22 +679,23 @@ function transitionOrAnimationCompleted(entry: ExpandedEntry, backEntry: Backsta
 	entries.delete(entry);
 	if (entries.size === 0) {
 		const frame = entry.resolvedPage.frame;
-
-		// We have 0 or 1 entry per frameId in completedEntries
-		// So there is no need to make it to Set like waitingQueue
-		const previousCompletedAnimationEntry = completedEntries.get(frameId);
-		completedEntries.delete(frameId);
-		waitingQueue.delete(frameId);
-
-		const navigationContext = frame._executingContext || {
-			navigationType: NavigationType.back,
-		};
-		let current = frame.isCurrent(entry) ? previousCompletedAnimationEntry : entry;
-		current = current || entry;
-		// Will be null if Frame is shown modally...
-		// transitionOrAnimationCompleted fires again (probably bug in android).
-		if (current) {
-			setTimeout(() => frame.setCurrent(backEntry || current, navigationContext.navigationType));
+		if (frame) {
+			// We have 0 or 1 entry per frameId in completedEntries
+			// So there is no need to make it to Set like waitingQueue
+			const previousCompletedAnimationEntry = completedEntries.get(frameId);
+			completedEntries.delete(frameId);
+			waitingQueue.delete(frameId);
+
+			const navigationContext = frame._executingContext || {
+				navigationType: NavigationType.back,
+			};
+			let current = frame.isCurrent(entry) ? previousCompletedAnimationEntry : entry;
+			current = current || entry;
+			// Will be null if Frame is shown modally...
+			// transitionOrAnimationCompleted fires again (probably bug in android).
+			if (current) {
+				setTimeout(() => frame.setCurrent(backEntry || current, navigationContext.navigationType));
+			}
 		}
 	} else {
 		completedEntries.set(frameId, entry);
diff --git a/packages/core/ui/frame/index.android.ts b/packages/core/ui/frame/index.android.ts
index 177d2b4c56..0fd85e24a7 100644
--- a/packages/core/ui/frame/index.android.ts
+++ b/packages/core/ui/frame/index.android.ts
@@ -77,6 +77,26 @@ function getAttachListener(): android.view.View.OnAttachStateChangeListener {
 	return attachStateChangeListener;
 }
 
+function waitUntilReady(lifecycle: androidx.lifecycle.Lifecycle, resolve: (v: boolean) => unknown, targetState = androidx.lifecycle.Lifecycle.State.RESUMED) {
+	if (!lifecycle || lifecycle.getCurrentState().isAtLeast(targetState)) {
+		resolve(true);
+		return;
+	}
+	const observer = new androidx.lifecycle.LifecycleEventObserver({
+		onStateChanged: (source: androidx.lifecycle.LifecycleOwner, event: androidx.lifecycle.Lifecycle.Event) => {
+			if (lifecycle.getCurrentState().isAtLeast(targetState)) {
+				lifecycle.removeObserver(observer);
+				resolve(true);
+			}
+			if (event === androidx.lifecycle.Lifecycle.Event.ON_DESTROY) {
+				lifecycle.removeObserver(observer);
+				resolve(false);
+			}
+		},
+	});
+	lifecycle.addObserver(observer);
+}
+
 export class Frame extends FrameBase {
 	public _originalBackground: any;
 	private _android: AndroidFrame;
@@ -158,7 +178,7 @@ export class Frame extends FrameBase {
 		this._attachedToWindow = false;
 	}
 
-	protected _processNextNavigationEntry(): void {
+	protected _processNextNavigationEntry(): any {
 		// In case activity was destroyed because of back button pressed (e.g. app exit)
 		// and application is restored from recent apps, current fragment isn't recreated.
 		// In this case call _navigateCore in order to recreate the current fragment.
@@ -176,7 +196,7 @@ export class Frame extends FrameBase {
 			}
 		}
 
-		const manager = this._getFragmentManager();
+		let manager = this._getFragmentManager();
 		const entry = this._currentEntry;
 		const isNewEntry = !this._cachedTransitionState || entry !== this._cachedTransitionState.entry;
 
@@ -208,6 +228,10 @@ export class Frame extends FrameBase {
 	}
 
 	public _getChildFragmentManager() {
+		return this._getFragment()?.getChildFragmentManager?.();
+	}
+
+	public _getFragment() {
 		let backstackEntry;
 		if (this._executingContext && this._executingContext.entry) {
 			backstackEntry = this._executingContext.entry;
@@ -216,7 +240,7 @@ export class Frame extends FrameBase {
 		}
 
 		if (backstackEntry && backstackEntry.fragment && backstackEntry.fragment.isAdded()) {
-			return backstackEntry.fragment.getChildFragmentManager();
+			return backstackEntry.fragment;
 		}
 
 		return null;
@@ -231,13 +255,29 @@ export class Frame extends FrameBase {
 		this.disposeCurrentFragment();
 	}
 
-	onLoaded(): void {
+	onLoaded() {
 		if (this._originalBackground) {
 			this.backgroundColor = null;
 			this.backgroundColor = this._originalBackground;
 			this._originalBackground = null;
 		}
 
+		setTimeout(() => {
+			// there's a bug with nested frames where sometimes the nested fragment is not recreated at all
+			// so we manually check on loaded event if the fragment is not recreated and recreate it
+			const currentEntry = this._currentEntry || this._executingContext?.entry;
+			if (currentEntry) {
+				if (!currentEntry.fragment) {
+					const manager = this._getFragmentManager();
+					const transaction = manager.beginTransaction();
+					currentEntry.fragment = this.createFragment(currentEntry, currentEntry.fragmentTag);
+					_updateTransitions(currentEntry);
+					transaction.replace(this.containerViewId, currentEntry.fragment, currentEntry.fragmentTag);
+					transaction.commitAllowingStateLoss();
+				}
+			}
+		}, 0);
+
 		super.onLoaded();
 	}
 
@@ -389,6 +429,8 @@ export class Frame extends FrameBase {
 		}
 
 		const manager: androidx.fragment.app.FragmentManager = this._getFragmentManager();
+		const lifecycle = this._getFragmentLifecycle();
+
 		const clearHistory = newEntry.entry.clearHistory;
 		const currentEntry = this._currentEntry;
 
@@ -405,30 +447,35 @@ export class Frame extends FrameBase {
 		fragmentId++;
 		const newFragmentTag = `fragment${fragmentId}[${navDepth}]`;
 		const newFragment = this.createFragment(newEntry, newFragmentTag);
-		const transaction = manager.beginTransaction();
-		let animated = currentEntry ? this._getIsAnimatedNavigation(newEntry.entry) : false;
-		// NOTE: Don't use transition for the initial navigation (same as on iOS)
-		// On API 21+ transition won't be triggered unless there was at least one
-		// layout pass so we will wait forever for transitionCompleted handler...
-		// https://github.com/NativeScript/NativeScript/issues/4895
-		let navigationTransition: NavigationTransition;
-		if (this._currentEntry) {
-			navigationTransition = this._getNavigationTransition(newEntry.entry);
-		} else {
-			navigationTransition = null;
-		}
+		waitUntilReady(lifecycle, (started: boolean) => {
+			if (!started) {
+				return;
+			}
+			const transaction = manager.beginTransaction();
+			let animated = currentEntry ? this._getIsAnimatedNavigation(newEntry.entry) : false;
+			// NOTE: Don't use transition for the initial navigation (same as on iOS)
+			// On API 21+ transition won't be triggered unless there was at least one
+			// layout pass so we will wait forever for transitionCompleted handler...
+			// https://github.com/NativeScript/NativeScript/issues/4895
+			let navigationTransition: NavigationTransition;
+			if (this._currentEntry) {
+				navigationTransition = this._getNavigationTransition(newEntry.entry);
+			} else {
+				navigationTransition = null;
+			}
 
-		const isNestedDefaultTransition = !currentEntry;
+			const isNestedDefaultTransition = !currentEntry;
 
-		_setAndroidFragmentTransitions(animated, navigationTransition, currentEntry, newEntry, this._android.frameId, transaction, isNestedDefaultTransition);
+			_setAndroidFragmentTransitions(animated, navigationTransition, currentEntry, newEntry, this._android.frameId, transaction, isNestedDefaultTransition);
 
-		if (currentEntry && animated && !navigationTransition) {
-			//TODO: Check whether or not this is still necessary. For Modal views?
-			//transaction.setTransition(androidx.fragment.app.FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
-		}
+			if (currentEntry && animated && !navigationTransition) {
+				//TODO: Check whether or not this is still necessary. For Modal views?
+				//transaction.setTransition(androidx.fragment.app.FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
+			}
 
-		transaction.replace(this.containerViewId, newFragment, newFragmentTag);
-		transaction.commitAllowingStateLoss();
+			transaction.replace(this.containerViewId, newFragment, newFragmentTag);
+			transaction.commitAllowingStateLoss();
+		});
 	}
 
 	public _goBackCore(backstackEntry: BackstackEntry) {
@@ -1002,6 +1049,19 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
 		}
 	}
 
+	@profile
+	public onResume(fragment: org.nativescript.widgets.FragmentBase, superFunc: Function): void {
+		const frame = this.entry.resolvedPage.frame;
+		// on some cases during the first navigation on nested frames the animation doesn't trigger
+		// we depend on the animation (even None animation) to set the entry as the current entry
+		// animation should start between start and resume, so if we have an executing navigation here it probably means the animation was skipped
+		// so we manually set the entry
+		if (frame._executingContext && !(<any>this.entry).isAnimationRunning) {
+			frame.setCurrent(this.entry, frame._executingContext.navigationType);
+		}
+		superFunc.call(fragment);
+	}
+
 	@profile
 	public onStop(fragment: androidx.fragment.app.Fragment, superFunc: Function): void {
 		superFunc.call(fragment);
diff --git a/packages/core/ui/frame/index.d.ts b/packages/core/ui/frame/index.d.ts
index 4b13d6926e..e541f4040a 100644
--- a/packages/core/ui/frame/index.d.ts
+++ b/packages/core/ui/frame/index.d.ts
@@ -476,6 +476,7 @@ export interface AndroidFragmentCallbacks {
 	onDestroyView(fragment: any, superFunc: Function): void;
 	onDestroy(fragment: any, superFunc: Function): void;
 	onPause(fragment: any, superFunc: Function): void;
+	onResume(fragment: any, superFunc: Function): void;
 	onStop(fragment: any, superFunc: Function): void;
 	toStringOverride(fragment: any, superFunc: Function): string;
 }
diff --git a/packages/core/ui/gestures/gestures-common.ts b/packages/core/ui/gestures/gestures-common.ts
index 5ccae2945a..0e3d617503 100644
--- a/packages/core/ui/gestures/gestures-common.ts
+++ b/packages/core/ui/gestures/gestures-common.ts
@@ -1,6 +1,14 @@
 import { GestureEventData, GesturesObserver as GesturesObserverDefinition } from '.';
 import { View } from '../core/view';
 
+export * from './touch-manager';
+
+export enum GestureEvents {
+	gestureAttached = 'gestureAttached',
+	touchDown = 'touchDown',
+	touchUp = 'touchUp',
+}
+
 export enum GestureTypes {
 	tap = 1 << 0,
 	doubleTap = 1 << 1,
diff --git a/packages/core/ui/gestures/index.android.ts b/packages/core/ui/gestures/index.android.ts
index 071f16d5bd..dba17dded0 100644
--- a/packages/core/ui/gestures/index.android.ts
+++ b/packages/core/ui/gestures/index.android.ts
@@ -4,7 +4,7 @@ import { View } from '../core/view';
 import { EventData } from '../../data/observable';
 
 // Types.
-import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from './gestures-common';
+import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection, GestureEvents } from './gestures-common';
 
 // Import layout from utils directly to avoid circular references
 import { layout } from '../../utils';
@@ -297,31 +297,41 @@ export class GesturesObserver extends GesturesObserverBase {
 	private _attach(target: View, type: GestureTypes) {
 		this._detach();
 
+		let recognizer;
+
 		if (type & GestureTypes.tap || type & GestureTypes.doubleTap || type & GestureTypes.longPress) {
 			initializeTapAndDoubleTapGestureListener();
-			this._simpleGestureDetector = <any>new androidx.core.view.GestureDetectorCompat(target._context, new TapAndDoubleTapGestureListener(this, this.target, type));
+			recognizer = this._simpleGestureDetector = <any>new androidx.core.view.GestureDetectorCompat(target._context, new TapAndDoubleTapGestureListener(this, this.target, type));
 		}
 
 		if (type & GestureTypes.pinch) {
 			initializePinchGestureListener();
-			this._scaleGestureDetector = new android.view.ScaleGestureDetector(target._context, new PinchGestureListener(this, this.target));
+			recognizer = this._scaleGestureDetector = new android.view.ScaleGestureDetector(target._context, new PinchGestureListener(this, this.target));
 		}
 
 		if (type & GestureTypes.swipe) {
 			initializeSwipeGestureListener();
-			this._swipeGestureDetector = <any>new androidx.core.view.GestureDetectorCompat(target._context, new SwipeGestureListener(this, this.target));
+			recognizer = this._swipeGestureDetector = <any>new androidx.core.view.GestureDetectorCompat(target._context, new SwipeGestureListener(this, this.target));
 		}
 
 		if (type & GestureTypes.pan) {
-			this._panGestureDetector = new CustomPanGestureDetector(this, this.target);
+			recognizer = this._panGestureDetector = new CustomPanGestureDetector(this, this.target);
 		}
 
 		if (type & GestureTypes.rotation) {
-			this._rotateGestureDetector = new CustomRotateGestureDetector(this, this.target);
+			recognizer = this._rotateGestureDetector = new CustomRotateGestureDetector(this, this.target);
 		}
 
 		if (type & GestureTypes.touch) {
 			this._notifyTouch = true;
+		} else {
+			this.target.notify({
+				eventName: GestureEvents.gestureAttached,
+				object: this.target,
+				type,
+				view: this.target,
+				ios: recognizer,
+			});
 		}
 	}
 
diff --git a/packages/core/ui/gestures/index.d.ts b/packages/core/ui/gestures/index.d.ts
index 8cb4e7066f..1f67a06f84 100644
--- a/packages/core/ui/gestures/index.d.ts
+++ b/packages/core/ui/gestures/index.d.ts
@@ -1,6 +1,27 @@
 import { View } from '../core/view';
 import { EventData } from '../../data/observable';
 
+export * from './touch-manager';
+
+/**
+ * Events emitted during gesture lifecycle
+ */
+export enum GestureEvents {
+	/**
+	 * When the gesture is attached to the view
+	 * Provides access to the native gesture recognizer for further customization
+	 */
+	gestureAttached = 'gestureAttached',
+	/**
+	 * When a touch down was detected
+	 */
+	touchDown = 'touchDown',
+	/**
+	 * When a touch up was detected
+	 */
+	touchUp = 'touchUp',
+}
+
 /**
  * Defines an enum with supported gesture types.
  */
diff --git a/packages/core/ui/gestures/index.ios.ts b/packages/core/ui/gestures/index.ios.ts
index 7042e99bcc..ec6ae4ce88 100644
--- a/packages/core/ui/gestures/index.ios.ts
+++ b/packages/core/ui/gestures/index.ios.ts
@@ -5,7 +5,7 @@ import { View } from '../core/view';
 import { EventData } from '../../data/observable';
 
 // Types.
-import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection } from './gestures-common';
+import { GesturesObserverBase, toString, TouchAction, GestureStateTypes, GestureTypes, SwipeDirection, GestureEvents } from './gestures-common';
 
 // Import layout from utils directly to avoid circular references
 import { layout } from '../../utils';
@@ -306,6 +306,14 @@ export class GesturesObserver extends GesturesObserverBase {
 					target: target,
 				};
 			}
+
+			this.target.notify({
+				eventName: GestureEvents.gestureAttached,
+				object: this.target,
+				type,
+				view: this.target,
+				ios: recognizer,
+			});
 		}
 
 		return recognizer;
@@ -348,7 +356,7 @@ function _getUIGestureRecognizerType(type: GestureTypes): any {
 function getState(recognizer: UIGestureRecognizer) {
 	if (recognizer.state === UIGestureRecognizerState.Began) {
 		return GestureStateTypes.began;
-	} else if (recognizer.state === UIGestureRecognizerState.Cancelled) {
+	} else if (recognizer.state === UIGestureRecognizerState.Cancelled || recognizer.state === UIGestureRecognizerState.Failed) {
 		return GestureStateTypes.cancelled;
 	} else if (recognizer.state === UIGestureRecognizerState.Changed) {
 		return GestureStateTypes.changed;
diff --git a/packages/core/ui/gestures/touch-manager.ts b/packages/core/ui/gestures/touch-manager.ts
new file mode 100644
index 0000000000..9a82672205
--- /dev/null
+++ b/packages/core/ui/gestures/touch-manager.ts
@@ -0,0 +1,252 @@
+/**
+ * Provides various helpers for adding easy touch handling animations.
+ * Use when needing to implement more interactivity with your UI regarding touch down/up behavior.
+ */
+import { GestureEventData, GestureEventDataWithState, TouchGestureEventData } from '.';
+import { Animation } from '../animation';
+import { AnimationDefinition } from '../animation/animation-interfaces';
+import { View } from '../core/view';
+import { isObject, isFunction } from '../../utils/types';
+import { GestureEvents, GestureStateTypes, GestureTypes } from './gestures-common';
+
+export type TouchAnimationFn = (view: View) => void;
+export type TouchAnimationOptions = {
+	up?: TouchAnimationFn | AnimationDefinition;
+	down?: TouchAnimationFn | AnimationDefinition;
+};
+export enum TouchAnimationTypes {
+	up = 'up',
+	down = 'down',
+}
+
+/**
+ * Manage interactivity in your apps easily with TouchManager.
+ * Store reusable down/up animation settings for touches as well as optionally enable automatic tap (down/up) animations for your app.
+ */
+export class TouchManager {
+	/**
+	 * Enable animations for all tap bindings in the UI.
+	 */
+	static enableGlobalTapAnimations: boolean;
+	/**
+	 * Define reusable touch animations to use on views with touchAnimation defined or with enableGlobalTapAnimations on.
+	 */
+	// Note: In the future, we may expand this to allow an Array of "named" animations to collect an entire suite of custom app animations. Combined with a new 'touch-action' CSS property which could indicate them by name, for example:
+	// .touch-grow {
+	//   touch-action: down-grow up-grow
+	// }
+	// TouchManager.animations = {
+	//   down: [
+	//      { name: grow, (view: View) => { /* animations */ } },
+	//      { name: pop, (view: View) => { /* animations */ } }
+	//   ],
+	//   up: [
+	//      { name: grow, (view: View) => { /* animations */ } },
+	//      { name: pop, (view: View) => { /* animations */ } }
+	//   ]
+	// }
+	static animations: TouchAnimationOptions;
+	/**
+	 * Native Touch handlers (iOS only) registered with the view through the TouchManager.
+	 * The TouchManager uses this internally but makes public for other versatility if needed.
+	 */
+	static touchHandlers: Array<{ view: View; handler: any /* UIGestureRecognizer */ }>;
+	/**
+	 * When using NativeScript AnimationDefinition's for touch animations this will contain any instances for finer grain control of starting/stopping under various circumstances.
+	 * The TouchManager uses this internally but makes public for other versatility if needed.
+	 */
+	static touchAnimationDefinitions: Array<{ view: View; animation: Animation; type: TouchAnimationTypes }>;
+	/**
+	 * The TouchManager uses this internally.
+	 * Adds touch animations to view based upon it's touchAnimation property or TouchManager.animations.
+	 * @param view NativeScript view instance
+	 */
+	static addAnimations(view: View) {
+		const handleDown = (view?.touchAnimation && (<TouchAnimationOptions>view?.touchAnimation).down) || (TouchManager.animations && TouchManager.animations.down);
+		const handleUp = (view?.touchAnimation && (<TouchAnimationOptions>view?.touchAnimation).up) || (TouchManager.animations && TouchManager.animations.up);
+
+		if (global.isIOS) {
+			if (view?.ios?.addTargetActionForControlEvents) {
+				// can use UIControlEvents
+				if (!TouchManager.touchHandlers) {
+					TouchManager.touchHandlers = [];
+				}
+				TouchManager.touchHandlers.push({
+					view,
+					handler: TouchControlHandler.initWithOwner(new WeakRef(view)),
+				});
+
+				if (handleDown) {
+					(<UIControl>view.ios).addTargetActionForControlEvents(TouchManager.touchHandlers[TouchManager.touchHandlers.length - 1].handler, GestureEvents.touchDown, UIControlEvents.TouchDown | UIControlEvents.TouchDragEnter);
+					view.on(GestureEvents.touchDown, (args) => {
+						TouchManager.startAnimationForType(view, TouchAnimationTypes.down);
+					});
+				}
+				if (handleUp) {
+					(<UIControl>view.ios).addTargetActionForControlEvents(TouchManager.touchHandlers[TouchManager.touchHandlers.length - 1].handler, GestureEvents.touchUp, UIControlEvents.TouchDragExit | UIControlEvents.TouchCancel | UIControlEvents.TouchUpInside | UIControlEvents.TouchUpOutside);
+					view.on(GestureEvents.touchUp, (args) => {
+						TouchManager.startAnimationForType(view, TouchAnimationTypes.up);
+					});
+				}
+			} else {
+				if (handleDown || handleUp) {
+					view.on(GestureEvents.gestureAttached, (args: GestureEventData) => {
+						if (args.type === GestureTypes.longPress) {
+							(<UILongPressGestureRecognizer>args.ios).minimumPressDuration = 0;
+						}
+					});
+					view.on(GestureTypes.longPress, (args: GestureEventDataWithState) => {
+						switch (args.state) {
+							case GestureStateTypes.began:
+								if (handleDown) {
+									TouchManager.startAnimationForType(<View>args.view, TouchAnimationTypes.down);
+								}
+								break;
+							case GestureStateTypes.cancelled:
+							case GestureStateTypes.ended:
+								if (handleUp) {
+									TouchManager.startAnimationForType(<View>args.view, TouchAnimationTypes.up);
+								}
+								break;
+						}
+					});
+				}
+			}
+		} else {
+			if (handleDown || handleUp) {
+				view.on(GestureTypes.touch, (args: TouchGestureEventData) => {
+					switch (args.action) {
+						case 'down':
+							if (handleDown) {
+								view.notify({
+									eventName: GestureEvents.touchDown,
+									object: view,
+									data: args.android,
+								});
+							}
+							break;
+						case 'up':
+						case 'cancel':
+							if (handleUp) {
+								view.notify({
+									eventName: GestureEvents.touchUp,
+									object: view,
+									data: args.android,
+								});
+							}
+							break;
+					}
+				});
+				if (handleDown) {
+					view.on(GestureEvents.touchDown, (args) => {
+						TouchManager.startAnimationForType(view, TouchAnimationTypes.down);
+					});
+				}
+				if (handleUp) {
+					view.on(GestureEvents.touchUp, (args) => {
+						TouchManager.startAnimationForType(view, TouchAnimationTypes.up);
+					});
+				}
+			}
+		}
+
+		view.on(View.disposeNativeViewEvent, (args) => {
+			const index = TouchManager.touchHandlers?.findIndex((handler) => handler.view === args.object);
+			if (index > -1) {
+				TouchManager.touchHandlers.splice(index, 1);
+			}
+			TouchManager.touchAnimationDefinitions = TouchManager.touchAnimationDefinitions?.filter((d) => d.view !== args.object);
+		});
+	}
+
+	static startAnimationForType(view: View, type: TouchAnimationTypes) {
+		if (view) {
+			const animate = function (definition: AnimationDefinition | TouchAnimationFn) {
+				if (definition) {
+					if (isFunction(definition)) {
+						(<TouchAnimationFn>definition)(view);
+					} else {
+						if (!TouchManager.touchAnimationDefinitions) {
+							TouchManager.touchAnimationDefinitions = [];
+						}
+						// reuse animations for each type
+						let touchAnimation: Animation;
+						// triggering animations should always cancel other animations which may be in progress
+						for (const d of TouchManager.touchAnimationDefinitions) {
+							if (d.view === view && d.animation) {
+								d.animation.cancel();
+								if (d.type === type) {
+									touchAnimation = d.animation;
+								}
+							}
+						}
+
+						if (!touchAnimation) {
+							touchAnimation = new Animation([
+								{
+									target: view,
+									...(<AnimationDefinition>definition),
+								},
+							]);
+							TouchManager.touchAnimationDefinitions.push({
+								view,
+								type,
+								animation: touchAnimation,
+							});
+						}
+						touchAnimation.play().catch(() => {});
+					}
+				}
+			};
+			// always use instance defined animation over global
+			if (isObject(view.touchAnimation) && view.touchAnimation[type]) {
+				animate(view.touchAnimation[type]);
+			} else if (TouchManager.animations?.[type]) {
+				// fallback to globally defined
+				animate(TouchManager.animations?.[type]);
+			}
+		}
+	}
+}
+
+export let TouchControlHandler: {
+	initWithOwner: (owner: WeakRef<View>) => any;
+};
+ensureTouchControlHandlers();
+
+function ensureTouchControlHandlers() {
+	if (global.isIOS) {
+		@NativeClass
+		class TouchHandlerImpl extends NSObject {
+			private _owner: WeakRef<View>;
+			static ObjCExposedMethods = {
+				touchDown: { returns: interop.types.void, params: [interop.types.id] },
+				touchUp: { returns: interop.types.void, params: [interop.types.id] },
+			};
+
+			static initWithOwner(owner: WeakRef<View>): TouchHandlerImpl {
+				const handler = <TouchHandlerImpl>TouchHandlerImpl.new();
+				handler._owner = owner;
+				return handler;
+			}
+
+			touchDown(args) {
+				this._owner?.get?.().notify({
+					eventName: GestureEvents.touchDown,
+					object: this._owner?.get?.(),
+					data: args,
+				});
+			}
+
+			touchUp(args) {
+				this._owner?.get?.().notify({
+					eventName: GestureEvents.touchUp,
+					object: this._owner?.get?.(),
+					data: args,
+				});
+			}
+		}
+
+		TouchControlHandler = TouchHandlerImpl;
+	}
+}
diff --git a/packages/core/ui/index.ts b/packages/core/ui/index.ts
index 727ee500e3..3424c77353 100644
--- a/packages/core/ui/index.ts
+++ b/packages/core/ui/index.ts
@@ -27,8 +27,8 @@ export * from './editable-text-base';
 export { Frame, setActivityCallbacks } from './frame';
 export type { NavigationEntry, NavigationContext, NavigationTransition, BackstackEntry, ViewEntry, AndroidActivityCallbacks } from './frame';
 
-export { GesturesObserver, TouchAction, GestureTypes, GestureStateTypes, SwipeDirection } from './gestures';
-export type { GestureEventData, GestureEventDataWithState, TapGestureEventData, PanGestureEventData, PinchGestureEventData, RotationGestureEventData, SwipeGestureEventData, TouchGestureEventData } from './gestures';
+export { GesturesObserver, TouchAction, GestureTypes, GestureStateTypes, SwipeDirection, GestureEvents, TouchManager } from './gestures';
+export type { GestureEventData, GestureEventDataWithState, TapGestureEventData, PanGestureEventData, PinchGestureEventData, RotationGestureEventData, SwipeGestureEventData, TouchGestureEventData, TouchAnimationOptions } from './gestures';
 
 export { HtmlView } from './html-view';
 export { Image } from './image';
diff --git a/packages/core/ui/layouts/root-layout/index.android.ts b/packages/core/ui/layouts/root-layout/index.android.ts
index eb974a606c..1d5748d88d 100644
--- a/packages/core/ui/layouts/root-layout/index.android.ts
+++ b/packages/core/ui/layouts/root-layout/index.android.ts
@@ -2,6 +2,8 @@ import { Color } from '../../../color';
 import { View } from '../../core/view';
 import { RootLayoutBase, defaultShadeCoverOptions } from './root-layout-common';
 import { TransitionAnimation, ShadeCoverOptions } from '.';
+import { parseLinearGradient } from '../../../css/parser';
+import { LinearGradient } from '../../styling/linear-gradient';
 
 export * from './root-layout-common';
 
@@ -74,14 +76,28 @@ export class RootLayout extends RootLayoutBase {
 	}
 
 	private _getAnimationSet(view: View, shadeCoverAnimation: TransitionAnimation, backgroundColor: string = defaultShadeCoverOptions.color): Array<android.animation.Animator> {
-		const animationSet = Array.create(android.animation.Animator, 7);
+		const backgroundIsGradient = backgroundColor.startsWith('linear-gradient');
+
+		const animationSet = Array.create(android.animation.Animator, backgroundIsGradient ? 6 : 7);
 		animationSet[0] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationX', [shadeCoverAnimation.translateX]);
 		animationSet[1] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'translationY', [shadeCoverAnimation.translateY]);
 		animationSet[2] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleX', [shadeCoverAnimation.scaleX]);
 		animationSet[3] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'scaleY', [shadeCoverAnimation.scaleY]);
 		animationSet[4] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'rotation', [shadeCoverAnimation.rotate]);
 		animationSet[5] = android.animation.ObjectAnimator.ofFloat(view.nativeViewProtected, 'alpha', [shadeCoverAnimation.opacity]);
-		animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor);
+
+		if (backgroundIsGradient) {
+			if (view.backgroundColor) {
+				view.backgroundColor = undefined;
+			}
+			const parsedGradient = parseLinearGradient(backgroundColor);
+			view.backgroundImage = LinearGradient.parse(parsedGradient.value);
+		} else {
+			if (view.backgroundImage) {
+				view.backgroundImage = undefined;
+			}
+			animationSet[6] = this._getBackgroundColorAnimator(view, backgroundColor);
+		}
 		return animationSet;
 	}
 
diff --git a/packages/core/ui/layouts/root-layout/index.d.ts b/packages/core/ui/layouts/root-layout/index.d.ts
index 86b9d1e371..34c3ae5fb8 100644
--- a/packages/core/ui/layouts/root-layout/index.d.ts
+++ b/packages/core/ui/layouts/root-layout/index.d.ts
@@ -7,6 +7,8 @@ export class RootLayout extends GridLayout {
 	bringToFront(view: View, animated?: boolean): Promise<void>;
 	closeAll(): Promise<void>;
 	getShadeCover(): View;
+	openShadeCover(options: ShadeCoverOptions): void;
+	closeShadeCover(shadeCoverOptions?: ShadeCoverOptions): Promise<void>;
 }
 
 export function getRootLayout(): RootLayout;
diff --git a/packages/core/ui/layouts/root-layout/index.ios.ts b/packages/core/ui/layouts/root-layout/index.ios.ts
index bce344bd85..461963bbb7 100644
--- a/packages/core/ui/layouts/root-layout/index.ios.ts
+++ b/packages/core/ui/layouts/root-layout/index.ios.ts
@@ -2,9 +2,16 @@ import { Color } from '../../../color';
 import { View } from '../../core/view';
 import { RootLayoutBase, defaultShadeCoverOptions } from './root-layout-common';
 import { TransitionAnimation, ShadeCoverOptions } from '.';
+import { LinearGradient } from '../../styling/linear-gradient';
+import { ios as iosViewUtils } from '../../utils';
+import { parseLinearGradient } from '../../../css/parser';
 export * from './root-layout-common';
 
 export class RootLayout extends RootLayoutBase {
+	// perf optimization: only create and insert gradients if settings change
+	private _currentGradient: string;
+	private _gradientLayer: CAGradientLayer;
+
 	constructor() {
 		super();
 	}
@@ -27,12 +34,24 @@ export class RootLayout extends RootLayoutBase {
 				...defaultShadeCoverOptions,
 				...shadeOptions,
 			};
-			if (view && view.nativeViewProtected) {
+			if (view?.nativeViewProtected) {
 				const duration = this._convertDurationToSeconds(options.animation?.enterFrom?.duration || defaultShadeCoverOptions.animation.enterFrom.duration);
+
+				if (options.color && options.color.startsWith('linear-gradient')) {
+					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);
+					}
+				}
 				UIView.animateWithDurationAnimationsCompletion(
 					duration,
 					() => {
-						view.nativeViewProtected.backgroundColor = new Color(options.color).ios;
+						if (this._gradientLayer) {
+							this._gradientLayer.opacity = 1;
+						} else if (options.color && view?.nativeViewProtected) {
+							view.nativeViewProtected.backgroundColor = new Color(options.color).ios;
+						}
 						this._applyAnimationProperties(view, {
 							translateX: 0,
 							translateY: 0,
@@ -71,14 +90,21 @@ export class RootLayout extends RootLayoutBase {
 		});
 	}
 
+	protected _cleanupPlatformShadeCover(): void {
+		this._currentGradient = null;
+		this._gradientLayer = null;
+	}
+
 	private _applyAnimationProperties(view: View, shadeCoverAnimation: TransitionAnimation): void {
-		const translate = CGAffineTransformMakeTranslation(shadeCoverAnimation.translateX, shadeCoverAnimation.translateY);
-		// ios doesn't like scale being 0, default it to a small number greater than 0
-		const scale = CGAffineTransformMakeScale(shadeCoverAnimation.scaleX || 0.1, shadeCoverAnimation.scaleY || 0.1);
-		const rotate = CGAffineTransformMakeRotation((shadeCoverAnimation.rotate * Math.PI) / 180); // convert degress to radians
-		const translateAndScale = CGAffineTransformConcat(translate, scale);
-		view.nativeViewProtected.transform = CGAffineTransformConcat(rotate, translateAndScale);
-		view.nativeViewProtected.alpha = shadeCoverAnimation.opacity;
+		if (view?.nativeViewProtected) {
+			const translate = CGAffineTransformMakeTranslation(shadeCoverAnimation.translateX, shadeCoverAnimation.translateY);
+			// ios doesn't like scale being 0, default it to a small number greater than 0
+			const scale = CGAffineTransformMakeScale(shadeCoverAnimation.scaleX || 0.1, shadeCoverAnimation.scaleY || 0.1);
+			const rotate = CGAffineTransformMakeRotation((shadeCoverAnimation.rotate * Math.PI) / 180); // convert degress to radians
+			const translateAndScale = CGAffineTransformConcat(translate, scale);
+			view.nativeViewProtected.transform = CGAffineTransformConcat(rotate, translateAndScale);
+			view.nativeViewProtected.alpha = shadeCoverAnimation.opacity;
+		}
 	}
 
 	private _convertDurationToSeconds(duration: number): number {
diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts
index 86f0d3ee8a..5049b7e4fb 100644
--- a/packages/core/ui/layouts/root-layout/root-layout-common.ts
+++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts
@@ -4,6 +4,7 @@ import { CSSType, View } from '../../core/view';
 import { GridLayout } from '../grid-layout';
 import { RootLayout, RootLayoutOptions, ShadeCoverOptions, TransitionAnimation } from '.';
 import { Animation } from '../../animation';
+import { AnimationDefinition } from '../../animation';
 
 @CSSType('RootLayout')
 export class RootLayoutBase extends GridLayout {
@@ -33,16 +34,15 @@ export class RootLayoutBase extends GridLayout {
 					// keep track of the views locally to be able to use their options later
 					this.popupViews.push({ view: view, options: options });
 
-					// only insert 1 layer of shade cover (don't insert another one if already present)
-					if (options?.shadeCover && !this.shadeCover) {
-						this.shadeCover = this.createShadeCover(options.shadeCover);
-						// insert shade cover at index right above the first layout
-						this.insertChild(this.shadeCover, this.staticChildCount + 1);
-					}
-
-					// overwrite current shadeCover options if topmost popupview has additional shadeCover configurations
-					else if (options?.shadeCover && this.shadeCover) {
-						this.updateShadeCover(this.shadeCover, options.shadeCover);
+					if (options?.shadeCover) {
+						// perf optimization note: we only need 1 layer of shade cover
+						// we just update properties if needed by additional overlaid views
+						if (this.shadeCover) {
+							// overwrite current shadeCover options if topmost popupview has additional shadeCover configurations
+							this.updateShadeCover(this.shadeCover, options.shadeCover);
+						} else {
+							this.openShadeCover(options.shadeCover);
+						}
 					}
 
 					view.opacity = 0; // always begin with view invisible when adding dynamically
@@ -77,47 +77,46 @@ export class RootLayoutBase extends GridLayout {
 	close(view: View, exitTo?: TransitionAnimation): Promise<void> {
 		return new Promise((resolve, reject) => {
 			if (this.hasChild(view)) {
+				const cleanupAndFinish = () => {
+					this.removeChild(view);
+					resolve();
+				};
+
 				try {
 					const popupIndex = this.getPopupIndex(view);
+					const poppedView = this.popupViews[popupIndex];
 					// use exitAnimation that is passed in and fallback to the exitAnimation passed in when opening
-					const exitAnimationDefinition = exitTo || this.popupViews[popupIndex]?.options?.animation?.exitTo;
+					const exitAnimationDefinition = exitTo || poppedView?.options?.animation?.exitTo;
 
-					// Remove view from local array
-					const poppedView = this.popupViews[popupIndex];
+					// Remove view from tracked popupviews
 					this.popupViews.splice(popupIndex, 1);
 
-					// update shade cover with the topmost popupView options (if not specifically told to ignore)
-					const shadeCoverOptions = this.popupViews[this.popupViews.length - 1]?.options?.shadeCover;
-					if (this.shadeCover && shadeCoverOptions && !poppedView?.options?.shadeCover.ignoreShadeRestore) {
-						this.updateShadeCover(this.shadeCover, shadeCoverOptions);
+					if (this.shadeCover) {
+						// update shade cover with the topmost popupView options (if not specifically told to ignore)
+						if (!poppedView?.options?.shadeCover.ignoreShadeRestore) {
+							const shadeCoverOptions = this.popupViews[this.popupViews.length - 1]?.options?.shadeCover;
+							if (shadeCoverOptions) {
+								this.updateShadeCover(this.shadeCover, shadeCoverOptions);
+							}
+						}
+						// remove shade cover animation if this is the last opened popup view
+						if (this.popupViews.length === 0) {
+							this.closeShadeCover(poppedView.options.shadeCover);
+						}
 					}
 
 					if (exitAnimationDefinition) {
-						const exitAnimation = this.getExitAnimation(view, exitAnimationDefinition);
-						const exitAnimations: Promise<any>[] = [exitAnimation.play()];
-
-						// add remove shade cover animation if this is the last opened popup view
-						if (this.popupViews.length === 0 && this.shadeCover) {
-							exitAnimations.push(this.closeShadeCover(poppedView.options.shadeCover));
-						}
-						return Promise.all(exitAnimations)
-							.then(() => {
-								this.removeChild(view);
-								resolve();
-							})
+						this.getExitAnimation(view, exitAnimationDefinition)
+							.play()
+							.then(cleanupAndFinish.bind(this))
 							.catch((ex) => {
 								if (Trace.isEnabled()) {
 									Trace.write(`Error playing exit animation: ${ex}`, Trace.categories.Layout, Trace.messageType.error);
 								}
 							});
+					} else {
+						cleanupAndFinish();
 					}
-					this.removeChild(view);
-
-					// also remove shade cover if this is the last opened popup view
-					if (this.popupViews.length === 0) {
-						this.closeShadeCover(poppedView.options.shadeCover);
-					}
-					resolve();
 				} catch (ex) {
 					if (Trace.isEnabled()) {
 						Trace.write(`Error closing popup (${view}): ${ex}`, Trace.categories.Layout, Trace.messageType.error);
@@ -147,6 +146,44 @@ export class RootLayoutBase extends GridLayout {
 		});
 	}
 
+	getShadeCover(): View {
+		return this.shadeCover;
+	}
+
+	openShadeCover(options: ShadeCoverOptions) {
+		if (this.shadeCover) {
+			if (Trace.isEnabled()) {
+				Trace.write(`RootLayout shadeCover already open.`, Trace.categories.Layout, Trace.messageType.warn);
+			}
+		} else {
+			// create the one and only shade cover
+			this.shadeCover = this.createShadeCover(options);
+			// insert shade cover at index right above the first layout
+			this.insertChild(this.shadeCover, this.staticChildCount + 1);
+		}
+	}
+
+	closeShadeCover(shadeCoverOptions?: ShadeCoverOptions): Promise<void> {
+		return new Promise((resolve) => {
+			// if shade cover is displayed and the last popup is closed, also close the shade cover
+			if (this.shadeCover) {
+				return this._closeShadeCover(this.shadeCover, shadeCoverOptions).then(() => {
+					if (this.shadeCover) {
+						this.shadeCover.off('loaded');
+						if (this.shadeCover.parent) {
+							this.removeChild(this.shadeCover);
+						}
+					}
+					this.shadeCover = null;
+					// cleanup any platform specific details related to shade cover
+					this._cleanupPlatformShadeCover();
+					resolve();
+				});
+			}
+			resolve();
+		});
+	}
+
 	// bring any view instance open on the rootlayout to front of all the children visually
 	bringToFront(view: View, animated: boolean = false): Promise<void> {
 		return new Promise((resolve, reject) => {
@@ -214,10 +251,6 @@ export class RootLayoutBase extends GridLayout {
 		});
 	}
 
-	getShadeCover(): View {
-		return this.shadeCover;
-	}
-
 	private getPopupIndex(view: View): number {
 		return this.popupViews.findIndex((popupView) => popupView.view === view);
 	}
@@ -287,21 +320,17 @@ export class RootLayoutBase extends GridLayout {
 	}
 
 	private getExitAnimation(targetView: View, exitTo: TransitionAnimation): Animation {
-		const animationOptions = {
+		return new Animation([this.getExitAnimationDefinition(targetView, exitTo)]);
+	}
+
+	private getExitAnimationDefinition(targetView: View, exitTo: TransitionAnimation): AnimationDefinition {
+		return {
+			target: targetView,
 			...defaultTransitionAnimation,
-			...exitTo,
+			...(exitTo || {}),
+			translate: { x: exitTo.translateX || defaultTransitionAnimation.translateX, y: exitTo.translateY || defaultTransitionAnimation.translateY },
+			scale: { x: exitTo.scaleX || defaultTransitionAnimation.scaleX, y: exitTo.scaleY || defaultTransitionAnimation.scaleY },
 		};
-		return new Animation([
-			{
-				target: targetView,
-				translate: { x: animationOptions.translateX, y: animationOptions.translateY },
-				scale: { x: animationOptions.scaleX, y: animationOptions.scaleY },
-				rotate: animationOptions.rotate,
-				opacity: animationOptions.opacity,
-				duration: animationOptions.duration,
-				curve: animationOptions.curve,
-			},
-		]);
 	}
 
 	private createShadeCover(shadeOptions: ShadeCoverOptions): View {
@@ -330,21 +359,6 @@ export class RootLayoutBase extends GridLayout {
 		return this.getChildIndex(view) >= 0;
 	}
 
-	private closeShadeCover(shadeCoverOptions?: ShadeCoverOptions): Promise<void> {
-		return new Promise((resolve) => {
-			// if shade cover is displayed and the last popup is closed, also close the shade cover
-			if (this.shadeCover) {
-				return this._closeShadeCover(this.shadeCover, shadeCoverOptions).then(() => {
-					this.removeChild(this.shadeCover);
-					this.shadeCover.off('loaded');
-					this.shadeCover = null;
-					resolve();
-				});
-			}
-			resolve();
-		});
-	}
-
 	protected _bringToFront(view: View) {}
 
 	protected _initShadeCover(view: View, shadeOption: ShadeCoverOptions): void {}
@@ -356,6 +370,8 @@ export class RootLayoutBase extends GridLayout {
 	protected _closeShadeCover(view: View, shadeOptions: ShadeCoverOptions): Promise<void> {
 		return new Promise(() => {});
 	}
+
+	protected _cleanupPlatformShadeCover(): void {}
 }
 
 export function getRootLayout(): RootLayout {
diff --git a/packages/core/ui/styling/background-common.ts b/packages/core/ui/styling/background-common.ts
index c065988186..10929e553f 100644
--- a/packages/core/ui/styling/background-common.ts
+++ b/packages/core/ui/styling/background-common.ts
@@ -1,5 +1,3 @@
-// Deifinitions.
-import { Background as BackgroundDefinition } from './background';
 import { CoreTypes } from '../../core-types';
 import { LinearGradient } from './linear-gradient';
 // Types.
@@ -21,7 +19,7 @@ export const enum BackgroundClearFlags {
 	CLEAR_BOX_SHADOW = 2 << 0,
 }
 
-export class Background implements BackgroundDefinition {
+export class Background {
 	public static default = new Background();
 
 	public color: Color;
diff --git a/packages/core/ui/styling/background.android.ts b/packages/core/ui/styling/background.android.ts
index 5449a52556..c0d9237d0f 100644
--- a/packages/core/ui/styling/background.android.ts
+++ b/packages/core/ui/styling/background.android.ts
@@ -1,141 +1,11 @@
 import { View } from '../core/view';
 import { LinearGradient } from './linear-gradient';
-import { CoreTypes } from '../../core-types';
-import { isDataURI, isFileOrResourcePath, layout, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
+import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
 import { parse } from '../../css-value';
 import { path, knownFolders } from '../../file-system';
 import * as application from '../../application';
-import { profile } from '../../profiling';
-import { CSSShadow } from './css-shadow';
-import { Length } from './style-properties';
-import { BackgroundClearFlags } from './background-common';
 export * from './background-common';
 
-interface AndroidView {
-	_cachedDrawable: android.graphics.drawable.Drawable.ConstantState | android.graphics.drawable.Drawable;
-}
-
-// TODO: Change this implementation to use
-// We are using "ad" here to avoid namespace collision with the global android object
-export namespace ad {
-	let SDK: number;
-	function getSDK() {
-		if (!SDK) {
-			SDK = android.os.Build.VERSION.SDK_INT;
-		}
-
-		return SDK;
-	}
-
-	function isSetColorFilterOnlyWidget(nativeView: android.view.View): boolean {
-		// prettier-ignore
-		return (
-			nativeView instanceof android.widget.Button
-			|| (nativeView instanceof androidx.appcompat.widget.Toolbar && getSDK() >= 21)
-			// There is an issue with the DrawableContainer which was fixed
-			// for API version 21 and above: https://code.google.com/p/android/issues/detail?id=60183
-		);
-	}
-
-	export function onBackgroundOrBorderPropertyChanged(view: View) {
-		const nativeView = <android.view.View>view.nativeViewProtected;
-		if (!nativeView) {
-			return;
-		}
-
-		const background = view.style.backgroundInternal;
-
-		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW || background.clearFlags & BackgroundClearFlags.CLEAR_BACKGROUND_COLOR) {
-			// clear background if we're clearing the box shadow
-			// or the background has been removed
-			nativeView.setBackground(null);
-		}
-
-		let drawable = nativeView.getBackground();
-		const androidView = (<any>view) as AndroidView;
-		// use undefined as not set. getBackground will never return undefined only Drawable or null;
-		if (androidView._cachedDrawable === undefined && drawable) {
-			const constantState = drawable.getConstantState();
-			androidView._cachedDrawable = constantState || drawable;
-		}
-		const isBorderDrawable = drawable instanceof org.nativescript.widgets.BorderDrawable;
-
-		// prettier-ignore
-		const onlyColor = !background.hasBorderWidth()
-			&& !background.hasBorderRadius()
-			&& !background.hasBoxShadow()
-			&& !background.clipPath
-			&& !background.image
-			&& !!background.color;
-
-		if (!isBorderDrawable && drawable instanceof android.graphics.drawable.ColorDrawable && onlyColor) {
-			drawable.setColor(background.color.android);
-			drawable.invalidateSelf();
-		} else if (isSetColorFilterOnlyWidget(nativeView) && drawable && onlyColor) {
-			if (isBorderDrawable && androidView._cachedDrawable) {
-				if (!(androidView._cachedDrawable instanceof android.graphics.drawable.Drawable.ConstantState)) {
-					return;
-				}
-
-				drawable = androidView._cachedDrawable.newDrawable(nativeView.getResources());
-				nativeView.setBackground(drawable);
-			}
-
-			const backgroundColor = ((<any>drawable).backgroundColor = background.color.android);
-			drawable.mutate();
-			drawable.setColorFilter(backgroundColor, android.graphics.PorterDuff.Mode.SRC_IN);
-			drawable.invalidateSelf(); // Make sure the drawable is invalidated. Android forgets to invalidate it in some cases: toolbar
-			(<any>drawable).backgroundColor = backgroundColor;
-		} else if (!isBorderDrawable && onlyColor) {
-			// this is the fastest way to change only background color
-			nativeView.setBackgroundColor(background.color.android);
-		} else if (!background.isEmpty()) {
-			let backgroundDrawable = drawable;
-
-			if (drawable instanceof org.nativescript.widgets.BoxShadowDrawable) {
-				// if we have BoxShadow's we have to get the underlying drawable
-				backgroundDrawable = drawable.getWrappedDrawable();
-			}
-
-			if (backgroundDrawable instanceof org.nativescript.widgets.BorderDrawable) {
-				refreshBorderDrawable(view, backgroundDrawable);
-			} else {
-				backgroundDrawable = new org.nativescript.widgets.BorderDrawable(layout.getDisplayDensity(), view.toString());
-				refreshBorderDrawable(view, <org.nativescript.widgets.BorderDrawable>backgroundDrawable);
-				nativeView.setBackground(backgroundDrawable);
-			}
-		} else {
-			const cachedDrawable = androidView._cachedDrawable;
-			let defaultDrawable: android.graphics.drawable.Drawable = null;
-			if (cachedDrawable) {
-				if (cachedDrawable instanceof android.graphics.drawable.Drawable.ConstantState) {
-					defaultDrawable = cachedDrawable.newDrawable(nativeView.getResources());
-				} else if (cachedDrawable instanceof android.graphics.drawable.Drawable) {
-					defaultDrawable = cachedDrawable;
-				}
-			}
-
-			nativeView.setBackground(defaultDrawable);
-		}
-
-		if (background.hasBoxShadow()) {
-			drawBoxShadow(nativeView, view, background.getBoxShadow());
-		}
-
-		// TODO: Can we move BorderWidths as separate native setter?
-		// This way we could skip setPadding if borderWidth is not changed.
-		const leftPadding = Math.ceil(view.effectiveBorderLeftWidth + view.effectivePaddingLeft);
-		const topPadding = Math.ceil(view.effectiveBorderTopWidth + view.effectivePaddingTop);
-		const rightPadding = Math.ceil(view.effectiveBorderRightWidth + view.effectivePaddingRight);
-		const bottomPadding = Math.ceil(view.effectiveBorderBottomWidth + view.effectivePaddingBottom);
-
-		nativeView.setPadding(leftPadding, topPadding, rightPadding, bottomPadding);
-
-		// reset clear flags
-		background.clearFlags = BackgroundClearFlags.NONE;
-	}
-}
-
 function fromBase64(source: string): android.graphics.Bitmap {
 	const bytes = android.util.Base64.decode(source, android.util.Base64.DEFAULT);
 
@@ -164,7 +34,7 @@ function fromGradient(gradient: LinearGradient): org.nativescript.widgets.Linear
 }
 
 const pattern = /url\(('|")(.*?)\1\)/;
-function refreshBorderDrawable(this: void, view: View, borderDrawable: org.nativescript.widgets.BorderDrawable) {
+export function refreshBorderDrawable(view: View, borderDrawable: org.nativescript.widgets.BorderDrawable) {
 	const nativeView = <android.view.View>view.nativeViewProtected;
 	const context = nativeView.getContext();
 
@@ -253,18 +123,6 @@ function createNativeCSSValueArray(css: string): androidNative.Array<org.natives
 	return nativeArray;
 }
 
-function drawBoxShadow(nativeView: android.view.View, view: View, boxShadow: CSSShadow) {
-	const config = {
-		shadowColor: boxShadow.color.android,
-		cornerRadius: Length.toDevicePixels(view.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),
-	};
-	org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
-}
-
 export enum CacheMode {
 	none,
 	memory,
diff --git a/packages/core/ui/styling/background.d.ts b/packages/core/ui/styling/background.d.ts
index e5ebe0df34..797a2dc14b 100644
--- a/packages/core/ui/styling/background.d.ts
+++ b/packages/core/ui/styling/background.d.ts
@@ -4,72 +4,74 @@ import { BackgroundRepeat } from '../../css/parser';
 import { LinearGradient } from '../styling/linear-gradient';
 import { CSSShadow } from './css-shadow';
 
+export * from './background-common';
+
 export enum CacheMode {
 	none,
 	memory,
 	diskAndMemory,
 }
 
-export declare class Background {
-	public static default: Background;
-	public color: Color;
-	public image: string | LinearGradient;
-	public repeat: BackgroundRepeat;
-	public position: string;
-	public size: string;
-	public borderTopColor: Color;
-	public borderRightColor: Color;
-	public borderBottomColor: Color;
-	public borderLeftColor: Color;
-	public borderTopWidth: number;
-	public borderRightWidth: number;
-	public borderBottomWidth: number;
-	public borderLeftWidth: number;
-	public borderTopLeftRadius: number;
-	public borderTopRightRadius: number;
-	public borderBottomRightRadius: number;
-	public borderBottomLeftRadius: number;
-	public clipPath: string;
-	public boxShadow: string | CSSShadow;
-	public clearFlags: number;
+// export declare class Background {
+// 	public static default: Background;
+// 	public color: Color;
+// 	public image: string | LinearGradient;
+// 	public repeat: BackgroundRepeat;
+// 	public position: string;
+// 	public size: string;
+// 	public borderTopColor: Color;
+// 	public borderRightColor: Color;
+// 	public borderBottomColor: Color;
+// 	public borderLeftColor: Color;
+// 	public borderTopWidth: number;
+// 	public borderRightWidth: number;
+// 	public borderBottomWidth: number;
+// 	public borderLeftWidth: number;
+// 	public borderTopLeftRadius: number;
+// 	public borderTopRightRadius: number;
+// 	public borderBottomRightRadius: number;
+// 	public borderBottomLeftRadius: number;
+// 	public clipPath: string;
+// 	public boxShadow: string | CSSShadow;
+// 	public clearFlags: number;
 
-	public withColor(value: Color): Background;
-	public withImage(value: string | LinearGradient): Background;
-	public withRepeat(value: BackgroundRepeat): Background;
-	public withPosition(value: string): Background;
-	public withSize(value: string): Background;
-	public withBorderTopColor(value: Color): Background;
-	public withBorderRightColor(value: Color): Background;
-	public withBorderBottomColor(value: Color): Background;
-	public withBorderLeftColor(value: Color): Background;
-	public withBorderTopWidth(value: number): Background;
-	public withBorderRightWidth(value: number): Background;
-	public withBorderBottomWidth(value: number): Background;
-	public withBorderLeftWidth(value: number): Background;
-	public withBorderTopLeftRadius(value: number): Background;
-	public withBorderTopRightRadius(value: number): Background;
-	public withBorderBottomRightRadius(value: number): Background;
-	public withBorderBottomLeftRadius(value: number): Background;
-	public withClipPath(value: string): Background;
-	public withBoxShadow(value: CSSShadow): Background;
+// 	public withColor(value: Color): Background;
+// 	public withImage(value: string | LinearGradient): Background;
+// 	public withRepeat(value: BackgroundRepeat): Background;
+// 	public withPosition(value: string): Background;
+// 	public withSize(value: string): Background;
+// 	public withBorderTopColor(value: Color): Background;
+// 	public withBorderRightColor(value: Color): Background;
+// 	public withBorderBottomColor(value: Color): Background;
+// 	public withBorderLeftColor(value: Color): Background;
+// 	public withBorderTopWidth(value: number): Background;
+// 	public withBorderRightWidth(value: number): Background;
+// 	public withBorderBottomWidth(value: number): Background;
+// 	public withBorderLeftWidth(value: number): Background;
+// 	public withBorderTopLeftRadius(value: number): Background;
+// 	public withBorderTopRightRadius(value: number): Background;
+// 	public withBorderBottomRightRadius(value: number): Background;
+// 	public withBorderBottomLeftRadius(value: number): Background;
+// 	public withClipPath(value: string): Background;
+// 	public withBoxShadow(value: CSSShadow): Background;
 
-	public isEmpty(): boolean;
+// 	public isEmpty(): boolean;
 
-	public static equals(value1: Background, value2: Background): boolean;
+// 	public static equals(value1: Background, value2: Background): boolean;
 
-	public hasBorderColor(): boolean;
-	public hasBorderWidth(): boolean;
-	public hasBorderRadius(): boolean;
-	public hasUniformBorderColor(): boolean;
-	public hasUniformBorderWidth(): boolean;
-	public hasUniformBorderRadius(): boolean;
-	public hasUniformBorder(): boolean;
-	public getUniformBorderColor(): Color;
-	public getUniformBorderWidth(): number;
-	public getUniformBorderRadius(): number;
-	public hasBoxShadow(): boolean;
-	public getBoxShadow(): CSSShadow;
-}
+// 	public hasBorderColor(): boolean;
+// 	public hasBorderWidth(): boolean;
+// 	public hasBorderRadius(): boolean;
+// 	public hasUniformBorderColor(): boolean;
+// 	public hasUniformBorderWidth(): boolean;
+// 	public hasUniformBorderRadius(): boolean;
+// 	public hasUniformBorder(): boolean;
+// 	public getUniformBorderColor(): Color;
+// 	public getUniformBorderWidth(): number;
+// 	public getUniformBorderRadius(): number;
+// 	public hasBoxShadow(): boolean;
+// 	public getBoxShadow(): CSSShadow;
+// }
 
 export namespace ios {
 	export function createBackgroundUIColor(view: View, callback: (uiColor: any /* UIColor */) => void, flip?: boolean): void;
@@ -78,3 +80,5 @@ export namespace ios {
 export namespace ad {
 	export function onBackgroundOrBorderPropertyChanged(v: View);
 }
+
+export function refreshBorderDrawable(view: View, borderDrawable: any /* org.nativescript.widgets.BorderDrawable */): void;
diff --git a/packages/core/ui/styling/background.ios.ts b/packages/core/ui/styling/background.ios.ts
index 215c571026..e3eb08627f 100644
--- a/packages/core/ui/styling/background.ios.ts
+++ b/packages/core/ui/styling/background.ios.ts
@@ -5,6 +5,7 @@ import { View, Point } from '../core/view';
 import { LinearGradient } from './linear-gradient';
 import { Color } from '../../color';
 import { iOSNativeHelper, isDataURI, isFileOrResourcePath, layout } from '../../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';
@@ -13,23 +14,6 @@ import { BackgroundClearFlags } from './background-common';
 
 export * from './background-common';
 
-interface NativeView extends UIView {
-	hasNonUniformBorder: boolean;
-
-	borderLayer: CALayer;
-
-	hasBorderMask: boolean;
-	borderOriginalMask: CALayer;
-
-	topBorderLayer: CALayer;
-	rightBorderLayer: CALayer;
-	bottomBorderLayer: CALayer;
-	leftBorderLayer: CALayer;
-
-	gradientLayer: CAGradientLayer;
-	boxShadowLayer: CALayer;
-}
-
 interface Rect {
 	left: number;
 	top: number;
@@ -47,7 +31,7 @@ export enum CacheMode {
 export namespace ios {
 	export function createBackgroundUIColor(view: View, callback: (uiColor: UIColor) => void, flip?: boolean): void {
 		const background = view.style.backgroundInternal;
-		const nativeView = <NativeView>view.nativeViewProtected;
+		const nativeView = <NativeScriptUIView>view.nativeViewProtected;
 
 		if (background.clearFlags & BackgroundClearFlags.CLEAR_BOX_SHADOW) {
 			// clear box shadow if it has been removed!
@@ -60,9 +44,9 @@ export namespace ios {
 			clearNonUniformBorders(nativeView);
 		}
 
-		clearGradient(nativeView);
+		iosViewUtils.clearGradient(nativeView);
 		if (background.image instanceof LinearGradient) {
-			drawGradient(nativeView, background.image);
+			iosViewUtils.drawGradient(nativeView, background.image);
 		}
 
 		const hasNonUniformBorderWidths = background.hasBorderWidth() && !background.hasUniformBorder();
@@ -113,7 +97,7 @@ function onScroll(this: void, args: ScrollEventData): void {
 	}
 }
 
-function adjustLayersForScrollView(nativeView: UIScrollView & NativeView) {
+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.
@@ -149,7 +133,7 @@ function subscribeForScrollNotifications(view: View) {
 	}
 }
 
-function clearNonUniformBorders(nativeView: NativeView): void {
+function clearNonUniformBorders(nativeView: NativeScriptUIView): void {
 	if (nativeView.borderLayer) {
 		nativeView.borderLayer.removeFromSuperlayer();
 	}
@@ -459,7 +443,7 @@ function cssValueToDeviceIndependentPixels(source: string, total: number): numbe
 	}
 }
 
-function drawUniformColorNonUniformBorders(nativeView: NativeView, background: BackgroundDefinition) {
+function drawUniformColorNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
 	const layer = nativeView.layer;
 	layer.backgroundColor = undefined;
 	layer.borderColor = undefined;
@@ -587,7 +571,7 @@ function drawUniformColorNonUniformBorders(nativeView: NativeView, background: B
 	nativeView.hasNonUniformBorder = true;
 }
 
-function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: BackgroundDefinition) {
+function drawNoRadiusNonUniformBorders(nativeView: NativeScriptUIView, background: BackgroundDefinition) {
 	const borderLayer = CALayer.layer();
 	nativeView.layer.addSublayer(borderLayer);
 	nativeView.borderLayer = borderLayer;
@@ -726,7 +710,7 @@ function drawNoRadiusNonUniformBorders(nativeView: NativeView, background: Backg
 }
 
 // TODO: use sublayer if its applied to a layout
-function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow, background: BackgroundDefinition, useSubLayer: boolean = false) {
+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;
@@ -765,7 +749,7 @@ function drawBoxShadow(nativeView: NativeView, view: View, boxShadow: CSSShadow,
 	layer.shadowPath = UIBezierPath.bezierPathWithRoundedRectCornerRadius(bounds, cornerRadius).CGPath;
 }
 
-function clearBoxShadow(nativeView: NativeView) {
+function clearBoxShadow(nativeView: NativeScriptUIView) {
 	nativeView.clipsToBounds = true;
 	const layer: CALayer = iOSNativeHelper.getShadowLayer(nativeView, 'ns-box-shadow', false);
 	if (!layer) {
@@ -779,46 +763,6 @@ function clearBoxShadow(nativeView: NativeView) {
 	layer.shadowOpacity = 0.0;
 }
 
-function drawGradient(nativeView: NativeView, gradient: LinearGradient) {
-	const gradientLayer = CAGradientLayer.layer();
-	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, 0);
-}
-
-function clearGradient(nativeView: NativeView): void {
-	if (nativeView.gradientLayer) {
-		nativeView.gradientLayer.removeFromSuperlayer();
-	}
-}
-
 function drawClipPath(nativeView: UIView, background: BackgroundDefinition) {
 	const layer = nativeView.layer;
 	const layerBounds = layer.bounds;
diff --git a/packages/core/ui/styling/gradient.d.ts b/packages/core/ui/styling/gradient.d.ts
deleted file mode 100644
index 170f58b22f..0000000000
--- a/packages/core/ui/styling/gradient.d.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { CoreTypes } from '../../core-types';
-import { Color } from '../../color';
-import { LinearGradient as LinearGradientDefinition } from '../../css/parser';
-
-export class LinearGradient {
-	public angle: number;
-	public colorStops: ColorStop[];
-
-	public static parse(value: LinearGradientDefinition): LinearGradientDefinition;
-
-	public static equals(first: LinearGradientDefinition, second: LinearGradientDefinition): boolean;
-}
-
-export interface ColorStop {
-	color: Color;
-	offset?: CoreTypes.LengthPercentUnit;
-}
diff --git a/packages/core/ui/styling/linear-gradient.ts b/packages/core/ui/styling/linear-gradient.ts
index 72b3cad6a3..4d67834a8b 100644
--- a/packages/core/ui/styling/linear-gradient.ts
+++ b/packages/core/ui/styling/linear-gradient.ts
@@ -1,8 +1,12 @@
 import { CoreTypes } from '../../core-types';
 import { Color } from '../../color';
-import { ColorStop } from './gradient';
 import { LinearGradient as CSSLinearGradient } from '../../css/parser';
 
+export interface ColorStop {
+	color: Color;
+	offset?: CoreTypes.LengthPercentUnit;
+}
+
 export class LinearGradient {
 	public angle: number;
 	public colorStops: ColorStop[];
diff --git a/packages/core/ui/time-picker/index.ios.ts b/packages/core/ui/time-picker/index.ios.ts
index 088b8941d9..48eefc6297 100644
--- a/packages/core/ui/time-picker/index.ios.ts
+++ b/packages/core/ui/time-picker/index.ios.ts
@@ -48,7 +48,7 @@ export class TimePicker extends TimePickerBase {
 
 	disposeNativeView() {
 		this._changeHandler = null;
-		super.initNativeView();
+		super.disposeNativeView();
 	}
 
 	// @ts-ignore
diff --git a/packages/core/ui/utils.d.ts b/packages/core/ui/utils.d.ts
index f01d92c216..aff6f4070e 100644
--- a/packages/core/ui/utils.d.ts
+++ b/packages/core/ui/utils.d.ts
@@ -1,4 +1,19 @@
-export namespace ios {
+export interface NativeScriptUIView extends UIView {
+	hasNonUniformBorder: boolean;
+	borderLayer: CALayer;
+
+	hasBorderMask: boolean;
+	borderOriginalMask: CALayer;
+
+	topBorderLayer: CALayer;
+	rightBorderLayer: CALayer;
+	bottomBorderLayer: CALayer;
+	leftBorderLayer: CALayer;
+
+	gradientLayer: CAGradientLayer;
+	boxShadowLayer: CALayer;
+}
+export namespace ios {
 	/**
 	 * 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.
@@ -10,4 +25,19 @@
 	 * @param viewController when specified it is used to check preferStatusBarHidden property.
 	 */
 	export function getStatusBarHeight(viewController?: any): number;
+
+	/**
+	 * draw gradient using CAGradientLayer and insert into UIView sublayer
+	 * @param nativeView UIView
+	 * @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;
 }
diff --git a/packages/core/ui/utils.ios.ts b/packages/core/ui/utils.ios.ts
index f34ef42606..fe6e370e98 100644
--- a/packages/core/ui/utils.ios.ts
+++ b/packages/core/ui/utils.ios.ts
@@ -1,4 +1,21 @@
 import * as utils from '../utils';
+import { LinearGradient } from './styling/linear-gradient';
+
+interface NativeScriptUIView extends UIView {
+	hasNonUniformBorder: boolean;
+	borderLayer: CALayer;
+
+	hasBorderMask: boolean;
+	borderOriginalMask: CALayer;
+
+	topBorderLayer: CALayer;
+	rightBorderLayer: CALayer;
+	bottomBorderLayer: CALayer;
+	leftBorderLayer: CALayer;
+
+	gradientLayer: CAGradientLayer;
+	boxShadowLayer: CALayer;
+}
 
 export namespace ios {
 	export function getActualHeight(view: UIView): number {
@@ -24,4 +41,51 @@ 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);
+		}
+		return gradientLayer;
+	}
+
+	export function clearGradient(nativeView: NativeScriptUIView): void {
+		if (nativeView?.gradientLayer) {
+			nativeView.gradientLayer.removeFromSuperlayer();
+		}
+	}
 }
diff --git a/packages/types-ios/src/lib/ios/ios.d.ts b/packages/types-ios/src/lib/ios/ios.d.ts
index c2367844ec..f8d6cec6af 100644
--- a/packages/types-ios/src/lib/ios/ios.d.ts
+++ b/packages/types-ios/src/lib/ios/ios.d.ts
@@ -82,7 +82,6 @@
 /// <reference path="objc-x86_64/objc!JavaScriptCore.d.ts" />
 /// <reference path="objc-x86_64/objc!LinkPresentation.d.ts" />
 /// <reference path="objc-x86_64/objc!LocalAuthentication.d.ts" />
-/// <reference path="objc-x86_64/objc!MDFInternationalization.d.ts" />
 /// <reference path="objc-x86_64/objc!MachO.d.ts" />
 /// <reference path="objc-x86_64/objc!MapKit.d.ts" />
 /// <reference path="objc-x86_64/objc!MediaAccessibility.d.ts" />
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!AVFoundation.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!AVFoundation.d.ts
index 7156de88e5..699b6004cc 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!AVFoundation.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!AVFoundation.d.ts
@@ -271,6 +271,10 @@ declare var AVAssetExportPreset960x540: string;
 
 declare var AVAssetExportPresetAppleM4A: string;
 
+declare var AVAssetExportPresetAppleProRes422LPCM: string;
+
+declare var AVAssetExportPresetAppleProRes4444LPCM: string;
+
 declare var AVAssetExportPresetHEVC1920x1080: string;
 
 declare var AVAssetExportPresetHEVC1920x1080WithAlpha: string;
@@ -1587,6 +1591,12 @@ declare class AVCaptureDevice extends NSObject {
 
 	activeMaxExposureDuration: CMTime;
 
+	readonly activePrimaryConstituentDevice: AVCaptureDevice;
+
+	readonly activePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions: AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions;
+
+	readonly activePrimaryConstituentDeviceSwitchingBehavior: AVCapturePrimaryConstituentDeviceSwitchingBehavior;
+
 	activeVideoMaxFrameDuration: CMTime;
 
 	activeVideoMinFrameDuration: CMTime;
@@ -1629,6 +1639,8 @@ declare class AVCaptureDevice extends NSObject {
 
 	readonly exposureTargetOffset: number;
 
+	fallbackPrimaryConstituentDevices: NSArray<AVCaptureDevice>;
+
 	readonly flashActive: boolean;
 
 	readonly flashAvailable: boolean;
@@ -1689,6 +1701,10 @@ declare class AVCaptureDevice extends NSObject {
 
 	readonly position: AVCaptureDevicePosition;
 
+	readonly primaryConstituentDeviceRestrictedSwitchingBehaviorConditions: AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions;
+
+	readonly primaryConstituentDeviceSwitchingBehavior: AVCapturePrimaryConstituentDeviceSwitchingBehavior;
+
 	readonly rampingVideoZoom: boolean;
 
 	smoothAutoFocusEnabled: boolean;
@@ -1697,6 +1713,8 @@ declare class AVCaptureDevice extends NSObject {
 
 	subjectAreaChangeMonitoringEnabled: boolean;
 
+	readonly supportedFallbackPrimaryConstituentDevices: NSArray<AVCaptureDevice>;
+
 	readonly suspended: boolean;
 
 	readonly systemPressureState: AVCaptureSystemPressureState;
@@ -1761,6 +1779,8 @@ declare class AVCaptureDevice extends NSObject {
 
 	setFocusModeLockedWithLensPositionCompletionHandler(lensPosition: number, handler: (p1: CMTime) => void): void;
 
+	setPrimaryConstituentDeviceSwitchingBehaviorRestrictedSwitchingBehaviorConditions(switchingBehavior: AVCapturePrimaryConstituentDeviceSwitchingBehavior, restrictedSwitchingBehaviorConditions: AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions): void;
+
 	setTorchModeOnWithLevelError(torchLevel: number): boolean;
 
 	setWhiteBalanceModeLockedWithDeviceWhiteBalanceGainsCompletionHandler(whiteBalanceGains: AVCaptureWhiteBalanceGains, handler: (p1: CMTime) => void): void;
@@ -1819,6 +1839,8 @@ declare class AVCaptureDeviceFormat extends NSObject {
 
 	readonly multiCamSupported: boolean;
 
+	readonly portraitEffectSupported: boolean;
+
 	readonly portraitEffectsMatteStillImageDeliverySupported: boolean;
 
 	readonly supportedColorSpaces: NSArray<number>;
@@ -1833,6 +1855,8 @@ declare class AVCaptureDeviceFormat extends NSObject {
 
 	readonly videoFrameRateRangeForCenterStage: AVFrameRateRange;
 
+	readonly videoFrameRateRangeForPortraitEffect: AVFrameRateRange;
+
 	readonly videoHDRSupported: boolean;
 
 	readonly videoMaxZoomFactor: number;
@@ -2105,12 +2129,20 @@ declare class AVCaptureMovieFileOutput extends AVCaptureFileOutput {
 
 	movieFragmentInterval: CMTime;
 
+	readonly primaryConstituentDeviceRestrictedSwitchingBehaviorConditionsForRecording: AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions;
+
+	readonly primaryConstituentDeviceSwitchingBehaviorForRecording: AVCapturePrimaryConstituentDeviceSwitchingBehavior;
+
+	primaryConstituentDeviceSwitchingBehaviorForRecordingEnabled: boolean;
+
 	outputSettingsForConnection(connection: AVCaptureConnection): NSDictionary<string, any>;
 
 	recordsVideoOrientationAndMirroringChangesAsMetadataTrackForConnection(connection: AVCaptureConnection): boolean;
 
 	setOutputSettingsForConnection(outputSettings: NSDictionary<string, any>, connection: AVCaptureConnection): void;
 
+	setPrimaryConstituentDeviceSwitchingBehaviorForRecordingRestrictedSwitchingBehaviorConditions(switchingBehavior: AVCapturePrimaryConstituentDeviceSwitchingBehavior, restrictedSwitchingBehaviorConditions: AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions): void;
+
 	setRecordsVideoOrientationAndMirroringChangesAsMetadataTrackForConnection(doRecordChanges: boolean, connection: AVCaptureConnection): void;
 
 	supportedOutputSettingsKeysForConnection(connection: AVCaptureConnection): NSArray<string>;
@@ -2474,6 +2506,28 @@ declare class AVCapturePhotoSettings extends NSObject implements NSCopying {
 	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
 }
 
+declare const enum AVCapturePrimaryConstituentDeviceRestrictedSwitchingBehaviorConditions {
+
+	None = 0,
+
+	VideoZoomChanged = 1,
+
+	FocusModeChanged = 2,
+
+	ExposureModeChanged = 4
+}
+
+declare const enum AVCapturePrimaryConstituentDeviceSwitchingBehavior {
+
+	Unsupported = 0,
+
+	Auto = 1,
+
+	Restricted = 2,
+
+	Locked = 3
+}
+
 declare class AVCaptureResolvedPhotoSettings extends NSObject {
 
 	static alloc(): AVCaptureResolvedPhotoSettings; // inherited from NSObject
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accelerate.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accelerate.d.ts
index fe700b2de6..6c4645face 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accelerate.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accelerate.d.ts
@@ -284,6 +284,8 @@ declare const enum BNNSDataType {
 
 	Float32 = 65568,
 
+	BFloat16 = 98320,
+
 	IntBit = 131072,
 
 	Int1 = 131073,
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accessibility.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accessibility.d.ts
index 92bcf3d8a8..0daf1e81c5 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accessibility.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Accessibility.d.ts
@@ -1,4 +1,40 @@
 
+declare class AXBrailleMap extends NSObject implements NSCopying, NSSecureCoding {
+
+	static alloc(): AXBrailleMap; // inherited from NSObject
+
+	static new(): AXBrailleMap; // inherited from NSObject
+
+	readonly dimensions: CGSize;
+
+	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
+
+	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
+
+	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
+
+	encodeWithCoder(coder: NSCoder): void;
+
+	heightAtPoint(point: CGPoint): number;
+
+	initWithCoder(coder: NSCoder): this;
+
+	presentImage(image: any): void;
+
+	setHeightAtPoint(status: number, point: CGPoint): void;
+}
+
+interface AXBrailleMapRenderer extends NSObjectProtocol {
+
+	accessibilityBrailleMapRenderRegion: CGRect;
+
+	accessibilityBrailleMapRenderer: (p1: AXBrailleMap) => void;
+}
+declare var AXBrailleMapRenderer: {
+
+	prototype: AXBrailleMapRenderer;
+};
+
 declare class AXCategoricalDataAxisDescriptor extends NSObject implements AXDataAxisDescriptor {
 
 	static alloc(): AXCategoricalDataAxisDescriptor; // inherited from NSObject
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!ClassKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!ClassKit.d.ts
index 10d32bc147..bed9a9524a 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!ClassKit.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!ClassKit.d.ts
@@ -254,7 +254,9 @@ declare const enum CLSErrorCode {
 
 	InvalidUpdate = 8,
 
-	PartialFailure = 9
+	PartialFailure = 9,
+
+	InvalidAccountCredentials = 10
 }
 
 declare var CLSErrorCodeDomain: string;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreGraphics.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreGraphics.d.ts
index 06d8aa1609..a01be708b5 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreGraphics.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreGraphics.d.ts
@@ -1596,12 +1596,16 @@ declare var kCGColorSpaceITUR_2020_PQ: string;
 
 declare var kCGColorSpaceITUR_2020_PQ_EOTF: string;
 
+declare var kCGColorSpaceITUR_2020_sRGBGamma: string;
+
 declare var kCGColorSpaceITUR_2100_HLG: string;
 
 declare var kCGColorSpaceITUR_2100_PQ: string;
 
 declare var kCGColorSpaceITUR_709: string;
 
+declare var kCGColorSpaceITUR_709_PQ: string;
+
 declare var kCGColorSpaceLinearDisplayP3: string;
 
 declare var kCGColorSpaceLinearGray: string;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreML.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreML.d.ts
index 769c08e3c1..dd6d4212f9 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreML.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreML.d.ts
@@ -586,6 +586,8 @@ declare const enum MLMultiArrayDataType {
 
 	Float32 = 65568,
 
+	Float16 = 65552,
+
 	Float = 65568,
 
 	Int32 = 131104
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreMedia.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreMedia.d.ts
index 3284b6f35b..c87015d184 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreMedia.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreMedia.d.ts
@@ -1727,6 +1727,10 @@ declare const kCMVideoCodecType_DVCPro50PAL: number;
 
 declare const kCMVideoCodecType_DVCProPAL: number;
 
+declare const kCMVideoCodecType_DepthHEVC: number;
+
+declare const kCMVideoCodecType_DisparityHEVC: number;
+
 declare const kCMVideoCodecType_DolbyVisionHEVC: number;
 
 declare const kCMVideoCodecType_H263: number;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreVideo.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreVideo.d.ts
index 092db8c935..f0be36713c 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreVideo.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!CoreVideo.d.ts
@@ -730,6 +730,18 @@ declare const kCVPixelFormatType_Lossless_420YpCbCr8BiPlanarFullRange: number;
 
 declare const kCVPixelFormatType_Lossless_420YpCbCr8BiPlanarVideoRange: number;
 
+declare const kCVPixelFormatType_Lossless_422YpCbCr10PackedBiPlanarVideoRange: number;
+
+declare const kCVPixelFormatType_Lossy_32BGRA: number;
+
+declare const kCVPixelFormatType_Lossy_420YpCbCr10PackedBiPlanarVideoRange: number;
+
+declare const kCVPixelFormatType_Lossy_420YpCbCr8BiPlanarFullRange: number;
+
+declare const kCVPixelFormatType_Lossy_420YpCbCr8BiPlanarVideoRange: number;
+
+declare const kCVPixelFormatType_Lossy_422YpCbCr10PackedBiPlanarVideoRange: number;
+
 declare const kCVPixelFormatType_OneComponent10: number;
 
 declare const kCVPixelFormatType_OneComponent12: number;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!ExposureNotification.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!ExposureNotification.d.ts
index c5d2245824..32a597ca92 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!ExposureNotification.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!ExposureNotification.d.ts
@@ -246,6 +246,8 @@ declare class ENExposureWindow extends NSObject {
 	readonly infectiousness: ENInfectiousness;
 
 	readonly scanInstances: NSArray<ENScanInstance>;
+
+	readonly variantOfConcernType: ENVariantOfConcernType;
 }
 
 declare const enum ENInfectiousness {
@@ -368,3 +370,16 @@ declare class ENTemporaryExposureKey extends NSObject {
 
 	transmissionRiskLevel: number;
 }
+
+declare const enum ENVariantOfConcernType {
+
+	TypeUnknown = 0,
+
+	Type1 = 1,
+
+	Type2 = 2,
+
+	Type3 = 3,
+
+	Type4 = 4
+}
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Foundation.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Foundation.d.ts
index 2d3fb0eec5..68661ae14d 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Foundation.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Foundation.d.ts
@@ -5221,10 +5221,6 @@ declare class NSLocale extends NSObject implements NSCopying, NSSecureCoding {
 
 	static localeWithLocaleIdentifier(ident: string): NSLocale;
 
-	static mdf_isDefaultLanguageLTR(): boolean;
-
-	static mdf_isDefaultLanguageRTL(): boolean;
-
 	static new(): NSLocale; // inherited from NSObject
 
 	static windowsLocaleCodeFromLocaleIdentifier(localeIdentifier: string): number;
@@ -9491,14 +9487,6 @@ declare class NSString extends NSObject implements CKRecordValue, CNKeyDescripto
 
 	maximumLengthOfBytesUsingEncoding(enc: number): number;
 
-	mdf_calculatedLanguageDirection(): NSLocaleLanguageDirection;
-
-	mdf_stringWithBidiEmbedding(languageDirection: NSLocaleLanguageDirection): string;
-
-	mdf_stringWithBidiMarkersStripped(): string;
-
-	mdf_stringWithStereoResetContext(direction: NSLocaleLanguageDirection, contextDirection: NSLocaleLanguageDirection): string;
-
 	mutableCopyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
 
 	paragraphRangeForRange(range: NSRange): NSRange;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!GameController.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!GameController.d.ts
index e5698d96a1..35b3171420 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!GameController.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!GameController.d.ts
@@ -1527,6 +1527,28 @@ declare class GCPhysicalInputProfile extends NSObject {
 	setStateFromPhysicalInput(physicalInput: GCPhysicalInputProfile): void;
 }
 
+declare var GCProductCategoryCoalescedRemote: string;
+
+declare var GCProductCategoryControlCenterRemote: string;
+
+declare var GCProductCategoryDualSense: string;
+
+declare var GCProductCategoryDualShock4: string;
+
+declare var GCProductCategoryKeyboard: string;
+
+declare var GCProductCategoryMFi: string;
+
+declare var GCProductCategoryMouse: string;
+
+declare var GCProductCategorySiriRemote1stGen: string;
+
+declare var GCProductCategorySiriRemote2ndGen: string;
+
+declare var GCProductCategoryUniversalElectronicsRemote: string;
+
+declare var GCProductCategoryXboxOne: string;
+
 interface GCQuaternion {
 	x: number;
 	y: number;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!HomeKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!HomeKit.d.ts
index 7a9b629205..0f4c1bc40b 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!HomeKit.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!HomeKit.d.ts
@@ -197,7 +197,7 @@ declare class HMAccessorySetupManager extends NSObject {
 
 	static new(): HMAccessorySetupManager; // inherited from NSObject
 
-	addAndSetUpAccessoriesForTopologyCompletionHandler(topology: HMCHIPServiceTopology, completion: (p1: NSError) => void): void;
+	addAndSetUpAccessoriesForTopologyCompletionHandler(topology: HMMatterTopology, completion: (p1: NSError) => void): void;
 }
 
 declare class HMAccessorySetupPayload extends NSObject {
@@ -282,128 +282,6 @@ declare class HMAddAccessoryRequest extends NSObject {
 	payloadWithURLOwnershipToken(setupPayloadURL: NSURL, ownershipToken: HMAccessoryOwnershipToken): HMAccessorySetupPayload;
 }
 
-declare class HMCHIPServiceHome extends NSObject implements NSCopying, NSSecureCoding {
-
-	static alloc(): HMCHIPServiceHome; // inherited from NSObject
-
-	static new(): HMCHIPServiceHome; // inherited from NSObject
-
-	readonly name: string;
-
-	readonly uuid: NSUUID;
-
-	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
-
-	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
-
-	constructor(o: { UUID: NSUUID; name: string; });
-
-	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
-
-	encodeWithCoder(coder: NSCoder): void;
-
-	initWithCoder(coder: NSCoder): this;
-
-	initWithUUIDName(uuid: NSUUID, name: string): this;
-}
-
-declare class HMCHIPServiceRequestHandler extends NSObject implements NSExtensionRequestHandling {
-
-	static alloc(): HMCHIPServiceRequestHandler; // inherited from NSObject
-
-	static new(): HMCHIPServiceRequestHandler; // inherited from NSObject
-
-	readonly debugDescription: string; // inherited from NSObjectProtocol
-
-	readonly description: string; // inherited from NSObjectProtocol
-
-	readonly hash: number; // inherited from NSObjectProtocol
-
-	readonly isProxy: boolean; // inherited from NSObjectProtocol
-
-	readonly superclass: typeof NSObject; // inherited from NSObjectProtocol
-
-	readonly  // inherited from NSObjectProtocol
-
-	beginRequestWithExtensionContext(context: NSExtensionContext): void;
-
-	class(): typeof NSObject;
-
-	configureAccessoryWithNameRoomCompletion(accessoryName: string, accessoryRoom: HMCHIPServiceRoom, completion: (p1: NSError) => void): void;
-
-	conformsToProtocol(aProtocol: any /* Protocol */): boolean;
-
-	fetchRoomsInHomeCompletion(home: HMCHIPServiceHome, completion: (p1: NSArray<HMCHIPServiceRoom>, p2: NSError) => void): void;
-
-	isEqual(object: any): boolean;
-
-	isKindOfClass(aClass: typeof NSObject): boolean;
-
-	isMemberOfClass(aClass: typeof NSObject): boolean;
-
-	pairAccessoryInHomeOnboardingPayloadCompletion(home: HMCHIPServiceHome, onboardingPayload: string, completion: (p1: NSError) => void): void;
-
-	performSelector(aSelector: string): any;
-
-	performSelectorWithObject(aSelector: string, object: any): any;
-
-	performSelectorWithObjectWithObject(aSelector: string, object1: any, object2: any): any;
-
-	respondsToSelector(aSelector: string): boolean;
-
-	retainCount(): number;
-
-	self(): this;
-}
-
-declare class HMCHIPServiceRoom extends NSObject implements NSCopying, NSSecureCoding {
-
-	static alloc(): HMCHIPServiceRoom; // inherited from NSObject
-
-	static new(): HMCHIPServiceRoom; // inherited from NSObject
-
-	readonly name: string;
-
-	readonly uuid: NSUUID;
-
-	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
-
-	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
-
-	constructor(o: { UUID: NSUUID; name: string; });
-
-	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
-
-	encodeWithCoder(coder: NSCoder): void;
-
-	initWithCoder(coder: NSCoder): this;
-
-	initWithUUIDName(uuid: NSUUID, name: string): this;
-}
-
-declare class HMCHIPServiceTopology extends NSObject implements NSCopying, NSSecureCoding {
-
-	static alloc(): HMCHIPServiceTopology; // inherited from NSObject
-
-	static new(): HMCHIPServiceTopology; // inherited from NSObject
-
-	readonly homes: NSArray<HMCHIPServiceHome>;
-
-	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
-
-	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
-
-	constructor(o: { homes: NSArray<HMCHIPServiceHome> | HMCHIPServiceHome[]; });
-
-	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
-
-	encodeWithCoder(coder: NSCoder): void;
-
-	initWithCoder(coder: NSCoder): this;
-
-	initWithHomes(homes: NSArray<HMCHIPServiceHome> | HMCHIPServiceHome[]): this;
-}
-
 declare class HMCalendarEvent extends HMTimeEvent implements NSCopying, NSMutableCopying {
 
 	static alloc(): HMCalendarEvent; // inherited from NSObject
@@ -1971,6 +1849,128 @@ declare class HMLocationEvent extends HMEvent implements NSCopying, NSMutableCop
 	updateRegionCompletionHandler(region: CLRegion, completion: (p1: NSError) => void): void;
 }
 
+declare class HMMatterHome extends NSObject implements NSCopying, NSSecureCoding {
+
+	static alloc(): HMMatterHome; // inherited from NSObject
+
+	static new(): HMMatterHome; // inherited from NSObject
+
+	readonly name: string;
+
+	readonly uuid: NSUUID;
+
+	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
+
+	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
+
+	constructor(o: { UUID: NSUUID; name: string; });
+
+	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
+
+	encodeWithCoder(coder: NSCoder): void;
+
+	initWithCoder(coder: NSCoder): this;
+
+	initWithUUIDName(uuid: NSUUID, name: string): this;
+}
+
+declare class HMMatterRequestHandler extends NSObject implements NSExtensionRequestHandling {
+
+	static alloc(): HMMatterRequestHandler; // inherited from NSObject
+
+	static new(): HMMatterRequestHandler; // inherited from NSObject
+
+	readonly debugDescription: string; // inherited from NSObjectProtocol
+
+	readonly description: string; // inherited from NSObjectProtocol
+
+	readonly hash: number; // inherited from NSObjectProtocol
+
+	readonly isProxy: boolean; // inherited from NSObjectProtocol
+
+	readonly superclass: typeof NSObject; // inherited from NSObjectProtocol
+
+	readonly  // inherited from NSObjectProtocol
+
+	beginRequestWithExtensionContext(context: NSExtensionContext): void;
+
+	class(): typeof NSObject;
+
+	configureAccessoryWithNameRoomCompletion(accessoryName: string, accessoryRoom: HMMatterRoom, completion: (p1: NSError) => void): void;
+
+	conformsToProtocol(aProtocol: any /* Protocol */): boolean;
+
+	fetchRoomsInHomeCompletion(home: HMMatterHome, completion: (p1: NSArray<HMMatterRoom>, p2: NSError) => void): void;
+
+	isEqual(object: any): boolean;
+
+	isKindOfClass(aClass: typeof NSObject): boolean;
+
+	isMemberOfClass(aClass: typeof NSObject): boolean;
+
+	pairAccessoryInHomeOnboardingPayloadCompletion(home: HMMatterHome, onboardingPayload: string, completion: (p1: NSError) => void): void;
+
+	performSelector(aSelector: string): any;
+
+	performSelectorWithObject(aSelector: string, object: any): any;
+
+	performSelectorWithObjectWithObject(aSelector: string, object1: any, object2: any): any;
+
+	respondsToSelector(aSelector: string): boolean;
+
+	retainCount(): number;
+
+	self(): this;
+}
+
+declare class HMMatterRoom extends NSObject implements NSCopying, NSSecureCoding {
+
+	static alloc(): HMMatterRoom; // inherited from NSObject
+
+	static new(): HMMatterRoom; // inherited from NSObject
+
+	readonly name: string;
+
+	readonly uuid: NSUUID;
+
+	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
+
+	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
+
+	constructor(o: { UUID: NSUUID; name: string; });
+
+	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
+
+	encodeWithCoder(coder: NSCoder): void;
+
+	initWithCoder(coder: NSCoder): this;
+
+	initWithUUIDName(uuid: NSUUID, name: string): this;
+}
+
+declare class HMMatterTopology extends NSObject implements NSCopying, NSSecureCoding {
+
+	static alloc(): HMMatterTopology; // inherited from NSObject
+
+	static new(): HMMatterTopology; // inherited from NSObject
+
+	readonly homes: NSArray<HMMatterHome>;
+
+	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
+
+	constructor(o: { coder: NSCoder; }); // inherited from NSCoding
+
+	constructor(o: { homes: NSArray<HMMatterHome> | HMMatterHome[]; });
+
+	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
+
+	encodeWithCoder(coder: NSCoder): void;
+
+	initWithCoder(coder: NSCoder): this;
+
+	initWithHomes(homes: NSArray<HMMatterHome> | HMMatterHome[]): this;
+}
+
 declare class HMMutableCalendarEvent extends HMCalendarEvent {
 
 	static alloc(): HMMutableCalendarEvent; // inherited from NSObject
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Intents.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Intents.d.ts
index 6e5af5191a..e9ac775aec 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Intents.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Intents.d.ts
@@ -2438,6 +2438,8 @@ declare class INFile extends NSObject implements NSSecureCoding {
 
 	filename: string;
 
+	removedOnCompletion: boolean;
+
 	readonly typeIdentifier: string;
 
 	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MDFInternationalization.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!MDFInternationalization.d.ts
deleted file mode 100644
index 491d8ed0fb..0000000000
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MDFInternationalization.d.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-
-declare function MDFInsetsFlippedHorizontally(insets: UIEdgeInsets): UIEdgeInsets;
-
-declare function MDFInsetsMakeWithLayoutDirection(top: number, leading: number, bottom: number, trailing: number, layoutDirection: UIUserInterfaceLayoutDirection): UIEdgeInsets;
-
-declare var MDFInternationalizationVersionNumber: number;
-
-declare var MDFInternationalizationVersionNumberVar: number;
-
-declare var MDFInternationalizationVersionString: interop.Reference<number>;
-
-declare var MDFInternationalizationVersionStringVar: interop.Reference<number>;
-
-declare function MDFLeadingMarginAutoresizingMaskForLayoutDirection(layoutDirection: UIUserInterfaceLayoutDirection): UIViewAutoresizing;
-
-declare function MDFRectFlippedHorizontally(frame: CGRect, containerWidth: number): CGRect;
-
-declare function MDFTrailingMarginAutoresizingMaskForLayoutDirection(layoutDirection: UIUserInterfaceLayoutDirection): UIViewAutoresizing;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Metal.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Metal.d.ts
index ca14d1d0b5..0984f03877 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Metal.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Metal.d.ts
@@ -2408,6 +2408,8 @@ declare const enum MTLGPUFamily {
 
 	Apple7 = 1007,
 
+	Apple8 = 1008,
+
 	Mac1 = 2001,
 
 	Mac2 = 2002,
@@ -4472,6 +4474,8 @@ interface MTLTexture extends MTLResource {
 
 	bufferOffset: number;
 
+	compressionType: MTLTextureCompressionType;
+
 	depth: number;
 
 	firstMipmapInTail: number;
@@ -4529,6 +4533,13 @@ declare var MTLTexture: {
 	prototype: MTLTexture;
 };
 
+declare const enum MTLTextureCompressionType {
+
+	Lossless = 0,
+
+	Lossy = 1
+}
+
 declare class MTLTextureDescriptor extends NSObject implements NSCopying {
 
 	static alloc(): MTLTextureDescriptor; // inherited from NSObject
@@ -4545,6 +4556,8 @@ declare class MTLTextureDescriptor extends NSObject implements NSCopying {
 
 	arrayLength: number;
 
+	compressionType: MTLTextureCompressionType;
+
 	cpuCacheMode: MTLCPUCacheMode;
 
 	depth: number;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetalPerformanceShadersGraph.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetalPerformanceShadersGraph.d.ts
index 0ac14f3e40..fbf5c47c4c 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetalPerformanceShadersGraph.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetalPerformanceShadersGraph.d.ts
@@ -231,6 +231,34 @@ declare class MPSGraph extends NSObject {
 
 	powerWithPrimaryTensorSecondaryTensorName(primaryTensor: MPSGraphTensor, secondaryTensor: MPSGraphTensor, name: string): MPSGraphTensor;
 
+	randomPhiloxStateTensorWithCounterLowCounterHighKeyName(counterLow: number, counterHigh: number, key: number, name: string): MPSGraphTensor;
+
+	randomPhiloxStateTensorWithSeedName(seed: number, name: string): MPSGraphTensor;
+
+	randomTensorWithShapeDescriptorName(shape: NSArray<number> | number[], descriptor: MPSGraphRandomOpDescriptor, name: string): MPSGraphTensor;
+
+	randomTensorWithShapeDescriptorSeedName(shape: NSArray<number> | number[], descriptor: MPSGraphRandomOpDescriptor, seed: number, name: string): MPSGraphTensor;
+
+	randomTensorWithShapeDescriptorStateTensorName(shape: NSArray<number> | number[], descriptor: MPSGraphRandomOpDescriptor, state: MPSGraphTensor, name: string): NSArray<MPSGraphTensor>;
+
+	randomTensorWithShapeTensorDescriptorName(shapeTensor: MPSGraphTensor, descriptor: MPSGraphRandomOpDescriptor, name: string): MPSGraphTensor;
+
+	randomTensorWithShapeTensorDescriptorSeedName(shapeTensor: MPSGraphTensor, descriptor: MPSGraphRandomOpDescriptor, seed: number, name: string): MPSGraphTensor;
+
+	randomTensorWithShapeTensorDescriptorStateTensorName(shapeTensor: MPSGraphTensor, descriptor: MPSGraphRandomOpDescriptor, state: MPSGraphTensor, name: string): NSArray<MPSGraphTensor>;
+
+	randomUniformTensorWithShapeName(shape: NSArray<number> | number[], name: string): MPSGraphTensor;
+
+	randomUniformTensorWithShapeSeedName(shape: NSArray<number> | number[], seed: number, name: string): MPSGraphTensor;
+
+	randomUniformTensorWithShapeStateTensorName(shape: NSArray<number> | number[], state: MPSGraphTensor, name: string): NSArray<MPSGraphTensor>;
+
+	randomUniformTensorWithShapeTensorName(shapeTensor: MPSGraphTensor, name: string): MPSGraphTensor;
+
+	randomUniformTensorWithShapeTensorSeedName(shapeTensor: MPSGraphTensor, seed: number, name: string): MPSGraphTensor;
+
+	randomUniformTensorWithShapeTensorStateTensorName(shapeTensor: MPSGraphTensor, state: MPSGraphTensor, name: string): NSArray<MPSGraphTensor>;
+
 	reLUGradientWithIncomingGradientSourceTensorName(gradient: MPSGraphTensor, source: MPSGraphTensor, name: string): MPSGraphTensor;
 
 	reLUWithTensorName(tensor: MPSGraphTensor, name: string): MPSGraphTensor;
@@ -243,10 +271,18 @@ declare class MPSGraph extends NSObject {
 
 	reductionArgMinimumWithTensorAxisName(tensor: MPSGraphTensor, axis: number, name: string): MPSGraphTensor;
 
+	reductionMaximumPropagateNaNWithTensorAxesName(tensor: MPSGraphTensor, axes: NSArray<number> | number[], name: string): MPSGraphTensor;
+
+	reductionMaximumPropagateNaNWithTensorAxisName(tensor: MPSGraphTensor, axis: number, name: string): MPSGraphTensor;
+
 	reductionMaximumWithTensorAxesName(tensor: MPSGraphTensor, axes: NSArray<number> | number[], name: string): MPSGraphTensor;
 
 	reductionMaximumWithTensorAxisName(tensor: MPSGraphTensor, axis: number, name: string): MPSGraphTensor;
 
+	reductionMinimumPropagateNaNWithTensorAxesName(tensor: MPSGraphTensor, axes: NSArray<number> | number[], name: string): MPSGraphTensor;
+
+	reductionMinimumPropagateNaNWithTensorAxisName(tensor: MPSGraphTensor, axis: number, name: string): MPSGraphTensor;
+
 	reductionMinimumWithTensorAxesName(tensor: MPSGraphTensor, axes: NSArray<number> | number[], name: string): MPSGraphTensor;
 
 	reductionMinimumWithTensorAxisName(tensor: MPSGraphTensor, axis: number, name: string): MPSGraphTensor;
@@ -697,6 +733,47 @@ declare class MPSGraphPooling4DOpDescriptor extends NSObject implements NSCopyin
 	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
 }
 
+declare const enum MPSGraphRandomDistribution {
+
+	Uniform = 0,
+
+	Normal = 1,
+
+	TruncatedNormal = 2
+}
+
+declare const enum MPSGraphRandomNormalSamplingMethod {
+
+	InvCDF = 0,
+
+	BoxMuller = 1
+}
+
+declare class MPSGraphRandomOpDescriptor extends NSObject implements NSCopying {
+
+	static alloc(): MPSGraphRandomOpDescriptor; // inherited from NSObject
+
+	static new(): MPSGraphRandomOpDescriptor; // inherited from NSObject
+
+	distribution: MPSGraphRandomDistribution;
+
+	max: number;
+
+	maxInteger: number;
+
+	mean: number;
+
+	min: number;
+
+	minInteger: number;
+
+	samplingMethod: MPSGraphRandomNormalSamplingMethod;
+
+	standardDeviation: number;
+
+	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
+}
+
 declare const enum MPSGraphReductionMode {
 
 	Min = 0,
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetricKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetricKit.d.ts
index 208c777756..0e86de0b28 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetricKit.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!MetricKit.d.ts
@@ -27,6 +27,8 @@ declare class MXAppLaunchMetric extends MXMetric {
 
 	readonly histogrammedApplicationResumeTime: MXHistogram<NSUnitDuration>;
 
+	readonly histogrammedOptimizedTimeToFirstDraw: MXHistogram<NSUnitDuration>;
+
 	readonly histogrammedTimeToFirstDraw: MXHistogram<NSUnitDuration>;
 }
 
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Network.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Network.d.ts
index 8fafbf7133..b8ad0a8675 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Network.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Network.d.ts
@@ -434,7 +434,7 @@ declare function nw_content_context_get_is_final(context: NSObject): boolean;
 
 declare function nw_content_context_get_relative_priority(context: NSObject): number;
 
-declare function nw_content_context_set_antecedent(context: NSObject, antecendent_context: NSObject): void;
+declare function nw_content_context_set_antecedent(context: NSObject, antecedent_context: NSObject): void;
 
 declare function nw_content_context_set_expiration_milliseconds(context: NSObject, expiration_milliseconds: number): void;
 
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!PassKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!PassKit.d.ts
index 4949d20800..4ae5c81b83 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!PassKit.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!PassKit.d.ts
@@ -731,6 +731,8 @@ declare var PKPassLibraryDidChangeNotification: string;
 
 declare var PKPassLibraryPassTypeIdentifierUserInfoKey: string;
 
+declare var PKPassLibraryRecoveredPassesUserInfoKey: string;
+
 declare var PKPassLibraryRemotePaymentPassesDidChangeNotification: string;
 
 declare var PKPassLibraryRemovedPassInfosUserInfoKey: string;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!QuartzCore.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!QuartzCore.d.ts
index 3848754740..8bb0550b7e 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!QuartzCore.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!QuartzCore.d.ts
@@ -28,6 +28,8 @@ declare class CAAnimation extends NSObject implements CAAction, CAMediaTiming, N
 
 	fadeOutDuration: number;
 
+	preferredFrameRateRange: CAFrameRateRange;
+
 	removedOnCompletion: boolean;
 
 	timingFunction: CAMediaTimingFunction;
@@ -165,6 +167,8 @@ declare class CADisplayLink extends NSObject {
 
 	paused: boolean;
 
+	preferredFrameRateRange: CAFrameRateRange;
+
 	preferredFramesPerSecond: number;
 
 	readonly targetTimestamp: number;
@@ -348,6 +352,19 @@ declare class CAEmitterLayer extends CALayer {
 	velocity: number;
 }
 
+interface CAFrameRateRange {
+	minimum: number;
+	maximum: number;
+	preferred: number;
+}
+declare var CAFrameRateRange: interop.StructType<CAFrameRateRange>;
+
+declare var CAFrameRateRangeDefault: CAFrameRateRange;
+
+declare function CAFrameRateRangeIsEqualToRange(range: CAFrameRateRange, other: CAFrameRateRange): boolean;
+
+declare function CAFrameRateRangeMake(minimum: number, maximum: number, preferred: number): CAFrameRateRange;
+
 declare class CAGradientLayer extends CALayer {
 
 	static alloc(): CAGradientLayer; // inherited from NSObject
@@ -673,7 +690,6 @@ declare class CAMediaTimingFunction extends NSObject implements NSSecureCoding {
 
 	static functionWithName(name: string): CAMediaTimingFunction;
 
-
 	static new(): CAMediaTimingFunction; // inherited from NSObject
 
 	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!SafariServices.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!SafariServices.d.ts
index ba27c62b86..b69ba10712 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!SafariServices.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!SafariServices.d.ts
@@ -133,6 +133,8 @@ declare class SFSafariViewControllerConfiguration extends NSObject implements NS
 
 	entersReaderIfAvailable: boolean;
 
+	eventAttribution: UIEventAttribution;
+
 	copyWithZone(zone: interop.Pointer | interop.Reference<any>): any;
 }
 
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts
index 4a531d0bfd..12730de96c 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!UIKit.d.ts
@@ -3802,8 +3802,6 @@ declare class UIApplication extends UIResponder {
 
 	static alloc(): UIApplication; // inherited from NSObject
 
-
-
 	static new(): UIApplication; // inherited from NSObject
 
 	static registerObjectForStateRestorationRestorationIdentifier(object: UIStateRestoring, restorationIdentifier: string): void;
@@ -7207,13 +7205,10 @@ declare class UIColor extends NSObject implements NSCopying, NSItemProviderReadi
 
 	static colorWithRedGreenBlueAlpha(red: number, green: number, blue: number, alpha: number): UIColor;
 
-	static colorWithUserInterfaceStyleDarkColorDefaultColor(darkColor: UIColor, defaultColor: UIColor): UIColor;
-
 	static colorWithWhiteAlpha(white: number, alpha: number): UIColor;
 
 	static itemProviderVisibilityForRepresentationWithTypeIdentifier(typeIdentifier: string): NSItemProviderRepresentationVisibility;
 
-
 	static new(): UIColor; // inherited from NSObject
 
 	static objectWithItemProviderDataTypeIdentifierError(data: NSData, typeIdentifier: string): UIColor;
@@ -7422,10 +7417,6 @@ declare class UIColor extends NSObject implements NSCopying, NSItemProviderReadi
 
 	loadDataWithTypeIdentifierForItemProviderCompletionHandler(typeIdentifier: string, completionHandler: (p1: NSData, p2: NSError) => void): NSProgress;
 
-
-
-
-
 	performSelector(aSelector: string): any;
 
 	performSelectorWithObject(aSelector: string, object: any): any;
@@ -9967,8 +9958,6 @@ declare class UIFont extends NSObject implements NSCopying, NSSecureCoding {
 
 	static italicSystemFontOfSize(fontSize: number): UIFont;
 
-
-
 	static monospacedDigitSystemFontOfSizeWeight(fontSize: number, weight: number): UIFont;
 
 	static monospacedSystemFontOfSizeWeight(fontSize: number, weight: number): UIFont;
@@ -9999,7 +9988,6 @@ declare class UIFont extends NSObject implements NSCopying, NSSecureCoding {
 
 	readonly lineHeight: number;
 
-
 	readonly pointSize: number;
 
 	readonly xHeight: number;
@@ -10025,12 +10013,6 @@ declare class UIFont extends NSObject implements NSCopying, NSSecureCoding {
 	fontWithSize(fontSize: number): UIFont;
 
 	initWithCoder(coder: NSCoder): this;
-
-
-
-
-
-
 }
 
 declare class UIFontDescriptor extends NSObject implements NSCopying, NSSecureCoding {
@@ -10043,8 +10025,6 @@ declare class UIFontDescriptor extends NSObject implements NSCopying, NSSecureCo
 
 	static fontDescriptorWithNameSize(fontName: string, size: number): UIFontDescriptor;
 
-
-
 	static new(): UIFontDescriptor; // inherited from NSObject
 
 	static preferredFontDescriptorWithTextStyle(style: string): UIFontDescriptor;
@@ -10933,8 +10913,6 @@ declare class UIImage extends NSObject implements NSItemProviderReading, NSItemP
 
 	loadDataWithTypeIdentifierForItemProviderCompletionHandler(typeIdentifier: string, completionHandler: (p1: NSData, p2: NSError) => void): NSProgress;
 
-	mdf_imageWithHorizontallyFlippedOrientation(): UIImage;
-
 	performSelector(aSelector: string): any;
 
 	performSelectorWithObject(aSelector: string, object: any): any;
@@ -22281,11 +22259,6 @@ declare class UIView extends UIResponder implements CALayerDelegate, NSCoding, U
 
 	static commitAnimations(): void;
 
-
-	static mdf_userInterfaceLayoutDirectionForSemanticContentAttribute(semanticContentAttribute: UISemanticContentAttribute): UIUserInterfaceLayoutDirection;
-
-	static mdf_userInterfaceLayoutDirectionForSemanticContentAttributeRelativeToLayoutDirection(semanticContentAttribute: UISemanticContentAttribute, layoutDirection: UIUserInterfaceLayoutDirection): UIUserInterfaceLayoutDirection;
-
 	static modifyAnimationsWithRepeatCountAutoreversesAnimations(count: number, autoreverses: boolean, animations: () => void): void;
 
 	static new(): UIView; // inherited from NSObject
@@ -22418,12 +22391,6 @@ declare class UIView extends UIResponder implements CALayerDelegate, NSCoding, U
 
 	maximumContentSizeCategory: string;
 
-
-
-	readonly mdf_effectiveUserInterfaceLayoutDirection: UIUserInterfaceLayoutDirection;
-
-	mdf_semanticContentAttribute: UISemanticContentAttribute;
-
 	minimumContentSizeCategory: string;
 
 	motionEffects: NSArray<UIMotionEffect>;
@@ -22646,7 +22613,6 @@ declare class UIView extends UIResponder implements CALayerDelegate, NSCoding, U
 
 	layoutSubviews(): void;
 
-
 	needsUpdateConstraints(): boolean;
 
 	passThroughParent(): boolean;
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!UserNotifications.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!UserNotifications.d.ts
index 2ff4161989..90032b24d9 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!UserNotifications.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!UserNotifications.d.ts
@@ -512,10 +512,14 @@ declare class UNNotificationSound extends NSObject implements NSCopying, NSSecur
 
 	static new(): UNNotificationSound; // inherited from NSObject
 
+	static ringtoneSoundNamed(name: string): UNNotificationSound;
+
 	static soundNamed(name: string): UNNotificationSound;
 
 	static readonly defaultCriticalSound: UNNotificationSound;
 
+	static readonly defaultRingtoneSound: UNNotificationSound;
+
 	static readonly defaultSound: UNNotificationSound;
 
 	static readonly supportsSecureCoding: boolean; // inherited from NSSecureCoding
diff --git a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Vision.d.ts b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Vision.d.ts
index b8cd203ce5..941498f11f 100644
--- a/packages/types-ios/src/lib/ios/objc-x86_64/objc!Vision.d.ts
+++ b/packages/types-ios/src/lib/ios/objc-x86_64/objc!Vision.d.ts
@@ -24,50 +24,28 @@ declare class VNBarcodeObservation extends VNRectangleObservation {
 
 declare var VNBarcodeSymbologyAztec: string;
 
-declare var VNBarcodeSymbologyAztec_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyCodabar: string;
 
 declare var VNBarcodeSymbologyCode128: string;
 
-declare var VNBarcodeSymbologyCode128_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyCode39: string;
 
 declare var VNBarcodeSymbologyCode39Checksum: string;
 
-declare var VNBarcodeSymbologyCode39Checksum_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyCode39FullASCII: string;
 
 declare var VNBarcodeSymbologyCode39FullASCIIChecksum: string;
 
-declare var VNBarcodeSymbologyCode39FullASCIIChecksum_SwiftDeprecated: string;
-
-declare var VNBarcodeSymbologyCode39FullASCII_SwiftDeprecated: string;
-
-declare var VNBarcodeSymbologyCode39_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyCode93: string;
 
-declare var VNBarcodeSymbologyCode93_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyCode93i: string;
 
-declare var VNBarcodeSymbologyCode93i_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyDataMatrix: string;
 
-declare var VNBarcodeSymbologyDataMatrix_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyEAN13: string;
 
-declare var VNBarcodeSymbologyEAN13_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyEAN8: string;
 
-declare var VNBarcodeSymbologyEAN8_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyGS1DataBar: string;
 
 declare var VNBarcodeSymbologyGS1DataBarExpanded: string;
@@ -78,30 +56,18 @@ declare var VNBarcodeSymbologyI2of5: string;
 
 declare var VNBarcodeSymbologyI2of5Checksum: string;
 
-declare var VNBarcodeSymbologyI2of5Checksum_SwiftDeprecated: string;
-
-declare var VNBarcodeSymbologyI2of5_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyITF14: string;
 
-declare var VNBarcodeSymbologyITF14_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyMicroPDF417: string;
 
 declare var VNBarcodeSymbologyMicroQR: string;
 
 declare var VNBarcodeSymbologyPDF417: string;
 
-declare var VNBarcodeSymbologyPDF417_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyQR: string;
 
-declare var VNBarcodeSymbologyQR_SwiftDeprecated: string;
-
 declare var VNBarcodeSymbologyUPCE: string;
 
-declare var VNBarcodeSymbologyUPCE_SwiftDeprecated: string;
-
 declare var VNBodyLandmarkKeyLeftAnkle: string;
 
 declare var VNBodyLandmarkKeyLeftEar: string;
diff --git a/packages/webpack/package.json b/packages/webpack/package.json
index b8697e184b..029df90457 100644
--- a/packages/webpack/package.json
+++ b/packages/webpack/package.json
@@ -99,6 +99,6 @@
     "nyc": "^15.1.0",
     "proxyquire": "~2.1.0",
     "source-map-support": "^0.5.13",
-    "typescript": "4.1.4"
+    "typescript": "4.5.4"
   }
 }
diff --git a/packages/webpack5/package.json b/packages/webpack5/package.json
index 565c50ff06..210e9a2901 100644
--- a/packages/webpack5/package.json
+++ b/packages/webpack5/package.json
@@ -67,7 +67,7 @@
 		"jest-matcher-utils": "27.1.1",
 		"nativescript-vue-template-compiler": "2.9.0",
 		"ts-jest": "27.0.5",
-		"typescript": "4.4.2"
+		"typescript": "4.5.4"
 	},
 	"peerDependencies": {
 		"nativescript-vue-template-compiler": "^2.8.1"
diff --git a/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml b/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml
index a0c6d1a066..250a672d22 100644
--- a/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml
+++ b/tools/assets/App_Resources/Android/src/main/AndroidManifest.xml
@@ -21,13 +21,17 @@
 		android:allowBackup="true"
 		android:icon="@drawable/icon"
 		android:label="@string/app_name"
-		android:theme="@style/AppTheme">
+		android:theme="@style/AppTheme"
+		android:hardwareAccelerated="true">
 
 		<activity
 			android:name="com.tns.NativeScriptActivity"
 			android:label="@string/title_activity_kimera"
 			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
-			android:theme="@style/LaunchScreenTheme">
+			android:theme="@style/LaunchScreenTheme"
+			android:hardwareAccelerated="true"
+      		android:launchMode="singleTask"
+			android:exported="true">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
 
diff --git a/tools/scripts/typings-gen.sh b/tools/scripts/typings-gen.sh
index 03919175b4..38dd765d39 100755
--- a/tools/scripts/typings-gen.sh
+++ b/tools/scripts/typings-gen.sh
@@ -21,7 +21,7 @@ fi
 
 echo "Creating typings project with @nativescript/ios@$IOS_RUNTIME_VERSION..."
 rm -rf ios-typings-prj
-ns create --template @nativescript/template-blank@7.0.4 ios-typings-prj
+ns create --template @nativescript/template-blank@latest ios-typings-prj
 ns platform add ios@$IOS_RUNTIME_VERSION --path ios-typings-prj/
 
 if [ -n "$METADATA_GENERATOR_PATH" ]
@@ -38,10 +38,10 @@ TNS_TYPESCRIPT_DECLARATIONS_PATH=$(pwd)/ios-typings-prj/typings ns build ios --d
 echo "Deleting old ios typings (ios/objc-x86_64)..."
 rm packages/types-ios/src/lib/ios/objc-x86_64/*
 
-echo "Deleting Material Components typings..."
-rm ios-typings-prj/typings/x86_64/objc\!MaterialComponents.d.ts
+# echo "Deleting Material Components typings..."
+# rm ios-typings-prj/typings/x86_64/objc\!MaterialComponents.d.ts
 # Remove methods attached to other modules via extensions (UIKit, QuartzCore)
-perl -pi -e 's/.*\s(mdc_|MDCFontTextStyle|MDCAnimationTimingFunction).*\s*//g' ios-typings-prj/typings/x86_64/*.d.ts
+# perl -pi -e 's/.*\s(mdc_|MDCFontTextStyle|MDCAnimationTimingFunction).*\s*//g' ios-typings-prj/typings/x86_64/*.d.ts
 
 echo "Moving generated typings to ios/objc-x86_64..."
 mv ios-typings-prj/typings/x86_64/* packages/types-ios/src/lib/ios/objc-x86_64/