diff --git a/.gitignore b/.gitignore
index d4301c9280..71db8edb52 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,6 +11,7 @@
 **/yarn.lock
 **/pnpm-lock.yaml
 .npmrc
+.yarn
 
 # IDEs and editors
 .idea
@@ -54,3 +55,4 @@ Thumbs.db
 
 # types
 ios-typings-prj
+/packages/core/platforms/android/core.aar
diff --git a/.husky/pre-commit b/.husky/pre-commit
index a3cebf1ec5..56984d3cb0 100755
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,5 +1,8 @@
 #!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
+# . "$(dirname "$0")/_/husky.sh"
+
+export NVM_DIR="$HOME/.nvm"
+[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
 
 export NVM_DIR="$HOME/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3a51bc2980..98d76e4dde 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,6 @@
         "**/*.js": true,
         "**/*.js.map": true
     },
-    "tslint.configFile": "./build/tslint.json"
+    "tslint.configFile": "./build/tslint.json",
+    "git.enabled": false
 }
\ No newline at end of file
diff --git a/apps/automated/nativescript.config.ts b/apps/automated/nativescript.config.ts
index 043f59c668..413b3e554e 100644
--- a/apps/automated/nativescript.config.ts
+++ b/apps/automated/nativescript.config.ts
@@ -7,7 +7,4 @@ export default {
 	android: {
 		v8Flags: '--expose_gc',
 	},
-	cli: {
-		packageManager: 'npm',
-	},
 } as NativeScriptConfig;
diff --git a/apps/automated/package.json b/apps/automated/package.json
index fcdecff894..ef4ce0005e 100644
--- a/apps/automated/package.json
+++ b/apps/automated/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
-    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
+    "@nativescript/webpack": "5.0.7",
     "typescript": "4.7.3"
   },
   "gitHead": "c06800e52ee1a184ea2dffd12a6702aaa43be4e3",
diff --git a/apps/automated/src/pages/page11.ts b/apps/automated/src/pages/page11.ts
index 624b57a266..63eeb754e8 100644
--- a/apps/automated/src/pages/page11.ts
+++ b/apps/automated/src/pages/page11.ts
@@ -51,7 +51,7 @@ export function createPage() {
 	//page.content = GridLayout;
 	page.content = StackLayout;
 	var x = 1;
-	btn1.on(button.Button.tapEvent, function () {
+	btn1.on(button.tapEvent, function () {
 		x++;
 		var gravity;
 		//btn1.android.setLayoutParams(new android.view.ViewGroup.LayoutParams(android.view.ViewGroup.LayoutParams.FILL_PARENT, android.view.ViewGroup.LayoutParams.FILL_PARENT));
diff --git a/apps/automated/src/pages/page7.ts b/apps/automated/src/pages/page7.ts
index be65104d63..93d464ec15 100644
--- a/apps/automated/src/pages/page7.ts
+++ b/apps/automated/src/pages/page7.ts
@@ -13,7 +13,7 @@ export function createPage() {
 	var vAligns: CoreTypes.VerticalAlignmentType[] = ['stretch', 'top', 'middle', 'bottom'];
 	//var hAligns = ["stretch", "left", "center", "right"];
 	var count = 0;
-	btn.on(buttons.Button.tapEvent, function () {
+	btn.on(buttons.tapEvent, function () {
 		//page.css = "button { vertical-align:" + vAligns[(count++) % 4] + " }";
 		btn.verticalAlignment = vAligns[count++ % 4];
 	});
diff --git a/apps/automated/src/pages/page8.ts b/apps/automated/src/pages/page8.ts
index 8d8687d82c..94cce4df33 100644
--- a/apps/automated/src/pages/page8.ts
+++ b/apps/automated/src/pages/page8.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var counter = 0;
 	var btn = new btns.Button();
 	btn.text = 'tap';
-	btn.on(btns.Button.tapEvent, function () {
+	btn.on(btns.tapEvent, function () {
 		btn.text = 'hi: ' + counter++;
 	});
 	btn.isEnabled = false;
@@ -52,7 +52,7 @@ export function createPage() {
 	var info = new btns.Button();
 	info.text = 'info';
 	info.className = 'info';
-	info.on(btns.Button.tapEvent, function () {
+	info.on(btns.tapEvent, function () {
 		info.text = 'hi: ' + counter++;
 		btn.isEnabled = true;
 	});
diff --git a/apps/automated/src/pages/property-bindings.ts b/apps/automated/src/pages/property-bindings.ts
index 12a9ec9fcd..e57e6defc7 100644
--- a/apps/automated/src/pages/property-bindings.ts
+++ b/apps/automated/src/pages/property-bindings.ts
@@ -41,7 +41,7 @@ export function createPage() {
 	var count = 0;
 	var control = new btns.Button();
 	control.text = 'test control';
-	control.on(btns.Button.tapEvent, (data) => {
+	control.on(btns.tapEvent, (data) => {
 		control.text = 'count: ' + count++;
 	});
 	grid.addChild(control);
diff --git a/apps/automated/src/ui/animation/animation-tests.ts b/apps/automated/src/ui/animation/animation-tests.ts
index ad75839ce4..49798955b5 100644
--- a/apps/automated/src/ui/animation/animation-tests.ts
+++ b/apps/automated/src/ui/animation/animation-tests.ts
@@ -267,15 +267,6 @@ export function test_AnimateOpacity(done) {
 		});
 }
 
-export function test_AnimateOpacity_ShouldThrow_IfNotNumber() {
-	var label = new Label();
-	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
-		TKUnit.assertThrows(() => {
-			label.animate({ opacity: <any>'0.75' });
-		}, 'Setting opacity to a non number should throw.');
-	});
-}
-
 export function test_AnimateDelay_ShouldThrow_IfNotNumber() {
 	var label = new Label();
 	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
@@ -303,15 +294,6 @@ export function test_AnimateIterations_ShouldThrow_IfNotNumber() {
 	});
 }
 
-export function test_AnimateRotate_ShouldThrow_IfNotNumber() {
-	var label = new Label();
-	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
-		TKUnit.assertThrows(() => {
-			label.animate({ rotate: <any>'1' });
-		}, 'Setting rotate to a non number should throw.');
-	});
-}
-
 export function test_AnimateScale_ShouldThrow_IfNotPair() {
 	var label = new Label();
 	helper.buildUIAndRunTest(label, (views: Array<viewModule.View>) => {
diff --git a/apps/automated/src/ui/button/button-tests.ts b/apps/automated/src/ui/button/button-tests.ts
index cc3dfd7036..3398916dfb 100644
--- a/apps/automated/src/ui/button/button-tests.ts
+++ b/apps/automated/src/ui/button/button-tests.ts
@@ -3,6 +3,7 @@ import * as helper from '../../ui-helper';
 import { View, EventData, Button, Observable, Color, Page, FormattedString } from '@nativescript/core';
 import * as buttonTestsNative from './button-tests-native';
 import * as spanModule from '@nativescript/core/text/span';
+import { tapEvent } from '@nativescript/core/ui/button';
 
 // >> button-require-others
 import { BindingOptions } from '@nativescript/core/ui/core/bindable';
@@ -100,7 +101,7 @@ var _testOnClick = function (views: Array<View>) {
 
 	var actualValue = false;
 	// >> button-tap
-	button.on(Button.tapEvent, function (args: EventData) {
+	button.on(tapEvent, function (args: EventData) {
 		// Do something
 		// >> (hide)
 		actualValue = true;
diff --git a/apps/automated/src/ui/page/page-tests-common.ts b/apps/automated/src/ui/page/page-tests-common.ts
index 00f5035d85..d33ca95dc7 100644
--- a/apps/automated/src/ui/page/page-tests-common.ts
+++ b/apps/automated/src/ui/page/page-tests-common.ts
@@ -181,7 +181,7 @@ function _test_PageNavigation_EventSequence(withTransition: boolean) {
 	helper.navigateWithEntry(navigationEntry);
 	helper.goBack();
 
-	const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'unloaded', 'navigatedFrom'];
+	const expectedEventSequence = ['navigatingTo', 'loaded', 'navigatedTo', 'navigatingFrom', 'navigatedFrom', 'unloaded'];
 	TKUnit.arrayAssert(eventSequence, expectedEventSequence, 'Actual event sequence is not equal to expected. Actual: ' + eventSequence + '; Expected: ' + expectedEventSequence);
 }
 
diff --git a/apps/automated/src/ui/root-view/mymodule/MyControl.ts b/apps/automated/src/ui/root-view/mymodule/MyControl.ts
index dd0382909c..36df8b0695 100644
--- a/apps/automated/src/ui/root-view/mymodule/MyControl.ts
+++ b/apps/automated/src/ui/root-view/mymodule/MyControl.ts
@@ -13,7 +13,7 @@ export class MyControl extends stackLayoutModule.StackLayout {
 		lbl.id = 'my-test-label';
 		var btn = new button.Button();
 		btn.text = 'Tap me!';
-		btn.on(button.Button.tapEvent, (args: EventData) => {
+		btn.on(button.tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 
diff --git a/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts b/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts
index 225dac2892..33d1bf5f4b 100644
--- a/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts
+++ b/apps/automated/src/ui/tab-view/tab-view-navigation-tests.ts
@@ -7,7 +7,7 @@ import { Frame } from '@nativescript/core/ui/frame';
 import { Page } from '@nativescript/core/ui/page';
 import { ListView, ItemEventData } from '@nativescript/core/ui/list-view';
 import { TabView, TabViewItem } from '@nativescript/core/ui/tab-view';
-import { Button } from '@nativescript/core/ui/button';
+import { Button, tapEvent } from '@nativescript/core/ui/button';
 
 var ASYNC = 2;
 
@@ -44,7 +44,7 @@ function _createListView(): ListView {
 		var button = <Button>args.view;
 		if (!button) {
 			button = new Button();
-			button.on(Button.tapEvent, _clickHandlerFactory(args.index));
+			button.on(tapEvent, _clickHandlerFactory(args.index));
 			args.view = button;
 		}
 
diff --git a/apps/automated/src/xml-declaration/mymodule/MyControl.ts b/apps/automated/src/xml-declaration/mymodule/MyControl.ts
index d74126e041..3e7d6cf05d 100644
--- a/apps/automated/src/xml-declaration/mymodule/MyControl.ts
+++ b/apps/automated/src/xml-declaration/mymodule/MyControl.ts
@@ -1,4 +1,5 @@
 import { StackLayout, Label, Button, EventData } from '@nativescript/core';
+import { tapEvent } from '@nativescript/core/ui/button';
 
 export class MyControl extends StackLayout {
 	constructor() {
@@ -9,7 +10,7 @@ export class MyControl extends StackLayout {
 		var lbl = new Label();
 		var btn = new Button();
 		btn.text = 'Tap me!';
-		btn.on(Button.tapEvent, (args: EventData) => {
+		btn.on(tapEvent, (args: EventData) => {
 			lbl.text = 'Tap ' + counter++;
 		});
 
diff --git a/apps/toolbox/nativescript.config.ts b/apps/toolbox/nativescript.config.ts
index e6bcbc6d02..1f93e6addb 100644
--- a/apps/toolbox/nativescript.config.ts
+++ b/apps/toolbox/nativescript.config.ts
@@ -8,7 +8,4 @@ export default {
 		v8Flags: '--expose_gc',
 		suppressCallJSMethodExceptions: false,
 	},
-	cli: {
-		packageManager: 'npm',
-	},
 } as NativeScriptConfig;
diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index 010e7fd995..f2a602a8b0 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -6,6 +6,9 @@
   <StackLayout class="p-20">
     <ScrollView class="h-full">
       <StackLayout>
+        <Button text="animation-curves-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="layout-stack-height-page" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
+        <Button text="css-animations" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="box-shadow" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo" />
diff --git a/apps/toolbox/src/pages/animation-curves-page.ts b/apps/toolbox/src/pages/animation-curves-page.ts
new file mode 100644
index 0000000000..f7656d77a2
--- /dev/null
+++ b/apps/toolbox/src/pages/animation-curves-page.ts
@@ -0,0 +1,68 @@
+import { getViewById, View, Page, Button, SegmentedBar, SegmentedBarItem, Label, Animation, AnimationDefinition } from '@nativescript/core';
+
+export function easeAnimate(args) {
+	const clicked = args.object as Button;
+	const page: Page = clicked.page;
+	const target = getViewById(page, 'target') as Label;
+	const select = getViewById(page, 'select') as SegmentedBar;
+	const item: SegmentedBarItem = select.items[select.selectedIndex];
+	const easeType: string = clicked.text;
+	const extent = 128;
+	let duration = easeType === 'spring' ? 800 : 500;
+	let delay = easeType === 'spring' ? 0 : 200;
+	let animateKey: string = null;
+	let animateValueTo: any = null;
+	let animateValueFrom: any = null;
+
+	switch (item.title) {
+		case 'height':
+			animateKey = 'height';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'width':
+			animateKey = 'width';
+			target.originX = target.originY = 0;
+			animateValueTo = 0;
+			animateValueFrom = extent;
+			break;
+		case 'opacity':
+			animateKey = 'opacity';
+			animateValueTo = 0;
+			animateValueFrom = 1;
+			break;
+		case 'color':
+			animateKey = 'backgroundColor';
+			animateValueTo = 'blue';
+			animateValueFrom = 'purple';
+			break;
+		case 'rotate':
+			animateKey = 'rotate';
+			target.originX = target.originY = 0.5;
+			animateValueTo = 180;
+			animateValueFrom = 0;
+			break;
+		case 'scale':
+			animateKey = 'scale';
+			target.originX = target.originY = 0.5;
+			animateValueTo = { x: 1.5, y: 1.5 };
+			animateValueFrom = { x: 1, y: 1 };
+			break;
+	}
+	target
+		.animate({
+			[animateKey]: animateValueTo,
+			duration,
+			curve: easeType,
+		})
+		.then(() => {
+			return target.animate({
+				[animateKey]: animateValueFrom,
+				delay,
+				duration,
+				curve: easeType,
+			});
+		})
+		.catch((e) => console.log(e));
+}
diff --git a/apps/toolbox/src/pages/animation-curves-page.xml b/apps/toolbox/src/pages/animation-curves-page.xml
new file mode 100644
index 0000000000..58f58d6862
--- /dev/null
+++ b/apps/toolbox/src/pages/animation-curves-page.xml
@@ -0,0 +1,31 @@
+<Page>
+    <AbsoluteLayout>
+        <GridLayout top="0" left="0" width="100%" rows="48, 48, 48, 48, 48, 48" columns="*,*,*">
+
+            <Label row="0" colSpan="3" text="Animate"/>
+            <SegmentedBar row="1" colSpan="3" id="select">
+                <SegmentedBar.items>
+                    <SegmentedBarItem title="height"/>
+                    <SegmentedBarItem title="width"/>
+                    <SegmentedBarItem title="opacity"/>
+                    <SegmentedBarItem title="color"/>
+                    <SegmentedBarItem title="rotate"/>
+                    <SegmentedBarItem title="scale"/>
+                </SegmentedBar.items>
+            </SegmentedBar>
+
+            <Label row="2" colSpan="3" text="Easing"/>
+            <Button row="3" col="0" text="easeIn" tap="easeAnimate"/>
+            <Button row="3" col="1" text="easeOut" tap="easeAnimate"/>
+            <Button row="3" col="2" text="easeInOut" tap="easeAnimate"/>
+            <Button row="4" col="0" text="spring" tap="easeAnimate"/>
+            <Button row="4" col="1" text="linear" tap="easeAnimate"/>
+            <Button row="4" col="2" text="ease" tap="easeAnimate"/>
+        </GridLayout>
+
+        <Label top="300" left="96" height="128" width="128"
+               borderColor="purple" borderWidth="1"/>
+        <Label top="300" left="96" height="128" width="128"
+               id="target" backgroundColor="purple"/>
+    </AbsoluteLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/css-animations.css b/apps/toolbox/src/pages/css-animations.css
new file mode 100644
index 0000000000..94781d929a
--- /dev/null
+++ b/apps/toolbox/src/pages/css-animations.css
@@ -0,0 +1,79 @@
+.fade-blink {
+    animation-name: fadeAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.scale-blink {
+    animation-name: scaleAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.slide-blink {
+    animation-name: slideAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+.color-blink {
+    animation-name: colorAndBack;
+    animation-duration: 800ms;
+    animation-iteration-count: infinite;
+    animation-fill-mode: forwards;
+}
+
+@keyframes fadeAndBack {
+    0% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+@keyframes colorAndBack {
+    0% {
+        background-color: blue;
+    }
+
+    50% {
+        background-color: yellow;
+    }
+
+    100% {
+        background-color: blue;
+    }
+}
+
+@keyframes slideAndBack {
+    0% {
+        transform: translateY(0);
+    }
+
+    50% {
+        transform: translateY(100%);
+    }
+
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes scaleAndBack {
+    0% {
+        transform: scale(1, 1);
+    }
+
+    50% {
+        transform: scale(0, 0);
+    }
+
+    100% {
+        transform: scale(1, 1);
+    }
+}
diff --git a/apps/toolbox/src/pages/css-animations.ts b/apps/toolbox/src/pages/css-animations.ts
new file mode 100644
index 0000000000..36c6120301
--- /dev/null
+++ b/apps/toolbox/src/pages/css-animations.ts
@@ -0,0 +1,7 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { Page } from '@nativescript/core/ui/page';
+
+export function onLoaded(args: EventData) {
+	var page = <Page>args.object;
+
+}
diff --git a/apps/toolbox/src/pages/css-animations.xml b/apps/toolbox/src/pages/css-animations.xml
new file mode 100644
index 0000000000..12d582dbda
--- /dev/null
+++ b/apps/toolbox/src/pages/css-animations.xml
@@ -0,0 +1,7 @@
+<Page loaded="onLoaded">
+    <GridLayout rows="*,*,*,*,*,*" columns="*,*,*">
+        <Button class="s0 fade-blink" row="0" col="0" text="Button"/>
+        <Label color="black" class="s0 color-blink" row="1" col="0" text="This is a test" backgroundColor="red"/>
+        <Button class="s0 slide-blink" row="2" col="0" text="Button"/>
+    </GridLayout>
+</Page>
diff --git a/apps/toolbox/src/pages/layout-stack-height-page.ts b/apps/toolbox/src/pages/layout-stack-height-page.ts
new file mode 100644
index 0000000000..7a91bb92d0
--- /dev/null
+++ b/apps/toolbox/src/pages/layout-stack-height-page.ts
@@ -0,0 +1,14 @@
+import { View } from '@nativescript/core';
+
+export function tapLabel(args) {
+	const clicked: View = args.object;
+	const graffiti = clicked as any;
+	clicked.animate({
+		height: graffiti.toggle ? 'auto' : 128,
+		color: graffiti.toggle ? 'red': 'yellow',
+		borderRadius: graffiti.toggle ? 0: 40,
+		duration: 700,
+		curve: 'ease',
+	});
+	graffiti.toggle = !graffiti.toggle;
+}
diff --git a/apps/toolbox/src/pages/layout-stack-height-page.xml b/apps/toolbox/src/pages/layout-stack-height-page.xml
new file mode 100644
index 0000000000..8c4ecbf232
--- /dev/null
+++ b/apps/toolbox/src/pages/layout-stack-height-page.xml
@@ -0,0 +1,17 @@
+<Page backgroundColor="skyblue">
+    <GridLayout rows="auto,auto,auto" verticalAlignment="top" backgroundColor="gold">
+        <Label backgroundColor="darkblue" originY="0"
+               tap="tapLabel"
+               height="64" fontSize="32" color="skyblue" textAlignment="center"
+               text="Click here"/>
+        <Label row="1" backgroundColor="darkgreen" originY="0"
+               tap="tapLabel"
+               textWrap="true"
+               fontSize="32" color="lime" textAlignment="center"
+               text="Or here&#xa; i am multi line!"/>
+        <Label row="2" backgroundColor="darkred" originY="0"
+               tap="tapLabel"
+               height="64" fontSize="32" color="pink" textAlignment="center"
+               text="But NOT here"/>
+    </GridLayout>
+</Page>
diff --git a/apps/ui/nativescript.config.ts b/apps/ui/nativescript.config.ts
index 3303902b2d..d355e9993a 100644
--- a/apps/ui/nativescript.config.ts
+++ b/apps/ui/nativescript.config.ts
@@ -7,7 +7,4 @@ export default {
 	android: {
 		v8Flags: '--expose_gc',
 	},
-	cli: {
-		packageManager: 'npm',
-	},
 } as NativeScriptConfig;
diff --git a/apps/ui/package.json b/apps/ui/package.json
index cc657ba988..895bc72ec6 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@nativescript/android": "~8.3.0",
     "@nativescript/ios": "~8.3.0",
-    "@nativescript/webpack": "file:../../dist/packages/nativescript-webpack.tgz",
+    "@nativescript/webpack": "5.0.7",
     "typescript": "4.7.3"
   },
   "gitHead": "8ab7726d1ee9991706069c1359c552e67ee0d1a4",
diff --git a/apps/ui/src/bindings/basics-page.ts b/apps/ui/src/bindings/basics-page.ts
index dff4e44975..ac19c6e89f 100644
--- a/apps/ui/src/bindings/basics-page.ts
+++ b/apps/ui/src/bindings/basics-page.ts
@@ -28,7 +28,7 @@ export function createPage() {
 	//buttonTwoWay.automationText = "buttonTwoWay";
 
 	buttonSetText.text = 'SetText';
-	buttonSetText.on(buttonModule.Button.tapEvent, function () {
+	buttonSetText.on(buttonModule.tapEvent, function () {
 		targetOneWay.text = 'Test';
 		targetTwoWay.text = 'Test';
 	});
@@ -47,7 +47,7 @@ export function createPage() {
 	buttonOneWay.on(buttonModule.Button.loadedEvent, function () {
 		buttonOneWay.text = sourceOneWay.get('textSource');
 	});
-	buttonOneWay.on(buttonModule.Button.tapEvent, function () {
+	buttonOneWay.on(buttonModule.tapEvent, function () {
 		buttonOneWay.text = sourceOneWay.get('textSource');
 	});
 
@@ -67,7 +67,7 @@ export function createPage() {
 	buttonTwoWay.on(buttonModule.Button.loadedEvent, function () {
 		buttonTwoWay.text = sourceTwoWay.get('textSource');
 	});
-	buttonTwoWay.on(buttonModule.Button.tapEvent, function () {
+	buttonTwoWay.on(buttonModule.tapEvent, function () {
 		buttonTwoWay.text = sourceTwoWay.get('textSource');
 	});
 
diff --git a/apps/ui/src/bindings/xmlbasics-page.ts b/apps/ui/src/bindings/xmlbasics-page.ts
index c6952afba2..00199b90d2 100644
--- a/apps/ui/src/bindings/xmlbasics-page.ts
+++ b/apps/ui/src/bindings/xmlbasics-page.ts
@@ -16,7 +16,7 @@ export function stack0Loaded(args: observable.EventData) {
 	target.bind(bindingOptions, source);
 	source.set('textSource', 'Text');
 
-	button.on(buttonModule.Button.tapEvent, function () {
+	button.on(buttonModule.tapEvent, function () {
 		button.text = source.get('textSource');
 	});
 }
diff --git a/apps/ui/src/events/i73-page.ts b/apps/ui/src/events/i73-page.ts
index f9f31560a0..d19c865abf 100644
--- a/apps/ui/src/events/i73-page.ts
+++ b/apps/ui/src/events/i73-page.ts
@@ -7,7 +7,7 @@ export function createPage() {
 
 	var btn = new button.Button();
 	btn.text = 'Alert';
-	btn.on(button.Button.tapEvent, function () {
+	btn.on(button.tapEvent, function () {
 		alert('Alert is global');
 	});
 
diff --git a/apps/ui/src/test-page-main-view-model.ts b/apps/ui/src/test-page-main-view-model.ts
index 7339af9ce1..24ae8e09ff 100644
--- a/apps/ui/src/test-page-main-view-model.ts
+++ b/apps/ui/src/test-page-main-view-model.ts
@@ -1,5 +1,5 @@
 import { Observable, Frame } from '@nativescript/core';
-import { Button } from '@nativescript/core/ui/button';
+import { Button, tapEvent } from '@nativescript/core/ui/button';
 import { Color } from '@nativescript/core/color';
 import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
 import { alert } from '@nativescript/core/ui/dialogs';
@@ -64,7 +64,7 @@ export class TestPageMainViewModel extends Observable {
 			btn.style.backgroundColor = new Color(this._colors[count++ % 3]);
 			btn.style.borderRadius = 5;
 			btn.on(
-				Button.tapEvent,
+				tapEvent,
 				function (eventData) {
 					let text = btn.text;
 					this.loadExample(text);
diff --git a/package.json b/package.json
index ff509d0184..01436a3090 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,43 @@
   "name": "nativescript",
   "version": "8.3.5",
   "license": "MIT",
+  "config": {
+    "npm_alias": "npm"
+  },
   "scripts": {
     "clean": "git clean -f -X -d --exclude=!.idea/ --exclude=!.vscode/* --exclude=!.npmrc",
-    "clean.all": "npm run setup && nx run-many --target=clean --all",
-    "setup": "npm run clean && npm install --legacy-peer-deps",
-    "setup:yarn": "yarn clean && yarn",
-    "setup:pnpm": "pnpm run clean && pnpm install",
-    "postinstall": "ts-patch install && husky install && nx run webpack5:build",
+    "clean.all": "npm run setup ; nx run-many --target=clean --all",
+    "setup": "npm run clean ; npm install --legacy-peer-deps",
+    "setup:yarn": "yarn clean ; yarn",
+    "setup:pnpm": "pnpm run clean ; pnpm install",
+    "postinstall": "ts-patch install ; husky install",
     "start": "nps",
-    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s"
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "apps-automated:ios": "cd apps/automated ; tns debug ios --no-hmr --emulator --env.testing",
+    "apps-automated:android": "cd apps/automated ; tns debug android --no-hmr --emulator --env.testing",
+    "apps-automated:clean": "cd apps/automated ; rimraf -- hooks node_modules platforms package-lock.json webpack.config.js ; rimraf -- package-lock.json",
+    "apps-toolbox:ios": "cd apps/toolbox ; tns debug ios --no-hmr --emulator --env.testing",
+    "apps-toolbox:android": "cd apps/toolbox ; tns debug android --no-hmr --emulator --env.testing",
+    "apps-toolbox:clean": "cd apps/toolbox ; rimraf -- hooks node_modules platforms package-lock.json webpack.config.js ; rimraf -- package-lock.json",
+    "apps-ui:ios": "cd apps/ui ; tns debug ios --no-hmr --emulator --env.testing",
+    "apps-ui:android": "cd apps/ui ; tns debug android --no-hmr --emulator --env.testing",
+    "apps-ui:clean": "cd apps/ui ; rimraf -- hooks node_modules platforms package-lock.json webpack.config.js ; rimraf -- package-lock.json",
+    "core:lint": "cd packages/core ; eslint -c .eslintrc --ignore-pattern **/node_modules/** --ignore-pattern !packages/core/**",
+    "core:setup": "npm run webpack:build",
+    "core:build": "cpy 'packages/core/*.md' 'packages/core/package.json' 'packages/core/.npmignore' 'dist/packages/core' ; replace-json-property 'dist/packages/core/package.json' name @akylas/nativescript ; copyfiles -e '**/*.ts' 'packages/core/css/**/*' 'packages/core/css-value/**/*' 'packages/core/fetch/**/*' 'packages/core/js-libs/**/*' 'packages/core/cli-hooks/**/*.js' dist ; copyfiles -e 'packages/core/__tests__/**/*' 'packages/core/**/*.d.ts' dist ; tsc -p packages/core/tsconfig.lib.json",
+    "core:build.npm": "rimraf dist/packages/core ; npm run ui-mobile-base:build ; npm run core:build ; copyfiles 'packages/core/platforms/**/*' dist ; cd dist/packages/core ; npm pack ; mv *.tgz ..",
+    "core:unit": "cd packages/core/__tests__ ; tsc ; mocha",
+    "core:unit.watch": "cd packages/core/__tests__ ; tsc ; mocha --watch",
+    "core-compat:build": "cd packages/core-compat ; rimraf node_modules package-lock.json ; $npm_package_config_npm_alias i  ; tsc -p tsconfig.json ; mv \"$(npm pack | tail -n 1)\" ../../dist/packages/tns-core-modules.tgz",
+    "types-ios:lint": "cd packages/types-ios ; eslint -c .eslintrc --ignore-pattern **/node_modules/** --ignore-pattern !packages/types-ios/**",
+    "types-ios:build": "rimraf dist/packages/types-ios ; cpy '**/*' '../../../dist/packages/types-ios' --cwd=packages/types-ios/src --parents ; cpy 'package.json' '*.md' '../../dist/packages/types-ios' --cwd=packages/types-ios --parents",
+    "types-android:lint": "cd packages/types-android ; eslint -c .eslintrc --ignore-pattern **/node_modules/** --ignore-pattern !packages/types-android/**",
+    "types-android:test": "cd packages/types-android ; jest --config jest.config.js --ignore-pattern **/node_modules/** --ignore-pattern !packages/types-android/**",
+    "types-android:build": "rimraf dist/packages/types-android ; cpy '**/*' '../../../dist/packages/types-android' --cwd=packages/types-android/src --parents ; cpy 'package.json' '*.md' '../../dist/packages/types-android' --cwd=packages/types-android --parents",
+    "ui-mobile-base:build": "cd packages/ui-mobile-base ; ./build.sh ; copyfiles dist/package/platforms/* ../../packages/core/platforms ; copyfiles dist/package/platforms/* ../../dist/packages/core/platforms",
+    "webpack:lint": "cd packages/webpack5 ; eslint -c .eslintrc --ignore-pattern **/node_modules/** --ignore-pattern !packages/webpack/**",
+    "webpack:test": "cd packages/webpack5 ; npm run tsc ; npm run jasmine",
+    "webpack:build": "cd packages/webpack5 npm run build ; mkdir -p ../../dist/packages ; mv \"$(npm pack | tail -n 1)\" ../../dist/packages/nativescript-webpack.tgz"
   },
   "private": true,
   "repository": {
@@ -40,6 +68,7 @@
     "chai": "^4.2.0",
     "conventional-changelog-cli": "^2.1.1",
     "copyfiles": "^2.4.0",
+    "cpy-cli": "^3.1.1",
     "css": "^3.0.0",
     "css-tree": "^1.1.2",
     "dotenv": "10.0.0",
@@ -58,12 +87,15 @@
     "parserlib": "^1.1.1",
     "prettier": "^2.6.2",
     "reduce-css-calc": "~2.1.7",
+    "replace-json-property": "^1.8.0",
+    "rimraf": "3.0.2",
     "sass": "^1.45.2",
     "shady-css-parser": "^0.1.0",
     "tree-kill": "^1.2.2",
     "ts-jest": "27.1.4",
     "ts-node": "10.8.1",
     "ts-patch": "^2.0.1",
+    "tslib": "2.1.0",
     "tslint": "6.1.3",
     "tslint-to-eslint-config": "^2.13.0",
     "typedoc": "^0.22.17",
@@ -77,4 +109,3 @@
     ]
   }
 }
-
diff --git a/packages/core/.npmignore b/packages/core/.npmignore
index a800342764..15c11e2581 100644
--- a/packages/core/.npmignore
+++ b/packages/core/.npmignore
@@ -4,4 +4,6 @@ dist
 **/*.ts
 !**/*.d.ts
 jest.config.js
-npm-debug.log
\ No newline at end of file
+npm-debug.log
+platforms/android/*.aar
+!platforms/android/widgets-release.aar
\ No newline at end of file
diff --git a/packages/core/accessibility/accessibility-types.ts b/packages/core/accessibility/accessibility-types.ts
index 48e3cac44b..824b54aa31 100644
--- a/packages/core/accessibility/accessibility-types.ts
+++ b/packages/core/accessibility/accessibility-types.ts
@@ -4,264 +4,264 @@ export enum AccessibilityTrait {
 	/**
 	 * The element allows direct touch interaction for VoiceOver users.
 	 */
-	AllowsDirectInteraction = 'allowsDirectInteraction',
+	AllowsDirectInteraction,
 
 	/**
 	 * The element should cause an automatic page turn when VoiceOver finishes reading the text within it.
 	 * Note: Requires custom view with accessibilityScroll(...)
 	 */
-	CausesPageTurn = 'pageTurn',
+	CausesPageTurn,
 
 	/**
 	 * The element is not enabled and does not respond to user interaction.
 	 */
-	NotEnabled = 'disabled',
+	NotEnabled,
 
 	/**
 	 * The element is currently selected.
 	 */
-	Selected = 'selected',
+	Selected,
 
 	/**
 	 * The element frequently updates its label or value.
 	 */
-	UpdatesFrequently = 'frequentUpdates',
+	UpdatesFrequently,
 }
 
 export enum AccessibilityRole {
 	/**
 	 * The element allows continuous adjustment through a range of values.
 	 */
-	Adjustable = 'adjustable',
+	Adjustable,
 
 	/**
 	 * The element should be treated as a button.
 	 */
-	Button = 'button',
+	Button,
 
 	/**
 	 * The element behaves like a Checkbox
 	 */
-	Checkbox = 'checkbox',
+	Checkbox,
 
 	/**
 	 * The element is a header that divides content into sections, such as the title of a navigation bar.
 	 */
-	Header = 'header',
+	Header,
 
 	/**
 	 * The element should be treated as an image.
 	 */
-	Image = 'image',
+	Image,
 
 	/**
 	 * The element should be treated as a image button.
 	 */
-	ImageButton = 'imageButton',
+	ImageButton,
 
 	/**
 	 * The element behaves as a keyboard key.
 	 */
-	KeyboardKey = 'keyboardKey',
+	KeyboardKey,
 
 	/**
 	 * The element should be treated as a link.
 	 */
-	Link = 'link',
+	Link,
 
 	/**
 	 * The element has no traits.
 	 */
-	None = 'none',
+	None,
 
 	/**
 	 * The element plays its own sound when activated.
 	 */
-	PlaysSound = 'plays',
+	PlaysSound,
 
 	/**
 	 * The element behaves like a ProgressBar
 	 */
-	ProgressBar = 'progressBar',
+	ProgressBar,
 
 	/**
 	 * The element behaves like a RadioButton
 	 */
-	RadioButton = 'radioButton',
+	RadioButton,
 
 	/**
 	 * The element should be treated as a search field.
 	 */
-	Search = 'search',
+	Search,
 
 	/**
 	 * The element behaves like a SpinButton
 	 */
-	SpinButton = 'spinButton',
+	SpinButton,
 
 	/**
 	 * The element starts a media session when it is activated.
 	 */
-	StartsMediaSession = 'startsMedia',
+	StartsMediaSession,
 
 	/**
 	 * The element should be treated as static text that cannot change.
 	 */
-	StaticText = 'text',
+	StaticText,
 
 	/**
 	 * The element provides summary information when the application starts.
 	 */
-	Summary = 'summary',
+	Summary,
 
 	/**
 	 * The element behaves like a switch
 	 */
-	Switch = 'switch',
+	Switch,
 }
 
 export enum AccessibilityState {
-	Selected = 'selected',
-	Checked = 'checked',
-	Unchecked = 'unchecked',
-	Disabled = 'disabled',
+	Selected,
+	Checked,
+	Unchecked,
+	Disabled,
 }
 
 export enum AccessibilityLiveRegion {
-	None = 'none',
-	Polite = 'polite',
-	Assertive = 'assertive',
+	None,
+	Polite,
+	Assertive,
 }
 
 export enum IOSPostAccessibilityNotificationType {
-	Announcement = 'announcement',
-	Screen = 'screen',
-	Layout = 'layout',
+	Announcement,
+	Screen,
+	Layout,
 }
 
 export enum AndroidAccessibilityEvent {
 	/**
 	 * Invalid selection/focus position.
 	 */
-	INVALID_POSITION = 'invalid_position',
+	INVALID_POSITION,
 
 	/**
 	 * Maximum length of the text fields.
 	 */
-	MAX_TEXT_LENGTH = 'max_text_length',
+	MAX_TEXT_LENGTH,
 
 	/**
 	 * Represents the event of clicking on a android.view.View like android.widget.Button, android.widget.CompoundButton, etc.
 	 */
-	VIEW_CLICKED = 'view_clicked',
+	VIEW_CLICKED,
 
 	/**
 	 * Represents the event of long clicking on a android.view.View like android.widget.Button, android.widget.CompoundButton, etc.
 	 */
-	VIEW_LONG_CLICKED = 'view_long_clicked',
+	VIEW_LONG_CLICKED,
 
 	/**
 	 * Represents the event of selecting an item usually in the context of an android.widget.AdapterView.
 	 */
-	VIEW_SELECTED = 'view_selected',
+	VIEW_SELECTED,
 
 	/**
 	 * Represents the event of setting input focus of a android.view.View.
 	 */
-	VIEW_FOCUSED = 'view_focused',
+	VIEW_FOCUSED,
 
 	/**
 	 * Represents the event of changing the text of an android.widget.EditText.
 	 */
-	VIEW_TEXT_CHANGED = 'view_text_changed',
+	VIEW_TEXT_CHANGED,
 
 	/**
 	 * Represents the event of opening a android.widget.PopupWindow, android.view.Menu, android.app.Dialog, etc.
 	 */
-	WINDOW_STATE_CHANGED = 'window_state_changed',
+	WINDOW_STATE_CHANGED,
 
 	/**
 	 * Represents the event showing a android.app.Notification.
 	 */
-	NOTIFICATION_STATE_CHANGED = 'notification_state_changed',
+	NOTIFICATION_STATE_CHANGED,
 
 	/**
 	 * Represents the event of a hover enter over a android.view.View.
 	 */
-	VIEW_HOVER_ENTER = 'view_hover_enter',
+	VIEW_HOVER_ENTER,
 
 	/**
 	 * Represents the event of a hover exit over a android.view.View.
 	 */
-	VIEW_HOVER_EXIT = 'view_hover_exit',
+	VIEW_HOVER_EXIT,
 	/**
 	 * Represents the event of starting a touch exploration gesture.
 	 */
-	TOUCH_EXPLORATION_GESTURE_START = 'touch_exploration_gesture_start',
+	TOUCH_EXPLORATION_GESTURE_START,
 	/**
 	 * Represents the event of ending a touch exploration gesture.
 	 */
-	TOUCH_EXPLORATION_GESTURE_END = 'touch_exploration_gesture_end',
+	TOUCH_EXPLORATION_GESTURE_END,
 
 	/**
 	 * Represents the event of changing the content of a window and more specifically the sub-tree rooted at the event's source.
 	 */
-	WINDOW_CONTENT_CHANGED = 'window_content_changed',
+	WINDOW_CONTENT_CHANGED,
 
 	/**
 	 * Represents the event of scrolling a view.
 	 */
-	VIEW_SCROLLED = 'view_scrolled',
+	VIEW_SCROLLED,
 
 	/**
 	 * Represents the event of changing the selection in an android.widget.EditText.
 	 */
-	VIEW_TEXT_SELECTION_CHANGED = 'view_text_selection_changed',
+	VIEW_TEXT_SELECTION_CHANGED,
 
 	/**
 	 * Represents the event of an application making an announcement.
 	 */
-	ANNOUNCEMENT = 'announcement',
+	ANNOUNCEMENT,
 
 	/**
 	 * Represents the event of gaining accessibility focus.
 	 */
-	VIEW_ACCESSIBILITY_FOCUSED = 'view_accessibility_focused',
+	VIEW_ACCESSIBILITY_FOCUSED,
 
 	/**
 	 * Represents the event of clearing accessibility focus.
 	 */
-	VIEW_ACCESSIBILITY_FOCUS_CLEARED = 'view_accessibility_focus_cleared',
+	VIEW_ACCESSIBILITY_FOCUS_CLEARED,
 
 	/**
 	 * Represents the event of traversing the text of a view at a given movement granularity.
 	 */
-	VIEW_TEXT_TRAVERSED_AT_MOVEMENT_GRANULARITY = 'view_text_traversed_at_movement_granularity',
+	VIEW_TEXT_TRAVERSED_AT_MOVEMENT_GRANULARITY,
 
 	/**
 	 * Represents the event of beginning gesture detection.
 	 */
-	GESTURE_DETECTION_START = 'gesture_detection_start',
+	GESTURE_DETECTION_START,
 
 	/**
 	 * Represents the event of ending gesture detection.
 	 */
-	GESTURE_DETECTION_END = 'gesture_detection_end',
+	GESTURE_DETECTION_END,
 
 	/**
 	 * Represents the event of the user starting to touch the screen.
 	 */
-	TOUCH_INTERACTION_START = 'touch_interaction_start',
+	TOUCH_INTERACTION_START,
 
 	/**
 	 * Represents the event of the user ending to touch the screen.
 	 */
-	TOUCH_INTERACTION_END = 'touch_interaction_end',
+	TOUCH_INTERACTION_END,
 
 	/**
 	 * Mask for AccessibilityEvent all types.
 	 */
-	ALL_MASK = 'all',
+	ALL_MASK,
 }
 
 export interface AccessibilityEventPerformEscape extends EventData {
diff --git a/packages/core/accessibility/index.android.ts b/packages/core/accessibility/index.android.ts
index 78d531c413..b5bab8e72d 100644
--- a/packages/core/accessibility/index.android.ts
+++ b/packages/core/accessibility/index.android.ts
@@ -1,8 +1,10 @@
+import { initAccessibilityFontScale } from './font-scale';
 import * as Application from '../application';
 import { Trace } from '../trace';
 import type { View } from '../ui/core/view';
 import { GestureTypes } from '../ui/gestures';
 import { notifyAccessibilityFocusState } from './accessibility-common';
+import { initAccessibilityCssHelper } from './accessibility-css-helper';
 import { getAndroidAccessibilityManager } from './accessibility-service';
 import { AccessibilityRole, AccessibilityState, AndroidAccessibilityEvent } from './accessibility-types';
 
@@ -10,7 +12,7 @@ export * from './accessibility-common';
 export * from './accessibility-types';
 export * from './font-scale';
 
-let clickableRolesMap = new Set<string>();
+let clickableRolesMap = new Set<AccessibilityRole>();
 
 let lastFocusedView: WeakRef<Partial<View>>;
 function accessibilityEventHelper(view: Partial<View>, eventType: number) {
@@ -105,7 +107,7 @@ let TNSAccessibilityDelegate: android.view.View.androidviewViewAccessibilityDele
 const androidViewToTNSView = new WeakMap<android.view.View, WeakRef<Partial<View>>>();
 
 let accessibilityEventMap: Map<AndroidAccessibilityEvent, number>;
-let accessibilityEventTypeMap: Map<number, string>;
+let accessibilityEventTypeMap: Map<number, AndroidAccessibilityEvent>;
 
 function ensureNativeClasses() {
 	if (TNSAccessibilityDelegate) {
@@ -130,7 +132,7 @@ function ensureNativeClasses() {
 		[AccessibilityRole.ProgressBar, android.widget.ProgressBar.class.getName()],
 	]);
 
-	clickableRolesMap = new Set<string>([AccessibilityRole.Button, AccessibilityRole.ImageButton]);
+	clickableRolesMap = new Set<AccessibilityRole>([AccessibilityRole.Button, AccessibilityRole.ImageButton]);
 
 	const ignoreRoleTypesForTrace = new Set([AccessibilityRole.Header, AccessibilityRole.Link, AccessibilityRole.None, AccessibilityRole.Summary]);
 
@@ -537,10 +539,16 @@ export function updateContentDescription(view: View, forceUpdate?: boolean): str
 	return applyContentDescription(view, forceUpdate);
 }
 
+let started = false;
 function setAccessibilityDelegate(view: Partial<View>): void {
 	if (!view.nativeViewProtected) {
 		return;
 	}
+	if (!started) {
+		started = true;
+		initAccessibilityCssHelper();
+		initAccessibilityFontScale();
+	}
 
 	ensureNativeClasses();
 
diff --git a/packages/core/accessibility/index.ios.ts b/packages/core/accessibility/index.ios.ts
index 74b1a42139..23394de6d6 100644
--- a/packages/core/accessibility/index.ios.ts
+++ b/packages/core/accessibility/index.ios.ts
@@ -1,6 +1,8 @@
+import { initAccessibilityFontScale } from './font-scale';
 import * as Application from '../application';
 import type { View } from '../ui/core/view';
 import { notifyAccessibilityFocusState } from './accessibility-common';
+import { initAccessibilityCssHelper } from './accessibility-css-helper';
 import { AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait } from './accessibility-types';
 
 export * from './accessibility-common';
@@ -35,7 +37,7 @@ function inputArrayToBitMask(values: string | string[], map: Map<string, number>
 	);
 }
 
-let AccessibilityTraitsMap: Map<string, number>;
+let AccessibilityTraitsMap: Map<number, number>;
 let RoleTypeMap: Map<AccessibilityRole, number>;
 
 let nativeFocusedNotificationObserver;
@@ -121,6 +123,11 @@ function ensureNativeClasses() {
 }
 
 export function setupAccessibleView(view: View): void {
+	updateAccessibilityProperties(view);
+}
+
+let started = false;
+export function updateAccessibilityProperties(view: View): void {
 	const uiView = view.nativeViewProtected as UIView;
 	if (!uiView) {
 		return;
@@ -133,14 +140,11 @@ export function setupAccessibleView(view: View): void {
 	 * This way we can do reverse lookup.
 	 */
 	uiView.tag = view._domId;
-}
-
-export function updateAccessibilityProperties(view: View): void {
-	const uiView = view.nativeViewProtected as UIView;
-	if (!uiView) {
-		return;
+	if (!started) {
+		started = true;
+		initAccessibilityCssHelper();
+		initAccessibilityFontScale();
 	}
-
 	ensureNativeClasses();
 
 	const accessibilityRole = view.accessibilityRole;
diff --git a/packages/core/application/index.android.ts b/packages/core/application/index.android.ts
index 19f671b8b8..b8d1e57f5a 100644
--- a/packages/core/application/index.android.ts
+++ b/packages/core/application/index.android.ts
@@ -14,8 +14,6 @@ import { NavigationEntry, AndroidActivityCallbacks } from '../ui/frame/frame-int
 import { Observable } from '../data/observable';
 
 import { profile } from '../profiling';
-import { initAccessibilityCssHelper } from '../accessibility/accessibility-css-helper';
-import { initAccessibilityFontScale } from '../accessibility/font-scale';
 import { inBackground, setInBackground, setSuspended, suspended } from './application-common';
 
 const ActivityCreated = 'activityCreated';
@@ -203,9 +201,6 @@ export function run(entry?: NavigationEntry | string) {
 		const nativeApp = getNativeApplication();
 		androidApp.init(nativeApp);
 	}
-
-	initAccessibilityCssHelper();
-	initAccessibilityFontScale();
 }
 
 export function addCss(cssText: string, attributeScoped?: boolean): void {
@@ -376,6 +371,9 @@ function initLifecycleCallbacks() {
 
 	const lifecycleCallbacks = new android.app.Application.ActivityLifecycleCallbacks(<any>{
 		onActivityCreated: <any>profile('onActivityCreated', function (activity: androidx.appcompat.app.AppCompatActivity, savedInstanceState: android.os.Bundle) {
+			if (!androidApp.foregroundActivity) {
+				androidApp.foregroundActivity = activity;
+			}
 			setThemeOnLaunch(activity, undefined, undefined);
 
 			if (!androidApp.startActivity) {
diff --git a/packages/core/application/index.d.ts b/packages/core/application/index.d.ts
index 646399a0d0..cada443cdd 100644
--- a/packages/core/application/index.d.ts
+++ b/packages/core/application/index.d.ts
@@ -1,4 +1,4 @@
-import { NavigationEntry } from '../ui/frame';
+import { NavigationEntry } from '../ui/frame';
 import { View } from '../ui/core/view';
 import { Observable, EventData } from '../data/observable';
 
diff --git a/packages/core/application/index.ios.ts b/packages/core/application/index.ios.ts
index 23ab08e053..92863c3d58 100644
--- a/packages/core/application/index.ios.ts
+++ b/packages/core/application/index.ios.ts
@@ -18,8 +18,6 @@ import { IOSHelper } from '../ui/core/view/view-helper';
 import { Device } from '../platform';
 import { profile } from '../profiling';
 import { iOSNativeHelper } from '../utils';
-import { initAccessibilityCssHelper } from '../accessibility/accessibility-css-helper';
-import { initAccessibilityFontScale } from '../accessibility/font-scale';
 import { inBackground, setInBackground, setSuspended, suspended } from './application-common';
 
 const IOS_PLATFORM = 'ios';
@@ -492,9 +490,6 @@ export function run(entry?: string | NavigationEntry) {
 			}
 		}
 	}
-
-	initAccessibilityCssHelper();
-	initAccessibilityFontScale();
 }
 
 export function addCss(cssText: string, attributeScoped?: boolean): void {
diff --git a/packages/core/cli-hooks/before-checkForChanges.js b/packages/core/cli-hooks/before-checkForChanges.js
index 79f5be4913..d76fee5388 100644
--- a/packages/core/cli-hooks/before-checkForChanges.js
+++ b/packages/core/cli-hooks/before-checkForChanges.js
@@ -1,25 +1,28 @@
-const semver = require("semver");
-
 const webpackPackageName = "@nativescript/webpack";
 
 module.exports = function ($staticConfig, hookArgs) {
-    const cliVersion = semver.parse($staticConfig.version);
-    const platfrom = hookArgs.prepareData.platform;
-    const projectData = hookArgs.projectData;
-
-    // Required CLI version for building IOS: 6.2.0
-    if (platfrom.toLowerCase() === "ios" &&
-        !satisfiesRequriredVersion(cliVersion, 6, 2)) {
-        throw new Error(`Building @nativescript/core for iOS requires NativeScript CLI with version at least 6.2.0. Please upgrade your NativeScript CLI version (npm i -g nativescript).`);
-    }
+    try {
+        const semver = require("semver");
+        const cliVersion = semver.parse($staticConfig.version);
+        const platfrom = hookArgs.prepareData.platform;
+        const projectData = hookArgs.projectData;
+
+        // Required CLI version for building IOS: 6.2.0
+        if (platfrom.toLowerCase() === "ios" &&
+            !satisfiesRequriredVersion(cliVersion, 6, 2)) {
+            throw new Error(`Building @nativescript/core for iOS requires NativeScript CLI with version at least 6.2.0. Please upgrade your NativeScript CLI version (npm i -g nativescript).`);
+        }
 
-    // Required webpack version for angular projects: 1.3.0
-    if (projectData.projectType === "Angular") {
-        const webpackMinVer = getMinWebpackVersion(projectData);
+        // Required webpack version for angular projects: 1.3.0
+        if (projectData.projectType === "Angular") {
+            const webpackMinVer = getMinWebpackVersion(projectData);
 
-        if (webpackMinVer && !satisfiesRequriredVersion(webpackMinVer, 1, 3)) {
-            throw new Error(`Building @nativescript/core for Angular requires ${webpackPackageName} with version at least 1.3.0. Please upgrade: npm i ${webpackPackageName} --save-dev.`);
+            if (webpackMinVer && !satisfiesRequriredVersion(webpackMinVer, 1, 3)) {
+                throw new Error(`Building @nativescript/core for Angular requires ${webpackPackageName} with version at least 1.3.0. Please upgrade: npm i ${webpackPackageName} --save-dev.`);
+            }
         }
+    } catch(err) {
+
     }
 };
 
@@ -50,6 +53,8 @@ function getMinWebpackVersion(projectData) {
 
     let webpackMinVer = null;
 
+    const semver = require("semver");
+
     if (semver.valid(webpackVer)) {
         webpackMinVer = semver.parse(webpackVer);
     } else if (semver.validRange(webpackVer)) {
diff --git a/packages/core/color/color-common.ts b/packages/core/color/color-common.ts
index 578e3f048a..e9befaef44 100644
--- a/packages/core/color/color-common.ts
+++ b/packages/core/color/color-common.ts
@@ -574,7 +574,7 @@ function hsvToRgb(h1, s1, v1) {
 	const s = s1 / 100;
 	const v = v1 / 100;
 
-	var i = Math.floor(h),
+	const i = Math.floor(h),
 		f = h - i,
 		p = v * (1 - s),
 		q = v * (1 - f * s),
diff --git a/packages/core/core-types/index.ts b/packages/core/core-types/index.ts
index 8cc78a6b9e..5a160307e7 100644
--- a/packages/core/core-types/index.ts
+++ b/packages/core/core-types/index.ts
@@ -32,7 +32,7 @@ export namespace CoreTypes {
 	export type LengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit;
 	export type PercentLengthType = 'auto' | dip | LengthDipUnit | LengthPxUnit | LengthPercentUnit;
 
-	export type KeyboardInputType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer';
+	export type KeyboardInputType = 'datetime' | 'phone' | 'number' | 'url' | 'email' | 'integer' | 'decimal';
 	export module KeyboardType {
 		export const datetime = 'datetime';
 		export const phone = 'phone';
@@ -40,6 +40,7 @@ export namespace CoreTypes {
 		export const url = 'url';
 		export const email = 'email';
 		export const integer = 'integer';
+		export const decimal = 'decimal';
 	}
 	export type AutofillType = 'username' | 'password' | 'none' | string;
 	export module AutofillType {
diff --git a/packages/core/data/observable/index.ts b/packages/core/data/observable/index.ts
index f27f9d08e6..73b959771a 100644
--- a/packages/core/data/observable/index.ts
+++ b/packages/core/data/observable/index.ts
@@ -45,8 +45,6 @@ export class WrappedValue implements WrappedValueDefinition {
 
 const _wrappedValues = [new WrappedValue(null), new WrappedValue(null), new WrappedValue(null), new WrappedValue(null), new WrappedValue(null)];
 
-const _globalEventHandlers = {};
-
 export class Observable implements ObservableDefinition {
 	public static propertyChangeEvent = 'propertyChange';
 	public _isViewBase: boolean;
@@ -157,132 +155,14 @@ export class Observable implements ObservableDefinition {
 		}
 	}
 
-	public static on(eventName: string, callback: any, thisArg?: any): void {
-		this.addEventListener(eventName, callback, thisArg);
-	}
-
-	public static once(eventName: string, callback: any, thisArg?: any): void {
-		if (typeof eventName !== 'string') {
-			throw new TypeError('Event must be string.');
-		}
-
-		if (typeof callback !== 'function') {
-			throw new TypeError('callback must be function.');
-		}
-
-		const eventClass = this.name === 'Observable' ? '*' : this.name;
-		if (!_globalEventHandlers[eventClass]) {
-			_globalEventHandlers[eventClass] = {};
-		}
-		if (!Array.isArray(_globalEventHandlers[eventClass][eventName])) {
-			_globalEventHandlers[eventClass][eventName] = [];
-		}
-		_globalEventHandlers[eventClass][eventName].push({ callback, thisArg, once: true });
-	}
-
-	public static off(eventName: string, callback?: any, thisArg?: any): void {
-		this.removeEventListener(eventName, callback, thisArg);
-	}
-
-	public static removeEventListener(eventName: string, callback?: any, thisArg?: any): void {
-		if (typeof eventName !== 'string') {
-			throw new TypeError('Event must be string.');
-		}
-
-		if (callback && typeof callback !== 'function') {
-			throw new TypeError('callback must be function.');
-		}
-
-		const eventClass = this.name === 'Observable' ? '*' : this.name;
-
-		// Short Circuit if no handlers exist..
-		if (!_globalEventHandlers[eventClass] || !Array.isArray(_globalEventHandlers[eventClass][eventName])) {
-			return;
-		}
-
-		const events = _globalEventHandlers[eventClass][eventName];
-		if (thisArg) {
-			for (let i = 0; i < events.length; i++) {
-				if (events[i].callback === callback && events[i].thisArg === thisArg) {
-					events.splice(i, 1);
-					i--;
-				}
-			}
-		} else if (callback) {
-			for (let i = 0; i < events.length; i++) {
-				if (events[i].callback === callback) {
-					events.splice(i, 1);
-					i--;
-				}
-			}
-		} else {
-			// Clear all events of this type
-			delete _globalEventHandlers[eventClass][eventName];
-		}
-
-		if (events.length === 0) {
-			// Clear all events of this type
-			delete _globalEventHandlers[eventClass][eventName];
-		}
-
-		// Clear the primary class grouping if no events are left
-		const keys = Object.keys(_globalEventHandlers[eventClass]);
-		if (keys.length === 0) {
-			delete _globalEventHandlers[eventClass];
-		}
-	}
-
-	public static addEventListener(eventName: string, callback: any, thisArg?: any): void {
-		if (typeof eventName !== 'string') {
-			throw new TypeError('Event must be string.');
-		}
-
-		if (typeof callback !== 'function') {
-			throw new TypeError('callback must be function.');
-		}
-
-		const eventClass = this.name === 'Observable' ? '*' : this.name;
-		if (!_globalEventHandlers[eventClass]) {
-			_globalEventHandlers[eventClass] = {};
-		}
-		if (!Array.isArray(_globalEventHandlers[eventClass][eventName])) {
-			_globalEventHandlers[eventClass][eventName] = [];
-		}
-		_globalEventHandlers[eventClass][eventName].push({ callback, thisArg });
-	}
-
-	private _globalNotify<T extends EventData>(eventClass: string, eventType: string, data: T): void {
-		// Check for the Global handlers for JUST this class
-		if (_globalEventHandlers[eventClass]) {
-			const event = data.eventName + eventType;
-			const events = _globalEventHandlers[eventClass][event];
-			if (events) {
-				Observable._handleEvent(events, data);
-			}
-		}
-
-		// Check for he Global handlers for ALL classes
-		if (_globalEventHandlers['*']) {
-			const event = data.eventName + eventType;
-			const events = _globalEventHandlers['*'][event];
-			if (events) {
-				Observable._handleEvent(events, data);
-			}
-		}
-	}
-
 	public notify<T extends NotifyData>(data: T): void {
 		const eventData = data as EventData;
 		eventData.object = eventData.object || this;
-		const eventClass = this.constructor.name;
-		this._globalNotify(eventClass, 'First', eventData);
 
 		const observers = <Array<ListenerEntry>>this._observers[data.eventName];
 		if (observers) {
 			Observable._handleEvent(observers, eventData);
 		}
-
-		this._globalNotify(eventClass, '', eventData);
 	}
 
 	private static _handleEvent<T extends EventData>(observers: Array<ListenerEntry>, data: T): void {
diff --git a/packages/core/global-types.d.ts b/packages/core/global-types.d.ts
index d2ed635631..56cd0aca4a 100644
--- a/packages/core/global-types.d.ts
+++ b/packages/core/global-types.d.ts
@@ -122,6 +122,7 @@ declare namespace NodeJS {
 		TNS_WEBPACK?: boolean;
 		isIOS?: boolean;
 		isAndroid?: boolean;
+		autoLoadPolyfills?: boolean;
 		__requireOverride?: (name: string, dir: string) => any;
 
 		// used to get the rootlayout instance to add/remove childviews
@@ -211,7 +212,7 @@ declare type HeaderInit = Headers | Array<string>;
 declare function fetch(url: string, init?: RequestInit): Promise<Response>;
 
 // declare var console: Console;
-declare var require: NodeRequire;
+declare let require: NodeRequire;
 
 // Extend NodeRequire with the webpack's require context extension.
 interface RequireContext {
@@ -224,9 +225,9 @@ interface RequireContext {
 declare var __dirname: string;
 declare var __filename: string;
 
-declare var module: NodeModule;
+declare let module: NodeModule;
 // Same as module.exports
-declare var exports: any;
+declare let exports: any;
 
 // Global functions
 declare function Deprecated(target: Object, key?: string | symbol, value?: any): void;
diff --git a/packages/core/globals/index.ts b/packages/core/globals/index.ts
index 83f112d9a8..9b6252dad7 100644
--- a/packages/core/globals/index.ts
+++ b/packages/core/globals/index.ts
@@ -301,23 +301,28 @@ export function initGlobal() {
 		};
 
 		// DOM api polyfills
-		global.registerModule('timer', () => require('../timer'));
-		installPolyfills('timer', ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval']);
+		if (global.autoLoadPolyfills !== false) {
+			global.registerModule('timer', () => require('../timer'));
+			installPolyfills('timer', ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval']);
 
-		global.registerModule('animation', () => require('../animation-frame'));
-		installPolyfills('animation', ['requestAnimationFrame', 'cancelAnimationFrame']);
+			global.registerModule('animation', () => require('../animation-frame'));
+			installPolyfills('animation', ['requestAnimationFrame', 'cancelAnimationFrame']);
 
-		global.registerModule('ui-dialogs', () => require('../ui/dialogs'));
-		installPolyfills('ui-dialogs', ['alert', 'confirm', 'prompt', 'login', 'action']);
+			global.registerModule('ui-dialogs', () => require('../ui/dialogs'));
+			installPolyfills('ui-dialogs', ['alert', 'confirm', 'prompt', 'login', 'action']);
 
-		global.registerModule('text', () => require('../text'));
-		installPolyfills('text', ['TextDecoder', 'TextEncoder']);
+			global.registerModule('text', () => require('../text'));
+			installPolyfills('text', ['TextDecoder', 'TextEncoder']);
 
-		global.registerModule('xhr', () => require('../xhr'));
-		installPolyfills('xhr', ['XMLHttpRequest', 'FormData', 'Blob', 'File', 'FileReader']);
+			global.registerModule('xhr', () => require('../xhr'));
+			installPolyfills('xhr', ['XMLHttpRequest', 'Blob', 'File', 'FileReader']);
 
-		global.registerModule('fetch', () => require('../fetch'));
-		installPolyfills('fetch', ['fetch', 'Headers', 'Request', 'Response']);
+			global.registerModule('formdata', () => require('../polyfills/formdata'));
+			installPolyfills('formdata', ['FormData']);
+
+			global.registerModule('fetch', () => require('../fetch'));
+			installPolyfills('fetch', ['fetch', 'Headers', 'Request', 'Response']);
+		}
 
 		// global.registerModule('abortcontroller', () => require('../abortcontroller'));
 		// installPolyfills('abortcontroller', ['AbortController', 'AbortSignal']);
diff --git a/packages/core/package.json b/packages/core/package.json
index 050547fcfa..e42c35e271 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -9,16 +9,6 @@
     "./globals/index.js",
     "./globals"
   ],
-  "files": [
-    "**/*.d.ts",
-    "**/*.js",
-    "**/*.map",
-    "**/platforms/ios/**",
-    "platforms/android/native-api-usage.json",
-    "platforms/android/res/values/ids.xml",
-    "platforms/android/widgets-release.aar",
-    "**/package.json"
-  ],
   "keywords": [
     "NativeScript",
     "JavaScript",
diff --git a/packages/core/platforms/android/core.aar b/packages/core/platforms/android/core.aar
deleted file mode 100644
index d76bd6de9d..0000000000
Binary files a/packages/core/platforms/android/core.aar and /dev/null differ
diff --git a/packages/core/platforms/android/native-api-usage.json b/packages/core/platforms/android/native-api-usage.json
index cf2175dd6a..47d7d59ab0 100644
--- a/packages/core/platforms/android/native-api-usage.json
+++ b/packages/core/platforms/android/native-api-usage.json
@@ -1,32 +1,252 @@
 {
     "uses": [
-        "java.lang:*",
-        "java.lang.reflect:*",
-        "java.io:*",
-        "java.nio:*",
-        "java.util:*",
-        "com.tns*:*",
+        "java.lang:String*",
+        "java.lang:Integer*",
+        "java.lang:Number*",
+        "java.lang:Float*",
+        "java.lang:Class*",
+        "java.lang:ClassLoader*",
+        "java.lang:Exception*",
+        "java.lang:CharSequence*",
+        "java.lang:System*",
+        "java.lang:Runnable*",
+        "java.lang.reflect:Field*",
+        "java.io:File*",
+        "java.io:InputStream*",
+        "java.io:FileInputStream*",
+        "java.io:DataInputStream*",
+        "java.io:InputStreamReader*",
+        "java.io:BufferedReader*",
+        "java.io:OutputStreamWriter*",
+        "java.io:BufferedOutputStream*",
+        "java.io:ByteArrayOutputStream*",
+        "java.io:IOException*",
+        "java.io:FileNotFoundException*",
+        "java.nio:ByteBuffer*",
+        "java.util:Locale*",
+        "java.util:Calendar*",
+        "java.util:HashSet*",
+        "java.util:Arrays*",
+        "java.util:List*",
+        "java.util:ArrayList*",
+        "java.util:Set*",
+        "java.util:HashMap*",
+        "com.tns:NativeScriptApplication*",
+        "com.tns:NativeScriptActivity*",
+        "com.tns:FragmentClass*",
+        "com.tns:NativeScriptException*",
+        "com.nativescript*:*",
         "org.nativescript*:*",
-        "android.content*:*",
-        "android.app*:*",
-        "android.os*:*",
-        "android.view*:*",
-        "android.net*:*",
-        "android.graphics*:*",
-        "android.util*:*",
-        "android.media*:*",
-        "android.widget*:*",
-        "android.animation*:*",
-        "android.provider*:*",
-        "android.text*:*",
-        "android.webkit*:*",
-        "androidx.appcompat*:*",
-        "androidx.core*:*",
-        "androidx.viewpager.widget*:*",
-        "androidx.fragment*:*",
-        "androidx.transition*:*",
-        "androidx.lifecycle*:*",
-        "android.inputmethodservice*:*",
-        "androidx.activity:ComponentActivity"
+        "android.content:Context*",
+        "android.content:ComponentCallbacks2*",
+        "android.content.res:Configuration*",
+        "android.content.res:Resources*",
+        "android.content.res:ColorStateList*",
+        "android.content.res:AssetManager*",
+        "android.content:BroadcastReceiver*",
+        "android.content:ComponentName*",
+        "android.content:Intent*",
+        "android.content:IntentFilter*",
+        "android.content.pm:PackageManager*",
+        "android.content.pm:PackageItemInfo*",
+        "android.content.pm:ComponentInfo*",
+        "android.content.pm:ActivityInfo*",
+        "android.content.pm:ApplicationInfo*",
+        "android.content:DialogInterface*",
+        "android.content.DialogInterface:OnCancelListener*",
+        "android.content.DialogInterface:OnDismissListener*",
+        "android.app:Dialog*",
+        "android.app:AlertDialog*",
+        "android.app.AlertDialog:Builder*",
+        "android.app:Menu*",
+        "android.app:Application*",
+        "android.app:Activity*",
+        "android.app:ActivityThread*",
+        "android.app:ActionBar*",
+        "android.os:Build*",
+        "android.os:BaseBundle*",
+        "android.os:Bundle*",
+        "android.os:Looper*",
+        "android.os:Handler*",
+        "android.os:Parcelable*",
+        "android.os:Environment*",
+        "android.os:IBinder*",
+        "android.os:LocaleList*",
+        "android.view:Window*",
+        "android.view:View*",
+        "android.view.View:OnClickListener*",
+        "android.view.View:OnLayoutChangeListener*",
+        "android.view.View:OnAttachStateChangeListener*",
+        "android.view.View:OnFocusChangeListener*",
+        "android.view:ViewConfiguration*",
+        "android.view:ViewGroup*",
+        "android.view.ViewGroup:LayoutParams*",
+        "android.view:GestureDetector*",
+        "android.view.GestureDetector:SimpleOnGestureListener*",
+        "android.view:ScaleGestureDetector*",
+        "android.view.ScaleGestureDetector:SimpleOnScaleGestureListener*",
+        "android.view:Gravity*",
+        "android.view:KeyEvent*",
+        "android.view:MotionEvent*",
+        "android.view:LayoutInflater*",
+        "android.view:Menu*",
+        "android.view:MenuItem*",
+        "android.view:ViewTreeObserver*",
+        "android.view.ViewTreeObserver:OnGlobalLayoutListener*",
+        "android.view.ViewTreeObserver:OnScrollChangedListener*",
+        "android.view:Choreographer*",
+        "android.view.Choreographer:FrameCallback*",
+        "android.view:AccessibilityDelegate*",
+        "android.view.accessibility:AccessibilityManager*",
+        "android.view.accessibility:AccessibilityEvent*",
+        "android.view.accessibility:AccessibilityNodeInfo*",
+        "android.view.animation:Interpolator*",
+        "android.view.animation:AccelerateInterpolator*",
+        "android.view.animation:DecelerateInterpolator*",
+        "android.view.animation:AccelerateDecelerateInterpolator*",
+        "android.view.animation:LinearInterpolator*",
+        "android.view.animation:BounceInterpolator*",
+        "android.view.animation:Animation*",
+        "android.view.inputmethod:EditorInfo*",
+        "android.view.inputmethod:InputMethodManager*",
+        "android.net:ConnectivityManager*",
+        "android.net:NetworkInfo*",
+        "android.net:Uri*",
+        "android.net:Network*",
+        "android.net:NetworkCapabilities*",
+        "android.graphics:Bitmap*",
+        "android.graphics.Bitmap:Config*",
+        "android.graphics.Bitmap:CompressFormat*",
+        "android.graphics:BitmapFactory*",
+        "android.graphics:Canvas*",
+        "android.graphics:Paint*",
+        "android.graphics:Color*",
+        "android.graphics:Rect*",
+        "android.graphics:Typeface*",
+        "android.graphics:Matrix*",
+        "android.graphics:PorterDuff*",
+        "android.graphics.PorterDuff:Mode*",
+        "android.graphics.drawable:Drawable*",
+        "android.graphics.drawable:ColorDrawable*",
+        "android.graphics.drawable:LayerDrawable*",
+        "android.graphics.drawable:BitmapDrawable*",
+        "android.util:Base64*",
+        "android.util:Base64OutputStream*",
+        "android.util:DisplayMetrics*",
+        "android.util:SparseArray*",
+        "android.util:LruCache*",
+        "android.util:TypedValue*",
+        "android.util:AttributeSet*",
+        "android.media:ExifInterface*",
+        "android.widget:LinearLayout*",
+        "android.widget:FrameLayout*",
+        "android.widget:Button*",
+        "android.widget:TextView*",
+        "android.widget.TextView:BufferType*",
+        "android.widget.TextView:OnEditorActionListener*",
+        "android.widget:ImageView*",
+        "android.widget.ImageView:ScaleType*",
+        "android.widget:ImageButton*",
+        "android.widget:SeekBar*",
+        "android.widget.SeekBar:OnSeekBarChangeListener*",
+        "android.widget:CheckBox*",
+        "android.widget:CompoundButton*",
+        "android.widget.CompoundButton:OnCheckedChangeListener*",
+        "android.widget:RadioButton*",
+        "android.widget:Spinner*",
+        "android.widget:Switch*",
+        "android.widget:ProgressBar*",
+        "android.widget:EditText*",
+        "android.widget:DatePicker*",
+        "android.widget.DatePicker:OnDateChangedListener*",
+        "android.widget:TimePicker*",
+        "android.widget.TimePicker:OnTimeChangedListener*",
+        "android.widget:NumberPicker*",
+        "android.widget.NumberPicker:Formatter*",
+        "android.widget.NumberPicker:OnValueChangeListener*",
+        "android.widget:ListView*",
+        "android.widget:BaseAdapter*",
+        "android.widget:AdapterView*",
+        "android.widget.AdapterView:OnItemClickListener*",
+        "android.widget:TabWidget*",
+        "android.widget:TabHost*",
+        "android.widget.TabHost:OnTabChangeListener*",
+        "android.widget.TabHost:TabContentFactory*",
+        "android.animation:ArgbEvaluator*",
+        "android.animation:ObjectAnimator*",
+        "android.animation:TypeEvaluator*",
+        "android.animation:ValueAnimator*",
+        "android.animation.ValueAnimator:AnimatorUpdateListener*",
+        "android.animation:AnimatorSet*",
+        "android.animation:Animator*",
+        "android.animation:StateListAnimator*",
+        "android.animation:TimeInterpolator*",
+        "android.animation.Animator:AnimatorListener*",
+        "android.provider:Settings*",
+        "android.provider.Settings:Secure*",
+        "android.text.style:MetricAffectingSpan*",
+        "android.text.style:ClickableSpan*",
+        "android.text.style:AbsoluteSizeSpan*",
+        "android.text.style:ForegroundColorSpan*",
+        "android.text.style:BackgroundColorSpan*",
+        "android.text.style:UnderlineSpan*",
+        "android.text.style:StrikethroughSpan*",
+        "android.text.style:ScaleXSpan*",
+        "android.text.style:StyleSpan*",
+        "android.text:TextUtils*",
+        "android.text.TextUtils:TruncateAt*",
+        "android.text:InputFilter*",
+        "android.text.InputFilter:LengthFilter*",
+        "android.text:InputType*",
+        "android.text:TextPaint*",
+        "android.text:TextWatcher*",
+        "android.text:SpannableStringBuilder*",
+        "android.text:Spanned*",
+        "android.text:Editable*",
+        "android.text:Html*",
+        "android.text:Layout*",
+        "android.text.method:KeyListener*",
+        "android.text.method:TransformationMethod*",
+        "android.text.method:LinkMovementMethod*",
+        "android.text.method:MovementMethod*",
+        "android.webkit:WebViewClient*",
+        "android.webkit:WebView*",
+        "android.webkit:WebSettings*",
+        "android.webkit:WebResourceRequest*",
+        "android.webkit:WebResourceError*",
+        "android.webkit:MimeTypeMap*",
+        "androidx.appcompat.widget:Toolbar*",
+        "androidx.appcompat.widget.Toolbar:OnMenuItemClickListener*",
+        "androidx.appcompat.widget:AppCompatTextView*",
+        "androidx.appcompat.app:AppCompatActivity*",
+        "androidx.appcompat.widget:SearchView*",
+        "androidx.appcompat.widget.SearchView:OnCloseListener*",
+        "androidx.appcompat.widget.SearchView:OnQueryTextListener*",
+        "androidx.appcompat:R.attr",
+        "androidx.core.view.accessibility:AccessibilityManagerCompat*",
+        "androidx.core.view.accessibility.AccessibilityManagerCompat:AccessibilityStateChangeListener*",
+        "androidx.core.view.accessibility.AccessibilityManagerCompat:TouchExplorationStateChangeListener*",
+        "androidx.core.view:ViewCompat*",
+        "androidx.core.view:GestureDetectorCompat*",
+        "androidx.core.view:NestedScrollView*",
+        "androidx.core.view.NestedScrollView:OnScrollChangeListener*",
+        "androidx.core.view.animation:PathInterpolatorCompat*",
+        "androidx.core.content:FileProvider*",
+        "androidx.viewpager.widget:ViewPager*",
+        "androidx.viewpager.widget:PagerAdapter*",
+        "androidx.fragment.app:DialogFragment*",
+        "androidx.fragment.app:FragmentManager*",
+        "androidx.fragment.app:FragmentActivity*",
+        "androidx.fragment.app:FragmentTransaction*",
+        "androidx.fragment.app:Fragment*",
+        "androidx.transition:Transition*",
+        "androidx.transition:Slide*",
+        "androidx.transition:Fade*",
+        "androidx.transition.Transition:TransitionListener*",
+        "androidx.lifecycle:Lifecycle*",
+        "androidx.lifecycle.Lifecycle:State*",
+        "androidx.core.content:FileProvider*",
+        "android.inputmethodservice:Keyboard*",
+        "android.inputmethodservice.Keyboard:Key*"
     ]
 }
diff --git a/packages/core/polyfills/formdata.ts b/packages/core/polyfills/formdata.ts
new file mode 100644
index 0000000000..af21586e45
--- /dev/null
+++ b/packages/core/polyfills/formdata.ts
@@ -0,0 +1,21 @@
+export class FormData {
+	private _data: Map<string, any>;
+
+	constructor() {
+		this._data = new Map<string, any>();
+	}
+
+	append(name: string, value: any) {
+		this._data.set(name, value);
+	}
+
+	toString(): string {
+		const arr = new Array<string>();
+
+		this._data.forEach(function (value, name, map) {
+			arr.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
+		});
+
+		return arr.join('&');
+	}
+}
diff --git a/packages/core/project.json b/packages/core/project.json
index 47f237b6de..e0f3882c20 100644
--- a/packages/core/project.json
+++ b/packages/core/project.json
@@ -27,6 +27,7 @@
 					"./node_modules/.bin/tsc -p packages/core/tsconfig.lib.json",
 					"./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/**/*.d.ts\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/js-libs/**/*\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/cli-hooks/**/*.js\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/platforms/**/*\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/fetch/**/*\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/css/**/*\" dist && ./node_modules/.bin/copyfiles -e \"packages/core/__tests__/**/*\" \"packages/core/css-value/**/*\" dist",
 					"cp packages/core/package.json dist/packages/core",
+					"cp packages/core/.npmignore dist/packages/core",
 					"cp packages/core/README.md dist/packages/core",
 					"cp LICENSE dist/packages/core",
 					"cd dist/packages/core && npm pack && mv *.tgz .."
diff --git a/packages/core/tsconfig.lib.json b/packages/core/tsconfig.lib.json
index 58591234e7..a6ece5acd0 100644
--- a/packages/core/tsconfig.lib.json
+++ b/packages/core/tsconfig.lib.json
@@ -7,7 +7,7 @@
 		"noImplicitAny": false,
 		"noImplicitUseStrict": true,
 		"removeComments": false,
-		"emitDecoratorMetadata": true,
+		"emitDecoratorMetadata": false,
 		"experimentalDecorators": true,
 		"diagnostics": true,
 		"sourceMap": true,
diff --git a/packages/core/ui/action-bar/action-bar-common.ts b/packages/core/ui/action-bar/action-bar-common.ts
index f5610e95a6..2bc35dfef2 100644
--- a/packages/core/ui/action-bar/action-bar-common.ts
+++ b/packages/core/ui/action-bar/action-bar-common.ts
@@ -263,6 +263,8 @@ export class ActionItems implements ActionItemsDefinition {
 }
 
 export class ActionItemBase extends ViewBase implements ActionItemDefinition {
+	// defining this here means tap event wont be handled
+	// by the gesture observers
 	public static tapEvent = 'tap';
 
 	private _actionBar: ActionBarDefinition;
diff --git a/packages/core/ui/animation/animation-common.ts b/packages/core/ui/animation/animation-common.ts
index be51c87f4b..9645444fbc 100644
--- a/packages/core/ui/animation/animation-common.ts
+++ b/packages/core/ui/animation/animation-common.ts
@@ -1,14 +1,19 @@
 // Types.
-import { CubicBezierAnimationCurve as CubicBezierAnimationCurveDefinition, Animation as AnimationBaseDefinition, Point3D } from '.';
+import { CubicBezierAnimationCurve as CubicBezierAnimationCurveDefinition, Animation as AnimationBaseDefinition } from '.';
 import { AnimationDefinition, AnimationPromise as AnimationPromiseDefinition, Pair, PropertyAnimation } from './animation-interfaces';
 
 // Requires.
-import { Color } from '../../color';
 import { Trace } from '../../trace';
-import { PercentLength } from '../styling/style-properties';
+import { Style } from '../styling/style';
+import { CssAnimationProperty, CssProperty, InheritedCssProperty, ShorthandProperty } from '../core/properties';
+import { View } from '../core/view';
 
 export * from './animation-interfaces';
 
+export function getPropertyFromKey(key: string, view: View) {
+	return CssAnimationProperty.properties[key] || ShorthandProperty.properties[key] || InheritedCssProperty.properties[key] || CssProperty.properties[key] || Style.prototype[key] || view.constructor['registeredProps']?.[key] || Object.getPrototypeOf(view)[key];
+}
+
 export namespace Properties {
 	export const opacity = 'opacity';
 	export const backgroundColor = 'backgroundColor';
@@ -19,6 +24,8 @@ export namespace Properties {
 	export const width = 'width';
 }
 
+export const AnimationNonAnimatableProperties = ['duration', 'valueSource', 'delay', 'iterations', 'curve', 'target'];
+
 export class CubicBezierAnimationCurve implements CubicBezierAnimationCurveDefinition {
 	public x1: number;
 	public y1: number;
@@ -51,12 +58,12 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
 		}
 
 		this._propertyAnimations = new Array<PropertyAnimation>();
-		for (let i = 0, length = animationDefinitions.length; i < length; i++) {
-			if (animationDefinitions[i].curve) {
-				animationDefinitions[i].curve = this._resolveAnimationCurve(animationDefinitions[i].curve);
+		animationDefinitions.forEach((animationDefinition) => {
+			if (animationDefinition.curve) {
+				animationDefinition.curve = this._resolveAnimationCurve(animationDefinition.curve);
 			}
-			this._propertyAnimations = this._propertyAnimations.concat(AnimationBase._createPropertyAnimations(animationDefinitions[i]));
-		}
+			this._propertyAnimations.push(...this._createPropertyAnimations(animationDefinition));
+		});
 
 		if (this._propertyAnimations.length === 0) {
 			if (Trace.isEnabled()) {
@@ -97,7 +104,7 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
 		return animationFinishedPromise;
 	}
 
-	private fixupAnimationPromise(promise: AnimationPromiseDefinition): void {
+	protected fixupAnimationPromise(promise: AnimationPromiseDefinition): void {
 		// Since we are using function() below because of arguments, TS won't automatically do a _this for those functions.
 		const _this = this;
 		promise.cancel = () => {
@@ -129,148 +136,75 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
 		return this._isPlaying;
 	}
 
-	public _resolveAnimationFinishedPromise() {
+	protected _resolveAnimationFinishedPromise() {
 		this._isPlaying = false;
 		this._resolve();
 	}
 
-	public _rejectAnimationFinishedPromise() {
+	protected _rejectAnimationFinishedPromise() {
 		this._isPlaying = false;
 		this._reject(new Error('Animation cancelled.'));
 	}
 
-	private static _createPropertyAnimations(animationDefinition: AnimationDefinition): Array<PropertyAnimation> {
+	protected _createPropertyAnimations(animationDefinition: AnimationDefinition): Array<PropertyAnimation> {
 		if (!animationDefinition.target) {
 			console.error('No animation target specified.');
 			return;
 		}
 
+		console.log('_createPropertyAnimations', Object.keys(animationDefinition), new Error().stack);
+		const propertyAnimations = new Array<PropertyAnimation>();
 		for (const item in animationDefinition) {
 			const value = animationDefinition[item];
 			if (value === undefined) {
 				continue;
 			}
-
-			if ((item === Properties.opacity || item === 'duration' || item === 'delay' || item === 'iterations') && typeof value !== 'number') {
-				console.error(`Property ${item} must be valid number. Value: ${value}`);
-				return;
-			} else if ((item === Properties.scale || item === Properties.translate) && (typeof (<Pair>value).x !== 'number' || typeof (<Pair>value).y !== 'number')) {
-				console.error(`Property ${item} must be valid Pair. Value: ${value}`);
-				return;
-			} else if (item === Properties.backgroundColor && !Color.isValid(animationDefinition.backgroundColor)) {
-				console.error(`Property ${item} must be valid color. Value: ${value}`);
-				return;
-			} else if (item === Properties.width || item === Properties.height) {
-				// Coerce input into a PercentLength object in case it's a string.
-				animationDefinition[item] = PercentLength.parse(<any>value);
-			} else if (item === Properties.rotate) {
-				const rotate: number | Point3D = value;
-				if (typeof rotate !== 'number' && !(typeof rotate.x === 'number' && typeof rotate.y === 'number' && typeof rotate.z === 'number')) {
-					console.error(`Property ${rotate} must be valid number or Point3D. Value: ${value}`);
-					return;
+			if (AnimationNonAnimatableProperties.indexOf(item) !== -1) {
+				if (item === 'duration' || item === 'delay' || item === 'iterations') {
+					if (typeof value !== 'number') {
+						console.error(`Property ${item} must be valid number. Value: ${value}`);
+					}
 				}
+				continue;
 			}
-		}
-
-		const propertyAnimations = new Array<PropertyAnimation>();
-
-		// opacity
-		if (animationDefinition.opacity !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.opacity,
-				value: animationDefinition.opacity,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// backgroundColor
-		if (animationDefinition.backgroundColor !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.backgroundColor,
-				value: typeof animationDefinition.backgroundColor === 'string' ? new Color(<any>animationDefinition.backgroundColor) : animationDefinition.backgroundColor,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// translate
-		if (animationDefinition.translate !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.translate,
-				value: animationDefinition.translate,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// scale
-		if (animationDefinition.scale !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.scale,
-				value: animationDefinition.scale,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// rotate
-		if (animationDefinition.rotate !== undefined) {
-			// Make sure the value of the rotation property is always Point3D
-			let rotationValue: Point3D;
-			if (typeof animationDefinition.rotate === 'number') {
-				rotationValue = { x: 0, y: 0, z: animationDefinition.rotate };
-			} else {
-				rotationValue = animationDefinition.rotate;
+			let property = getPropertyFromKey(item, animationDefinition.target);
+			console.log('property test', item, property);
+			if (item === Properties.scale || item === Properties.translate) {
+				property = CssAnimationProperty.properties[item + 'X'];
+			}
+			if (property) {
+				console.log('property found', item);
+				let newValue = value;
+				const valueConverter = property.valueConverter;
+				if ((item === Properties.scale || item === Properties.translate) && typeof value !== 'object') {
+					console.error(`Property ${item} must be valid Pair. Value: ${value}`);
+				}
+				if (valueConverter) {
+					if (item === Properties.translate || item === Properties.rotate || item === Properties.scale) {
+						newValue = {};
+						if (Properties.rotate && typeof value !== 'object') {
+							newValue = { x: 0, y: 0, z: typeof value === 'string' ? valueConverter(value) : value };
+						} else {
+							Object.keys(value).forEach((k2) => {
+								newValue[k2] = typeof value[k2] === 'string' ? valueConverter(value[k2]) : value[k2];
+							});
+						}
+					} else {
+						newValue = typeof value === 'string' ? valueConverter(value) : value;
+					}
+				}
+				propertyAnimations.push({
+					target: animationDefinition.target,
+					propertyName: item,
+					property,
+					value: newValue,
+					duration: animationDefinition.duration,
+					delay: animationDefinition.delay,
+					iterations: animationDefinition.iterations,
+					curve: animationDefinition.curve,
+				});
+				console.log('adding animation proeprty', propertyAnimations.length);
 			}
-
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.rotate,
-				value: rotationValue,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// height
-		if (animationDefinition.height !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.height,
-				value: animationDefinition.height,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
-		}
-
-		// width
-		if (animationDefinition.width !== undefined) {
-			propertyAnimations.push({
-				target: animationDefinition.target,
-				property: Properties.width,
-				value: animationDefinition.width,
-				duration: animationDefinition.duration,
-				delay: animationDefinition.delay,
-				iterations: animationDefinition.iterations,
-				curve: animationDefinition.curve,
-			});
 		}
 
 		if (propertyAnimations.length === 0) {
@@ -283,7 +217,7 @@ export abstract class AnimationBase implements AnimationBaseDefinition {
 	public static _getAnimationInfo(animation: PropertyAnimation): string {
 		return JSON.stringify({
 			target: animation.target.id,
-			property: animation.property,
+			propertyName: animation.propertyName,
 			value: animation.value,
 			duration: animation.duration,
 			delay: animation.delay,
diff --git a/packages/core/ui/animation/animation-interfaces.ts b/packages/core/ui/animation/animation-interfaces.ts
index 37609cb4ce..0c0ad7c6de 100644
--- a/packages/core/ui/animation/animation-interfaces.ts
+++ b/packages/core/ui/animation/animation-interfaces.ts
@@ -34,7 +34,8 @@ export interface Cancelable {
 
 export interface PropertyAnimation {
 	target: View;
-	property: string;
+	property: any;
+	propertyName: string;
 	value: any;
 	duration?: number;
 	delay?: number;
diff --git a/packages/core/ui/animation/index.android.ts b/packages/core/ui/animation/index.android.ts
index 30332c62d7..980bbbecd5 100644
--- a/packages/core/ui/animation/index.android.ts
+++ b/packages/core/ui/animation/index.android.ts
@@ -3,7 +3,7 @@ import { AnimationDefinitionInternal, AnimationPromise, PropertyAnimation } from
 import { View } from '../core/view';
 
 // Requires
-import { AnimationBase, Properties, CubicBezierAnimationCurve } from './animation-common';
+import { AnimationBase, CubicBezierAnimationCurve } from './animation-common';
 import { Color } from '../../color';
 import { Trace } from '../../trace';
 import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
@@ -108,15 +108,15 @@ function createAnimationSet(animators: android.animation.ObjectAnimator[], itera
 }
 
 export class Animation extends AnimationBase {
-	private _animatorListener: android.animation.Animator.AnimatorListener;
-	private _nativeAnimatorsArray: any;
-	private _animatorSet: android.animation.AnimatorSet;
-	private _animators: Array<android.animation.Animator>;
-	private _propertyUpdateCallbacks: Array<Function>;
-	private _propertyResetCallbacks: Array<Function>;
-	private _valueSource: 'animation' | 'keyframe';
-	private _target: View;
-	private _resetOnFinish = true;
+	protected _animatorListener: android.animation.Animator.AnimatorListener;
+	protected _nativeAnimatorsArray: any;
+	protected _animatorSet: android.animation.AnimatorSet;
+	protected _animators: Array<android.animation.Animator>;
+	protected _propertyUpdateCallbacks: Array<Function>;
+	protected _propertyResetCallbacks: Array<Function>;
+	protected _valueSource: 'animation' | 'keyframe';
+	protected _target: View;
+	protected _resetOnFinish = true;
 
 	constructor(animationDefinitions: Array<AnimationDefinitionInternal>, playSequentially?: boolean) {
 		super(animationDefinitions, playSequentially);
@@ -207,13 +207,15 @@ export class Animation extends AnimationBase {
 		return _resolveAnimationCurve(curve);
 	}
 
-	private _play(): void {
+	protected _play(): void {
 		if (Device.sdkVersion <= '23') {
 			this._animatorSet = new android.animation.AnimatorSet();
 			this._animatorSet.addListener(this._animatorListener);
 		}
 
 		if (this._animators.length > 0) {
+			// TODO: fix sequentially which wont work because all animators values are computed before
+			// the first one starts...
 			if (this._playSequentially) {
 				this._animatorSet.playSequentially(this._nativeAnimatorsArray);
 			} else {
@@ -229,8 +231,7 @@ export class Animation extends AnimationBase {
 		this._animatorSet.start();
 	}
 
-	private _onAndroidAnimationEnd() {
-		// tslint:disable-line
+	protected _onAndroidAnimationEnd() {
 		if (!this.isPlaying) {
 			// It has been cancelled
 			return;
@@ -244,8 +245,7 @@ export class Animation extends AnimationBase {
 		}
 	}
 
-	private _onAndroidAnimationCancel() {
-		// tslint:disable-line
+	protected _onAndroidAnimationCancel() {
 		this._propertyResetCallbacks.forEach((v) => v());
 		this._rejectAnimationFinishedPromise();
 
@@ -254,7 +254,7 @@ export class Animation extends AnimationBase {
 		}
 	}
 
-	private _createAnimators(propertyAnimation: PropertyAnimation): void {
+	protected _createAnimators(propertyAnimation: PropertyAnimation): void {
 		if (!propertyAnimation.target.nativeViewProtected) {
 			return;
 		}
@@ -264,15 +264,15 @@ export class Animation extends AnimationBase {
 		}
 
 		if (propertyAnimation.target === null || propertyAnimation.target === undefined) {
-			throw new Error(`Animation target cannot be null or undefined; property: ${propertyAnimation.property}; value: ${propertyAnimation.value};`);
+			throw new Error(`Animation target cannot be null or undefined; property: ${propertyAnimation.propertyName}; value: ${propertyAnimation.value};`);
 		}
 
-		if (propertyAnimation.property === null || propertyAnimation.property === undefined) {
+		if (propertyAnimation.propertyName === null || propertyAnimation.propertyName === undefined) {
 			throw new Error(`Animation property cannot be null or undefined; target: ${propertyAnimation.target}; value: ${propertyAnimation.value};`);
 		}
 
 		if (propertyAnimation.value === null || propertyAnimation.value === undefined) {
-			throw new Error(`Animation value cannot be null or undefined; target: ${propertyAnimation.target}; property: ${propertyAnimation.property};`);
+			throw new Error(`Animation value cannot be null or undefined; target: ${propertyAnimation.target}; property: ${propertyAnimation.propertyName};`);
 		}
 
 		this._target = propertyAnimation.target;
@@ -288,8 +288,9 @@ export class Animation extends AnimationBase {
 
 		const setLocal = this._valueSource === 'animation';
 		const style = propertyAnimation.target.style;
-		switch (propertyAnimation.property) {
-			case Properties.opacity:
+		const propName = propertyAnimation.propertyName;
+		switch (propName) {
+			case 'opacity':
 				opacityProperty._initDefaultNativeValue(style);
 
 				originalValue1 = nativeView.getAlpha();
@@ -309,7 +310,7 @@ export class Animation extends AnimationBase {
 				animators.push(createObjectAnimator(nativeView, 'alpha', propertyAnimation.value));
 				break;
 
-			case Properties.backgroundColor: {
+			case 'backgroundColor': {
 				backgroundColorProperty._initDefaultNativeValue(style);
 
 				ensureArgbEvaluator();
@@ -344,7 +345,7 @@ export class Animation extends AnimationBase {
 				animators.push(animator);
 				break;
 			}
-			case Properties.translate:
+			case 'translate':
 				translateXProperty._initDefaultNativeValue(style);
 				translateYProperty._initDefaultNativeValue(style);
 
@@ -374,7 +375,7 @@ export class Animation extends AnimationBase {
 				animators.push(createAnimationSet([createObjectAnimator(nativeView, 'translationX', propertyAnimation.value.x * density), createObjectAnimator(nativeView, 'translationY', propertyAnimation.value.y * density)], propertyAnimation.iterations));
 				break;
 
-			case Properties.scale:
+			case 'scale':
 				scaleXProperty._initDefaultNativeValue(style);
 				scaleYProperty._initDefaultNativeValue(style);
 
@@ -404,7 +405,7 @@ export class Animation extends AnimationBase {
 				animators.push(createAnimationSet([createObjectAnimator(nativeView, 'scaleX', propertyAnimation.value.x), createObjectAnimator(nativeView, 'scaleY', propertyAnimation.value.y)], propertyAnimation.iterations));
 				break;
 
-			case Properties.rotate:
+			case 'rotate':
 				rotateProperty._initDefaultNativeValue(style);
 				rotateXProperty._initDefaultNativeValue(style);
 				rotateYProperty._initDefaultNativeValue(style);
@@ -439,9 +440,9 @@ export class Animation extends AnimationBase {
 				animators.push(createAnimationSet([createObjectAnimator(nativeView, 'rotationX', propertyAnimation.value.x), createObjectAnimator(nativeView, 'rotationY', propertyAnimation.value.y), createObjectAnimator(nativeView, 'rotation', propertyAnimation.value.z)], propertyAnimation.iterations));
 				break;
 
-			case Properties.width:
-			case Properties.height: {
-				const isVertical: boolean = propertyAnimation.property === 'height';
+			case 'width':
+			case 'height': {
+				const isVertical: boolean = propertyAnimation.propertyName === 'height';
 				const extentProperty = isVertical ? heightProperty : widthProperty;
 
 				extentProperty._initDefaultNativeValue(style);
@@ -449,21 +450,41 @@ export class Animation extends AnimationBase {
 				let toValue = propertyAnimation.value;
 				const parent = propertyAnimation.target.parent as View;
 				if (!parent) {
-					throw new Error(`cannot animate ${propertyAnimation.property} on root view`);
+					throw new Error(`cannot animate ${propertyAnimation.propertyName} on root view`);
 				}
 				const parentExtent: number = isVertical ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
-				toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / Screen.mainScreen.scale;
+				const scale = Screen.mainScreen.scale;
+				if (toValue === 'auto') {
+					const target = propertyAnimation.target;
+					let widthSpec = target._currentWidthMeasureSpec;
+					let heightSpec = target._currentHeightMeasureSpec;
+					//we need to measure ourselves
+					if (propName === 'width') {
+						widthSpec = layout.makeMeasureSpec(0, layout.UNSPECIFIED);
+						target.measure(widthSpec, heightSpec);
+						toValue = target.getMeasuredWidth() / scale;
+					} else {
+						heightSpec = layout.makeMeasureSpec(0, layout.UNSPECIFIED);
+						target.measure(widthSpec, heightSpec);
+						toValue = target.getMeasuredHeight() / scale;
+					}
+				} else {
+					toValue = PercentLength.toDevicePixels(toValue, parentExtent, parentExtent) / scale;
+				}
 				const nativeHeight: number = isVertical ? nativeView.getHeight() : nativeView.getWidth();
 				const targetStyle: string = setLocal ? extentProperty.name : extentProperty.keyframe;
-				originalValue1 = nativeHeight / Screen.mainScreen.scale;
+				originalValue1 = nativeHeight / scale;
 				nativeArray[0] = originalValue1;
 				nativeArray[1] = toValue;
 				const extentAnimator = android.animation.ValueAnimator.ofFloat(nativeArray);
 				extentAnimator.addUpdateListener(
 					new android.animation.ValueAnimator.AnimatorUpdateListener({
 						onAnimationUpdate(animator: android.animation.ValueAnimator) {
-							const argb = (<java.lang.Float>animator.getAnimatedValue()).floatValue();
-							propertyAnimation.target.style[setLocal ? extentProperty.name : extentProperty.keyframe] = argb;
+							let result = animator.getAnimatedValue();
+							if (result instanceof java.lang.Number) {
+								result = result.floatValue();
+							}
+							propertyAnimation.target.style[setLocal ? extentProperty.name : extentProperty.keyframe] = result;
 						},
 					})
 				);
@@ -474,14 +495,71 @@ export class Animation extends AnimationBase {
 					propertyAnimation.target.style[targetStyle] = originalValue1;
 					if (propertyAnimation.target.nativeViewProtected) {
 						const setter = propertyAnimation.target[extentProperty.setNative];
-						setter(propertyAnimation.target.style[propertyAnimation.property]);
+						setter.call(propertyAnimation.target, propertyAnimation.target.style[propertyAnimation.propertyName]);
 					}
 				});
 				animators.push(extentAnimator);
 				break;
 			}
 			default:
-				throw new Error(`Animating property '${propertyAnimation.property}' is unsupported`);
+				if (propertyAnimation.property) {
+					const property = propertyAnimation.property;
+					if (property._initDefaultNativeValue) {
+						property._initDefaultNativeValue(style);
+					}
+					originalValue1 = propertyAnimation.target[propertyAnimation.propertyName];
+					let nativeArray;
+					if (propertyAnimation.value instanceof Color) {
+						ensureArgbEvaluator();
+						nativeArray = Array.create(java.lang.Object, 2);
+						nativeArray[0] = java.lang.Integer.valueOf(originalValue1.android);
+						nativeArray[1] = java.lang.Integer.valueOf(propertyAnimation.value.android);
+						const animator = android.animation.ValueAnimator.ofObject(argbEvaluator, nativeArray);
+						animator.addUpdateListener(
+							new android.animation.ValueAnimator.AnimatorUpdateListener({
+								onAnimationUpdate(animator: android.animation.ValueAnimator) {
+									const argb = (<java.lang.Integer>animator.getAnimatedValue()).intValue();
+									propertyAnimation.target[setLocal ? property.name : property.keyframe] = new Color(argb);
+								},
+							})
+						);
+						animators.push(animator);
+					} else {
+						nativeArray = Array.create('float', 2);
+						nativeArray[0] = originalValue1;
+						nativeArray[1] = propertyAnimation.value;
+						const animator = android.animation.ValueAnimator.ofFloat(nativeArray);
+						animator.addUpdateListener(
+							new android.animation.ValueAnimator.AnimatorUpdateListener({
+								onAnimationUpdate(animator: android.animation.ValueAnimator) {
+									let result = animator.getAnimatedValue();
+									if (result instanceof java.lang.Number) {
+										result = result.floatValue();
+									}
+									propertyAnimation.target[setLocal ? property.name : property.keyframe] = result;
+								},
+							})
+						);
+						animators.push(animator);
+					}
+
+					propertyUpdateCallbacks.push(() => {
+						propertyAnimation.target[setLocal ? property.name : property.keyframe] = propertyAnimation.value;
+					});
+					propertyResetCallbacks.push(() => {
+						if (setLocal) {
+							propertyAnimation.target[property.name] = originalValue1;
+						} else {
+							propertyAnimation.target[property.keyframe] = originalValue1;
+						}
+
+						if (propertyAnimation.target.nativeViewProtected && propertyAnimation.target[property.setNative]) {
+							propertyAnimation.target[property.setNative](propertyAnimation.target.style[propertyAnimation.propertyName]);
+						}
+					});
+				} else {
+					throw new Error(`Animating property '${propertyAnimation.propertyName}' is unsupported`);
+				}
 		}
 
 		for (let i = 0, length = animators.length; i < length; i++) {
diff --git a/packages/core/ui/animation/index.d.ts b/packages/core/ui/animation/index.d.ts
index d054317494..1b0e4cb23d 100644
--- a/packages/core/ui/animation/index.d.ts
+++ b/packages/core/ui/animation/index.d.ts
@@ -70,6 +70,8 @@ export interface AnimationDefinition {
 	 * Alternatively, you can pass an instance of type UIViewAnimationCurve for iOS or android.animation.TimeInterpolator for Android.
 	 */
 	curve?: any;
+
+	[k: string]: any;
 }
 
 /**
diff --git a/packages/core/ui/animation/index.ios.ts b/packages/core/ui/animation/index.ios.ts
index 350de5692a..b87913d797 100644
--- a/packages/core/ui/animation/index.ios.ts
+++ b/packages/core/ui/animation/index.ios.ts
@@ -5,11 +5,14 @@ import { View } from '../core/view';
 // Requires
 import { AnimationBase, Properties, CubicBezierAnimationCurve } from './animation-common';
 import { Trace } from '../../trace';
-import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
+import { rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
+import { CssAnimationProperty, Property } from '../core/properties';
 
 import { iOSNativeHelper } from '../../utils/native-helper';
 
 import { Screen } from '../../platform';
+import { Color } from '../../color';
+import { Style } from '../styling/style';
 
 export * from './animation-common';
 export { KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, KeyframeInfo } from './keyframe-animation';
@@ -17,8 +20,6 @@ export { KeyframeAnimation, KeyframeAnimationInfo, KeyframeDeclaration, Keyframe
 const _transform = '_transform';
 const _skip = '_skip';
 
-const FLT_MAX = 340282346638528859811704183484516925440.0;
-
 class AnimationInfo {
 	public propertyNameToAnimate: string;
 	public subPropertiesToAnimate?: string[];
@@ -29,6 +30,12 @@ class AnimationInfo {
 	public delay: number;
 }
 
+export function applyAnimationProperty(styleOrView: View, property: Property<View, any>, value, setKeyFrame: boolean);
+export function applyAnimationProperty(styleOrView: Style, property: CssAnimationProperty<Style, any>, value, setKeyFrame: boolean);
+export function applyAnimationProperty(styleOrView: any, property: any, value, setKeyFrame: boolean) {
+	styleOrView[setKeyFrame && property['keyframe'] ? property['keyframe'] : property.name] = value;
+}
+
 @NativeClass
 class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
 	public nextAnimation: Function;
@@ -36,67 +43,62 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
 	// The CAAnimationDelegate protocol has been introduced in the iOS 10 SDK
 	static ObjCProtocols = (<any>global).CAAnimationDelegate ? [(<any>global).CAAnimationDelegate] : [];
 
-	private _finishedCallback: Function;
+	private _animation: WeakRef<Animation>;
 	private _propertyAnimation: PropertyAnimationInfo;
-	private _valueSource: 'animation' | 'keyframe';
 
-	public static initWithFinishedCallback(finishedCallback: Function, propertyAnimation: PropertyAnimationInfo, valueSource: 'animation' | 'keyframe'): AnimationDelegateImpl {
+	public static initWithFinishedCallback(animation: WeakRef<Animation>, propertyAnimation: PropertyAnimationInfo): AnimationDelegateImpl {
 		const delegate = <AnimationDelegateImpl>AnimationDelegateImpl.new();
-		delegate._finishedCallback = finishedCallback;
+		delegate._animation = animation;
 		delegate._propertyAnimation = propertyAnimation;
-		delegate._valueSource = valueSource;
 
 		return delegate;
 	}
 
 	animationDidStart(anim: CAAnimation): void {
 		const value = this._propertyAnimation.value;
-		const setLocal = this._valueSource === 'animation';
+		const animation = this._animation?.get();
+		const setKeyFrame = animation?.valueSource === 'keyframe';
 		const targetStyle = this._propertyAnimation.target.style;
 
 		(<IOSView>this._propertyAnimation.target)._suspendPresentationLayerUpdates();
-
-		switch (this._propertyAnimation.property) {
-			case Properties.backgroundColor:
-				targetStyle[setLocal ? backgroundColorProperty.name : backgroundColorProperty.keyframe] = value;
-				break;
-			case Properties.opacity:
-				targetStyle[setLocal ? opacityProperty.name : opacityProperty.keyframe] = value;
-				break;
+		switch (this._propertyAnimation.propertyName) {
 			case Properties.rotate:
-				targetStyle[setLocal ? rotateXProperty.name : rotateXProperty.keyframe] = value.x;
-				targetStyle[setLocal ? rotateYProperty.name : rotateYProperty.keyframe] = value.y;
-				targetStyle[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value.z;
+				applyAnimationProperty(targetStyle, rotateXProperty, value.x, setKeyFrame);
+				applyAnimationProperty(targetStyle, rotateYProperty, value.y, setKeyFrame);
+				applyAnimationProperty(targetStyle, rotateProperty, value.z, setKeyFrame);
 				break;
 			case Properties.translate:
-				targetStyle[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.x;
-				targetStyle[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.y;
-				break;
-			case Properties.height:
-				targetStyle[setLocal ? heightProperty.name : heightProperty.keyframe] = value;
-				break;
-			case Properties.width:
-				targetStyle[setLocal ? widthProperty.name : widthProperty.keyframe] = value;
+				applyAnimationProperty(targetStyle, translateXProperty, value.x, setKeyFrame);
+				applyAnimationProperty(targetStyle, translateYProperty, value.y, setKeyFrame);
 				break;
 			case Properties.scale:
-				targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x === 0 ? 0.001 : value.x;
-				targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y === 0 ? 0.001 : value.y;
+				applyAnimationProperty(targetStyle, scaleXProperty, value.x || 1e-6, setKeyFrame);
+				applyAnimationProperty(targetStyle, scaleYProperty, value.y || 1e-6, setKeyFrame);
 				break;
 			case _transform:
-				if (value[Properties.translate] !== undefined) {
-					targetStyle[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value[Properties.translate].x;
-					targetStyle[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value[Properties.translate].y;
+				const translateValue = value[Properties.rotate];
+				if (translateValue !== undefined) {
+					applyAnimationProperty(targetStyle, translateXProperty, translateValue.x, setKeyFrame);
+					applyAnimationProperty(targetStyle, translateYProperty, translateValue.y, setKeyFrame);
+				}
+				const rotateValue = value[Properties.rotate];
+				if (rotateValue !== undefined) {
+					applyAnimationProperty(targetStyle, rotateXProperty, rotateValue.x, setKeyFrame);
+					applyAnimationProperty(targetStyle, rotateYProperty, rotateValue.y, setKeyFrame);
+					applyAnimationProperty(targetStyle, rotateProperty, rotateValue.z, setKeyFrame);
 				}
-				if (value[Properties.rotate] !== undefined) {
-					targetStyle[setLocal ? rotateXProperty.name : rotateXProperty.keyframe] = value[Properties.rotate].x;
-					targetStyle[setLocal ? rotateYProperty.name : rotateYProperty.keyframe] = value[Properties.rotate].y;
-					targetStyle[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value[Properties.rotate].z;
+				const scaleValue = value[Properties.scale];
+				if (scaleValue !== undefined) {
+					const x = scaleValue.x;
+					const y = scaleValue.y;
+					applyAnimationProperty(targetStyle, scaleXProperty, scaleValue.x || 1e-6, setKeyFrame);
+					applyAnimationProperty(targetStyle, scaleYProperty, scaleValue.y || 1e-6, setKeyFrame);
 				}
-				if (value[Properties.scale] !== undefined) {
-					const x = value[Properties.scale].x;
-					const y = value[Properties.scale].y;
-					targetStyle[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = x === 0 ? 0.001 : x;
-					targetStyle[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = y === 0 ? 0.001 : y;
+				break;
+			default:
+				const property = this._propertyAnimation.property;
+				if (property) {
+					applyAnimationProperty(targetStyle, property, value, setKeyFrame);
 				}
 				break;
 		}
@@ -105,8 +107,9 @@ class AnimationDelegateImpl extends NSObject implements CAAnimationDelegate {
 	}
 
 	public animationDidStopFinished(anim: CAAnimation, finished: boolean): void {
-		if (this._finishedCallback) {
-			this._finishedCallback(!finished);
+		const animation = this._animation?.get();
+		if (animation) {
+			animation.animationFinishedCallback(!finished);
 		}
 		if (finished && this.nextAnimation) {
 			this.nextAnimation();
@@ -142,12 +145,16 @@ export function _resolveAnimationCurve(curve: string | CubicBezierAnimationCurve
 }
 
 export class Animation extends AnimationBase {
-	private _iOSAnimationFunction: Function;
-	private _finishedAnimations: number;
-	private _cancelledAnimations: number;
-	private _mergedPropertyAnimations: Array<PropertyAnimationInfo>;
-	private _valueSource: 'animation' | 'keyframe';
-
+	protected _iOSAnimationFunction: Function;
+	protected _finishedAnimations: number;
+	protected _cancelledAnimations: number;
+	protected _mergedPropertyAnimations: Array<PropertyAnimationInfo>;
+	protected _valueSource: 'animation' | 'keyframe';
+
+	get valueSource() {
+		return this._valueSource;
+	}
+	protected _wasCancelled = false;
 	constructor(animationDefinitions: Array<AnimationDefinitionInternal>, playSequentially?: boolean) {
 		super(animationDefinitions, playSequentially);
 
@@ -155,7 +162,6 @@ export class Animation extends AnimationBase {
 		if (animationDefinitions.length > 0 && animationDefinitions[0].valueSource !== undefined) {
 			this._valueSource = animationDefinitions[0].valueSource;
 		}
-
 		if (!playSequentially) {
 			if (Trace.isEnabled()) {
 				Trace.write('Non-merged Property Animations: ' + this._propertyAnimations.length, Trace.categories.Animation);
@@ -168,46 +174,45 @@ export class Animation extends AnimationBase {
 			this._mergedPropertyAnimations = this._propertyAnimations;
 		}
 
-		const that = this;
-		const animationFinishedCallback = (cancelled: boolean) => {
-			if (that._playSequentially) {
-				// This function will be called by the last animation when done or by another animation if the user cancels them halfway through.
-				if (cancelled) {
-					that._rejectAnimationFinishedPromise();
-				} else {
-					that._resolveAnimationFinishedPromise();
-				}
+		this._iOSAnimationFunction = this._createiOSAnimationFunction(this._mergedPropertyAnimations, 0, this._playSequentially);
+	}
+
+	animationFinishedCallback(cancelled: boolean) {
+		if (this._playSequentially) {
+			// This function will be called by the last animation when done or by another animation if the user cancels them halfway through.
+			if (cancelled) {
+				this._rejectAnimationFinishedPromise();
 			} else {
-				// This callback will be called by each INDIVIDUAL animation when it finishes or is cancelled.
-				if (cancelled) {
-					that._cancelledAnimations++;
-				} else {
-					that._finishedAnimations++;
-				}
+				this._resolveAnimationFinishedPromise();
+			}
+		} else {
+			// This callback will be called by each INDIVIDUAL animation when it finishes or is cancelled.
+			if (cancelled) {
+				this._cancelledAnimations++;
+			} else {
+				this._finishedAnimations++;
+			}
 
-				if (that._cancelledAnimations > 0 && that._cancelledAnimations + that._finishedAnimations === that._mergedPropertyAnimations.length) {
-					if (Trace.isEnabled()) {
-						Trace.write(that._cancelledAnimations + ' animations cancelled.', Trace.categories.Animation);
-					}
-					that._rejectAnimationFinishedPromise();
-				} else if (that._finishedAnimations === that._mergedPropertyAnimations.length) {
-					if (Trace.isEnabled()) {
-						Trace.write(that._finishedAnimations + ' animations finished.', Trace.categories.Animation);
-					}
-					that._resolveAnimationFinishedPromise();
+			if (this._cancelledAnimations > 0 && this._cancelledAnimations + this._finishedAnimations === this._mergedPropertyAnimations.length) {
+				if (Trace.isEnabled()) {
+					Trace.write(this._cancelledAnimations + ' animations cancelled.', Trace.categories.Animation);
+				}
+				this._rejectAnimationFinishedPromise();
+			} else if (this._finishedAnimations === this._mergedPropertyAnimations.length) {
+				if (Trace.isEnabled()) {
+					Trace.write(this._finishedAnimations + ' animations finished.', Trace.categories.Animation);
 				}
+				this._resolveAnimationFinishedPromise();
 			}
-		};
-
-		this._iOSAnimationFunction = Animation._createiOSAnimationFunction(this._mergedPropertyAnimations, 0, this._playSequentially, this._valueSource, animationFinishedCallback);
+		}
 	}
 
 	public play(): AnimationPromise {
 		if (this.isPlaying) {
 			return this._rejectAlreadyPlaying();
 		}
-
 		const animationFinishedPromise = super.play();
+		this._wasCancelled = false;
 		this._finishedAnimations = 0;
 		this._cancelledAnimations = 0;
 		this._iOSAnimationFunction();
@@ -221,7 +226,11 @@ export class Animation extends AnimationBase {
 
 			return;
 		}
-
+		this._wasCancelled = true;
+		// this._iOSAnimators.forEach((animator) => {
+		// 	animator.stopAnimation(false);
+		// 	animator.finishAnimationAtPosition(UIViewAnimatingPosition.Current);
+		// });
 		let i = 0;
 		const length = this._mergedPropertyAnimations.length;
 		for (; i < length; i++) {
@@ -237,70 +246,44 @@ export class Animation extends AnimationBase {
 		return _resolveAnimationCurve(curve);
 	}
 
-	private static _createiOSAnimationFunction(propertyAnimations: Array<PropertyAnimation>, index: number, playSequentially: boolean, valueSource: 'animation' | 'keyframe', finishedCallback: (cancelled?: boolean) => void): Function {
+	protected _createiOSAnimationFunction(propertyAnimations: Array<PropertyAnimation>, index: number, playSequentially: boolean): Function {
 		return (cancelled?: boolean) => {
-			if (cancelled && finishedCallback) {
+			if (cancelled) {
 				if (Trace.isEnabled()) {
 					Trace.write('Animation ' + (index - 1).toString() + ' was cancelled. Will skip the rest of animations and call finishedCallback(true).', Trace.categories.Animation);
 				}
-				finishedCallback(cancelled);
+				this.animationFinishedCallback(cancelled);
 
 				return;
 			}
-
-			const animation = propertyAnimations[index];
-			const args = Animation._getNativeAnimationArguments(animation, valueSource);
-
-			if (animation.curve === 'spring') {
-				Animation._createNativeSpringAnimation(propertyAnimations, index, playSequentially, args, animation, valueSource, finishedCallback);
-			} else {
-				Animation._createNativeAnimation(propertyAnimations, index, playSequentially, args, animation, valueSource, finishedCallback);
-			}
+			const animationInfo = propertyAnimations[index];
+			this._createNativeUIViewAnimation(propertyAnimations, index, playSequentially, animationInfo);
 		};
 	}
 
-	private static _getNativeAnimationArguments(animation: PropertyAnimationInfo, valueSource: 'animation' | 'keyframe'): AnimationInfo {
+	protected _getNativeAnimationArguments(animation: PropertyAnimationInfo, useCABasicAnimation = false): AnimationInfo {
 		const view = animation.target;
 		const style = view.style;
 		const nativeView = <UIView>view.nativeViewProtected;
 		const parent = view.parent as View;
 
-		let propertyNameToAnimate = animation.property;
+		let propertyNameToAnimate = animation.propertyName;
 		let subPropertyNameToAnimate;
 		let toValue = animation.value;
 		let fromValue;
+		const setKeyFrame = this._valueSource === 'keyframe';
 		if (nativeView?.layer) {
-			const setLocal = valueSource === 'animation';
-
-			switch (animation.property) {
-				case Properties.backgroundColor:
-					animation._originalValue = view.backgroundColor;
-					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? backgroundColorProperty.name : backgroundColorProperty.keyframe] = value;
-					};
-					fromValue = nativeView.layer.backgroundColor;
-					if (nativeView instanceof UILabel) {
-						nativeView.setValueForKey(UIColor.clearColor, 'backgroundColor');
-					}
-					toValue = toValue.CGColor;
-					break;
-				case Properties.opacity:
-					animation._originalValue = view.opacity;
-					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? opacityProperty.name : opacityProperty.keyframe] = value;
-					};
-					fromValue = nativeView.layer.opacity;
-					break;
+			switch (animation.propertyName) {
 				case Properties.rotate:
 					animation._originalValue = {
 						x: view.rotateX,
 						y: view.rotateY,
 						z: view.rotate,
 					};
-					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value.z;
-						style[setLocal ? rotateXProperty.name : rotateXProperty.keyframe] = value.x;
-						style[setLocal ? rotateYProperty.name : rotateYProperty.keyframe] = value.y;
+					animation._propertyResetCallback = (value) => {
+						applyAnimationProperty(style, rotateXProperty, value.x, setKeyFrame);
+						applyAnimationProperty(style, rotateYProperty, value.y, setKeyFrame);
+						applyAnimationProperty(style, rotateProperty, value.z, setKeyFrame);
 					};
 
 					propertyNameToAnimate = 'transform.rotation';
@@ -334,24 +317,21 @@ export class Animation extends AnimationBase {
 						y: view.translateY,
 					};
 					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.x;
-						style[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.y;
+						applyAnimationProperty(style, translateXProperty, value.x, setKeyFrame);
+						applyAnimationProperty(style, translateYProperty, value.y, setKeyFrame);
 					};
 					propertyNameToAnimate = 'transform';
 					fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
 					toValue = NSValue.valueWithCATransform3D(CATransform3DTranslate(nativeView.layer.transform, toValue.x, toValue.y, 0));
 					break;
 				case Properties.scale:
-					if (toValue.x === 0) {
-						toValue.x = 0.001;
-					}
-					if (toValue.y === 0) {
-						toValue.y = 0.001;
-					}
+					toValue.x = toValue.x || 1e-6;
+					toValue.y = toValue.y || 1e-6;
+
 					animation._originalValue = { x: view.scaleX, y: view.scaleY };
 					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.x;
-						style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.y;
+						applyAnimationProperty(style, scaleXProperty, value.x, setKeyFrame);
+						applyAnimationProperty(style, scaleYProperty, value.y, setKeyFrame);
 					};
 					propertyNameToAnimate = 'transform';
 					fromValue = NSValue.valueWithCATransform3D(nativeView.layer.transform);
@@ -369,44 +349,65 @@ export class Animation extends AnimationBase {
 						rz: view.rotate,
 					};
 					animation._propertyResetCallback = (value, valueSource) => {
-						style[setLocal ? translateXProperty.name : translateXProperty.keyframe] = value.xt;
-						style[setLocal ? translateYProperty.name : translateYProperty.keyframe] = value.yt;
-						style[setLocal ? scaleXProperty.name : scaleXProperty.keyframe] = value.xs;
-						style[setLocal ? scaleYProperty.name : scaleYProperty.keyframe] = value.ys;
-						style[setLocal ? rotateXProperty.name : rotateXProperty.keyframe] = value.rx;
-						style[setLocal ? rotateYProperty.name : rotateYProperty.keyframe] = value.ry;
-						style[setLocal ? rotateProperty.name : rotateProperty.keyframe] = value.rz;
+						applyAnimationProperty(style, translateXProperty, value.xt, setKeyFrame);
+						applyAnimationProperty(style, translateYProperty, value.yt, setKeyFrame);
+						applyAnimationProperty(style, scaleXProperty, value.xs, setKeyFrame);
+						applyAnimationProperty(style, scaleYProperty, value.ys, setKeyFrame);
+						applyAnimationProperty(style, rotateXProperty, value.rx, setKeyFrame);
+						applyAnimationProperty(style, rotateYProperty, value.ry, setKeyFrame);
+						applyAnimationProperty(style, rotateProperty, value.rz, setKeyFrame);
 					};
 					propertyNameToAnimate = 'transform';
 					toValue = NSValue.valueWithCATransform3D(Animation._createNativeAffineTransform(animation));
 					break;
 				case Properties.width:
 				case Properties.height: {
-					const direction: string = animation.property;
-					const isHeight: boolean = direction === 'height';
-					propertyNameToAnimate = 'bounds';
-					if (!parent) {
-						console.error(`cannot animate ${direction} on root view`);
+					if (useCABasicAnimation) {
+						const direction: string = animation.propertyName;
+						const isHeight: boolean = direction === 'height';
+						propertyNameToAnimate = 'bounds';
+						if (!parent) {
+							throw new Error(`cannot animate ${direction} on root view`);
+						}
+						const parentExtent: number = isHeight ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
+						const asNumber = PercentLength.toDevicePixels(PercentLength.parse(toValue), parentExtent, parentExtent) / Screen.mainScreen.scale;
+						const currentBounds = nativeView.layer.bounds;
+						const extentX = isHeight ? currentBounds.size.width : asNumber;
+						const extentY = isHeight ? asNumber : currentBounds.size.height;
+						fromValue = NSValue.valueWithCGRect(currentBounds);
+						toValue = NSValue.valueWithCGRect(CGRectMake(currentBounds.origin.x, currentBounds.origin.y, extentX, extentY));
+						animation._originalValue = view.height;
+						animation._propertyResetCallback = (value) => {
+							const prop = isHeight ? heightProperty : widthProperty;
+							applyAnimationProperty(style, prop, value, setKeyFrame);
+						};
+						break;
 					}
-					const parentExtent: number = isHeight ? parent.getMeasuredHeight() : parent.getMeasuredWidth();
-					const asNumber = PercentLength.toDevicePixels(PercentLength.parse(toValue), parentExtent, parentExtent) / Screen.mainScreen.scale;
-					const currentBounds = nativeView.layer.bounds;
-					const extentX = isHeight ? currentBounds.size.width : asNumber;
-					const extentY = isHeight ? asNumber : currentBounds.size.height;
-					fromValue = NSValue.valueWithCGRect(currentBounds);
-					toValue = NSValue.valueWithCGRect(CGRectMake(currentBounds.origin.x, currentBounds.origin.y, extentX, extentY));
-					animation._originalValue = view.height;
-					animation._propertyResetCallback = (value, valueSource) => {
-						const prop = isHeight ? heightProperty : widthProperty;
-						style[setLocal ? prop.name : prop.keyframe] = value;
-					};
-					break;
 				}
 				default:
-					console.error(`Animating property '${animation.property}' is unsupported`);
+					if (animation.property) {
+						// animation._originalValue = view.backgroundColor;
+						animation._originalValue = animation.target.style[animation.property.name];
+						animation._propertyResetCallback = (value) => {
+							applyAnimationProperty(style, animation.property, value, setKeyFrame);
+						};
+						fromValue = animation._originalValue;
+						if (animation._originalValue instanceof Color) {
+							animation._originalValue = animation._originalValue;
+							fromValue = animation._originalValue.ios.CGColor;
+						}
+						if (toValue instanceof Color) {
+							if (nativeView instanceof UILabel) {
+								nativeView.setValueForKey(UIColor.clearColor, 'backgroundColor');
+							}
+							toValue = toValue.ios.CGColor;
+						}
+					} else {
+						console.error(`Animating property '${propertyNameToAnimate}' is unsupported`);
+					}
+					break;
 			}
 		}
-
 		let duration = 0.3;
 		if (animation.duration !== undefined) {
 			duration = animation.duration / 1000.0;
@@ -420,7 +421,7 @@ export class Animation extends AnimationBase {
 		let repeatCount = undefined;
 		if (animation.iterations !== undefined) {
 			if (animation.iterations === Number.POSITIVE_INFINITY) {
-				repeatCount = FLT_MAX;
+				repeatCount = Number.MAX_VALUE;
 			} else {
 				repeatCount = animation.iterations;
 			}
@@ -437,25 +438,27 @@ export class Animation extends AnimationBase {
 		};
 	}
 
-	private static _createNativeAnimation(propertyAnimations: Array<PropertyAnimation>, index: number, playSequentially: boolean, args: AnimationInfo, animation: PropertyAnimation, valueSource: 'animation' | 'keyframe', finishedCallback: (cancelled?: boolean) => void) {
-		const nativeView = <UIView>animation.target.nativeViewProtected;
+	protected _createNativeAnimation(propertyAnimations: Array<PropertyAnimation>, index: number, playSequentially: boolean) {
+		const animationInfo = propertyAnimations[index];
+		const args = this._getNativeAnimationArguments(animationInfo, true);
+		const nativeView = <UIView>animationInfo.target.nativeViewProtected;
 		if (nativeView?.layer) {
 			let nativeAnimation;
 
 			if (args.subPropertiesToAnimate) {
-				nativeAnimation = this._createGroupAnimation(args, animation);
+				nativeAnimation = this._createGroupAnimation(args, animationInfo);
 			} else {
-				nativeAnimation = this._createBasicAnimation(args, animation);
+				nativeAnimation = this._createBasicAnimation(args, animationInfo);
 			}
 
-			const animationDelegate = AnimationDelegateImpl.initWithFinishedCallback(finishedCallback, animation, valueSource);
+			const animationDelegate = AnimationDelegateImpl.initWithFinishedCallback(new WeakRef(this), animationInfo);
 			nativeAnimation.setValueForKey(animationDelegate, 'delegate');
 
 			nativeView.layer.addAnimationForKey(nativeAnimation, args.propertyNameToAnimate);
 
 			let callback = undefined;
 			if (index + 1 < propertyAnimations.length) {
-				callback = Animation._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially, valueSource, finishedCallback);
+				callback = this._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially);
 				if (!playSequentially) {
 					callback();
 				} else {
@@ -465,7 +468,7 @@ export class Animation extends AnimationBase {
 		}
 	}
 
-	private static _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
+	protected _createGroupAnimation(args: AnimationInfo, animation: PropertyAnimation) {
 		const groupAnimation = CAAnimationGroup.new();
 		groupAnimation.duration = args.duration;
 		if (args.repeatCount !== undefined) {
@@ -494,8 +497,9 @@ export class Animation extends AnimationBase {
 		return groupAnimation;
 	}
 
-	private static _createBasicAnimation(args: AnimationInfo, animation: PropertyAnimation) {
-		const basicAnimation = CABasicAnimation.animationWithKeyPath(args.propertyNameToAnimate);
+	protected _createBasicAnimation(args: AnimationInfo, animation: PropertyAnimation) {
+		const basicAnimation = (animation.curve === 'spring' ? CASpringAnimation : CABasicAnimation).animationWithKeyPath(args.propertyNameToAnimate);
+		basicAnimation['damping'] = 0.2;
 		basicAnimation.fromValue = args.fromValue;
 		basicAnimation.toValue = args.toValue;
 		basicAnimation.duration = args.duration;
@@ -511,14 +515,15 @@ export class Animation extends AnimationBase {
 
 		return basicAnimation;
 	}
-
-	private static _createNativeSpringAnimation(propertyAnimations: Array<PropertyAnimationInfo>, index: number, playSequentially: boolean, args: AnimationInfo, animation: PropertyAnimationInfo, valueSource: 'animation' | 'keyframe', finishedCallback: (cancelled?: boolean) => void) {
-		const nativeView = <UIView>animation.target.nativeViewProtected;
+	usePropertyAnimator = false;
+	protected _createNativeUIViewAnimation(propertyAnimations: Array<PropertyAnimationInfo>, index: number, playSequentially: boolean, animationInfo: PropertyAnimationInfo) {
+		const args = this._getNativeAnimationArguments(animationInfo);
+		const nativeView = <UIView>animationInfo.target.nativeViewProtected;
 
 		let callback = undefined;
 		let nextAnimation;
 		if (index + 1 < propertyAnimations.length) {
-			callback = Animation._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially, valueSource, finishedCallback);
+			callback = this._createiOSAnimationFunction(propertyAnimations, index + 1, playSequentially);
 			if (!playSequentially) {
 				callback();
 			} else {
@@ -531,75 +536,93 @@ export class Animation extends AnimationBase {
 			delay = args.delay;
 		}
 
-		UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(
-			args.duration,
-			delay,
-			0.2,
-			0,
-			UIViewAnimationOptions.CurveLinear,
-			() => {
-				if (args.repeatCount !== undefined) {
-					UIView.setAnimationRepeatCount(args.repeatCount);
-				}
+		const isSpring = animationInfo.curve === 'spring';
+		const animationOptions = UIViewAnimationOptions.AllowUserInteraction;
 
-				switch (animation.property) {
-					case Properties.backgroundColor:
-						animation.target.backgroundColor = args.toValue;
-						break;
-					case Properties.opacity:
-						animation.target.opacity = args.toValue;
-						break;
-					case Properties.height:
-					case Properties.width:
-						animation._originalValue = animation.target[animation.property];
-						nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
-						animation._propertyResetCallback = function (value) {
-							animation.target[animation.property] = value;
-						};
-						break;
-					case _transform:
-						animation._originalValue = nativeView.layer.transform;
-						nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
-						animation._propertyResetCallback = function (value) {
-							nativeView.layer.transform = value;
-						};
-						break;
-				}
-			},
-			function (animationDidFinish: boolean) {
-				if (animationDidFinish) {
-					if (animation.property === _transform) {
-						if (animation.value[Properties.translate] !== undefined) {
-							animation.target.translateX = animation.value[Properties.translate].x;
-							animation.target.translateY = animation.value[Properties.translate].y;
-						}
-						if (animation.value[Properties.rotate] !== undefined) {
-							animation.target.rotateX = animation.value[Properties.rotate].x;
-							animation.target.rotateY = animation.value[Properties.rotate].y;
-							animation.target.rotate = animation.value[Properties.rotate].z;
-						}
-						if (animation.value[Properties.scale] !== undefined) {
-							animation.target.scaleX = animation.value[Properties.scale].x;
-							animation.target.scaleY = animation.value[Properties.scale].y;
-						}
+		const animate = () => {
+			if (args.repeatCount !== undefined) {
+				UIView.setAnimationRepeatCount(args.repeatCount);
+			}
+			const setKeyFrame = this._valueSource === 'keyframe';
+			switch (animationInfo.propertyName) {
+				case _transform:
+					animationInfo._originalValue = nativeView.layer.transform;
+					nativeView.layer.setValueForKey(args.toValue, args.propertyNameToAnimate);
+					animationInfo._propertyResetCallback = function (value) {
+						nativeView.layer.transform = value;
+					};
+					break;
+				default:
+					applyAnimationProperty(animationInfo.target, animationInfo.property, animationInfo.value, setKeyFrame);
+					if (animationInfo.property.affectsLayout) {
+						(animationInfo.target.page || animationInfo.target).nativeViewProtected.layoutIfNeeded();
 					}
-				} else {
-					if (animation._propertyResetCallback) {
-						animation._propertyResetCallback(animation._originalValue);
+					break;
+			}
+		};
+		const finish = (animationDidFinish: boolean) => {
+			if (animationDidFinish) {
+				if (animationInfo.propertyName === _transform) {
+					if (animationInfo.value[Properties.translate] !== undefined) {
+						animationInfo.target.translateX = animationInfo.value[Properties.translate].x;
+						animationInfo.target.translateY = animationInfo.value[Properties.translate].y;
+					}
+					if (animationInfo.value[Properties.rotate] !== undefined) {
+						animationInfo.target.rotateX = animationInfo.value[Properties.rotate].x;
+						animationInfo.target.rotateY = animationInfo.value[Properties.rotate].y;
+						animationInfo.target.rotate = animationInfo.value[Properties.rotate].z;
+					}
+					if (animationInfo.value[Properties.scale] !== undefined) {
+						animationInfo.target.scaleX = animationInfo.value[Properties.scale].x;
+						animationInfo.target.scaleY = animationInfo.value[Properties.scale].y;
 					}
 				}
-				if (finishedCallback) {
-					const cancelled = !animationDidFinish;
-					finishedCallback(cancelled);
+			} else {
+				if (animationInfo._propertyResetCallback) {
+					animationInfo._propertyResetCallback(animationInfo._originalValue);
 				}
-				if (animationDidFinish && nextAnimation) {
-					nextAnimation();
+			}
+			const cancelled = !animationDidFinish;
+			this.animationFinishedCallback(cancelled);
+			if (animationDidFinish && nextAnimation && !this._wasCancelled) {
+				nextAnimation();
+			}
+		};
+		if (this.usePropertyAnimator) {
+			const finishCallback = (position: UIViewAnimatingPosition) => finish(position === UIViewAnimatingPosition.End);
+			if (isSpring) {
+				const animator = UIViewPropertyAnimator.alloc().initWithDurationDampingRatioAnimations(args.duration, 0.2, null);
+				animator.manualHitTestingEnabled = true;
+				animator.addAnimations(animate);
+				animator.addCompletion(finishCallback);
+				// for seems to be the only way to use a timeout. It is not too bad but would be better to be handled natively
+				// for this example this breaks slow animations in debugger
+				if (args.delay) {
+					setTimeout(() => {
+						animator.startAnimation();
+					}, args.delay * 1000);
+				} else {
+					animator.startAnimation();
 				}
+			} else {
+				CATransaction.begin();
+				CATransaction.setAnimationTimingFunction(animationInfo.curve);
+				UIViewPropertyAnimator.runningPropertyAnimatorWithDurationDelayOptionsAnimationsCompletion(args.duration, args.delay, animationOptions, animate, finishCallback);
+				CATransaction.commit();
 			}
-		);
+		} else {
+			if (isSpring) {
+				UIView.animateWithDurationDelayUsingSpringWithDampingInitialSpringVelocityOptionsAnimationsCompletion(args.duration, delay, 0.2, 0, UIViewAnimationOptions.CurveLinear | animationOptions, animate, finish);
+			} else {
+				CATransaction.begin();
+				CATransaction.setAnimationTimingFunction(animationInfo.curve);
+				UIView.animateWithDurationDelayOptionsAnimationsCompletion(args.duration, delay, animationOptions, animate, finish);
+				CATransaction.commit();
+			}
+		}
 	}
 
-	private static _createNativeAffineTransform(animation: PropertyAnimation): CATransform3D {
+	protected static _createNativeAffineTransform(animation: PropertyAnimation): CATransform3D {
 		const value = animation.value;
 		let result: CATransform3D = CATransform3DIdentity;
 
@@ -610,25 +633,36 @@ export class Animation extends AnimationBase {
 		}
 
 		if (value[Properties.scale] !== undefined) {
-			const x = value[Properties.scale].x;
-			const y = value[Properties.scale].y;
-			result = CATransform3DScale(result, x === 0 ? 0.001 : x, y === 0 ? 0.001 : y, 1);
+			const x = value[Properties.scale].x || 1e-6;
+			const y = value[Properties.scale].y || 1e-6;
+			result = CATransform3DScale(result, x, y, 1);
+		}
+		if (value[Properties.rotate] !== undefined) {
+			const x = value[Properties.rotate].x;
+			const y = value[Properties.rotate].y;
+			const z = value[Properties.rotate].z;
+			const perspective = animation.target.perspective || 300;
+			// Only set perspective if there is 3D rotation
+			if (x || y) {
+				result.m34 = -1 / perspective;
+			}
+			result = iOSNativeHelper.applyRotateTransform(result, x, y, z);
 		}
 
 		return result;
 	}
 
-	private static _isAffineTransform(property: string): boolean {
-		return property === _transform || property === Properties.translate || property === Properties.scale;
+	protected static _isAffineTransform(property: string): boolean {
+		return property === _transform || property === Properties.translate || property === Properties.rotate || property === Properties.scale;
 	}
 
-	private static _canBeMerged(animation1: PropertyAnimation, animation2: PropertyAnimation) {
-		const result = Animation._isAffineTransform(animation1.property) && Animation._isAffineTransform(animation2.property) && animation1.target === animation2.target && animation1.duration === animation2.duration && animation1.delay === animation2.delay && animation1.iterations === animation2.iterations && animation1.curve === animation2.curve;
+	protected static _canBeMerged(animation1: PropertyAnimation, animation2: PropertyAnimation) {
+		const result = Animation._isAffineTransform(animation1.propertyName) && Animation._isAffineTransform(animation2.propertyName) && animation1.target === animation2.target && animation1.duration === animation2.duration && animation1.delay === animation2.delay && animation1.iterations === animation2.iterations && animation1.curve === animation2.curve;
 
 		return result;
 	}
 
-	private static _mergeAffineTransformAnimations(propertyAnimations: Array<PropertyAnimation>): Array<PropertyAnimation> {
+	protected static _mergeAffineTransformAnimations(propertyAnimations: Array<PropertyAnimation>): Array<PropertyAnimation> {
 		const result = new Array<PropertyAnimation>();
 
 		let i = 0;
@@ -639,7 +673,7 @@ export class Animation extends AnimationBase {
 				continue;
 			}
 
-			if (!Animation._isAffineTransform(propertyAnimations[i].property)) {
+			if (!Animation._isAffineTransform(propertyAnimations[i].propertyName)) {
 				// This is not an affine transform animation, so there is nothing to merge.
 				result.push(propertyAnimations[i]);
 			} else {
@@ -652,7 +686,8 @@ export class Animation extends AnimationBase {
 				// }
 				const newTransformAnimation: PropertyAnimation = {
 					target: propertyAnimations[i].target,
-					property: _transform,
+					propertyName: _transform,
+					property: null,
 					value: {},
 					duration: propertyAnimations[i].duration,
 					delay: propertyAnimations[i].delay,
@@ -662,7 +697,7 @@ export class Animation extends AnimationBase {
 				if (Trace.isEnabled()) {
 					Trace.write('Curve: ' + propertyAnimations[i].curve, Trace.categories.Animation);
 				}
-				newTransformAnimation.value[propertyAnimations[i].property] = propertyAnimations[i].value;
+				newTransformAnimation.value[propertyAnimations[i].propertyName] = propertyAnimations[i].value;
 				if (Trace.isEnabled()) {
 					Trace.write('Created new transform animation: ' + Animation._getAnimationInfo(newTransformAnimation), Trace.categories.Animation);
 				}
@@ -675,7 +710,7 @@ export class Animation extends AnimationBase {
 							if (Trace.isEnabled()) {
 								Trace.write('Merging animations: ' + Animation._getAnimationInfo(newTransformAnimation) + ' + ' + Animation._getAnimationInfo(propertyAnimations[j]) + ';', Trace.categories.Animation);
 							}
-							newTransformAnimation.value[propertyAnimations[j].property] = propertyAnimations[j].value;
+							newTransformAnimation.value[propertyAnimations[j].propertyName] = propertyAnimations[j].value;
 							// Mark that it has been merged so we can skip it on our outer loop.
 							propertyAnimations[j][_skip] = true;
 						}
diff --git a/packages/core/ui/animation/keyframe-animation.ts b/packages/core/ui/animation/keyframe-animation.ts
index 188bf0a647..59ff20cd2c 100644
--- a/packages/core/ui/animation/keyframe-animation.ts
+++ b/packages/core/ui/animation/keyframe-animation.ts
@@ -1,14 +1,18 @@
 import { View } from '../core/view';
 import { Color } from '../../color';
 
+import { CssAnimationProperty } from '../core/properties';
+
 import { CoreTypes } from '../../core-types';
+import { Style } from '../styling/style';
 
 import { Trace } from '../../trace';
 
 // Types.
 import { unsetValue } from '../core/properties';
 import { Animation } from '.';
-import { backgroundColorProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, rotateProperty, opacityProperty, rotateXProperty, rotateYProperty, widthProperty, heightProperty } from '../styling/style-properties';
+import { scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, rotateProperty, rotateXProperty, rotateYProperty } from '../styling/style-properties';
+import { AnimationNonAnimatableProperties, getPropertyFromKey } from './animation-common';
 
 export class Keyframes {
 	name: string;
@@ -53,7 +57,6 @@ interface Keyframe {
 	valueSource?: 'keyframe' | 'animation';
 	duration?: number;
 	curve?: any;
-	forceLayer?: boolean;
 }
 
 export class KeyframeAnimation {
@@ -118,7 +121,6 @@ export class KeyframeAnimation {
 		}
 		animation.duration = info.isReverse ? info.duration - duration : duration;
 		animation.curve = keyframe.curve;
-		animation.forceLayer = true;
 		animation.valueSource = 'keyframe';
 		animations.push(animation);
 
@@ -182,32 +184,27 @@ export class KeyframeAnimation {
 		}
 		if (index === 0) {
 			const animation = this.animations[0];
-
-			if ('backgroundColor' in animation) {
-				view.style[backgroundColorProperty.keyframe] = animation.backgroundColor;
-			}
-			if ('scale' in animation) {
-				view.style[scaleXProperty.keyframe] = animation.scale.x;
-				view.style[scaleYProperty.keyframe] = animation.scale.y;
-			}
-			if ('translate' in animation) {
-				view.style[translateXProperty.keyframe] = animation.translate.x;
-				view.style[translateYProperty.keyframe] = animation.translate.y;
-			}
-			if ('rotate' in animation) {
-				view.style[rotateXProperty.keyframe] = animation.rotate.x;
-				view.style[rotateYProperty.keyframe] = animation.rotate.y;
-				view.style[rotateProperty.keyframe] = animation.rotate.z;
-			}
-			if ('opacity' in animation) {
-				view.style[opacityProperty.keyframe] = animation.opacity;
-			}
-			if ('height' in animation) {
-				view.style[heightProperty.keyframe] = animation.height;
-			}
-			if ('width' in animation) {
-				view.style[widthProperty.keyframe] = animation.width;
-			}
+			Object.keys(animation).forEach((key) => {
+				if (AnimationNonAnimatableProperties.indexOf(key) !== -1) {
+					return;
+				}
+				if ('scale' === key) {
+					view.style[scaleXProperty.keyframe] = animation.scale.x;
+					view.style[scaleYProperty.keyframe] = animation.scale.y;
+				} else if ('translate' === key) {
+					view.style[translateXProperty.keyframe] = animation.translate.x;
+					view.style[translateYProperty.keyframe] = animation.translate.y;
+				} else if ('rotate' === key) {
+					view.style[rotateXProperty.keyframe] = animation.rotate.x;
+					view.style[rotateYProperty.keyframe] = animation.rotate.y;
+					view.style[rotateProperty.keyframe] = animation.rotate.z;
+				} else {
+					const property = getPropertyFromKey(key, view);
+					if (property?.keyframe) {
+						view.style[property.keyframe] = animation[key];
+					}
+				}
+			});
 
 			setTimeout(() => this.animate(view, 1, iterations), 1);
 		} else if (index < 0 || index >= this.animations.length) {
@@ -248,7 +245,7 @@ export class KeyframeAnimation {
 				)
 				.catch((error: any) => {
 					Trace.write(typeof error === 'string' ? error : error.message, Trace.categories.Animation, Trace.messageType.warn);
-				}); // tslint:disable-line
+				});
 		}
 	}
 
@@ -266,28 +263,26 @@ export class KeyframeAnimation {
 	}
 
 	private _resetAnimationValues(view: View, animation: Object) {
-		if ('backgroundColor' in animation) {
-			view.style[backgroundColorProperty.keyframe] = unsetValue;
-		}
-		if ('scale' in animation) {
-			view.style[scaleXProperty.keyframe] = unsetValue;
-			view.style[scaleYProperty.keyframe] = unsetValue;
-		}
-		if ('translate' in animation) {
-			view.style[translateXProperty.keyframe] = unsetValue;
-			view.style[translateYProperty.keyframe] = unsetValue;
-		}
-		if ('rotate' in animation) {
-			view.style[rotateProperty.keyframe] = unsetValue;
-		}
-		if ('opacity' in animation) {
-			view.style[opacityProperty.keyframe] = unsetValue;
-		}
-		if ('height' in animation) {
-			view.style[heightProperty.keyframe] = unsetValue;
-		}
-		if ('width' in animation) {
-			view.style[widthProperty.keyframe] = unsetValue;
-		}
+		Object.keys(animation).forEach((key) => {
+			if (AnimationNonAnimatableProperties.indexOf(key) !== -1) {
+				return;
+			}
+			if ('scale' === key) {
+				view.style[scaleXProperty.keyframe] = unsetValue;
+				view.style[scaleYProperty.keyframe] = unsetValue;
+			} else if ('translate' === key) {
+				view.style[translateXProperty.keyframe] = unsetValue;
+				view.style[translateYProperty.keyframe] = unsetValue;
+			} else if ('rotate' === key) {
+				view.style[rotateXProperty.keyframe] = unsetValue;
+				view.style[rotateYProperty.keyframe] = unsetValue;
+				view.style[rotateProperty.keyframe] = unsetValue;
+			} else {
+				const property = getPropertyFromKey(key, view);
+				if (property?.keyframe) {
+					view.style[property.keyframe] = unsetValue;
+				}
+			}
+		});
 	}
 }
diff --git a/packages/core/ui/builder/component-builder/index.ts b/packages/core/ui/builder/component-builder/index.ts
index 14943cd363..90031e920a 100644
--- a/packages/core/ui/builder/component-builder/index.ts
+++ b/packages/core/ui/builder/component-builder/index.ts
@@ -15,44 +15,46 @@ export interface ComponentModule {
 	exports: any;
 }
 
-const legacyShortBarrels = [
-	'text/formatted-string',
-	'text/span',
-	'ui/text-base/formatted-string',
-	'ui/text-base/span',
-	'ui/action-bar',
-	'ui/activity-indicator',
-	'ui/button',
-	'ui/content-view',
-	'ui/date-picker',
-	'ui/frame',
-	'ui/html-view',
-	'ui/image',
-	'ui/label',
-	'ui/layouts/absolute-layout',
-	'ui/layouts/dock-layout',
-	'ui/layouts/grid-layout',
-	'ui/layouts/stack-layout',
-	'ui/layouts/flexbox-layout',
-	'ui/layouts/wrap-layout',
-	'ui/list-picker',
-	'ui/page',
-	'ui/placeholder',
-	'ui/progress',
-	'ui/proxy-view-container',
-	'ui/repeater',
-	'ui/scroll-view',
-	'ui/search-bar',
-	'ui/segmented-bar',
-	'ui/slider',
-	'ui/switch',
-	'ui/tab-view',
-	'ui/web-view',
-	'ui/text-field',
-	'ui/text-view',
-	'ui/time-picker',
-	'ui/list-view',
-];
+const legacyShortBarrels = __UI_USE_EXTERNAL_RENDERER__
+	? []
+	: [
+			'text/formatted-string',
+			'text/span',
+			'ui/text-base/formatted-string',
+			'ui/text-base/span',
+			'ui/action-bar',
+			'ui/activity-indicator',
+			'ui/button',
+			'ui/content-view',
+			'ui/date-picker',
+			'ui/frame',
+			'ui/html-view',
+			'ui/image',
+			'ui/label',
+			'ui/layouts/absolute-layout',
+			'ui/layouts/dock-layout',
+			'ui/layouts/grid-layout',
+			'ui/layouts/stack-layout',
+			'ui/layouts/flexbox-layout',
+			'ui/layouts/wrap-layout',
+			'ui/list-picker',
+			'ui/page',
+			'ui/placeholder',
+			'ui/progress',
+			'ui/proxy-view-container',
+			'ui/repeater',
+			'ui/scroll-view',
+			'ui/search-bar',
+			'ui/segmented-bar',
+			'ui/slider',
+			'ui/switch',
+			'ui/tab-view',
+			'ui/web-view',
+			'ui/text-field',
+			'ui/text-view',
+			'ui/time-picker',
+			'ui/list-view',
+	  ];
 const CORE_UI_BARREL = '@nativescript/core/ui';
 const CODE_FILE = 'codeFile';
 const CSS_FILE = 'cssFile';
@@ -102,25 +104,22 @@ const createComponentInstance = profile('createComponentInstance', (elementName:
 	return { instance, instanceModule };
 });
 
-const getComponentModuleExports = profile(
-	'getComponentModuleExports',
-	(instance: View, moduleExports: Object, attributes: Object): Object => {
-		if (attributes) {
-			const codeFileAttribute = attributes[CODE_FILE] || attributes[IMPORT];
-			if (codeFileAttribute) {
-				const resolvedCodeFileModule = resolveModuleName(sanitizeModuleName(codeFileAttribute), '');
-				if (resolvedCodeFileModule) {
-					moduleExports = global.loadModule(resolvedCodeFileModule, true);
-					(<any>instance).exports = moduleExports;
-				} else {
-					throw new Error(`Code file with path "${codeFileAttribute}" cannot be found! Looking for webpack module with name "${resolvedCodeFileModule}"`);
-				}
+const getComponentModuleExports = profile('getComponentModuleExports', (instance: View, moduleExports: Object, attributes: Object): Object => {
+	if (attributes) {
+		const codeFileAttribute = attributes[CODE_FILE] || attributes[IMPORT];
+		if (codeFileAttribute) {
+			const resolvedCodeFileModule = resolveModuleName(sanitizeModuleName(codeFileAttribute), '');
+			if (resolvedCodeFileModule) {
+				moduleExports = global.loadModule(resolvedCodeFileModule, true);
+				(<any>instance).exports = moduleExports;
+			} else {
+				throw new Error(`Code file with path "${codeFileAttribute}" cannot be found! Looking for webpack module with name "${resolvedCodeFileModule}"`);
 			}
 		}
-
-		return moduleExports;
 	}
-);
+
+	return moduleExports;
+});
 
 const applyComponentCss = profile('applyComponentCss', (instance: View, moduleName: string, attributes: Object) => {
 	let cssApplied = false;
diff --git a/packages/core/ui/button/button-common.ts b/packages/core/ui/button/button-common.ts
index 2169a5bcff..05dbdf27cf 100644
--- a/packages/core/ui/button/button-common.ts
+++ b/packages/core/ui/button/button-common.ts
@@ -4,13 +4,10 @@ import { CSSType } from '../core/view';
 import { booleanConverter } from '../core/view-base';
 import { AccessibilityRole } from '../../accessibility';
 
+export const tapEvent = 'tap';
+
 @CSSType('Button')
 export abstract class ButtonBase extends TextBase implements ButtonDefinition {
-	public static tapEvent = 'tap';
-
-	accessible = true;
-	accessibilityRole = AccessibilityRole.Button;
-
 	get textWrap(): boolean {
 		return this.style.whiteSpace === 'normal';
 	}
diff --git a/packages/core/ui/button/index.android.ts b/packages/core/ui/button/index.android.ts
index 64a70872d7..5459550bff 100644
--- a/packages/core/ui/button/index.android.ts
+++ b/packages/core/ui/button/index.android.ts
@@ -1,4 +1,4 @@
-import { ButtonBase } from './button-common';
+import { ButtonBase, tapEvent } from './button-common';
 import { PseudoClassHandler } from '../core/view';
 import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties';
 import { textAlignmentProperty } from '../text-base';
@@ -38,7 +38,7 @@ function initializeClickListener(): void {
 		public onClick(v: android.view.View): void {
 			const owner = this.owner;
 			if (owner) {
-				owner._emit(ButtonBase.tapEvent);
+				owner._emit(tapEvent);
 			}
 		}
 	}
@@ -47,6 +47,9 @@ function initializeClickListener(): void {
 }
 
 export class Button extends ButtonBase {
+	// defining this here means tap event wont be handled
+	// by the gesture observers
+	public static tapEvent = tapEvent;
 	nativeViewProtected: android.widget.Button;
 
 	constructor() {
diff --git a/packages/core/ui/button/index.d.ts b/packages/core/ui/button/index.d.ts
index 8560e1b68a..fb8f4d2cef 100644
--- a/packages/core/ui/button/index.d.ts
+++ b/packages/core/ui/button/index.d.ts
@@ -1,15 +1,15 @@
 import { TextBase } from '../text-base';
 import { EventData } from '../../data/observable';
 
+/**
+ * String value used when hooking to tap event.
+ */
+export const tapEvent: string;
+
 /**
  * Represents a standard Button widget.
  */
 export class Button extends TextBase {
-	/**
-	 * String value used when hooking to tap event.
-	 */
-	public static tapEvent: string;
-
 	/**
 	 * Gets the native [android widget](http://developer.android.com/reference/android/widget/Button.html) that represents the user interface for this component. Valid only when running on Android OS.
 	 */
diff --git a/packages/core/ui/button/index.ios.ts b/packages/core/ui/button/index.ios.ts
index dab51de91f..c11fe91821 100644
--- a/packages/core/ui/button/index.ios.ts
+++ b/packages/core/ui/button/index.ios.ts
@@ -10,6 +10,8 @@ import { Color } from '../../color';
 export * from './button-common';
 
 export class Button extends ButtonBase {
+	// we dont defile tapEvent to let the gesture obserers handle it
+	// in some weird case with UICollectionView UIControlEvents.TouchUpInside is not working
 	public nativeViewProtected: UIButton;
 
 	private _tapHandler: NSObject;
@@ -19,18 +21,6 @@ export class Button extends ButtonBase {
 		return UIButton.buttonWithType(UIButtonType.System);
 	}
 
-	public initNativeView(): void {
-		super.initNativeView();
-		const nativeView = this.nativeViewProtected;
-		this._tapHandler = TapHandlerImpl.initWithOwner(new WeakRef(this));
-		nativeView.addTargetActionForControlEvents(this._tapHandler, 'tap', UIControlEvents.TouchUpInside);
-	}
-
-	public disposeNativeView(): void {
-		this._tapHandler = null;
-		super.disposeNativeView();
-	}
-
 	// @ts-ignore
 	get ios() {
 		return this.nativeViewProtected;
@@ -272,27 +262,27 @@ export class Button extends ButtonBase {
 	}
 }
 
-@NativeClass
-class TapHandlerImpl extends NSObject {
-	private _owner: WeakRef<Button>;
-
-	public static initWithOwner(owner: WeakRef<Button>): TapHandlerImpl {
-		const handler = <TapHandlerImpl>TapHandlerImpl.new();
-		handler._owner = owner;
-		return handler;
-	}
-
-	public tap(args) {
-		// _owner is a {N} view which could get destroyed when a tap initiates (protect!)
-		if (this._owner) {
-			const owner = this._owner.get();
-			if (owner) {
-				owner._emit(ButtonBase.tapEvent);
-			}
-		}
-	}
-
-	public static ObjCExposedMethods = {
-		tap: { returns: interop.types.void, params: [interop.types.id] },
-	};
-}
+// @NativeClass
+// class TapHandlerImpl extends NSObject {
+// 	private _owner: WeakRef<Button>;
+
+// 	public static initWithOwner(owner: WeakRef<Button>): TapHandlerImpl {
+// 		const handler = <TapHandlerImpl>TapHandlerImpl.new();
+// 		handler._owner = owner;
+// 		return handler;
+// 	}
+
+// 	public tap(args) {
+// 		// _owner is a {N} view which could get destroyed when a tap initiates (protect!)
+// 		if (this._owner) {
+// 			const owner = this._owner.get();
+// 			if (owner) {
+// 				owner._emit(ButtonBase.tapEvent);
+// 			}
+// 		}
+// 	}
+
+// 	public static ObjCExposedMethods = {
+// 		tap: { returns: interop.types.void, params: [interop.types.id] },
+// 	};
+// }
diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts
index d926a84ffe..b2761f8f67 100644
--- a/packages/core/ui/core/properties/index.ts
+++ b/packages/core/ui/core/properties/index.ts
@@ -41,6 +41,7 @@ export interface CssAnimationPropertyOptions<T, U> {
 	readonly name: string;
 	readonly cssName?: string;
 	readonly defaultValue?: U;
+	readonly affectsLayout?: boolean;
 	readonly equalityComparer?: (x: U, y: U) => boolean;
 	readonly valueChanged?: (target: T, oldValue: U, newValue: U) => void;
 	readonly valueConverter?: (value: string) => U;
@@ -53,21 +54,6 @@ const cssSymbolPropertyMap = {};
 const inheritableProperties = new Array<InheritedProperty<any, any>>();
 const inheritableCssProperties = new Array<InheritedCssProperty<any, any>>();
 
-function print(map) {
-	const symbols = Object.getOwnPropertySymbols(map);
-	for (const symbol of symbols) {
-		const prop = map[symbol];
-		if (!prop.registered) {
-			console.log(`Property ${prop.name} not Registered!!!!!`);
-		}
-	}
-}
-
-export function _printUnregisteredProperties(): void {
-	print(symbolPropertyMap);
-	print(cssSymbolPropertyMap);
-}
-
 const enum ValueSource {
 	Default = 0,
 	Inherited = 1,
@@ -164,21 +150,149 @@ function getPropertiesFromMap(map): Property<any, any>[] | CssProperty<any, any>
 	return props;
 }
 
+function overrideHandlers<T, U>(property: Property<any, U> | CssProperty<any, U> | ShorthandProperty<any, U> | CssAnimationProperty<any, U>) {
+	return function (options: any) {
+		if (property instanceof CssAnimationProperty || property instanceof CssProperty || property instanceof ShorthandProperty) {
+			Object.keys(options).forEach((key) => {
+				if (key === 'cssName') {
+					if (options[key] !== undefined) {
+						//@ts-ignore ignore readonly
+						property.cssName = 'css:' + options[key];
+						//@ts-ignore ignore readonly
+						property.cssLocalName = options[key];
+					}
+				} else if (options[key] !== undefined) {
+					property[key] = options[key];
+				}
+			});
+		} else {
+			Object.keys(options).forEach((key) => {
+				if (options[key] !== undefined) {
+					property[key] = options[key];
+				}
+			});
+		}
+	};
+}
+
+function getPropertySetter<T extends ViewBase, U>(property: Property<T, U>) {
+	return function (this: T, boxedValue: U): void {
+		const reset = boxedValue === unsetValue;
+		let value: U;
+		let wrapped: boolean;
+		const key = property.key;
+		const defaultValue = property.defaultValue;
+		if (reset) {
+			value = property.defaultValue;
+			if (property instanceof CoercibleProperty) {
+				delete this[property.coerceKey];
+			}
+		} else {
+			wrapped = boxedValue && (<any>boxedValue).wrapped;
+			value = wrapped ? WrappedValue.unwrap(boxedValue) : boxedValue;
+
+			if (property.valueConverter && typeof value === 'string') {
+				value = property.valueConverter(value);
+			}
+			if (property instanceof CoercibleProperty) {
+				this[property.coerceKey] = value;
+				value = property.coerceValue(this, value);
+			}
+		}
+		const oldValue = key in this ? this[key] : defaultValue;
+		const changed: boolean = property.equalityComparer ? !property.equalityComparer(oldValue, value) : oldValue !== value;
+
+		if (wrapped || changed) {
+			const defaultValueKey = property.defaultValueKey;
+			const setNative = property.setNative;
+			const valueChanged = property.valueChanged;
+			const getDefault = property.getDefault;
+			const eventName = property.eventName;
+			const propertyName = property.name;
+			if (reset) {
+				delete this[key];
+				if (valueChanged) {
+					valueChanged(this, oldValue, value);
+				}
+				if (this[setNative]) {
+					if (this._suspendNativeUpdatesCount) {
+						if (this._suspendedUpdates) {
+							this._suspendedUpdates[propertyName] = property;
+						}
+					} else {
+						if (defaultValueKey in this) {
+							this[setNative](this[defaultValueKey]);
+							delete this[defaultValueKey];
+						} else {
+							this[setNative](defaultValue);
+						}
+					}
+				}
+			} else {
+				this[key] = value;
+				if (valueChanged) {
+					valueChanged(this, oldValue, value);
+				}
+
+				if (this[setNative]) {
+					if (this._suspendNativeUpdatesCount) {
+						if (this._suspendedUpdates) {
+							this._suspendedUpdates[propertyName] = property;
+						}
+					} else {
+						if (!(defaultValueKey in this)) {
+							this[defaultValueKey] = this[getDefault] ? this[getDefault]() : defaultValue;
+						}
+						this[setNative](value);
+					}
+				}
+			}
+
+			if (this.hasListeners(eventName)) {
+				this.notify<PropertyChangeData>({
+					object: this,
+					eventName,
+					propertyName,
+					value,
+					oldValue,
+				});
+			}
+
+			if (property.affectsLayout) {
+				this.requestLayout();
+			}
+
+			if (this.domNode) {
+				if (reset) {
+					this.domNode.attributeRemoved(propertyName);
+				} else {
+					this.domNode.attributeModified(propertyName, value);
+				}
+			}
+		}
+	};
+}
+
 export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<U>, Property<T, U> {
 	private registered: boolean;
 
 	public readonly name: string;
 	public readonly key: symbol;
+	public readonly eventName: string;
 
 	public readonly getDefault: symbol;
 	public readonly setNative: symbol;
 
 	public readonly defaultValueKey: symbol;
 	public readonly defaultValue: U;
-	public readonly nativeValueChange: (owner: T, value: U) => void;
 
 	public isStyleProperty: boolean;
 
+	public affectsLayout?: boolean;
+	public equalityComparer?: (x: U, y: U) => boolean;
+	public valueChanged?: (target: T, oldValue: U, newValue: U) => void;
+	public valueConverter?: (value: string) => U;
+
 	public get: () => U;
 	public set: (value: U) => void;
 	public overrideHandlers: (options: PropertyOptions<T, U>) => void;
@@ -186,9 +300,9 @@ export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<
 	public configurable = true;
 
 	constructor(options: PropertyOptions<T, U>) {
-		const propertyName = options.name;
-		this.name = propertyName;
-
+		this.overrideHandlers = overrideHandlers(this);
+		this.overrideHandlers(options);
+		const propertyName = this.name;
 		const key = Symbol(propertyName + ':propertyKey');
 		this.key = key;
 
@@ -201,159 +315,63 @@ export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<
 		const defaultValueKey = Symbol(propertyName + ':nativeDefaultValue');
 		this.defaultValueKey = defaultValueKey;
 
-		const defaultValue: U = options.defaultValue;
-		this.defaultValue = defaultValue;
-
-		const eventName = propertyName + 'Change';
-
-		let equalityComparer = options.equalityComparer;
-		let affectsLayout: boolean = options.affectsLayout;
-		let valueChanged = options.valueChanged;
-		let valueConverter = options.valueConverter;
-
-		this.overrideHandlers = function (options: PropertyOptions<T, U>) {
-			if (typeof options.equalityComparer !== 'undefined') {
-				equalityComparer = options.equalityComparer;
-			}
-			if (typeof options.affectsLayout !== 'undefined') {
-				affectsLayout = options.affectsLayout;
-			}
-			if (typeof options.valueChanged !== 'undefined') {
-				valueChanged = options.valueChanged;
-			}
-			if (typeof options.valueConverter !== 'undefined') {
-				valueConverter = options.valueConverter;
-			}
-		};
-
+		this.eventName = propertyName + 'Change';
 		const property = this;
-
-		this.set = function (this: T, boxedValue: U): void {
-			const reset = boxedValue === unsetValue;
-			let value: U;
-			let wrapped: boolean;
-			if (reset) {
-				value = defaultValue;
-			} else {
-				wrapped = boxedValue && (<any>boxedValue).wrapped;
-				value = wrapped ? WrappedValue.unwrap(boxedValue) : boxedValue;
-
-				if (valueConverter && typeof value === 'string') {
-					value = valueConverter(value);
-				}
-			}
-
-			const oldValue = key in this ? this[key] : defaultValue;
-			const changed: boolean = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
-
-			if (wrapped || changed) {
-				if (affectsLayout) {
-					this.requestLayout();
-				}
-
-				if (reset) {
-					delete this[key];
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
-					if (this[setNative]) {
-						if (this._suspendNativeUpdatesCount) {
-							if (this._suspendedUpdates) {
-								this._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (defaultValueKey in this) {
-								this[setNative](this[defaultValueKey]);
-								delete this[defaultValueKey];
-							} else {
-								this[setNative](defaultValue);
-							}
-						}
-					}
-				} else {
-					this[key] = value;
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
-					if (this[setNative]) {
-						if (this._suspendNativeUpdatesCount) {
-							if (this._suspendedUpdates) {
-								this._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (!(defaultValueKey in this)) {
-								this[defaultValueKey] = this[getDefault] ? this[getDefault]() : defaultValue;
-							}
-							this[setNative](value);
-						}
-					}
-				}
-
-				if (this.hasListeners(eventName)) {
-					this.notify<PropertyChangeData>({
-						object: this,
-						eventName,
-						propertyName,
-						value,
-						oldValue,
-					});
-				}
-
-				if (this.domNode) {
-					if (reset) {
-						this.domNode.attributeRemoved(propertyName);
-					} else {
-						this.domNode.attributeModified(propertyName, value);
-					}
-				}
-			}
-		};
-
+		this.set = getPropertySetter(this);
 		this.get = function (this: T): U {
-			return key in this ? this[key] : defaultValue;
+			return key in this ? this[key] : property.defaultValue;
 		};
+		symbolPropertyMap[key] = this;
+	}
+	nativeValueChange(owner: T, value: U): void {
+		const key = this.key;
+		const defaultValue = this.defaultValue;
+		const oldValue = key in owner ? owner[key] : defaultValue;
+		const changed = this.equalityComparer ? !this.equalityComparer(oldValue, value) : oldValue !== value;
+		if (changed) {
+			const defaultValueKey = this.defaultValueKey;
+			const getDefault = this.getDefault;
+			const eventName = this.eventName;
+			const propertyName = this.name;
+			owner[key] = value;
+			if (this.valueChanged) {
+				this.valueChanged(owner, oldValue, value);
+			}
 
-		this.nativeValueChange = function (owner: T, value: U): void {
-			const oldValue = key in owner ? owner[key] : defaultValue;
-			const changed = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
-			if (changed) {
-				owner[key] = value;
-				if (valueChanged) {
-					valueChanged(owner, oldValue, value);
-				}
-
-				if (owner.nativeViewProtected && !(defaultValueKey in owner)) {
-					owner[defaultValueKey] = owner[getDefault] ? owner[getDefault]() : defaultValue;
-				}
-
-				if (owner.hasListeners(eventName)) {
-					owner.notify<PropertyChangeData>({
-						object: owner,
-						eventName,
-						propertyName,
-						value,
-						oldValue,
-					});
-				}
+			if (owner.nativeViewProtected && !(defaultValueKey in owner)) {
+				owner[defaultValueKey] = owner[getDefault] ? owner[getDefault]() : defaultValue;
+			}
 
-				if (affectsLayout) {
-					owner.requestLayout();
-				}
+			if (owner.hasListeners(eventName)) {
+				owner.notify<PropertyChangeData>({
+					object: owner,
+					eventName,
+					propertyName,
+					value,
+					oldValue,
+				});
+			}
 
-				if (owner.domNode) {
-					owner.domNode.attributeModified(propertyName, value);
-				}
+			if (this.affectsLayout) {
+				owner.requestLayout();
 			}
-		};
 
-		symbolPropertyMap[key] = this;
+			if (owner.domNode) {
+				owner.domNode.attributeModified(propertyName, value);
+			}
+		}
 	}
-
 	public register(cls: { prototype: T }): void {
 		if (this.registered) {
 			throw new Error(`Property ${this.name} already registered.`);
 		}
 		this.registered = true;
+		// we store the property in the class static variable
+		// so that animations can get access to us
+		if (!cls['registeredProps']) {
+			cls['registeredProps'] = {};
+		}
+		cls['registeredProps'][this.name] = this;
 		Object.defineProperty(cls.prototype, this.name, this);
 	}
 
@@ -364,139 +382,18 @@ export class Property<T extends ViewBase, U> implements TypedPropertyDescriptor<
 Property.prototype.isStyleProperty = false;
 
 export class CoercibleProperty<T extends ViewBase, U> extends Property<T, U> implements CoercibleProperty<T, U> {
-	public readonly coerce: (target: T) => void;
+	coerceKey?: symbol;
+	coerceValue?: (t: T, u: U) => U;
 
 	constructor(options: CoerciblePropertyOptions<T, U>) {
 		super(options);
+		this.coerceKey = Symbol(this.name + ':coerceKey');
+	}
 
-		const propertyName = options.name;
-		const key = this.key;
-		const getDefault: symbol = this.getDefault;
-		const setNative: symbol = this.setNative;
-		const defaultValueKey = this.defaultValueKey;
-		const defaultValue: U = this.defaultValue;
-
-		const coerceKey = Symbol(propertyName + ':coerceKey');
-
-		const eventName = propertyName + 'Change';
-		let affectsLayout: boolean = options.affectsLayout;
-		let equalityComparer = options.equalityComparer;
-		let valueChanged = options.valueChanged;
-		let valueConverter = options.valueConverter;
-		let coerceCallback = options.coerceValue;
-
-		const property = this;
-
-		this.overrideHandlers = function (options: CoerciblePropertyOptions<T, U>) {
-			if (typeof options.equalityComparer !== 'undefined') {
-				equalityComparer = options.equalityComparer;
-			}
-			if (typeof options.affectsLayout !== 'undefined') {
-				affectsLayout = options.affectsLayout;
-			}
-			if (typeof options.valueChanged !== 'undefined') {
-				valueChanged = options.valueChanged;
-			}
-			if (typeof options.valueConverter !== 'undefined') {
-				valueConverter = options.valueConverter;
-			}
-			if (typeof options.coerceValue !== 'undefined') {
-				coerceCallback = options.coerceValue;
-			}
-		};
-
-		this.coerce = function (target: T): void {
-			const originalValue: U = coerceKey in target ? target[coerceKey] : defaultValue;
-			// need that to make coercing but also fire change events
-			target[propertyName] = originalValue;
-		};
-
-		this.set = function (this: T, boxedValue: U): void {
-			const reset = boxedValue === unsetValue;
-			let value: U;
-			let wrapped: boolean;
-			if (reset) {
-				value = defaultValue;
-				delete this[coerceKey];
-			} else {
-				wrapped = boxedValue && (<any>boxedValue).wrapped;
-				value = wrapped ? WrappedValue.unwrap(boxedValue) : boxedValue;
-
-				if (valueConverter && typeof value === 'string') {
-					value = valueConverter(value);
-				}
-
-				this[coerceKey] = value;
-				value = coerceCallback(this, value);
-			}
-
-			const oldValue = key in this ? this[key] : defaultValue;
-			const changed: boolean = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
-
-			if (wrapped || changed) {
-				if (reset) {
-					delete this[key];
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
-
-					if (this[setNative]) {
-						if (this._suspendNativeUpdatesCount) {
-							if (this._suspendedUpdates) {
-								this._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (defaultValueKey in this) {
-								this[setNative](this[defaultValueKey]);
-								delete this[defaultValueKey];
-							} else {
-								this[setNative](defaultValue);
-							}
-						}
-					}
-				} else {
-					this[key] = value;
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
-
-					if (this[setNative]) {
-						if (this._suspendNativeUpdatesCount) {
-							if (this._suspendedUpdates) {
-								this._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (!(defaultValueKey in this)) {
-								this[defaultValueKey] = this[getDefault] ? this[getDefault]() : defaultValue;
-							}
-							this[setNative](value);
-						}
-					}
-				}
-
-				if (this.hasListeners(eventName)) {
-					this.notify<PropertyChangeData>({
-						object: this,
-						eventName,
-						propertyName,
-						value,
-						oldValue,
-					});
-				}
-
-				if (affectsLayout) {
-					this.requestLayout();
-				}
-
-				if (this.domNode) {
-					if (reset) {
-						this.domNode.attributeRemoved(propertyName);
-					} else {
-						this.domNode.attributeModified(propertyName, value);
-					}
-				}
-			}
-		};
+	coerce(target: T): void {
+		const originalValue: U = this.coerceKey in target ? target[this.coerceKey] : this.defaultValue;
+		// need that to make coercing but also fire change events
+		target[this.name] = originalValue;
 	}
 }
 
@@ -506,14 +403,13 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> imp
 
 	constructor(options: PropertyOptions<T, U>) {
 		super(options);
-		const name = options.name;
 		const key = this.key;
-		const defaultValue = options.defaultValue;
 
-		const sourceKey = Symbol(name + ':valueSourceKey');
+		const sourceKey = Symbol(this.name + ':valueSourceKey');
 		this.sourceKey = sourceKey;
 
 		const setBase = this.set;
+		const property = this;
 		const setFunc = (valueSource: ValueSource) =>
 			function (value: U): void {
 				const that = <T>this;
@@ -526,10 +422,10 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> imp
 					const parent: ViewBase = that.parent;
 					// If we have parent and it has non-default value we use as our inherited value.
 					if (parent && parent[sourceKey] !== ValueSource.Default) {
-						unboxedValue = parent[name];
+						unboxedValue = parent[property.name];
 						newValueSource = ValueSource.Inherited;
 					} else {
-						unboxedValue = defaultValue;
+						unboxedValue = property.defaultValue;
 						newValueSource = ValueSource.Default;
 					}
 				} else {
@@ -573,256 +469,176 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> imp
 	}
 }
 
-export class CssProperty<T extends Style, U> implements CssProperty<T, U> {
-	private registered: boolean;
-
-	public readonly name: string;
-	public readonly cssName: string;
-	public readonly cssLocalName: string;
-
-	protected readonly cssValueDescriptor: PropertyDescriptor;
-	protected readonly localValueDescriptor: PropertyDescriptor;
-
-	public isStyleProperty: boolean;
-
-	public readonly key: symbol;
-	public readonly getDefault: symbol;
-	public readonly setNative: symbol;
-	public readonly sourceKey: symbol;
-	public readonly defaultValueKey: symbol;
-	public readonly defaultValue: U;
-
-	public overrideHandlers: (options: CssPropertyOptions<T, U>) => void;
-
-	constructor(options: CssPropertyOptions<T, U>) {
-		const propertyName = options.name;
-		this.name = propertyName;
-
-		cssPropertyNames.push(options.cssName);
-
-		this.cssName = `css:${options.cssName}`;
-		this.cssLocalName = options.cssName;
-
-		const key = Symbol(propertyName + ':propertyKey');
-		this.key = key;
-
-		const sourceKey = Symbol(propertyName + ':valueSourceKey');
-		this.sourceKey = sourceKey;
-
-		const getDefault = Symbol(propertyName + ':getDefault');
-		this.getDefault = getDefault;
-
-		const setNative = Symbol(propertyName + ':setNative');
-		this.setNative = setNative;
-
-		const defaultValueKey = Symbol(propertyName + ':nativeDefaultValue');
-		this.defaultValueKey = defaultValueKey;
-
-		const defaultValue: U = options.defaultValue;
-		this.defaultValue = defaultValue;
-
-		const eventName = propertyName + 'Change';
-		let affectsLayout: boolean = options.affectsLayout;
-		let equalityComparer = options.equalityComparer;
-		let valueChanged = options.valueChanged;
-		let valueConverter = options.valueConverter;
-
-		this.overrideHandlers = function (options: CssPropertyOptions<T, U>) {
-			if (typeof options.equalityComparer !== 'undefined') {
-				equalityComparer = options.equalityComparer;
-			}
-			if (typeof options.affectsLayout !== 'undefined') {
-				affectsLayout = options.affectsLayout;
-			}
-			if (typeof options.valueChanged !== 'undefined') {
-				valueChanged = options.valueChanged;
-			}
-			if (typeof options.valueConverter !== 'undefined') {
-				valueConverter = options.valueConverter;
-			}
-		};
-
-		const property = this;
+function setCssFunc<T extends Style, U>(property: CssProperty<T, U>, valueSource: ValueSource) {
+	return function (this: T, newValue: any): void {
+		const view = this.viewRef.get();
+		if (!view) {
+			Trace.write(`${newValue} not set to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
 
-		function setLocalValue(this: T, newValue: U | string): void {
-			const view = this.viewRef.get();
-			if (!view) {
-				Trace.write(`${newValue} not set to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+			return;
+		}
+		const sourceKey = property.sourceKey;
+		if (valueSource === ValueSource.Css) {
+			const currentValueSource: number = this[sourceKey] || ValueSource.Default;
 
+			// We have localValueSource - NOOP.
+			if (currentValueSource === ValueSource.Local) {
 				return;
 			}
+		}
+		const defaultValue = property.defaultValue;
+		const key = property.key;
+		const reset = newValue === unsetValue || newValue === '';
+		let value: U;
+		if (reset) {
+			value = defaultValue;
+			delete this[sourceKey];
+		} else {
+			this[sourceKey] = valueSource;
+			value = property.valueConverter && typeof newValue === 'string' ? property.valueConverter(newValue) : <U>newValue;
+		}
 
-			const reset = newValue === unsetValue || newValue === '';
-			let value: U;
-			if (reset) {
-				value = defaultValue;
-				delete this[sourceKey];
-			} else {
-				this[sourceKey] = ValueSource.Local;
-				value = valueConverter && typeof newValue === 'string' ? valueConverter(newValue) : <U>newValue;
-			}
-
-			const oldValue: U = key in this ? this[key] : defaultValue;
-			const changed: boolean = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
+		const oldValue: U = key in this ? this[key] : defaultValue;
+		const changed: boolean = property.equalityComparer ? !property.equalityComparer(oldValue, value) : oldValue !== value;
 
-			if (changed) {
-				if (reset) {
-					delete this[key];
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
+		if (changed) {
+			const setNative = property.setNative;
+			const defaultValueKey = property.defaultValueKey;
+			const propertyName = property.name;
+			const valueChanged = property.valueChanged;
+			const eventName = property.eventName;
+			if (reset) {
+				delete this[key];
+				if (valueChanged) {
+					valueChanged(this, oldValue, value);
+				}
 
-					if (view[setNative]) {
-						if (view._suspendNativeUpdatesCount) {
-							if (view._suspendedUpdates) {
-								view._suspendedUpdates[propertyName] = property;
-							}
+				if (view[setNative]) {
+					if (view._suspendNativeUpdatesCount) {
+						if (view._suspendedUpdates) {
+							view._suspendedUpdates[propertyName] = property;
+						}
+					} else {
+						if (defaultValueKey in this) {
+							view[setNative](this[defaultValueKey]);
+							delete this[defaultValueKey];
 						} else {
-							if (defaultValueKey in this) {
-								view[setNative](this[defaultValueKey]);
-								delete this[defaultValueKey];
-							} else {
-								view[setNative](defaultValue);
-							}
+							view[setNative](defaultValue);
 						}
 					}
-				} else {
-					this[key] = value;
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
+				}
+			} else {
+				this[key] = value;
+				if (valueChanged) {
+					valueChanged(this, oldValue, value);
+				}
 
-					if (view[setNative]) {
-						if (view._suspendNativeUpdatesCount) {
-							if (view._suspendedUpdates) {
-								view._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (!(defaultValueKey in this)) {
-								this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
-							}
-							view[setNative](value);
+				if (view[setNative]) {
+					if (view._suspendNativeUpdatesCount) {
+						if (view._suspendedUpdates) {
+							view._suspendedUpdates[propertyName] = property;
+						}
+					} else {
+						if (!(defaultValueKey in this)) {
+							const getDefault = property.getDefault;
+							this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
 						}
+						view[setNative](value);
 					}
 				}
+			}
 
-				if (this.hasListeners(eventName)) {
-					this.notify<PropertyChangeData>({
-						object: this,
-						eventName,
-						propertyName,
-						value,
-						oldValue,
-					});
-				}
+			if (this.hasListeners(eventName)) {
+				this.notify<PropertyChangeData>({
+					object: this,
+					eventName,
+					propertyName,
+					value,
+					oldValue,
+				});
+			}
 
-				if (affectsLayout) {
-					view.requestLayout();
-				}
+			if (property.affectsLayout) {
+				view.requestLayout();
 			}
 		}
+	};
+}
 
-		function setCssValue(this: T, newValue: U | string): void {
-			const view = this.viewRef.get();
-			if (!view) {
-				Trace.write(`${newValue} not set to view because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+export class CssProperty<T extends Style, U> implements CssProperty<T, U> {
+	public static properties: {
+		[cssName: string]: CssProperty<any, any>;
+	} = {};
+	private registered: boolean;
 
-				return;
-			}
+	public readonly name: string;
+	public readonly cssName: string;
+	public readonly cssLocalName: string;
+	public readonly eventName: string;
 
-			const currentValueSource: number = this[sourceKey] || ValueSource.Default;
+	protected readonly cssValueDescriptor: PropertyDescriptor;
+	protected readonly localValueDescriptor: PropertyDescriptor;
 
-			// We have localValueSource - NOOP.
-			if (currentValueSource === ValueSource.Local) {
-				return;
-			}
+	public isStyleProperty: boolean;
 
-			const reset = newValue === unsetValue || newValue === '';
-			let value: U;
-			if (reset) {
-				value = defaultValue;
-				delete this[sourceKey];
-			} else {
-				value = valueConverter && typeof newValue === 'string' ? valueConverter(newValue) : <U>newValue;
-				this[sourceKey] = ValueSource.Css;
-			}
+	public readonly key: symbol;
+	public readonly getDefault: symbol;
+	public readonly setNative: symbol;
+	public readonly sourceKey: symbol;
+	public readonly defaultValueKey: symbol;
+	public readonly defaultValue: U;
 
-			const oldValue: U = key in this ? this[key] : defaultValue;
-			const changed: boolean = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
+	public affectsLayout?: boolean;
+	public equalityComparer?: (x: U, y: U) => boolean;
+	public valueChanged?: (target: T, oldValue: U, newValue: U) => void;
+	public valueConverter?: (value: string) => U;
 
-			if (changed) {
-				if (reset) {
-					delete this[key];
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
+	public overrideHandlers: (options: CssPropertyOptions<T, U>) => void;
 
-					if (view[setNative]) {
-						if (view._suspendNativeUpdatesCount) {
-							if (view._suspendedUpdates) {
-								view._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (defaultValueKey in this) {
-								view[setNative](this[defaultValueKey]);
-								delete this[defaultValueKey];
-							} else {
-								view[setNative](defaultValue);
-							}
-						}
-					}
-				} else {
-					this[key] = value;
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
-					}
+	constructor(options: CssPropertyOptions<T, U>) {
+		this.overrideHandlers = overrideHandlers(this);
+		this.overrideHandlers(options);
+		const propertyName = this.name;
 
-					if (view[setNative]) {
-						if (view._suspendNativeUpdatesCount) {
-							if (view._suspendedUpdates) {
-								view._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (!(defaultValueKey in this)) {
-								this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
-							}
-							view[setNative](value);
-						}
-					}
-				}
+		CssProperty.properties[propertyName] = this;
+		if (this.cssLocalName && this.cssLocalName !== propertyName) {
+			CssProperty.properties[this.cssLocalName] = this;
+		}
 
-				if (this.hasListeners(eventName)) {
-					this.notify<PropertyChangeData>({
-						object: this,
-						eventName,
-						propertyName,
-						value,
-						oldValue,
-					});
-				}
+		const key = Symbol(propertyName + ':propertyKey');
+		this.key = key;
 
-				if (affectsLayout) {
-					view.requestLayout();
-				}
-			}
-		}
+		const sourceKey = Symbol(propertyName + ':valueSourceKey');
+		this.sourceKey = sourceKey;
+
+		const getDefault = Symbol(propertyName + ':getDefault');
+		this.getDefault = getDefault;
+
+		const setNative = Symbol(propertyName + ':setNative');
+		this.setNative = setNative;
+
+		const defaultValueKey = Symbol(propertyName + ':nativeDefaultValue');
+		this.defaultValueKey = defaultValueKey;
 
+		this.eventName = propertyName + 'Change';
+
+		const property = this;
 		function get(): U {
-			return key in this ? this[key] : defaultValue;
+			return key in this ? this[key] : property.defaultValue;
 		}
 
 		this.cssValueDescriptor = {
 			enumerable: true,
 			configurable: true,
 			get: get,
-			set: setCssValue,
+			set: setCssFunc(this, ValueSource.Css),
 		};
 
 		this.localValueDescriptor = {
 			enumerable: true,
 			configurable: true,
 			get: get,
-			set: setLocalValue,
+			set: setCssFunc(this, ValueSource.Local),
 		};
 
 		cssSymbolPropertyMap[key] = this;
@@ -832,6 +648,9 @@ export class CssProperty<T extends Style, U> implements CssProperty<T, U> {
 		if (this.registered) {
 			throw new Error(`Property ${this.name} already registered.`);
 		}
+		// we add it so that overrideHandlers might work
+		cssPropertyNames.push(this.cssLocalName);
+
 		this.registered = true;
 		Object.defineProperty(cls.prototype, this.name, this.localValueDescriptor);
 		Object.defineProperty(cls.prototype, this.cssName, this.cssValueDescriptor);
@@ -850,6 +669,7 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 	public readonly name: string;
 	public readonly cssName: string;
 	public readonly cssLocalName: string;
+	public readonly eventName: string;
 
 	public readonly getDefault: symbol;
 	public readonly setNative: symbol;
@@ -865,30 +685,27 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 
 	public isStyleProperty: boolean;
 
-	private static properties: {
+	public static properties: {
 		[cssName: string]: CssAnimationProperty<any, any>;
 	} = {};
 
-	public _valueConverter?: (value: string) => any;
+	readonly affectsLayout?: boolean;
+	readonly equalityComparer?: (x: U, y: U) => boolean;
+	readonly valueChanged?: (target: T, oldValue: U, newValue: U) => void;
+	readonly valueConverter?: (value: string) => U;
+	public overrideHandlers: (options: CssAnimationPropertyOptions<T, U>) => void;
 
 	constructor(options: CssAnimationPropertyOptions<T, U>) {
-		const propertyName = options.name;
-		this.name = propertyName;
+		this.overrideHandlers = overrideHandlers(this);
+		this.overrideHandlers(options);
 
-		cssPropertyNames.push(options.cssName);
+		const propertyName = this.name;
 
 		CssAnimationProperty.properties[propertyName] = this;
-		if (options.cssName && options.cssName !== propertyName) {
-			CssAnimationProperty.properties[options.cssName] = this;
+		if (this.cssLocalName && this.cssLocalName !== propertyName) {
+			CssAnimationProperty.properties[this.cssLocalName] = this;
 		}
 
-		this._valueConverter = options.valueConverter;
-
-		const cssLocalName = options.cssName || propertyName;
-		this.cssLocalName = cssLocalName;
-		const cssName = 'css:' + cssLocalName;
-		this.cssName = cssName;
-
 		const keyframeName = 'keyframe:' + propertyName;
 		this.keyframe = keyframeName;
 		const defaultName = 'default:' + propertyName;
@@ -896,9 +713,7 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 		const defaultValueKey = Symbol(defaultName);
 		this.defaultValueKey = defaultValueKey;
 
-		this.defaultValue = options.defaultValue;
-
-		const cssValue = Symbol(cssName);
+		const cssValue = Symbol(this.cssName);
 		const styleValue = Symbol(`local:${propertyName}`);
 		const keyframeValue = Symbol(keyframeName);
 		const computedValue = Symbol('computed-value:' + propertyName);
@@ -909,7 +724,7 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 		this.getDefault = Symbol(propertyName + ':getDefault');
 		const getDefault = this.getDefault;
 		const setNative = (this.setNative = Symbol(propertyName + ':setNative'));
-		const eventName = propertyName + 'Change';
+		this.eventName = propertyName + 'Change';
 
 		const property = this;
 
@@ -936,7 +751,6 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 					const oldSource = this[computedSource];
 					const wasSet = oldSource !== ValueSource.Default;
 					const reset = boxedValue === unsetValue || boxedValue === '';
-
 					if (reset) {
 						this[symbol] = unsetValue;
 						if (this[computedSource] === propertySource) {
@@ -953,8 +767,8 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 							}
 						}
 					} else {
-						if (options.valueConverter && typeof boxedValue === 'string') {
-							boxedValue = options.valueConverter(boxedValue);
+						if (property.valueConverter && typeof boxedValue === 'string') {
+							boxedValue = property.valueConverter(boxedValue);
 						}
 						this[symbol] = boxedValue;
 						if (this[computedSource] <= propertySource) {
@@ -967,10 +781,10 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 					const source = this[computedSource];
 					const isSet = source !== ValueSource.Default;
 
-					const computedValueChanged = oldValue !== value && (!options.equalityComparer || !options.equalityComparer(oldValue, value));
+					const computedValueChanged = oldValue !== value && (!property.equalityComparer || !property.equalityComparer(oldValue, value));
 
-					if (computedValueChanged && options.valueChanged) {
-						options.valueChanged(this, oldValue, value);
+					if (computedValueChanged && property.valueChanged) {
+						property.valueChanged(this, oldValue, value);
 					}
 
 					if (view[setNative] && (computedValueChanged || isSet !== wasSet)) {
@@ -981,19 +795,19 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 						} else {
 							if (isSet) {
 								if (!wasSet && !(defaultValueKey in this)) {
-									this[defaultValueKey] = view[getDefault] ? view[getDefault]() : options.defaultValue;
+									this[defaultValueKey] = view[getDefault] ? view[getDefault]() : property.defaultValue;
 								}
 								view[setNative](value);
 							} else if (wasSet) {
 								if (defaultValueKey in this) {
 									view[setNative](this[defaultValueKey]);
 								} else {
-									view[setNative](options.defaultValue);
+									view[setNative](property.defaultValue);
 								}
 							}
 						}
 					}
-
+					const eventName = property.eventName;
 					if (computedValueChanged && this.hasListeners(eventName)) {
 						this.notify<PropertyChangeData>({
 							object: this,
@@ -1003,6 +817,9 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 							oldValue,
 						});
 					}
+					if (property.affectsLayout) {
+						view.requestLayout();
+					}
 				},
 			};
 		}
@@ -1016,7 +833,10 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 		cssSymbolPropertyMap[computedValue] = this;
 
 		this.register = (cls: { prototype: T }) => {
-			cls.prototype[computedValue] = options.defaultValue;
+			// we add it so that overrideHandlers might work
+			cssPropertyNames.push(this.cssLocalName);
+
+			cls.prototype[computedValue] = this.defaultValue;
 			cls.prototype[computedSource] = ValueSource.Default;
 
 			cls.prototype[cssValue] = unsetValue;
@@ -1024,10 +844,10 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 			cls.prototype[keyframeValue] = unsetValue;
 
 			Object.defineProperty(cls.prototype, defaultName, defaultPropertyDescriptor);
-			Object.defineProperty(cls.prototype, cssName, cssPropertyDescriptor);
+			Object.defineProperty(cls.prototype, this.cssName, cssPropertyDescriptor);
 			Object.defineProperty(cls.prototype, propertyName, stylePropertyDescriptor);
-			if (options.cssName && options.cssName !== options.name) {
-				Object.defineProperty(cls.prototype, options.cssName, stylePropertyDescriptor);
+			if (this.cssLocalName && this.cssLocalName !== this.name) {
+				Object.defineProperty(cls.prototype, this.cssLocalName, stylePropertyDescriptor);
 			}
 			Object.defineProperty(cls.prototype, keyframeName, keyframePropertyDescriptor);
 		};
@@ -1063,167 +883,167 @@ export class CssAnimationProperty<T extends Style, U> implements CssAnimationPro
 }
 CssAnimationProperty.prototype.isStyleProperty = true;
 
-export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U> implements InheritedCssProperty<T, U> {
-	public setInheritedValue: (value: U) => void;
-	public overrideHandlers: (options: CssPropertyOptions<T, U>) => void;
-
-	constructor(options: CssPropertyOptions<T, U>) {
-		super(options);
-		const propertyName = options.name;
-
-		const key = this.key;
-		const sourceKey = this.sourceKey;
-		const getDefault = this.getDefault;
-		const setNative = this.setNative;
-		const defaultValueKey = this.defaultValueKey;
-
-		const eventName = propertyName + 'Change';
-		let defaultValue: U = options.defaultValue;
-		let affectsLayout: boolean = options.affectsLayout;
-		let equalityComparer = options.equalityComparer;
-		let valueChanged = options.valueChanged;
-		let valueConverter = options.valueConverter;
-
-		const property = this;
+function setCssInheritedFunc<T extends Style, U>(property: InheritedCssProperty<T, U>, valueSource: ValueSource) {
+	return function (this: T, boxedValue: any): void {
+		const view = this.viewRef.get();
+		if (!view) {
+			Trace.write(`${boxedValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
 
-		this.overrideHandlers = function (options: CssPropertyOptions<T, U>) {
-			if (typeof options.equalityComparer !== 'undefined') {
-				equalityComparer = options.equalityComparer;
+			return;
+		}
+		const key = property.key;
+		const defaultValue = property.defaultValue;
+		const sourceKey = property.sourceKey;
+		const propertyName = property.name;
+
+		const reset = boxedValue === unsetValue || boxedValue === '';
+		const currentValueSource: number = this[sourceKey] || ValueSource.Default;
+		if (reset) {
+			// If we want to reset cssValue and we have localValue - return;
+			if (valueSource === ValueSource.Css && currentValueSource === ValueSource.Local) {
+				return;
 			}
-			if (typeof options.affectsLayout !== 'undefined') {
-				affectsLayout = options.affectsLayout;
+		} else {
+			if (currentValueSource > valueSource) {
+				return;
 			}
-			if (typeof options.valueChanged !== 'undefined') {
-				valueChanged = options.valueChanged;
+		}
+
+		const oldValue: U = key in this ? this[key] : defaultValue;
+		let value: U;
+		let unsetNativeValue = false;
+		if (reset) {
+			// If unsetValue - we want to reset this property.
+			const parent = view.parent;
+			const style = parent ? parent.style : null;
+			// If we have parent and it has non-default value we use as our inherited value.
+			if (style && style[sourceKey] > ValueSource.Default) {
+				value = style[propertyName];
+				this[sourceKey] = ValueSource.Inherited;
+				this[key] = value;
+			} else {
+				value = defaultValue;
+				delete this[sourceKey];
+				delete this[key];
+				unsetNativeValue = true;
 			}
-			if (typeof options.valueConverter !== 'undefined') {
-				valueConverter = options.valueConverter;
+		} else {
+			this[sourceKey] = valueSource;
+			if (property.valueConverter && typeof boxedValue === 'string') {
+				value = property.valueConverter(boxedValue);
+			} else {
+				value = boxedValue;
 			}
-		};
-
-		const setFunc = (valueSource: ValueSource) =>
-			function (this: T, boxedValue: any): void {
-				const view = this.viewRef.get();
-				if (!view) {
-					Trace.write(`${boxedValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+			this[key] = value;
+		}
 
-					return;
-				}
+		const changed: boolean = property.equalityComparer ? !property.equalityComparer(oldValue, value) : oldValue !== value;
 
-				const reset = boxedValue === unsetValue || boxedValue === '';
-				const currentValueSource: number = this[sourceKey] || ValueSource.Default;
-				if (reset) {
-					// If we want to reset cssValue and we have localValue - return;
-					if (valueSource === ValueSource.Css && currentValueSource === ValueSource.Local) {
-						return;
-					}
-				} else {
-					if (currentValueSource > valueSource) {
-						return;
-					}
-				}
+		if (changed) {
+			const setNative = property.setNative;
+			const defaultValueKey = property.defaultValueKey;
+			const eventName = property.eventName;
+			const getDefault = property.getDefault;
+			if (property.valueChanged) {
+				property.valueChanged(this, oldValue, value);
+			}
 
-				const oldValue: U = key in this ? this[key] : defaultValue;
-				let value: U;
-				let unsetNativeValue = false;
-				if (reset) {
-					// If unsetValue - we want to reset this property.
-					const parent = view.parent;
-					const style = parent ? parent.style : null;
-					// If we have parent and it has non-default value we use as our inherited value.
-					if (style && style[sourceKey] > ValueSource.Default) {
-						value = style[propertyName];
-						this[sourceKey] = ValueSource.Inherited;
-						this[key] = value;
-					} else {
-						value = defaultValue;
-						delete this[sourceKey];
-						delete this[key];
-						unsetNativeValue = true;
+			if (view[setNative]) {
+				if (view._suspendNativeUpdatesCount) {
+					if (view._suspendedUpdates) {
+						view._suspendedUpdates[propertyName] = property;
 					}
 				} else {
-					this[sourceKey] = valueSource;
-					if (valueConverter && typeof boxedValue === 'string') {
-						value = valueConverter(boxedValue);
+					if (unsetNativeValue) {
+						if (defaultValueKey in this) {
+							view[setNative](this[defaultValueKey]);
+							delete this[defaultValueKey];
+						} else {
+							view[setNative](defaultValue);
+						}
 					} else {
-						value = boxedValue;
-					}
-					this[key] = value;
-				}
-
-				const changed: boolean = equalityComparer ? !equalityComparer(oldValue, value) : oldValue !== value;
+						if (!(defaultValueKey in this)) {
+							this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
+						}
 
-				if (changed) {
-					if (valueChanged) {
-						valueChanged(this, oldValue, value);
+						view[setNative](value);
 					}
+				}
+			}
 
-					if (view[setNative]) {
-						if (view._suspendNativeUpdatesCount) {
-							if (view._suspendedUpdates) {
-								view._suspendedUpdates[propertyName] = property;
-							}
-						} else {
-							if (unsetNativeValue) {
-								if (defaultValueKey in this) {
-									view[setNative](this[defaultValueKey]);
-									delete this[defaultValueKey];
-								} else {
-									view[setNative](defaultValue);
-								}
-							} else {
-								if (!(defaultValueKey in this)) {
-									this[defaultValueKey] = view[getDefault] ? view[getDefault]() : defaultValue;
-								}
+			if (this.hasListeners(eventName)) {
+				this.notify<PropertyChangeData>({
+					object: this,
+					eventName,
+					propertyName,
+					value,
+					oldValue,
+				});
+			}
 
-								view[setNative](value);
-							}
-						}
-					}
+			if (property.affectsLayout) {
+				view.requestLayout();
+			}
 
-					if (this.hasListeners(eventName)) {
-						this.notify<PropertyChangeData>({
-							object: this,
-							eventName,
-							propertyName,
-							value,
-							oldValue,
-						});
+			view.eachChild((child) => {
+				const childStyle = child.style;
+				const childValueSource = childStyle[sourceKey] || ValueSource.Default;
+				if (reset) {
+					if (childValueSource === ValueSource.Inherited) {
+						property.setDefaultValue.call(childStyle, unsetValue);
 					}
-
-					if (affectsLayout) {
-						view.requestLayout();
+				} else {
+					if (childValueSource <= ValueSource.Inherited) {
+						property.setInheritedValue.call(childStyle, value);
 					}
-
-					view.eachChild((child) => {
-						const childStyle = child.style;
-						const childValueSource = childStyle[sourceKey] || ValueSource.Default;
-						if (reset) {
-							if (childValueSource === ValueSource.Inherited) {
-								setDefaultFunc.call(childStyle, unsetValue);
-							}
-						} else {
-							if (childValueSource <= ValueSource.Inherited) {
-								setInheritedFunc.call(childStyle, value);
-							}
-						}
-
-						return true;
-					});
 				}
-			};
 
-		const setDefaultFunc = setFunc(ValueSource.Default);
-		const setInheritedFunc = setFunc(ValueSource.Inherited);
+				return true;
+			});
+		}
+	};
+}
 
-		this.setInheritedValue = setInheritedFunc;
-		this.cssValueDescriptor.set = setFunc(ValueSource.Css);
-		this.localValueDescriptor.set = setFunc(ValueSource.Local);
+export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U> implements InheritedCssProperty<T, U> {
+	public setInheritedValue: (value: U) => void;
+	public setDefaultValue: (value: U) => void;
+	public overrideHandlers: (options: CssPropertyOptions<T, U>) => void;
+	public static properties: {
+		[cssName: string]: InheritedCssProperty<any, any>;
+	} = {};
+	constructor(options: CssPropertyOptions<T, U>) {
+		super(options);
+		const propertyName = options.name;
+		InheritedCssProperty.properties[propertyName] = this;
 
+		this.setDefaultValue = setCssInheritedFunc(this, ValueSource.Default);
+		this.setInheritedValue = setCssInheritedFunc(this, ValueSource.Inherited);
+		this.cssValueDescriptor.set = setCssInheritedFunc(this, ValueSource.Css);
+		this.localValueDescriptor.set = setCssInheritedFunc(this, ValueSource.Local);
 		inheritableCssProperties.push(this);
 	}
 }
 
+function setShorthandFunc<T extends Style, U>(property: ShorthandProperty<T, U>, valueSource: ValueSource) {
+	return function (this: T, newValue: any): void {
+		const view = this.viewRef.get();
+		if (!view) {
+			Trace.write(`setLocalValue not executed to view because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
+
+			return;
+		}
+
+		view._batchUpdate(() => {
+			for (const [p, v] of property.converter(newValue)) {
+				if (valueSource === ValueSource.Css) {
+					this[p.cssName] = v;
+				} else {
+					this[p.name] = v;
+				}
+			}
+		});
+	};
+}
 export class ShorthandProperty<T extends Style, P> implements ShorthandProperty<T, P> {
 	private registered: boolean;
 
@@ -1235,69 +1055,41 @@ export class ShorthandProperty<T extends Style, P> implements ShorthandProperty<
 	protected readonly cssValueDescriptor: PropertyDescriptor;
 	protected readonly localValueDescriptor: PropertyDescriptor;
 	protected readonly propertyBagDescriptor: PropertyDescriptor;
-
+	readonly converter: (value: string | P) => [CssProperty<any, any> | CssAnimationProperty<any, any>, any][];
+	public overrideHandlers: (options: ShorthandPropertyOptions<P>) => void;
 	public readonly sourceKey: symbol;
 
-	constructor(options: ShorthandPropertyOptions<P>) {
-		this.name = options.name;
+	public static properties: {
+		[cssName: string]: ShorthandProperty<any, any>;
+	} = {};
 
+	constructor(options: ShorthandPropertyOptions<P>) {
+		this.overrideHandlers = overrideHandlers(this);
+		this.overrideHandlers(options);
 		const key = Symbol(this.name + ':propertyKey');
+		ShorthandProperty.properties[this.name] = this;
 		this.key = key;
 
-		this.cssName = `css:${options.cssName}`;
-		this.cssLocalName = `${options.cssName}`;
-
-		const converter = options.converter;
-
-		function setLocalValue(this: T, value: string | P): void {
-			const view = this.viewRef.get();
-			if (!view) {
-				Trace.write(`setLocalValue not executed to view because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
-
-				return;
-			}
-
-			view._batchUpdate(() => {
-				for (const [p, v] of converter(value)) {
-					this[p.name] = v;
-				}
-			});
-		}
-
-		function setCssValue(this: T, value: string): void {
-			const view = this.viewRef.get();
-			if (!view) {
-				Trace.write(`setCssValue not executed to view because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
-
-				return;
-			}
-
-			view._batchUpdate(() => {
-				for (const [p, v] of converter(value)) {
-					this[p.cssName] = v;
-				}
-			});
-		}
-
 		this.cssValueDescriptor = {
 			enumerable: true,
 			configurable: true,
 			get: options.getter,
-			set: setCssValue,
+			set: setShorthandFunc(this, ValueSource.Css),
 		};
 
 		this.localValueDescriptor = {
 			enumerable: true,
 			configurable: true,
 			get: options.getter,
-			set: setLocalValue,
+			set: setShorthandFunc(this, ValueSource.Local),
 		};
 
+		const property = this;
 		this.propertyBagDescriptor = {
 			enumerable: false,
 			configurable: true,
 			set(value: string) {
-				converter(value).forEach(([property, value]) => {
+				property.converter(value).forEach(([property, value]) => {
 					this[property.cssLocalName] = value;
 				});
 			},
@@ -1322,12 +1114,12 @@ export class ShorthandProperty<T extends Style, P> implements ShorthandProperty<
 	}
 }
 
-function inheritablePropertyValuesOn(view: ViewBase): Array<{ property: InheritedProperty<any, any>; value: any }> {
+function inheritablePropertyValuesOn<T extends InheritedProperty<any, any> | InheritedCssProperty<any, any>>(view: ViewBase | Style, properties: Array<T>): Array<{ property: T; value: any }> {
 	const array = new Array<{
-		property: InheritedProperty<any, any>;
+		property: T;
 		value: any;
 	}>();
-	for (const prop of inheritableProperties) {
+	for (const prop of properties) {
 		const sourceKey = prop.sourceKey;
 		const valueSource: number = view[sourceKey] || ValueSource.Default;
 		if (valueSource !== ValueSource.Default) {
@@ -1340,27 +1132,11 @@ function inheritablePropertyValuesOn(view: ViewBase): Array<{ property: Inherite
 	return array;
 }
 
-function inheritableCssPropertyValuesOn(style: Style): Array<{ property: InheritedCssProperty<any, any>; value: any }> {
-	const array = new Array<{
-		property: InheritedCssProperty<any, any>;
-		value: any;
-	}>();
-	for (const prop of inheritableCssProperties) {
-		const sourceKey = prop.sourceKey;
-		const valueSource: number = style[sourceKey] || ValueSource.Default;
-		if (valueSource !== ValueSource.Default) {
-			// use prop.name as it will return value or default value.
-			// prop.key will return undefined if property is set the same value as default one.
-			array.push({ property: prop, value: style[prop.name] });
-		}
-	}
-
-	return array;
-}
-
 type PropertyInterface = Property<ViewBase, any> | CssProperty<Style, any> | CssAnimationProperty<Style, any>;
 
 export const initNativeView = profile('"properties".initNativeView', function initNativeView(view: ViewBase): void {
+	const wasSuspended = view.suspendRequestLayout;
+	view.suspendRequestLayout = true;
 	if (view._suspendedUpdates) {
 		applyPendingNativeSetters(view);
 	} else {
@@ -1368,6 +1144,14 @@ export const initNativeView = profile('"properties".initNativeView', function in
 	}
 	// Would it be faster to delete all members of the old object?
 	view._suspendedUpdates = {};
+
+	// if the view requestLayout was not suspended before
+	// it means we can request a layout if needed.
+	// will be done after otherwise
+	view.suspendRequestLayout = wasSuspended;
+	if (!wasSuspended && view.isLayoutRequestNeeded) {
+		view.requestLayout();
+	}
 });
 
 export function applyPendingNativeSetters(view: ViewBase): void {
@@ -1514,8 +1298,14 @@ export function resetCSSProperties(style: Style): void {
 	}
 }
 
-export function propagateInheritableProperties(view: ViewBase, child: ViewBase): void {
-	const inheritablePropertyValues = inheritablePropertyValuesOn(view);
+export function propagateInheritableCssProperties(style: Style, child: Style) {
+	return _propagateInheritableProperties(style, child, inheritableCssProperties);
+}
+export function propagateInheritableProperties(view: ViewBase, child: ViewBase) {
+	return _propagateInheritableProperties(view, child, inheritableProperties);
+}
+function _propagateInheritableProperties<U extends ViewBase | Style, T extends InheritedProperty<any, any> | InheritedCssProperty<any, any>>(view: U, child: U, properties: Array<T>): void {
+	const inheritablePropertyValues = inheritablePropertyValuesOn(view, properties);
 	for (const pair of inheritablePropertyValues) {
 		const prop = pair.property;
 		const sourceKey = prop.sourceKey;
@@ -1526,18 +1316,6 @@ export function propagateInheritableProperties(view: ViewBase, child: ViewBase):
 	}
 }
 
-export function propagateInheritableCssProperties(parentStyle: Style, childStyle: Style): void {
-	const inheritableCssPropertyValues = inheritableCssPropertyValuesOn(parentStyle);
-	for (const pair of inheritableCssPropertyValues) {
-		const prop = pair.property;
-		const sourceKey = prop.sourceKey;
-		const currentValueSource: number = childStyle[sourceKey] || ValueSource.Default;
-		if (currentValueSource <= ValueSource.Inherited) {
-			prop.setInheritedValue.call(childStyle, pair.value, ValueSource.Inherited);
-		}
-	}
-}
-
 export function makeValidator<T>(...values: T[]): (value: any) => value is T {
 	const set = new Set(values);
 
diff --git a/packages/core/ui/core/view-base/index.d.ts b/packages/core/ui/core/view-base/index.d.ts
index 056357e227..99ec62d93c 100644
--- a/packages/core/ui/core/view-base/index.d.ts
+++ b/packages/core/ui/core/view-base/index.d.ts
@@ -436,6 +436,7 @@ export abstract class ViewBase extends Observable {
 	 */
 	_addViewToNativeVisualTree(view: ViewBase, atIndex?: number): boolean;
 	_removeViewFromNativeVisualTree(view: ViewBase): void;
+	_removeFromNativeVisualTree(): void;
 	_childIndexToNativeChildIndex(index?: number): number;
 
 	/**
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
index 1abf942cd4..419349552e 100644
--- a/packages/core/ui/core/view-base/index.ts
+++ b/packages/core/ui/core/view-base/index.ts
@@ -272,6 +272,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 
 	public id: string;
 	public className: string;
+	public disableCss: boolean;
 
 	public _domId: number;
 	public _context: any;
@@ -432,9 +433,14 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 		if (this._isLoaded) {
 			return;
 		}
-
+		// the view is going to be layed out after
+		// no need for requestLayout which can be pretty slow because
+		// called a lot and going all up the chain to the page
+		this.suspendRequestLayout = true;
 		this._isLoaded = true;
-		this._cssState.onLoaded();
+		if (!this.disableCss) {
+			this._cssState.onLoaded();
+		}
 		this._resumeNativeUpdates(SuspendType.Loaded);
 
 		this.eachChild((child) => {
@@ -443,7 +449,8 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 			return true;
 		});
 
-		this._emit('loaded');
+		this.suspendRequestLayout = false;
+		this._emit(ViewBase.loadedEvent);
 	}
 
 	@profile
@@ -462,7 +469,9 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 		});
 
 		this._isLoaded = false;
-		this._cssState.onUnloaded();
+		if (!this.disableCss) {
+			this._cssState.onUnloaded();
+		}
 		this._emit('unloaded');
 	}
 
@@ -659,6 +668,19 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 		}
 	}
 
+	_requetLayoutNeeded = false;
+	get isLayoutRequestNeeded() {
+		return this._requetLayoutNeeded;
+	}
+
+	_suspendRequestLayout = false;
+	set suspendRequestLayout(value: boolean) {
+		this._suspendRequestLayout = value;
+	}
+	get suspendRequestLayout() {
+		return this._suspendRequestLayout;
+	}
+
 	@profile
 	public requestLayout(): void {
 		// Default implementation for non View instances (like TabViewItem).
@@ -930,9 +952,11 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 				return true;
 			});
 		}
-
 		if (this.parent) {
 			this.parent._removeViewFromNativeVisualTree(this);
+		} else {
+			//ensure we still remove the view or we could create memory leaks
+			this._removeFromNativeVisualTree();
 		}
 
 		// const nativeView = this.nativeViewProtected;
@@ -987,6 +1011,13 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 		return true;
 	}
 
+	/**
+	 * Method is intended to be overridden by inheritors and used as "protected"
+	 */
+	public _removeFromNativeVisualTree(): void {
+		this._isAddedToNativeVisualTree = false;
+	}
+
 	/**
 	 * Method is intended to be overridden by inheritors and used as "protected"
 	 */
@@ -1071,6 +1102,9 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	}
 
 	_onCssStateChange(): void {
+		if (this.disableCss) {
+			return;
+		}
 		this._cssState.onChange();
 		eachDescendant(this, (child: ViewBase) => {
 			child._cssState.onChange();
@@ -1080,6 +1114,9 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 	}
 
 	_inheritStyleScope(styleScope: ssm.StyleScope): void {
+		if (this.disableCss) {
+			return;
+		}
 		// If we are styleScope don't inherit parent stylescope.
 		// TODO: Consider adding parent scope and merge selectors.
 		if (this._isStyleScopeHost) {
@@ -1181,6 +1218,9 @@ hiddenProperty.register(ViewBase);
 export const classNameProperty = new Property<ViewBase, string>({
 	name: 'className',
 	valueChanged(view: ViewBase, oldValue: string, newValue: string) {
+		if (view.disableCss) {
+			return;
+		}
 		const cssClasses = view.cssClasses;
 		const rootViewsCssClasses = CSSUtils.getSystemCssClasses();
 
@@ -1200,7 +1240,6 @@ export const classNameProperty = new Property<ViewBase, string>({
 		if (typeof newValue === 'string' && newValue !== '') {
 			newValue.split(' ').forEach((c) => cssClasses.add(c));
 		}
-
 		view._onCssStateChange();
 	},
 });
@@ -1211,6 +1250,12 @@ export const idProperty = new Property<ViewBase, string>({
 	valueChanged: (view, oldValue, newValue) => view._onCssStateChange(),
 });
 idProperty.register(ViewBase);
+export const disableCssProperty = new InheritedProperty<ViewBase, boolean>({
+	name: 'disableCss',
+	defaultValue: false,
+	valueConverter: booleanConverter,
+});
+disableCssProperty.register(ViewBase);
 
 export function booleanConverter(v: string | boolean): boolean {
 	const lowercase = (v + '').toLowerCase();
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 809482fe12..9b5889a1f9 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -21,7 +21,7 @@ import { AndroidActivityBackPressedEventData, android as androidApp } from '../.
 import { Device } from '../../../platform';
 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 { AccessibilityLiveRegion, AccessibilityRole, AndroidAccessibilityEvent, isAccessibilityServiceEnabled, sendAccessibilityEvent, updateAccessibilityProperties, updateContentDescription, AccessibilityState } from '../../../accessibility';
 import * as Utils from '../../../utils';
 import { CSSShadow } from '../../styling/css-shadow';
 
@@ -243,6 +243,8 @@ function initializeDialogFragment() {
 			if (this._fullscreen) {
 				const window = this.getDialog().getWindow();
 				const length = android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+				// set the animations to use on showing and hiding the dialog
+				window.setWindowAnimations(16973826); //android.R.style.Animation_Dialog
 				window.setLayout(length, length);
 				// This removes the default backgroundDrawable so there are no margins.
 				window.setBackgroundDrawable(new android.graphics.drawable.ColorDrawable(android.graphics.Color.WHITE));
@@ -321,20 +323,6 @@ export class View extends ViewCommon {
 
 	nativeViewProtected: android.view.View;
 
-	constructor() {
-		super();
-
-		const weakRef = new WeakRef(this);
-		const handler = () => {
-			const owner = weakRef.get();
-			if (owner) {
-				setupAccessibleView(owner);
-				owner.off(View.loadedEvent, handler);
-			}
-		};
-		this.on(View.loadedEvent, handler);
-	}
-
 	// TODO: Implement unobserve that detach the touchListener.
 	_observe(type: GestureTypes, callback: (args: GestureEventData) => void, thisArg?: any): void {
 		super._observe(type, callback, thisArg);
@@ -506,7 +494,6 @@ export class View extends ViewCommon {
 		this.nativeViewProtected.setOnTouchListener(this.touchListener);
 
 		this.touchListenerIsSet = true;
-
 		if (this.nativeViewProtected.setClickable) {
 			this.nativeViewProtected.setClickable(this.isUserInteractionEnabled);
 		}
@@ -554,6 +541,11 @@ export class View extends ViewCommon {
 
 	@profile
 	public requestLayout(): void {
+		if (this._suspendRequestLayout) {
+			this._requetLayoutNeeded = true;
+			return;
+		}
+		this._requetLayoutNeeded = false;
 		super.requestLayout();
 		if (this.nativeViewProtected) {
 			this.nativeViewProtected.requestLayout();
@@ -733,6 +725,7 @@ export class View extends ViewCommon {
 	}
 
 	protected _hideNativeModalView(parent: View, whenClosedCallback: () => void) {
+		this._raiseClosingModallyEvent();
 		const manager = this._dialogFragment.getFragmentManager();
 		if (manager) {
 			this._dialogFragment.dismissAllowingStateLoss();
@@ -846,7 +839,9 @@ export class View extends ViewCommon {
 
 	[accessibilityRoleProperty.setNative](value: AccessibilityRole): void {
 		this.accessibilityRole = value;
-		updateAccessibilityProperties(this);
+		if (this.accessible) {
+			updateAccessibilityProperties(this);
+		}
 
 		if (android.os.Build.VERSION.SDK_INT >= 28) {
 			this.nativeViewProtected?.setAccessibilityHeading(value === AccessibilityRole.Header);
@@ -1103,21 +1098,19 @@ export class View extends ViewCommon {
 
 	[backgroundInternalProperty.getDefault](): android.graphics.drawable.Drawable {
 		const nativeView = this.nativeViewProtected;
-		const drawable = nativeView.getBackground();
+		let drawable = nativeView.getBackground();
 		if (drawable) {
 			const constantState = drawable.getConstantState();
 			if (constantState) {
 				try {
-					return constantState.newDrawable(nativeView.getResources());
-				} catch (e) {
-					return drawable;
-				}
-			} else {
-				return drawable;
+					drawable = constantState.newDrawable(nativeView.getResources());
+					// eslint-disable-next-line no-empty
+				} catch {}
 			}
 		}
+		(<any>nativeView)._cachedDrawable = drawable;
 
-		return null;
+		return drawable;
 	}
 	[backgroundInternalProperty.setNative](value: android.graphics.drawable.Drawable | Background) {
 		this._redrawNativeBackground(value);
@@ -1177,7 +1170,6 @@ export class View extends ViewCommon {
 		};
 		org.nativescript.widgets.Utils.drawBoxShadow(nativeView, JSON.stringify(config));
 	}
-
 	_redrawNativeBackground(value: android.graphics.drawable.Drawable | Background): void {
 		if (value instanceof Background) {
 			this.onBackgroundOrBorderPropertyChanged();
@@ -1308,6 +1300,14 @@ export class CustomLayoutView extends ContainerView implements CustomLayoutViewD
 		child._setMinHeightNative(value);
 	}
 
+	public _removeFromNativeVisualTree(): void {
+		super._removeFromNativeVisualTree();
+		const parent = this.nativeViewProtected?.getParent();
+		if (parent && parent['removeView']) {
+			parent['removeView'](this.nativeViewProtected);
+		}
+	}
+
 	public _removeViewFromNativeVisualTree(child: ViewCommon): void {
 		super._removeViewFromNativeVisualTree(child);
 
diff --git a/packages/core/ui/core/view/index.d.ts b/packages/core/ui/core/view/index.d.ts
index 7b4778ddd1..f60279a2e6 100644
--- a/packages/core/ui/core/view/index.d.ts
+++ b/packages/core/ui/core/view/index.d.ts
@@ -636,6 +636,11 @@ export abstract class View extends ViewCommon {
 	 */
 	public createAnimation(options: AnimationDefinition): Animation;
 
+	/**
+	 * Cancel all animations started with `animate`
+	 */
+	public cancelAllAnimations();
+
 	/**
 	 * Returns the iOS safe area insets of this view.
 	 */
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 13f312204a..ee4ecf4666 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -11,7 +11,7 @@ import { ios as iosBackground, Background } from '../../styling/background';
 import { perspectiveProperty, visibilityProperty, opacityProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, clipPathProperty } from '../../styling/style-properties';
 import { profile } from '../../../profiling';
 import { accessibilityEnabledProperty, accessibilityHiddenProperty, accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityLanguageProperty, accessibilityLiveRegionProperty, accessibilityMediaSessionProperty, accessibilityRoleProperty, accessibilityStateProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
-import { setupAccessibleView, IOSPostAccessibilityNotificationType, isAccessibilityServiceEnabled, updateAccessibilityProperties, AccessibilityEventOptions, AccessibilityRole, AccessibilityState } from '../../../accessibility';
+import { IOSPostAccessibilityNotificationType, isAccessibilityServiceEnabled, updateAccessibilityProperties, AccessibilityEventOptions, AccessibilityRole, AccessibilityState } from '../../../accessibility';
 import { CoreTypes } from '../../../core-types';
 
 export * from './view-common';
@@ -57,16 +57,32 @@ export class View extends ViewCommon implements ViewDefinition {
 	get isLayoutRequested(): boolean {
 		return (this._privateFlags & PFLAG_FORCE_LAYOUT) === PFLAG_FORCE_LAYOUT;
 	}
+	initNativeView() {
+		super.initNativeView();
+		const nativeView = this.nativeViewProtected;
+		/**
+		 * We need to map back from the UIView to the NativeScript View for accessibility.
+		 *
+		 * We do that by setting the uiView's tag to the View's domId.
+		 * This way we can do reverse lookup.
+		 */
+		nativeView.tag = this._domId;
+	}
 
-	constructor() {
-		super();
-
-		this.once(View.loadedEvent, () => setupAccessibleView(this));
+	requestlayoutIfNeeded() {
+		if (this.isLayoutRequired) {
+			this._requetLayoutNeeded = false;
+			this.requestLayout();
+		}
 	}
 
 	disposeNativeView() {
 		super.disposeNativeView();
 
+		if (this.viewController) {
+			this.viewController = null;
+		}
+
 		this._cachedFrame = null;
 		this._isLaidOut = false;
 		this._hasTransform = false;
@@ -74,6 +90,11 @@ export class View extends ViewCommon implements ViewDefinition {
 	}
 
 	public requestLayout(): void {
+		if (this._suspendRequestLayout) {
+			this._requetLayoutNeeded = true;
+			return;
+		}
+		this._requetLayoutNeeded = false;
 		this._privateFlags |= PFLAG_FORCE_LAYOUT;
 		super.requestLayout();
 
@@ -413,7 +434,10 @@ export class View extends ViewCommon implements ViewDefinition {
 		const newPoint = CGPointMake(originX, originY);
 		this.nativeViewProtected.layer.anchorPoint = newPoint;
 		if (this._cachedFrame) {
-			this._setNativeViewFrame(this.nativeViewProtected, this._cachedFrame);
+			// to ensure we "force" a setFrame we need to clear the _cachedFrame
+			const frame = this._cachedFrame;
+			this._cachedFrame = null;
+			this._setNativeViewFrame(this.nativeViewProtected, frame);
 		}
 	}
 
@@ -552,6 +576,7 @@ export class View extends ViewCommon implements ViewDefinition {
 
 			return;
 		}
+		this._raiseClosingModallyEvent();
 
 		// modal view has already been closed by UI, probably as a popover
 		if (!parent.viewController.presentedViewController) {
@@ -807,7 +832,7 @@ export class View extends ViewCommon implements ViewDefinition {
 			args = msg;
 		}
 
-		switch (options.iosNotificationType) {
+		switch (options.iosNotificationType as IOSPostAccessibilityNotificationType) {
 			case IOSPostAccessibilityNotificationType.Announcement: {
 				notification = UIAccessibilityAnnouncementNotification;
 				break;
@@ -952,6 +977,13 @@ export class CustomLayoutView extends ContainerView {
 		return false;
 	}
 
+	public _removeFromNativeVisualTree(): void {
+		super._removeFromNativeVisualTree();
+		if (this.nativeViewProtected) {
+			this.nativeViewProtected.removeFromSuperview();
+		}
+	}
+
 	public _removeViewFromNativeVisualTree(child: View): void {
 		super._removeViewFromNativeVisualTree(child);
 
diff --git a/packages/core/ui/core/view/view-common.ts b/packages/core/ui/core/view/view-common.ts
index 437f62213d..478024cd2f 100644
--- a/packages/core/ui/core/view/view-common.ts
+++ b/packages/core/ui/core/view/view-common.ts
@@ -25,7 +25,7 @@ import { LinearGradient } from '../../styling/linear-gradient';
 import * as am from '../../animation';
 import { AccessibilityEventOptions, AccessibilityLiveRegion, AccessibilityRole, AccessibilityState, AccessibilityTrait } from '../../../accessibility/accessibility-types';
 import { accessibilityHintProperty, accessibilityIdentifierProperty, accessibilityLabelProperty, accessibilityValueProperty, accessibilityIgnoresInvertColorsProperty } from '../../../accessibility/accessibility-properties';
-import { accessibilityBlurEvent, accessibilityFocusChangedEvent, accessibilityFocusEvent, accessibilityPerformEscapeEvent, getCurrentFontScale } from '../../../accessibility';
+import { getCurrentFontScale } from '../../../accessibility';
 import { CSSShadow } from '../../styling/css-shadow';
 
 // helpers (these are okay re-exported here)
@@ -72,10 +72,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	public static layoutChangedEvent = 'layoutChanged';
 	public static shownModallyEvent = 'shownModally';
 	public static showingModallyEvent = 'showingModally';
-	public static accessibilityBlurEvent = accessibilityBlurEvent;
-	public static accessibilityFocusEvent = accessibilityFocusEvent;
-	public static accessibilityFocusChangedEvent = accessibilityFocusChangedEvent;
-	public static accessibilityPerformEscapeEvent = accessibilityPerformEscapeEvent;
+	public static closingModallyEvent = 'closingModally';
 
 	public accessibilityIdentifier: string;
 	public accessibilityLabel: string;
@@ -130,6 +127,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	}
 
 	public changeCssFile(cssFileName: string): void {
+		if (this.disableCss) {
+			return;
+		}
 		const scope = this._styleScope;
 		if (scope && cssFileName) {
 			scope.changeCssFile(cssFileName);
@@ -138,6 +138,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	}
 
 	public _updateStyleScope(cssFileName?: string, cssString?: string, css?: string): void {
+		if (this.disableCss) {
+			return;
+		}
 		let scope = this._styleScope;
 		if (!scope) {
 			scope = new StyleScope();
@@ -448,6 +451,13 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		};
 		this.notify(args);
 	}
+	protected _raiseClosingModallyEvent() {
+		const args: EventData = {
+			eventName: ViewCommon.closingModallyEvent,
+			object: this,
+		};
+		this.notify(args);
+	}
 
 	private _isEvent(name: string): boolean {
 		return this.constructor && `${name}Event` in this.constructor;
@@ -1018,6 +1028,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 		return this.createAnimation(animation).play();
 	}
 
+	public cancelAllAnimations() {
+		if (this._localAnimations) {
+			this._localAnimations.forEach((a) => this._removeAnimation(a));
+		}
+	}
+
 	public createAnimation(animation: any): am.Animation {
 		ensureAnimationModule();
 		if (!this._localAnimations) {
@@ -1045,10 +1061,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 	}
 
 	public resetNativeView(): void {
-		if (this._localAnimations) {
-			this._localAnimations.forEach((a) => this._removeAnimation(a));
-		}
-
+		this.cancelAllAnimations();
 		super.resetNativeView();
 	}
 
diff --git a/packages/core/ui/core/view/view-helper/view-helper-common.ts b/packages/core/ui/core/view/view-helper/view-helper-common.ts
index ae3ad96798..7f0f53e85a 100644
--- a/packages/core/ui/core/view/view-helper/view-helper-common.ts
+++ b/packages/core/ui/core/view/view-helper/view-helper-common.ts
@@ -89,11 +89,11 @@ export class ViewHelper {
 		const effectiveMarginRight = child.effectiveMarginRight;
 
 		let hAlignment: CoreTypes.HorizontalAlignmentType;
-		if (child.effectiveWidth >= 0 && childStyle.horizontalAlignment === 'stretch') {
-			hAlignment = 'center';
-		} else {
-			hAlignment = childStyle.horizontalAlignment;
-		}
+		// if (child.effectiveWidth >= 0 && childStyle.horizontalAlignment === 'stretch') {
+		// 	hAlignment = 'center';
+		// } else {
+		hAlignment = childStyle.horizontalAlignment;
+		// }
 
 		switch (hAlignment) {
 			case 'left':
diff --git a/packages/core/ui/editable-text-base/editable-text-base-common.ts b/packages/core/ui/editable-text-base/editable-text-base-common.ts
index d34cf174a0..bea44c51ec 100644
--- a/packages/core/ui/editable-text-base/editable-text-base-common.ts
+++ b/packages/core/ui/editable-text-base/editable-text-base-common.ts
@@ -6,6 +6,7 @@ import { booleanConverter } from '../core/view-base';
 import { Style } from '../styling/style';
 import { Color } from '../../color';
 import { CoreTypes } from '../../core-types';
+import { colorConverter } from '../styling/style-properties';
 
 export abstract class EditableTextBase extends TextBase implements EditableTextBaseDefinition {
 	public static blurEvent = 'blur';
@@ -45,11 +46,11 @@ export const placeholderColorProperty = new CssProperty<Style, Color>({
 	name: 'placeholderColor',
 	cssName: 'placeholder-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 placeholderColorProperty.register(Style);
 
-const keyboardTypeConverter = makeParser<CoreTypes.KeyboardInputType>(makeValidator<CoreTypes.KeyboardInputType>(CoreTypes.KeyboardType.datetime, CoreTypes.KeyboardType.phone, CoreTypes.KeyboardType.number, CoreTypes.KeyboardType.url, CoreTypes.KeyboardType.email, CoreTypes.KeyboardType.integer), true);
+const keyboardTypeConverter = makeParser<CoreTypes.KeyboardInputType>(makeValidator<CoreTypes.KeyboardInputType>(CoreTypes.KeyboardType.datetime, CoreTypes.KeyboardType.phone, CoreTypes.KeyboardType.number, CoreTypes.KeyboardType.url, CoreTypes.KeyboardType.email, CoreTypes.KeyboardType.integer, CoreTypes.KeyboardType.decimal), true);
 
 const autofillTypeConverter = makeParser<CoreTypes.AutofillType>(makeValidator<CoreTypes.AutofillType>(CoreTypes.AutofillType.username, CoreTypes.AutofillType.password, CoreTypes.AutofillType.none), true);
 
diff --git a/packages/core/ui/editable-text-base/index.android.ts b/packages/core/ui/editable-text-base/index.android.ts
index c35df267a9..aa835ce7a6 100644
--- a/packages/core/ui/editable-text-base/index.android.ts
+++ b/packages/core/ui/editable-text-base/index.android.ts
@@ -29,12 +29,11 @@ function clearDismissTimer(): void {
 	}
 }
 
-function dismissSoftInput(_owner: WeakRef<EditableTextBase>): void {
+function dismissSoftInput(view: EditableTextBase): void {
 	clearDismissTimer();
 	if (!dismissKeyboardTimeoutId) {
 		dismissKeyboardTimeoutId = setTimeout(() => {
-			const owner = _owner && _owner.get();
-			const activity = owner?._context as androidx.appcompat.app.AppCompatActivity;
+			const activity = view._context as androidx.appcompat.app.AppCompatActivity;
 			dismissKeyboardTimeoutId = null;
 			const focused = activity && activity.getCurrentFocus();
 			if (focused && !(focused instanceof android.widget.EditText)) {
@@ -63,81 +62,23 @@ function initializeEditTextListeners(): void {
 		}
 
 		public beforeTextChanged(text: string, start: number, count: number, after: number): void {
-			//
+			this.owner?.get()?.beforeTextChanged(text, start, count, after);
 		}
 
 		public onTextChanged(text: string, start: number, before: number, count: number): void {
-			// const owner = this.owner;
-			// let selectionStart = owner.android.getSelectionStart();
-			// owner.android.removeTextChangedListener(owner._editTextListeners);
-			// owner.android.addTextChangedListener(owner._editTextListeners);
-			// owner.android.setSelection(selectionStart);
+			this.owner?.get()?.onTextChanged(text, start, before, count);
 		}
 
 		public afterTextChanged(editable: android.text.Editable): void {
-			const owner = this.owner && this.owner.get();
-			if (!owner || owner._changeFromCode) {
-				return;
-			}
-
-			switch (owner.updateTextTrigger) {
-				case 'focusLost':
-					owner._dirtyTextAccumulator = editable.toString();
-					break;
-				case 'textChanged':
-					textProperty.nativeValueChange(owner, editable.toString());
-					break;
-				default:
-					throw new Error('Invalid updateTextTrigger: ' + owner.updateTextTrigger);
-			}
+			this.owner?.get()?.afterTextChanged(editable);
 		}
 
 		public onFocusChange(view: android.view.View, hasFocus: boolean): void {
-			const owner = this.owner && this.owner.get();
-			if (!owner) {
-				return;
-			}
-
-			if (hasFocus) {
-				clearDismissTimer();
-				owner.notify({
-					eventName: EditableTextBase.focusEvent,
-					object: owner,
-				});
-			} else {
-				if (owner._dirtyTextAccumulator || owner._dirtyTextAccumulator === '') {
-					textProperty.nativeValueChange(owner, owner._dirtyTextAccumulator);
-					owner._dirtyTextAccumulator = undefined;
-				}
-
-				owner.notify({
-					eventName: EditableTextBase.blurEvent,
-					object: owner,
-				});
-				dismissSoftInput(this.owner);
-			}
+			this.owner?.get()?.onFocusChange(view, hasFocus);
 		}
 
 		public onEditorAction(textView: android.widget.TextView, actionId: number, event: android.view.KeyEvent): boolean {
-			const owner = this.owner && this.owner.get();
-			if (!owner) {
-				return false;
-			}
-
-			if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_DONE || actionId === android.view.inputmethod.EditorInfo.IME_ACTION_UNSPECIFIED || (event && event.getKeyCode() === android.view.KeyEvent.KEYCODE_ENTER)) {
-				// If it is TextField, close the keyboard. If it is TextView, do not close it since the TextView is multiline
-				// https://github.com/NativeScript/NativeScript/issues/3111
-				if (textView.getMaxLines() === 1) {
-					owner.dismissSoftInput();
-				}
-
-				owner._onReturnPress();
-			} else if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_NEXT || actionId === android.view.inputmethod.EditorInfo.IME_ACTION_PREVIOUS) {
-				// do not close keyboard for ACTION_NEXT or ACTION_PREVIOUS
-				owner._onReturnPress();
-			}
-
-			return false;
+			return this.owner?.get()?.onEditorAction(textView, actionId, event) || false;
 		}
 	}
 
@@ -180,7 +121,12 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
 	}
 
 	public disposeNativeView(): void {
-		(<any>this.nativeTextViewProtected).listener.owner = null;
+		const editText = this.nativeTextViewProtected;
+		editText.removeTextChangedListener((<any>editText).listener);
+		editText.setOnFocusChangeListener(null);
+		editText.setOnEditorActionListener(null);
+		(<any>editText).listener.owner = null;
+		(<any>editText).listener = null;
 		this._keyListenerCache = null;
 		super.disposeNativeView();
 	}
@@ -286,6 +232,10 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
 				newInputType = android.text.InputType.TYPE_CLASS_NUMBER;
 				break;
 
+			case 'decimal':
+				newInputType = android.text.InputType.TYPE_CLASS_NUMBER | android.text.InputType.TYPE_NUMBER_FLAG_DECIMAL;
+				break;
+
 			default:
 				const inputType = +value;
 				if (!isNaN(inputType)) {
@@ -533,4 +483,72 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
 			}
 		}
 	}
+
+	public beforeTextChanged(text: string, start: number, count: number, after: number): void {
+		// called by android.text.TextWatcher
+	}
+
+	public onTextChanged(text: string, start: number, before: number, count: number): void {
+		// called by android.text.TextWatcher
+		// const owner = this.owner;
+		// let selectionStart = owner.android.getSelectionStart();
+		// owner.android.removeTextChangedListener(owner._editTextListeners);
+		// owner.android.addTextChangedListener(owner._editTextListeners);
+		// owner.android.setSelection(selectionStart);
+	}
+
+	public afterTextChanged(editable: android.text.Editable): void {
+		// called by android.text.TextWatcher
+		if (this._changeFromCode) {
+			return;
+		}
+
+		switch (this.updateTextTrigger) {
+			case 'focusLost':
+				this._dirtyTextAccumulator = editable.toString();
+				break;
+			case 'textChanged':
+				textProperty.nativeValueChange(this, editable.toString());
+				break;
+			default:
+				throw new Error('Invalid updateTextTrigger: ' + this.updateTextTrigger);
+		}
+	}
+
+	public onFocusChange(view: android.view.View, hasFocus: boolean): void {
+		if (hasFocus) {
+			clearDismissTimer();
+			this.notify({
+				eventName: EditableTextBase.focusEvent,
+				object: this,
+			});
+		} else {
+			if (this._dirtyTextAccumulator || this._dirtyTextAccumulator === '') {
+				textProperty.nativeValueChange(this, this._dirtyTextAccumulator);
+				this._dirtyTextAccumulator = undefined;
+			}
+
+			this.notify({
+				eventName: EditableTextBase.blurEvent,
+			});
+			dismissSoftInput(this);
+		}
+	}
+
+	public onEditorAction(textView: android.widget.TextView, actionId: number, event: android.view.KeyEvent): boolean {
+		if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_DONE || actionId === android.view.inputmethod.EditorInfo.IME_ACTION_UNSPECIFIED || (event && event.getKeyCode() === android.view.KeyEvent.KEYCODE_ENTER)) {
+			// If it is TextField, close the keyboard. If it is TextView, do not close it since the TextView is multiline
+			// https://github.com/NativeScript/NativeScript/issues/3111
+			if (textView.getMaxLines() === 1) {
+				this.dismissSoftInput();
+			}
+
+			this._onReturnPress();
+		} else if (actionId === android.view.inputmethod.EditorInfo.IME_ACTION_NEXT || actionId === android.view.inputmethod.EditorInfo.IME_ACTION_PREVIOUS) {
+			// do not close keyboard for ACTION_NEXT or ACTION_PREVIOUS
+			this._onReturnPress();
+		}
+
+		return false;
+	}
 }
diff --git a/packages/core/ui/editable-text-base/index.ios.ts b/packages/core/ui/editable-text-base/index.ios.ts
index 031de38a03..ecd3b883ed 100644
--- a/packages/core/ui/editable-text-base/index.ios.ts
+++ b/packages/core/ui/editable-text-base/index.ios.ts
@@ -60,6 +60,10 @@ export abstract class EditableTextBase extends EditableTextBaseCommon {
 				newKeyboardType = UIKeyboardType.NumberPad;
 				break;
 
+			case 'decimal':
+				newKeyboardType = UIKeyboardType.DecimalPad;
+				break;
+
 			default:
 				const kt = +value;
 				if (!isNaN(kt)) {
diff --git a/packages/core/ui/frame/fragment.android.ts b/packages/core/ui/frame/fragment.android.ts
index 8ce9084137..b276fe3a04 100644
--- a/packages/core/ui/frame/fragment.android.ts
+++ b/packages/core/ui/frame/fragment.android.ts
@@ -11,6 +11,10 @@ const FragmentClass = (<any>org.nativescript.widgets.FragmentBase).extend('com.t
 		return this._callbacks.onCreateAnimator(this, transit, enter, nextAnim, superProto.onCreateAnimator);
 	},
 
+	onCreateAnimation(transit: number, enter: boolean, nextAnim: number): android.view.animation.Animation {
+		return this._callbacks.onCreateAnimation(this, transit, enter, nextAnim, superProto.onCreateAnimation);
+	},
+
 	onStop(): void {
 		this._callbacks.onStop(this, superProto.onStop);
 	},
diff --git a/packages/core/ui/frame/fragment.transitions.android.ts b/packages/core/ui/frame/fragment.transitions.android.ts
index 40dcf5fcfb..469540085d 100644
--- a/packages/core/ui/frame/fragment.transitions.android.ts
+++ b/packages/core/ui/frame/fragment.transitions.android.ts
@@ -8,6 +8,8 @@ import { FlipTransition } from '../transition/flip-transition';
 import { _resolveAnimationCurve } from '../animation';
 import lazy from '../../utils/lazy';
 import { Trace } from '../../trace';
+import { FadeTransition } from '../transition/fade-transition';
+import { SlideTransition } from '../transition/slide-transition';
 
 interface TransitionListener {
 	new (entry: ExpandedEntry, transition: androidx.transition.Transition): ExpandedTransitionListener;
@@ -26,6 +28,7 @@ let AnimationListener: android.animation.Animator.AnimatorListener;
 
 interface ExpandedTransitionListener extends androidx.transition.Transition.TransitionListener {
 	entry: ExpandedEntry;
+	backEntry?: BackstackEntry;
 	transition: androidx.transition.Transition;
 }
 
@@ -51,7 +54,6 @@ 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 {
@@ -61,49 +63,44 @@ 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);
 
 	let name = '';
-	let transition: Transition;
+	let customTransition: Transition;
 
 	if (navigationTransition) {
-		transition = navigationTransition.instance;
+		customTransition = navigationTransition.instance;
 		name = navigationTransition.name ? navigationTransition.name.toLowerCase() : '';
 	}
 
 	if (!animated) {
 		name = 'none';
-	} else if (transition) {
+	} else if (customTransition) {
 		name = 'custom';
-	} else if (name.indexOf('slide') !== 0 && name !== 'fade' && name.indexOf('flip') !== 0 && name.indexOf('explode') !== 0) {
+	} else if (name.indexOf('slide') !== 0 && name !== 'fade' && name.indexOf('flip') !== 0) {
 		// If we are given name that doesn't match any of ours - fallback to default.
 		name = 'default';
 	}
-
 	let currentFragmentNeedsDifferentAnimation = false;
 	if (currentEntry) {
 		_updateTransitions(currentEntry);
-		if (currentEntry.transitionName !== name || currentEntry.transition !== transition || isNestedDefaultTransition) {
+		if (currentEntry.transitionName !== name || currentEntry.transition !== customTransition || isNestedDefaultTransition) {
 			clearExitAndReenterTransitions(currentEntry, true);
 			currentFragmentNeedsDifferentAnimation = true;
 		}
 	}
-
+	let transition: Transition;
 	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);
-		} else {
-			setupNewFragmentCustomTransition({ duration: 0, curve: null }, newEntry, noTransition);
+			// with androidx.fragment 1.3.0 the first fragment animation is not triggered
+			// so let's simulate a transition end
+			setTimeout(() => {
+				addToWaitingQueue(newEntry);
+				transitionOrAnimationCompleted(newEntry, null);
+			});
 		}
 
 		newEntry.isNestedDefaultTransition = isNestedDefaultTransition;
@@ -111,52 +108,40 @@ export function _setAndroidFragmentTransitions(animated: boolean, navigationTran
 		if (currentFragmentNeedsDifferentAnimation) {
 			setupCurrentFragmentCustomTransition({ duration: 0, curve: null }, currentEntry, noTransition);
 		}
-	} else if (name === 'custom') {
+	} else if (customTransition) {
 		setupNewFragmentCustomTransition(
 			{
-				duration: transition.getDuration(),
-				curve: transition.getCurve(),
+				duration: customTransition.getDuration(),
+				curve: customTransition.getCurve(),
 			},
 			newEntry,
-			transition
+			customTransition
 		);
 		if (currentFragmentNeedsDifferentAnimation) {
 			setupCurrentFragmentCustomTransition(
 				{
-					duration: transition.getDuration(),
-					curve: transition.getCurve(),
+					duration: customTransition.getDuration(),
+					curve: customTransition.getCurve(),
 				},
 				currentEntry,
-				transition
+				customTransition
 			);
 		}
 	} else if (name === 'default') {
-		setupNewFragmentFadeTransition({ duration: 150, curve: null }, newEntry);
-		if (currentFragmentNeedsDifferentAnimation) {
-			setupCurrentFragmentFadeTransition({ duration: 150, curve: null }, currentEntry);
-		}
+		transition = new FadeTransition(150, null);
 	} else if (name.indexOf('slide') === 0) {
-		setupNewFragmentSlideTransition(navigationTransition, newEntry, name);
-		if (currentFragmentNeedsDifferentAnimation) {
-			setupCurrentFragmentSlideTransition(navigationTransition, currentEntry, name);
-		}
+		const direction = name.substr('slide'.length) || 'left'; //Extract the direction from the string
+		transition = new SlideTransition(direction, navigationTransition.duration, navigationTransition.curve);
 	} else if (name === 'fade') {
-		setupNewFragmentFadeTransition(navigationTransition, newEntry);
-		if (currentFragmentNeedsDifferentAnimation) {
-			setupCurrentFragmentFadeTransition(navigationTransition, currentEntry);
-		}
-	} else if (name === 'explode') {
-		setupNewFragmentExplodeTransition(navigationTransition, newEntry);
-		if (currentFragmentNeedsDifferentAnimation) {
-			setupCurrentFragmentExplodeTransition(navigationTransition, currentEntry);
-		}
+		transition = new FadeTransition(navigationTransition.duration, navigationTransition.curve);
 	} else if (name.indexOf('flip') === 0) {
 		const direction = name.substr('flip'.length) || 'right'; //Extract the direction from the string
-		const flipTransition = new FlipTransition(direction, navigationTransition.duration, navigationTransition.curve);
-
-		setupNewFragmentCustomTransition(navigationTransition, newEntry, flipTransition);
+		transition = new FlipTransition(direction, navigationTransition.duration, navigationTransition.curve);
+	}
+	if (transition) {
+		setupNewFragmentCustomTransition(navigationTransition, newEntry, transition);
 		if (currentFragmentNeedsDifferentAnimation) {
-			setupCurrentFragmentCustomTransition(navigationTransition, currentEntry, flipTransition);
+			setupCurrentFragmentCustomTransition(navigationTransition, currentEntry, transition);
 		}
 	}
 
@@ -225,11 +210,11 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
 
 			onAnimationStart(animator: ExpandedAnimator): void {
 				const entry = animator.entry;
+				const backEntry = animator.backEntry;
 				addToWaitingQueue(entry);
 				if (Trace.isEnabled()) {
 					Trace.write(`START ${animator.transitionType} for ${entry.fragmentTag}`, Trace.categories.Transition);
 				}
-				entry.isAnimationRunning = true;
 			}
 
 			onAnimationRepeat(animator: ExpandedAnimator): void {
@@ -239,18 +224,19 @@ function getAnimationListener(): android.animation.Animator.AnimatorListener {
 			}
 
 			onAnimationEnd(animator: ExpandedAnimator): void {
+				const entry = animator.entry;
+				const backEntry = animator.backEntry;
 				if (Trace.isEnabled()) {
-					Trace.write(`END ${animator.transitionType} for ${animator.entry.fragmentTag}`, Trace.categories.Transition);
+					Trace.write(`END ${animator.transitionType} for ${entry.fragmentTag} backEntry:${backEntry ? backEntry.fragmentTag : 'none'}`, Trace.categories.Transition);
 				}
-				animator.entry.isAnimationRunning = false;
-				transitionOrAnimationCompleted(animator.entry, animator.backEntry);
+				transitionOrAnimationCompleted(entry, backEntry);
+				animator.backEntry = null;
 			}
 
 			onAnimationCancel(animator: ExpandedAnimator): void {
 				if (Trace.isEnabled()) {
-					Trace.write(`CANCEL ${animator.transitionType} for ${animator.entry.fragmentTag}`, Trace.categories.Transition);
+					Trace.write(`CANCEL ${animator.transitionType} for ${animator.entry.fragmentTag} backEntry:${animator.backEntry?.fragmentTag ?? 'none'}`, Trace.categories.Transition);
 				}
-				animator.entry.isAnimationRunning = false;
 			}
 		}
 
@@ -342,7 +328,6 @@ function getTransitionListener(entry: ExpandedEntry, transition: androidx.transi
 
 			public onTransitionStart(transition: androidx.transition.Transition): void {
 				const entry = this.entry;
-				entry.isAnimationRunning = true;
 				addToWaitingQueue(entry);
 				if (Trace.isEnabled()) {
 					Trace.write(`START ${toShortString(transition)} transition for ${entry.fragmentTag}`, Trace.categories.Transition);
@@ -351,11 +336,12 @@ function getTransitionListener(entry: ExpandedEntry, transition: androidx.transi
 
 			onTransitionEnd(transition: androidx.transition.Transition): void {
 				const entry = this.entry;
+				const backEntry = this.backEntry;
 				if (Trace.isEnabled()) {
-					Trace.write(`END ${toShortString(transition)} transition for ${entry.fragmentTag}`, Trace.categories.Transition);
+					Trace.write(`END ${toShortString(transition)} transition for ${entry.fragmentTag} backEntry:${backEntry ? backEntry.fragmentTag : 'none'}`, Trace.categories.Transition);
 				}
-				entry.isAnimationRunning = false;
-				transitionOrAnimationCompleted(entry, this.backEntry);
+				transitionOrAnimationCompleted(entry, backEntry);
+				this.backEntry = null;
 			}
 
 			onTransitionResume(transition: androidx.transition.Transition): void {
@@ -373,9 +359,8 @@ function getTransitionListener(entry: ExpandedEntry, transition: androidx.transi
 
 			onTransitionCancel(transition: androidx.transition.Transition): void {
 				const entry = this.entry;
-				entry.isAnimationRunning = false;
 				if (Trace.isEnabled()) {
-					Trace.write(`CANCEL ${toShortString(transition)} transition for ${this.entry.fragmentTag}`, Trace.categories.Transition);
+					Trace.write(`CANCEL ${toShortString(transition)} transition for ${this.entry.fragmentTag} backEntry:${this.backEntry?.fragmentTag ?? 'none'}`, Trace.categories.Transition);
 				}
 			}
 		}
@@ -536,57 +521,6 @@ function setReturnTransition(navigationTransition: NavigationTransition, entry:
 	fragment.setReturnTransition(transition);
 }
 
-function setupNewFragmentSlideTransition(navTransition: NavigationTransition, entry: ExpandedEntry, name: string): void {
-	setupCurrentFragmentSlideTransition(navTransition, entry, name);
-	const direction = name.substr('slide'.length) || 'left'; //Extract the direction from the string
-	switch (direction) {
-		case 'left':
-			setEnterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.RIGHT));
-			setReturnTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.RIGHT));
-			break;
-
-		case 'right':
-			setEnterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.LEFT));
-			setReturnTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.LEFT));
-			break;
-
-		case 'top':
-			setEnterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.BOTTOM));
-			setReturnTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.BOTTOM));
-			break;
-
-		case 'bottom':
-			setEnterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.TOP));
-			setReturnTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.TOP));
-			break;
-	}
-}
-
-function setupCurrentFragmentSlideTransition(navTransition: NavigationTransition, entry: ExpandedEntry, name: string): void {
-	const direction = name.substr('slide'.length) || 'left'; //Extract the direction from the string
-	switch (direction) {
-		case 'left':
-			setExitTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.LEFT));
-			setReenterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.LEFT));
-			break;
-
-		case 'right':
-			setExitTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.RIGHT));
-			setReenterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.RIGHT));
-			break;
-
-		case 'top':
-			setExitTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.TOP));
-			setReenterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.TOP));
-			break;
-
-		case 'bottom':
-			setExitTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.BOTTOM));
-			setReenterTransition(navTransition, entry, new androidx.transition.Slide(android.view.Gravity.BOTTOM));
-			break;
-	}
-}
-
 function setupCurrentFragmentCustomTransition(navTransition: NavigationTransition, entry: ExpandedEntry, transition: Transition): void {
 	const exitAnimator = transition.createAndroidAnimator(Transition.AndroidTransitionType.exit);
 	const exitTransition = new org.nativescript.widgets.CustomTransition(exitAnimator, transition.constructor.name + Transition.AndroidTransitionType.exit.toString());
@@ -603,7 +537,25 @@ function setupNewFragmentCustomTransition(navTransition: NavigationTransition, e
 	setupCurrentFragmentCustomTransition(navTransition, entry, transition);
 
 	const enterAnimator = transition.createAndroidAnimator(Transition.AndroidTransitionType.enter);
+
 	const enterTransition = new org.nativescript.widgets.CustomTransition(enterAnimator, transition.constructor.name + Transition.AndroidTransitionType.enter.toString());
+
+	// if the animation is cancelled during the transition
+	// the fragment will get stuck in an in-between state
+	// use that listener to force to go to the end position
+	enterAnimator.addListener(
+		new android.animation.Animator.AnimatorListener({
+			onAnimationStart: function (animator: android.animation.Animator): void {},
+			onAnimationEnd: (animator: android.animation.Animator) => {},
+			onAnimationRepeat: function (animator: android.animation.Animator): void {},
+			onAnimationCancel: (animator: android.animation.Animator) => {
+				const immediateAnimatorSet = animator.clone();
+				immediateAnimatorSet.setDuration(0);
+				immediateAnimatorSet.start();
+			},
+		})
+	);
+
 	setEnterTransition(navTransition, entry, enterTransition);
 
 	const returnAnimator = transition.createAndroidAnimator(Transition.AndroidTransitionType.popExit);
@@ -631,19 +583,10 @@ function setupCurrentFragmentFadeTransition(navTransition: NavigationTransition,
 	setReenterTransition(navTransition, entry, fadeInReenter);
 }
 
-function setupCurrentFragmentExplodeTransition(navTransition: NavigationTransition, entry: ExpandedEntry): void {
-	setExitTransition(navTransition, entry, new androidx.transition.Explode());
-	setReenterTransition(navTransition, entry, new androidx.transition.Explode());
-}
-
-function setupNewFragmentExplodeTransition(navTransition: NavigationTransition, entry: ExpandedEntry): void {
-	setupCurrentFragmentExplodeTransition(navTransition, entry);
-
-	setEnterTransition(navTransition, entry, new androidx.transition.Explode());
-	setReturnTransition(navTransition, entry, new androidx.transition.Explode());
-}
-
 function setUpNativeTransition(navigationTransition: NavigationTransition, nativeTransition: androidx.transition.Transition) {
+	if (!navigationTransition) {
+		return;
+	}
 	if (navigationTransition.duration) {
 		nativeTransition.setDuration(navigationTransition.duration);
 	}
diff --git a/packages/core/ui/frame/frame-common.ts b/packages/core/ui/frame/frame-common.ts
index 94ffc0b1a3..c0b77cf8d5 100644
--- a/packages/core/ui/frame/frame-common.ts
+++ b/packages/core/ui/frame/frame-common.ts
@@ -266,8 +266,8 @@ export class FrameBase extends CustomLayoutView {
 	public _updateBackstack(entry: BackstackEntry, navigationType: NavigationType): void {
 		const isBack = navigationType === NavigationType.back;
 		const isReplace = navigationType === NavigationType.replace;
-		this.raiseCurrentPageNavigatedEvents(isBack);
 		const current = this._currentEntry;
+		this.raiseCurrentPageNavigatedEvents(isBack);
 
 		// Do nothing for Hot Module Replacement
 		if (isBack) {
@@ -303,10 +303,6 @@ export class FrameBase extends CustomLayoutView {
 	private raiseCurrentPageNavigatedEvents(isBack: boolean) {
 		const page = this.currentPage;
 		if (page) {
-			if (page.isLoaded) {
-				// Forward navigation does not remove page from frame so we raise unloaded manually.
-				page.callUnloaded();
-			}
 			page.onNavigatedFrom(isBack);
 		}
 	}
diff --git a/packages/core/ui/frame/frame-interfaces.ts b/packages/core/ui/frame/frame-interfaces.ts
index 522fe6c369..df2360fc0f 100644
--- a/packages/core/ui/frame/frame-interfaces.ts
+++ b/packages/core/ui/frame/frame-interfaces.ts
@@ -88,6 +88,7 @@ export interface AndroidActivityCallbacks {
 export interface AndroidFragmentCallbacks {
 	onHiddenChanged(fragment: any, hidden: boolean, superFunc: Function): void;
 	onCreateAnimator(fragment: any, transit: number, enter: boolean, nextAnim: number, superFunc: Function): any;
+	onCreateAnimation(fragment: any, transit: number, enter: boolean, nextAnim: number): any;
 	onCreate(fragment: any, savedInstanceState: any, superFunc: Function): void;
 	onCreateView(fragment: any, inflater: any, container: any, savedInstanceState: any, superFunc: Function): any;
 	onSaveInstanceState(fragment: any, outState: any, superFunc: Function): void;
diff --git a/packages/core/ui/frame/index.android.ts b/packages/core/ui/frame/index.android.ts
index 6275418550..e353e40dd8 100644
--- a/packages/core/ui/frame/index.android.ts
+++ b/packages/core/ui/frame/index.android.ts
@@ -19,6 +19,7 @@ import { Builder } from '../builder';
 import { CSSUtils } from '../../css/system-classes';
 import { Device } from '../../platform';
 import { profile } from '../../profiling';
+import { ExpandedEntry } from './fragment.transitions.android';
 import { android as androidApplication } from '../../application';
 import { setSuspended } from '../../application/application-common';
 
@@ -79,11 +80,11 @@ function getAttachListener(): android.view.View.OnAttachStateChangeListener {
 }
 
 export class Frame extends FrameBase {
-	public _originalBackground: any;
 	private _android: AndroidFrame;
 	private _containerViewId = -1;
 	private _tearDownPending = false;
 	private _attachedToWindow = false;
+	private _wasReset = false;
 	private _cachedTransitionState: TransitionState;
 	private _frameCreateTimeout: NodeJS.Timeout;
 
@@ -152,6 +153,7 @@ export class Frame extends FrameBase {
 		}
 
 		this._attachedToWindow = true;
+		this._wasReset = false;
 		this._processNextNavigationEntry();
 	}
 
@@ -166,7 +168,16 @@ export class Frame extends FrameBase {
 		// In this case call _navigateCore in order to recreate the current fragment.
 		// Don't call navigate because it will fire navigation events.
 		// As JS instances are alive it is already done for the current page.
-		if (!this.isLoaded || this._executingContext || !this._attachedToWindow) {
+		if (!this.isLoaded || this._executingContext) {
+			return;
+		}
+
+		// in case the activity is "reset" using resetRootView we must wait for
+		// the attachedToWindow event to make the first navigation or it will crash
+		// https://github.com/NativeScript/NativeScript/commit/9dd3e1a8076e5022e411f2f2eeba34aabc68d112
+		// though we should not do it on app "start"
+		// or it will create a "flash" to activity background color
+		if (this._wasReset && !this._attachedToWindow) {
 			return;
 		}
 
@@ -195,7 +206,9 @@ export class Frame extends FrameBase {
 			// NOTE: we are restoring the animation settings in Frame.setCurrent(...) as navigation completes asynchronously
 			const cachedTransitionState = getTransitionState(this._currentEntry);
 
-			if (cachedTransitionState) {
+			// we can end up here also after an activity recreate. In this case the entry fragment was destroyed
+			// and we also dont have cachedTransitionState. We still need to navigate again
+			if (cachedTransitionState || !entry.fragment) {
 				this._cachedTransitionState = cachedTransitionState;
 				this._currentEntry = null;
 				// NavigateCore will eventually call _processNextNavigationEntry again.
@@ -226,38 +239,14 @@ export class Frame extends FrameBase {
 
 	public _onRootViewReset(): void {
 		super._onRootViewReset();
-
+		// used to handle the "first" navigate differently on first run and on reset
+		this._wasReset = true;
 		// call this AFTER the super call to ensure descendants apply their rootview-reset logic first
 		// i.e. in a scenario with nested frames / frame with tabview let the descendandt cleanup the inner
 		// fragments first, and then cleanup the parent fragments
 		this.disposeCurrentFragment();
 	}
 
-	onLoaded(): void {
-		if (this._originalBackground) {
-			this.backgroundColor = null;
-			this.backgroundColor = this._originalBackground;
-			this._originalBackground = null;
-		}
-		this._frameCreateTimeout = 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();
-	}
-
 	onUnloaded() {
 		super.onUnloaded();
 		if (typeof this._frameCreateTimeout === 'number') {
@@ -389,8 +378,7 @@ export class Frame extends FrameBase {
 	// HACK: This @profile decorator creates a circular dependency
 	// HACK: because the function parameter type is evaluated with 'typeof'
 	@profile
-	public _navigateCore(newEntry: any) {
-		// should be (newEntry: BackstackEntry)
+	public _navigateCore(newEntry: BackstackEntry) {
 		super._navigateCore(newEntry);
 
 		// set frameId here so that we could use it in fragment.transitions
@@ -448,8 +436,23 @@ export class Frame extends FrameBase {
 			//transaction.setTransition(androidx.fragment.app.FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
 		}
 
-		transaction.replace(this.containerViewId, newFragment, newFragmentTag);
-		transaction.commitAllowingStateLoss();
+		if (this._currentEntry) {
+			// we only hide the fragment to fix some black blick issues with GLSurfaceView and GLTextureView
+			// it will be removed once the navigation is done
+			transaction.hide(this._currentEntry.fragment);
+		}
+		if (clearHistory || isReplace) {
+			// we need to ensure we dont listen for animations of
+			// in between fragments or they could break our transition end handling
+			// and set the wrong current entry
+			for (let index = 0; index < this.backStack.length; index++) {
+				_clearEntry(this.backStack[index]);
+			}
+			transaction.replace(this.containerViewId, newFragment, newFragmentTag);
+		} else {
+			transaction.add(this.containerViewId, newFragment, newFragmentTag);
+		}
+		transaction.commitNowAllowingStateLoss();
 	}
 
 	public _goBackCore(backstackEntry: BackstackEntry) {
@@ -458,7 +461,6 @@ export class Frame extends FrameBase {
 
 		const manager: androidx.fragment.app.FragmentManager = this._getFragmentManager();
 		const transaction = manager.beginTransaction();
-
 		if (!backstackEntry.fragment) {
 			// Happens on newer API levels. On older all fragments
 			// are recreated once activity is created.
@@ -470,16 +472,49 @@ export class Frame extends FrameBase {
 
 		_reverseTransitions(backstackEntry, this._currentEntry);
 
-		transaction.replace(this.containerViewId, backstackEntry.fragment, backstackEntry.fragmentTag);
+		const currentIndex = this.backStack.length;
+		const goBackToIndex = this.backStack.indexOf(backstackEntry);
+
+		// the order is important so that the last transition listener called be
+		// the one from the current entry we are going back from
+		for (let index = goBackToIndex + 1; index < currentIndex; index++) {
+			// we need to ensure we dont listen for animations of
+			// in between fragments or they could break our transition end handling
+			// and set the wrong current entry
+			_clearEntry(this.backStack[index]);
+			transaction.remove(this.backStack[index].fragment);
+		}
+		if (this._currentEntry !== backstackEntry) {
+			const entry = this._currentEntry as ExpandedEntry;
+			// if we are going back we need to store where we are backing to
+			// so that we can set the current entry
+			// it only needs to be done on the return transition
+			if (entry.returnTransitionListener) {
+				entry.returnTransitionListener.backEntry = backstackEntry;
+			}
+
+			// we only hide the fragment to fix some black blick issues with GLSurfaceView and GLTextureView
+			// it will be removed once the navigation is done
+			transaction.hide(this._currentEntry.fragment);
+
+			// let's show the previous fragment
+			transaction.show(backstackEntry.fragment);
+		}
 
-		transaction.commitAllowingStateLoss();
+		transaction.commitNowAllowingStateLoss();
 	}
 
 	public _removeEntry(removed: BackstackEntry): void {
 		super._removeEntry(removed);
-
 		if (removed.fragment) {
+			// we only did hide the fragment to fix some black blick issues with GLSurfaceView and GLTextureView
+			// so lets remove it
+			const manager: androidx.fragment.app.FragmentManager = this._getFragmentManager();
+			const transaction = manager.beginTransaction();
+			transaction.remove(removed.fragment);
+			// clear entry before commit because commit now will release the fragment right away
 			_clearEntry(removed);
+			transaction.commitNowAllowingStateLoss();
 		}
 
 		removed.fragment = null;
@@ -763,6 +798,12 @@ function findPageForFragment(fragment: androidx.fragment.app.Fragment, frame: Fr
 		entry = current;
 	} else if (executingContext && executingContext.entry && executingContext.entry.fragmentTag === fragmentTag) {
 		entry = executingContext.entry;
+	} else {
+		frame.backStack.forEach((e) => {
+			if (e && e.fragmentTag === fragmentTag) {
+				entry = e;
+			}
+		});
 	}
 
 	let page: Page;
@@ -843,15 +884,24 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
 	public onCreateAnimator(fragment: androidx.fragment.app.Fragment, transit: number, enter: boolean, nextAnim: number, superFunc: Function): android.animation.Animator {
 		let animator = null;
 		const entry = <any>this.entry;
+		if (Trace.isEnabled()) {
+			Trace.write(`${fragment}.onCreateAnimator(${transit},${enter}, ${nextAnim})`, Trace.categories.Animation);
+		}
 
 		// Return enterAnimator only when new (no current entry) nested transition.
 		if (enter && entry.isNestedDefaultTransition) {
 			animator = entry.enterAnimator;
 			entry.isNestedDefaultTransition = false;
 		}
-
 		return animator || superFunc.call(fragment, transit, enter, nextAnim);
 	}
+	@profile
+	public onCreateAnimation(fragment: androidx.fragment.app.Fragment, transit: number, enter: boolean, nextAnim: number, superFunc: Function): globalAndroid.view.animation.Animation {
+		if (Trace.isEnabled()) {
+			Trace.write(`${fragment}.onCreateAnimation(${transit},${enter}, ${nextAnim})`, Trace.categories.Animation);
+		}
+		return superFunc.call(fragment, transit, enter, nextAnim);
+	}
 
 	@profile
 	public onCreate(fragment: androidx.fragment.app.Fragment, savedInstanceState: android.os.Bundle, superFunc: Function): void {
@@ -958,25 +1008,10 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
 
 	@profile
 	public onDestroyView(fragment: org.nativescript.widgets.FragmentBase, superFunc: Function): void {
-		try {
-			if (Trace.isEnabled()) {
-				Trace.write(`${fragment}.onDestroyView()`, Trace.categories.NativeLifecycle);
-			}
-
-			const hasRemovingParent = fragment.getRemovingParentFragment();
-
-			if (hasRemovingParent) {
-				const nativeFrameView = this.frame.nativeViewProtected;
-				if (nativeFrameView) {
-					const bitmapDrawable = new android.graphics.drawable.BitmapDrawable(application.android.context.getResources(), this.backgroundBitmap);
-					this.frame._originalBackground = this.frame.backgroundColor || new Color('White');
-					nativeFrameView.setBackgroundDrawable(bitmapDrawable);
-					this.backgroundBitmap = null;
-				}
-			}
-		} finally {
-			superFunc.call(fragment);
+		if (Trace.isEnabled()) {
+			Trace.write(`${fragment}.onDestroyView()`, Trace.categories.NativeLifecycle);
 		}
+		superFunc.call(fragment);
 	}
 
 	@profile
@@ -999,49 +1034,15 @@ class FragmentCallbacksImplementation implements AndroidFragmentCallbacks {
 		// "IllegalStateException: Failure saving state: active fragment has cleared index: -1"
 		// in a specific mixed parent / nested frame navigation scenario
 		entry.fragment = null;
-
-		const page = entry.resolvedPage;
-		if (!page) {
-			Trace.error(`${fragment}.onDestroy: entry has no resolvedPage`);
-
-			return null;
-		}
 	}
 
 	@profile
 	public onPause(fragment: org.nativescript.widgets.FragmentBase, superFunc: Function): void {
-		try {
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			const hasRemovingParent = fragment.getRemovingParentFragment();
-
-			if (hasRemovingParent) {
-				this.backgroundBitmap = this.loadBitmapFromView(this.frame.nativeViewProtected);
-			}
-		} finally {
-			superFunc.call(fragment);
-		}
+		superFunc.call(fragment);
 	}
 
 	@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
-		// also, to be compatible with fragments 1.2.x we need this setTimeout as animations haven't run on onResume yet
-		const weakRef = new WeakRef(this);
-		setTimeout(() => {
-			const owner = weakRef.get();
-			if (!owner) {
-				return;
-			}
-			if (frame._executingContext && !(<any>owner.entry).isAnimationRunning) {
-				frame.setCurrent(owner.entry, frame._executingContext.navigationType);
-			}
-		}, 0);
-
 		superFunc.call(fragment);
 	}
 
diff --git a/packages/core/ui/frame/index.ios.ts b/packages/core/ui/frame/index.ios.ts
index f18636e6dd..1b47c8b9fb 100644
--- a/packages/core/ui/frame/index.ios.ts
+++ b/packages/core/ui/frame/index.ios.ts
@@ -249,7 +249,7 @@ export class Frame extends FrameBase {
 						if (page && page.actionBarHidden !== undefined) {
 							newValue = !page.actionBarHidden;
 						} else {
-							newValue = this.ios.controller.viewControllers.count > 1 || (page && page.actionBar && !page.actionBar._isEmpty());
+							newValue = this.ios.controller.viewControllers.count > 1 || (page && page.hasActionBar && !page.actionBar._isEmpty());
 						}
 
 						newValue = !!newValue;
diff --git a/packages/core/ui/html-view/html-view-common.ts b/packages/core/ui/html-view/html-view-common.ts
index 8b95e922f8..c7881f790a 100644
--- a/packages/core/ui/html-view/html-view-common.ts
+++ b/packages/core/ui/html-view/html-view-common.ts
@@ -2,6 +2,7 @@
 import { View, CSSType } from '../core/view';
 import { Property } from '../core/properties';
 import { Style } from '../styling/style';
+import { colorConverter } from '../styling/style-properties';
 import { Color } from '../../color';
 import { HtmlView as HtmlViewDefinition } from '.';
 
@@ -24,6 +25,6 @@ export const linkColorProperty = new CssProperty<Style, Color>({
 	name: 'linkColor',
 	cssName: 'link-color',
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 linkColorProperty.register(Style);
diff --git a/packages/core/ui/image/image-common.ts b/packages/core/ui/image/image-common.ts
index b982c06823..0a323919c2 100644
--- a/packages/core/ui/image/image-common.ts
+++ b/packages/core/ui/image/image-common.ts
@@ -7,7 +7,7 @@ import { ImageSource } from '../../image-source';
 import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX } from '../../utils';
 import { Color } from '../../color';
 import { Style } from '../styling/style';
-import { Length } from '../styling/style-properties';
+import { Length, colorConverter } from '../styling/style-properties';
 import { Property, InheritedCssProperty } from '../core/properties';
 import { Trace } from '../../trace';
 
@@ -161,7 +161,7 @@ export const tintColorProperty = new InheritedCssProperty<Style, Color>({
 	name: 'tintColor',
 	cssName: 'tint-color',
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 tintColorProperty.register(Style);
 
diff --git a/packages/core/ui/layouts/layout-base.android.ts b/packages/core/ui/layouts/layout-base.android.ts
index 9fa969fe86..4a9699737f 100644
--- a/packages/core/ui/layouts/layout-base.android.ts
+++ b/packages/core/ui/layouts/layout-base.android.ts
@@ -9,18 +9,9 @@ export class LayoutBase extends LayoutBaseCommon {
 		return true;
 	}
 	[clipToBoundsProperty.setNative](value: boolean) {
-		// TODO: Use ClipRectangle if API > 16!
-
-		// We can't implement this without calling setClipChildren(false) on every ancestor up in the visual tree,
-		// which will kill performance. It will also lead to unwanted side effects such as other totally unrelated
-		// views being affected by setting the parents' setClipChildren to false.
-		// The problem in Android is that a ViewGroup either clips ALL of its children or it does not. Unlike iOS, the clipping
-		// cannot be controlled on a per view basis. So clipToBounds=false will have to be somehow achieved with stacking different
-		// views on top of one another in an AbsoluteLayout or GridLayout. There is always a workaround when playing with layouts.
-		//
-		// The following article explains this in detail:
-		// http://stackoverflow.com/questions/25044085/when-drawing-outside-the-view-clip-bounds-with-android-how-do-i-prevent-underli
-		console.warn(`clipToBounds with value false is not supported on Android. You can use this.android.getParent().setClipChildren(false) as an alternative`);
+		if ((<any>this.nativeViewProtected).setClipToBounds) {
+			(<any>this.nativeViewProtected).setClipToBounds(value);
+		}
 	}
 
 	[isPassThroughParentEnabledProperty.setNative](value: boolean) {
diff --git a/packages/core/ui/list-view/list-view-common.ts b/packages/core/ui/list-view/list-view-common.ts
index 25180a78f5..c225f6b40c 100644
--- a/packages/core/ui/list-view/list-view-common.ts
+++ b/packages/core/ui/list-view/list-view-common.ts
@@ -1,7 +1,7 @@
 import { ListView as ListViewDefinition, ItemsSource, ItemEventData, TemplatedItemsView } from '.';
 import { View, ContainerView, Template, KeyedTemplate, CSSType } from '../core/view';
 import { Property, CoercibleProperty, CssProperty } from '../core/properties';
-import { Length } from '../styling/style-properties';
+import { Length, colorConverter } from '../styling/style-properties';
 import { Style } from '../styling/style';
 import { Color } from '../../color';
 import { Builder } from '../builder';
@@ -239,6 +239,6 @@ export const separatorColorProperty = new CssProperty<Style, Color>({
 	name: 'separatorColor',
 	cssName: 'separator-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 separatorColorProperty.register(Style);
diff --git a/packages/core/ui/page/index.android.ts b/packages/core/ui/page/index.android.ts
index 59a0d064d6..e4a0436587 100644
--- a/packages/core/ui/page/index.android.ts
+++ b/packages/core/ui/page/index.android.ts
@@ -150,7 +150,8 @@ export class Page extends PageBase {
 
 			return;
 		}
-
-		this.actionBar.accessibilityScreenChanged();
+		if (this.hasActionBar) {
+			this.actionBar.accessibilityScreenChanged();
+		}
 	}
 }
diff --git a/packages/core/ui/page/index.ios.ts b/packages/core/ui/page/index.ios.ts
index fcc20fb74d..fcc441a17b 100644
--- a/packages/core/ui/page/index.ios.ts
+++ b/packages/core/ui/page/index.ios.ts
@@ -407,7 +407,7 @@ export class Page extends PageBase {
 	updateWithWillAppear(animated: boolean) {
 		// this method is important because it allows plugins to react to modal page close
 		// for example allowing updating status bar background color
-	  if (this.hasActionBar) {
+		if (this.hasActionBar) {
 			this.actionBar.update();
 		}
 		this.updateStatusBar();
@@ -591,7 +591,7 @@ export class Page extends PageBase {
 			return;
 		}
 
-		if (this.actionBar.accessibilityLabel || this.actionBar.title) {
+		if (this.hasActionBar && (this.actionBar.accessibilityLabel || this.actionBar.title)) {
 			UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, this.actionBar.nativeView);
 
 			return;
diff --git a/packages/core/ui/page/page-common.ts b/packages/core/ui/page/page-common.ts
index 6bfb4b122b..3a8c08a87a 100644
--- a/packages/core/ui/page/page-common.ts
+++ b/packages/core/ui/page/page-common.ts
@@ -3,6 +3,7 @@ import { ContentView } from '../content-view';
 import { View, CSSType, ShownModallyData } from '../core/view';
 import { booleanConverter } from '../core/view-base';
 import { Property, CssProperty } from '../core/properties';
+import { colorConverter } from '../styling/style-properties';
 import { Style } from '../styling/style';
 import { Color } from '../../color';
 import { EventData } from '../../data/observable';
@@ -82,7 +83,7 @@ export class PageBase extends ContentView {
 	}
 
 	public _addChildFromBuilder(name: string, value: any) {
-		if (value instanceof ActionBar) {
+		if (value.constructor.name === 'ActionBar') {
 			this.actionBar = value;
 		} else {
 			super._addChildFromBuilder(name, value);
@@ -223,6 +224,6 @@ export const androidStatusBarBackgroundProperty = new CssProperty<Style, Color>(
 	name: 'androidStatusBarBackground',
 	cssName: 'android-status-bar-background',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 androidStatusBarBackgroundProperty.register(Style);
diff --git a/packages/core/ui/scroll-view/index.android.ts b/packages/core/ui/scroll-view/index.android.ts
index 225b767f29..e081a56165 100644
--- a/packages/core/ui/scroll-view/index.android.ts
+++ b/packages/core/ui/scroll-view/index.android.ts
@@ -9,6 +9,7 @@ export class ScrollView extends ScrollViewBase {
 	nativeViewProtected: org.nativescript.widgets.VerticalScrollView | org.nativescript.widgets.HorizontalScrollView;
 	private _androidViewId = -1;
 	private handler: android.view.ViewTreeObserver.OnScrollChangedListener;
+	private scrollChangeHandler: androidx.core.widget.NestedScrollView.OnScrollChangeListener;
 
 	get horizontalOffset(): number {
 		const nativeView = this.nativeViewProtected;
@@ -99,7 +100,13 @@ export class ScrollView extends ScrollViewBase {
 	}
 
 	public createNativeView() {
-		return this.orientation === 'horizontal' ? new org.nativescript.widgets.HorizontalScrollView(this._context) : new org.nativescript.widgets.VerticalScrollView(this._context);
+		if (this.orientation === 'horizontal') {
+			return new org.nativescript.widgets.HorizontalScrollView(this._context);
+		} else {
+			const view = new org.nativescript.widgets.VerticalScrollView(this._context);
+			view.setVerticalScrollBarEnabled(true);
+			return view;
+		}
 	}
 
 	public initNativeView(): void {
@@ -123,16 +130,32 @@ export class ScrollView extends ScrollViewBase {
 
 	protected attachNative() {
 		const that = new WeakRef(this);
-		this.handler = new android.view.ViewTreeObserver.OnScrollChangedListener({
-			onScrollChanged: function () {
-				const owner: ScrollView = that.get();
-				if (owner) {
-					owner._onScrollChanged();
-				}
-			},
-		});
-
-		this.nativeViewProtected.getViewTreeObserver().addOnScrollChangedListener(this.handler);
+		if (this.orientation === 'vertical') {
+			this.scrollChangeHandler = new androidx.core.widget.NestedScrollView.OnScrollChangeListener({
+				onScrollChange(view, scrollX, scrollY) {
+					const owner: ScrollView = that.get();
+					if (owner) {
+						owner.notify({
+							object: owner,
+							eventName: ScrollView.scrollEvent,
+							scrollX: layout.toDeviceIndependentPixels(scrollX),
+							scrollY: layout.toDeviceIndependentPixels(scrollY),
+						});
+					}
+				},
+			});
+			this.nativeView.setOnScrollChangeListener(this.scrollChangeHandler);
+		} else {
+			this.handler = new android.view.ViewTreeObserver.OnScrollChangedListener({
+				onScrollChanged: function () {
+					const owner: ScrollView = that.get();
+					if (owner) {
+						owner._onScrollChanged();
+					}
+				},
+			});
+			this.nativeViewProtected.getViewTreeObserver().addOnScrollChangedListener(this.handler);
+		}
 	}
 
 	private _lastScrollX = -1;
@@ -158,8 +181,14 @@ export class ScrollView extends ScrollViewBase {
 	}
 
 	protected dettachNative() {
-		this.nativeViewProtected?.getViewTreeObserver().removeOnScrollChangedListener(this.handler);
-		this.handler = null;
+		if (this.handler) {
+			this.nativeViewProtected.getViewTreeObserver().removeOnScrollChangedListener(this.handler);
+			this.handler = null;
+		}
+		if (this.scrollChangeHandler) {
+			this.nativeView.setOnScrollChangeListener(null);
+			this.scrollChangeHandler = null;
+		}
 	}
 }
 
diff --git a/packages/core/ui/scroll-view/index.ios.ts b/packages/core/ui/scroll-view/index.ios.ts
index 2b7297eb9d..cda1a59f88 100644
--- a/packages/core/ui/scroll-view/index.ios.ts
+++ b/packages/core/ui/scroll-view/index.ios.ts
@@ -165,7 +165,7 @@ export class ScrollView extends ScrollViewBase {
 
 		const nativeView = this.nativeViewProtected;
 
-		if (majorVersion > 10) {
+		if (nativeView && majorVersion > 10) {
 			// Disable automatic adjustment of scroll view insets
 			// Consider exposing this as property with all 4 modes
 			// https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior
@@ -182,7 +182,10 @@ export class ScrollView extends ScrollViewBase {
 			height = Math.max(this._contentMeasuredHeight, height);
 		}
 
-		nativeView.contentSize = CGSizeMake(layout.toDeviceIndependentPixels(scrollWidth), layout.toDeviceIndependentPixels(scrollHeight));
+		if (nativeView) {
+			nativeView.contentSize = CGSizeMake(layout.toDeviceIndependentPixels(scrollWidth), layout.toDeviceIndependentPixels(scrollHeight));
+		}
+
 		View.layoutChild(this, this.layoutView, insets.left, insets.top, insets.left + width, insets.top + height);
 	}
 
diff --git a/packages/core/ui/search-bar/search-bar-common.ts b/packages/core/ui/search-bar/search-bar-common.ts
index 71574d0276..462143d4f9 100644
--- a/packages/core/ui/search-bar/search-bar-common.ts
+++ b/packages/core/ui/search-bar/search-bar-common.ts
@@ -1,6 +1,7 @@
 import { SearchBar as SearchBarDefinition } from '.';
 import { View, CSSType } from '../core/view';
 import { Property } from '../core/properties';
+import { colorConverter } from '../styling/style-properties';
 import { Color } from '../../color';
 
 @CSSType('SearchBar')
@@ -33,13 +34,13 @@ hintProperty.register(SearchBarBase);
 export const textFieldHintColorProperty = new Property<SearchBarBase, Color>({
 	name: 'textFieldHintColor',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 textFieldHintColorProperty.register(SearchBarBase);
 
 export const textFieldBackgroundColorProperty = new Property<SearchBarBase, Color>({
 	name: 'textFieldBackgroundColor',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 textFieldBackgroundColorProperty.register(SearchBarBase);
diff --git a/packages/core/ui/segmented-bar/segmented-bar-common.ts b/packages/core/ui/segmented-bar/segmented-bar-common.ts
index 17026a3dd3..3b9d9e72ae 100644
--- a/packages/core/ui/segmented-bar/segmented-bar-common.ts
+++ b/packages/core/ui/segmented-bar/segmented-bar-common.ts
@@ -4,6 +4,7 @@ import { ViewBase } from '../core/view-base';
 import { Property, CoercibleProperty, InheritedCssProperty } from '../core/properties';
 import { Color } from '../../color';
 import { Style } from '../styling/style';
+import { colorConverter } from '../styling/style-properties';
 import { EventData } from '../../data/observable';
 
 @CSSType('SegmentedBarItem')
@@ -141,6 +142,6 @@ export const selectedBackgroundColorProperty = new InheritedCssProperty<Style, C
 	name: 'selectedBackgroundColor',
 	cssName: 'selected-background-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 selectedBackgroundColorProperty.register(Style);
diff --git a/packages/core/ui/slider/slider-common.ts b/packages/core/ui/slider/slider-common.ts
index 507ddcbce5..0d4605bf6a 100644
--- a/packages/core/ui/slider/slider-common.ts
+++ b/packages/core/ui/slider/slider-common.ts
@@ -20,9 +20,6 @@ export class SliderBase extends View implements SliderDefinition {
 	set accessibilityStep(value: number) {
 		this.style.accessibilityStep = value;
 	}
-
-	accessible = true;
-	accessibilityRole = AccessibilityRole.Adjustable;
 }
 
 SliderBase.prototype.recycleNativeView = 'auto';
diff --git a/packages/core/ui/styling/css-animation-parser.ts b/packages/core/ui/styling/css-animation-parser.ts
index 6e540171e7..ec02992b95 100644
--- a/packages/core/ui/styling/css-animation-parser.ts
+++ b/packages/core/ui/styling/css-animation-parser.ts
@@ -125,9 +125,9 @@ function keyframeAnimationsFromCSSProperty(value: any, animations: KeyframeAnima
 export function parseKeyframeDeclarations(unparsedKeyframeDeclarations: KeyframeDeclaration[]): KeyframeDeclaration[] {
 	const declarations = unparsedKeyframeDeclarations.reduce((declarations, { property: unparsedProperty, value: unparsedValue }) => {
 		const property = CssAnimationProperty._getByCssName(unparsedProperty);
-
-		if (typeof unparsedProperty === 'string' && property && property._valueConverter) {
-			declarations[property.name] = property._valueConverter(<string>unparsedValue);
+		const valueConverter = property?.valueConverter;
+		if (typeof unparsedProperty === 'string' && property && valueConverter) {
+			declarations[property.name] = valueConverter(<string>unparsedValue);
 		} else if (typeof unparsedValue === 'string' && unparsedProperty === 'transform') {
 			const transformations = transformConverter(unparsedValue);
 			Object.assign(declarations, transformations);
diff --git a/packages/core/ui/styling/css-selector/index.ts b/packages/core/ui/styling/css-selector/index.ts
index 704fcf2663..41139d971c 100644
--- a/packages/core/ui/styling/css-selector/index.ts
+++ b/packages/core/ui/styling/css-selector/index.ts
@@ -3,7 +3,7 @@ import { isCssVariable } from '../../core/properties';
 import { isNullOrUndefined } from '../../../utils/types';
 
 import * as cssParser from '../../../css';
-import { Combinator as ICombinator , SimpleSelectorSequence as ISimpleSelectorSequence, Selector as ISelector, SimpleSelector as ISimpleSelector, parseSelector} from '../../../css/parser';
+import { Combinator as ICombinator, SimpleSelectorSequence as ISimpleSelectorSequence, Selector as ISelector, SimpleSelector as ISimpleSelector, parseSelector } from '../../../css/parser';
 
 /**
  * An interface describing the shape of a type on which the selectors may apply.
diff --git a/packages/core/ui/styling/style-properties.ts b/packages/core/ui/styling/style-properties.ts
index f4704b64a4..a23bb0681e 100644
--- a/packages/core/ui/styling/style-properties.ts
+++ b/packages/core/ui/styling/style-properties.ts
@@ -1,5 +1,5 @@
 // Types
-import { unsetValue, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty, makeValidator, makeParser } from '../core/properties';
+import { unsetValue, CssProperty, CssAnimationProperty, ShorthandProperty, InheritedCssProperty } from '../core/properties';
 import { Style } from '../styling/style';
 import { Transformation, TransformationValue, TransformFunctionsInfo } from '../animation';
 
@@ -91,6 +91,13 @@ function toDevicePixelsCommon(length: CoreTypes.PercentLengthType, auto: number
 	}
 }
 
+export function colorConverter(v: string | Color): Color {
+	if (!v || v instanceof Color) {
+		return v as Color;
+	}
+	return new Color(v);
+}
+
 export namespace PercentLength {
 	export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.PercentLengthType {
 		if (fromValue == 'auto') {
@@ -190,7 +197,7 @@ export const minWidthProperty = new CssProperty<Style, CoreTypes.LengthType>({
 	name: 'minWidth',
 	cssName: 'min-width',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -208,7 +215,7 @@ export const minHeightProperty = new CssProperty<Style, CoreTypes.LengthType>({
 	name: 'minHeight',
 	cssName: 'min-height',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -226,17 +233,9 @@ export const widthProperty = new CssAnimationProperty<Style, CoreTypes.PercentLe
 	name: 'width',
 	cssName: 'width',
 	defaultValue: 'auto',
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
-	// TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
-	//       on the animation property, so fake it here. x_x
-	valueChanged: (target, oldValue, newValue) => {
-		if (global.isIOS) {
-			const view = target.viewRef.get();
-			if (view) {
-				view.requestLayout();
-			}
-		}
-	},
+
 	valueConverter: PercentLength.parse,
 });
 widthProperty.register(Style);
@@ -246,16 +245,7 @@ export const heightProperty = new CssAnimationProperty<Style, CoreTypes.PercentL
 	cssName: 'height',
 	defaultValue: 'auto',
 	equalityComparer: Length.equals,
-	// TODO: CSSAnimationProperty was needed for keyframe (copying other impls), but `affectsLayout` does not exist
-	//       on the animation property, so fake it here. -_-
-	valueChanged: (target, oldValue, newValue) => {
-		if (global.isIOS) {
-			const view = target.viewRef.get();
-			if (view) {
-				view.requestLayout();
-			}
-		}
-	},
+	affectsLayout: __IOS__,
 	valueConverter: PercentLength.parse,
 });
 heightProperty.register(Style);
@@ -278,7 +268,7 @@ export const marginLeftProperty = new CssProperty<Style, CoreTypes.PercentLength
 	name: 'marginLeft',
 	cssName: 'margin-left',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueConverter: PercentLength.parse,
 });
@@ -288,7 +278,7 @@ export const marginRightProperty = new CssProperty<Style, CoreTypes.PercentLengt
 	name: 'marginRight',
 	cssName: 'margin-right',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueConverter: PercentLength.parse,
 });
@@ -298,7 +288,7 @@ export const marginTopProperty = new CssProperty<Style, CoreTypes.PercentLengthT
 	name: 'marginTop',
 	cssName: 'margin-top',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueConverter: PercentLength.parse,
 });
@@ -308,7 +298,7 @@ export const marginBottomProperty = new CssProperty<Style, CoreTypes.PercentLeng
 	name: 'marginBottom',
 	cssName: 'margin-bottom',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueConverter: PercentLength.parse,
 });
@@ -332,7 +322,7 @@ export const paddingLeftProperty = new CssProperty<Style, CoreTypes.LengthType>(
 	name: 'paddingLeft',
 	cssName: 'padding-left',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -350,7 +340,7 @@ export const paddingRightProperty = new CssProperty<Style, CoreTypes.LengthType>
 	name: 'paddingRight',
 	cssName: 'padding-right',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -368,7 +358,7 @@ export const paddingTopProperty = new CssProperty<Style, CoreTypes.LengthType>({
 	name: 'paddingTop',
 	cssName: 'padding-top',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -386,7 +376,7 @@ export const paddingBottomProperty = new CssProperty<Style, CoreTypes.LengthType
 	name: 'paddingBottom',
 	cssName: 'padding-bottom',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
@@ -404,7 +394,7 @@ export const horizontalAlignmentProperty = new CssProperty<Style, CoreTypes.Hori
 	name: 'horizontalAlignment',
 	cssName: 'horizontal-align',
 	defaultValue: CoreTypes.HorizontalAlignment.stretch,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueConverter: CoreTypes.HorizontalAlignment.parse,
 });
 horizontalAlignmentProperty.register(Style);
@@ -413,7 +403,7 @@ export const verticalAlignmentProperty = new CssProperty<Style, CoreTypes.Vertic
 	name: 'verticalAlignment',
 	cssName: 'vertical-align',
 	defaultValue: CoreTypes.VerticalAlignmentText.stretch,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueConverter: CoreTypes.VerticalAlignmentText.parse,
 });
 verticalAlignmentProperty.register(Style);
@@ -803,7 +793,7 @@ export const backgroundColorProperty = new CssAnimationProperty<Style, Color>({
 		target.backgroundInternal = target.backgroundInternal.withColor(newValue);
 	},
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 backgroundColorProperty.register(Style);
 
@@ -960,7 +950,7 @@ export const borderTopColorProperty = new CssProperty<Style, Color>({
 		target.backgroundInternal = target.backgroundInternal.withBorderTopColor(newValue);
 	},
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 borderTopColorProperty.register(Style);
 
@@ -971,7 +961,7 @@ export const borderRightColorProperty = new CssProperty<Style, Color>({
 		target.backgroundInternal = target.backgroundInternal.withBorderRightColor(newValue);
 	},
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 borderRightColorProperty.register(Style);
 
@@ -982,7 +972,7 @@ export const borderBottomColorProperty = new CssProperty<Style, Color>({
 		target.backgroundInternal = target.backgroundInternal.withBorderBottomColor(newValue);
 	},
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 borderBottomColorProperty.register(Style);
 
@@ -993,7 +983,7 @@ export const borderLeftColorProperty = new CssProperty<Style, Color>({
 		target.backgroundInternal = target.backgroundInternal.withBorderLeftColor(newValue);
 	},
 	equalityComparer: Color.equals,
-	valueConverter: (value) => new Color(value),
+	valueConverter: colorConverter,
 });
 borderLeftColorProperty.register(Style);
 
@@ -1034,12 +1024,12 @@ export const borderTopWidthProperty = new CssProperty<Style, CoreTypes.LengthTyp
 	name: 'borderTopWidth',
 	cssName: 'border-top-width',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-top-width should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 
 		const view = target.viewRef.get();
@@ -1058,12 +1048,12 @@ export const borderRightWidthProperty = new CssProperty<Style, CoreTypes.LengthT
 	name: 'borderRightWidth',
 	cssName: 'border-right-width',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-right-width should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 
 		const view = target.viewRef.get();
@@ -1082,12 +1072,12 @@ export const borderBottomWidthProperty = new CssProperty<Style, CoreTypes.Length
 	name: 'borderBottomWidth',
 	cssName: 'border-bottom-width',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-bottom-width should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 
 		const view = target.viewRef.get();
@@ -1106,12 +1096,12 @@ export const borderLeftWidthProperty = new CssProperty<Style, CoreTypes.LengthTy
 	name: 'borderLeftWidth',
 	cssName: 'border-left-width',
 	defaultValue: zeroLength,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	equalityComparer: Length.equals,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-left-width should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 
 		const view = target.viewRef.get();
@@ -1163,11 +1153,11 @@ export const borderTopLeftRadiusProperty = new CssProperty<Style, CoreTypes.Leng
 	name: 'borderTopLeftRadius',
 	cssName: 'border-top-left-radius',
 	defaultValue: 0,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-top-left-radius should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 		target.backgroundInternal = target.backgroundInternal.withBorderTopLeftRadius(value);
 	},
@@ -1179,11 +1169,11 @@ export const borderTopRightRadiusProperty = new CssProperty<Style, CoreTypes.Len
 	name: 'borderTopRightRadius',
 	cssName: 'border-top-right-radius',
 	defaultValue: 0,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-top-right-radius should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 		target.backgroundInternal = target.backgroundInternal.withBorderTopRightRadius(value);
 	},
@@ -1195,11 +1185,11 @@ export const borderBottomRightRadiusProperty = new CssProperty<Style, CoreTypes.
 	name: 'borderBottomRightRadius',
 	cssName: 'border-bottom-right-radius',
 	defaultValue: 0,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-bottom-right-radius should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 		target.backgroundInternal = target.backgroundInternal.withBorderBottomRightRadius(value);
 	},
@@ -1211,11 +1201,11 @@ export const borderBottomLeftRadiusProperty = new CssProperty<Style, CoreTypes.L
 	name: 'borderBottomLeftRadius',
 	cssName: 'border-bottom-left-radius',
 	defaultValue: 0,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
-		const value = Length.toDevicePixels(newValue, 0);
+		let value = Length.toDevicePixels(newValue, 0);
 		if (!isNonNegativeFiniteNumber(value)) {
-			throw new Error(`border-bottom-left-radius should be Non-Negative Finite number. Value: ${value}`);
+			value = 0;
 		}
 		target.backgroundInternal = target.backgroundInternal.withBorderBottomLeftRadius(value);
 	},
@@ -1299,7 +1289,7 @@ export const colorProperty = new InheritedCssProperty<Style, Color>({
 	name: 'color',
 	cssName: 'color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 colorProperty.register(Style);
 
@@ -1312,7 +1302,7 @@ fontInternalProperty.register(Style);
 export const fontFamilyProperty = new InheritedCssProperty<Style, string>({
 	name: 'fontFamily',
 	cssName: 'font-family',
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
 		const currentFont = target.fontInternal || Font.default;
 		if (currentFont.fontFamily !== newValue) {
@@ -1326,9 +1316,9 @@ fontFamilyProperty.register(Style);
 export const fontScaleProperty = new InheritedCssProperty<Style, number>({
 	name: '_fontScale',
 	cssName: '_fontScale',
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
-		if (global.isIOS) {
+		if (__IOS__) {
 			if (target.viewRef['handleFontSize'] === true) {
 				return;
 			}
@@ -1347,7 +1337,7 @@ fontScaleProperty.register(Style);
 export const fontSizeProperty = new InheritedCssProperty<Style, number>({
 	name: 'fontSize',
 	cssName: 'font-size',
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueChanged: (target, oldValue, newValue) => {
 		if (target.viewRef['handleFontSize'] === true) {
 			return;
@@ -1365,7 +1355,7 @@ fontSizeProperty.register(Style);
 export const fontStyleProperty = new InheritedCssProperty<Style, FontStyle>({
 	name: 'fontStyle',
 	cssName: 'font-style',
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	defaultValue: FontStyle.NORMAL,
 	valueConverter: FontStyle.parse,
 	valueChanged: (target, oldValue, newValue) => {
@@ -1381,7 +1371,7 @@ fontStyleProperty.register(Style);
 export const fontWeightProperty = new InheritedCssProperty<Style, FontWeight>({
 	name: 'fontWeight',
 	cssName: 'font-weight',
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	defaultValue: FontWeight.NORMAL,
 	valueConverter: FontWeight.parse,
 	valueChanged: (target, oldValue, newValue) => {
@@ -1427,7 +1417,7 @@ export const visibilityProperty = new CssProperty<Style, CoreTypes.VisibilityTyp
 	name: 'visibility',
 	cssName: 'visibility',
 	defaultValue: CoreTypes.Visibility.visible,
-	affectsLayout: global.isIOS,
+	affectsLayout: __IOS__,
 	valueConverter: CoreTypes.Visibility.parse,
 	valueChanged: (target, oldValue, newValue) => {
 		const view = target.viewRef.get();
diff --git a/packages/core/ui/styling/style-scope.ts b/packages/core/ui/styling/style-scope.ts
index 4ccb2228b3..02029d4611 100644
--- a/packages/core/ui/styling/style-scope.ts
+++ b/packages/core/ui/styling/style-scope.ts
@@ -1,7 +1,7 @@
 import { Keyframes } from '../animation/keyframe-animation';
 import { ViewBase } from '../core/view-base';
 import { View } from '../core/view';
-import { unsetValue, _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
+import { CssAnimationProperty, unsetValue, _evaluateCssVariableExpression, _evaluateCssCalcExpression, isCssVariable, isCssVariableExpression, isCssCalcExpression } from '../core/properties';
 import { SyntaxTree, Keyframes as KeyframesDefinition, parse as parseCss, Node as CssNode } from '../../css';
 
 import { RuleSet, SelectorsMap, SelectorCore, SelectorsMatch, ChangeMap, fromAstNodes, Node } from './css-selector';
@@ -447,6 +447,7 @@ export class CssState {
 		return this.viewRef.get()._styleScope.getSelectorsVersion() === this._appliedSelectorsVersion;
 	}
 
+	@profile
 	public onLoaded(): void {
 		if (this._matchInvalid) {
 			this.updateMatch();
@@ -536,15 +537,9 @@ export class CssState {
 
 		const view = this.viewRef.get();
 		if (view) {
-			view.style['keyframe:rotate'] = unsetValue;
-			view.style['keyframe:rotateX'] = unsetValue;
-			view.style['keyframe:rotateY'] = unsetValue;
-			view.style['keyframe:scaleX'] = unsetValue;
-			view.style['keyframe:scaleY'] = unsetValue;
-			view.style['keyframe:translateX'] = unsetValue;
-			view.style['keyframe:translateY'] = unsetValue;
-			view.style['keyframe:backgroundColor'] = unsetValue;
-			view.style['keyframe:opacity'] = unsetValue;
+			Object.values(CssAnimationProperty.properties).forEach((property) => {
+				view.style[property.keyframe] = unsetValue;
+			});
 		} else {
 			Trace.write(`KeyframeAnimations cannot be stopped because ".viewRef" is cleared`, Trace.categories.Animation, Trace.messageType.warn);
 		}
diff --git a/packages/core/ui/switch/switch-common.ts b/packages/core/ui/switch/switch-common.ts
index 3fc1c7af8c..f27fb8c52d 100644
--- a/packages/core/ui/switch/switch-common.ts
+++ b/packages/core/ui/switch/switch-common.ts
@@ -3,6 +3,7 @@ import { View, CSSType } from '../core/view';
 import { booleanConverter } from '../core/view-base';
 import { Property } from '../core/properties';
 import { Switch as SwitchDefinition } from '.';
+import { colorConverter } from '../styling/style-properties';
 
 @CSSType('Switch')
 export class SwitchBase extends View implements SwitchDefinition {
@@ -37,6 +38,6 @@ checkedProperty.register(SwitchBase);
 export const offBackgroundColorProperty = new Property<SwitchBase, Color>({
 	name: 'offBackgroundColor',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 offBackgroundColorProperty.register(SwitchBase);
diff --git a/packages/core/ui/tab-view/index.android.ts b/packages/core/ui/tab-view/index.android.ts
index 9c012d760a..5f47defc68 100644
--- a/packages/core/ui/tab-view/index.android.ts
+++ b/packages/core/ui/tab-view/index.android.ts
@@ -83,49 +83,6 @@ function initializeNativeClasses() {
 
 			return tabItem.view.nativeViewProtected;
 		}
-
-		public onDestroyView() {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				const bitmapDrawable = new android.graphics.drawable.BitmapDrawable(appResources, this.backgroundBitmap);
-				this.owner._originalBackground = this.owner.backgroundColor || new Color('White');
-				this.owner.nativeViewProtected.setBackground(bitmapDrawable);
-				this.backgroundBitmap = null;
-			}
-
-			super.onDestroyView();
-		}
-
-		public onPause(): void {
-			const hasRemovingParent = this.getRemovingParentFragment();
-
-			// Get view as bitmap and set it as background. This is workaround for the disapearing nested fragments.
-			// TODO: Consider removing it when update to androidx.fragment:1.2.0
-			if (hasRemovingParent && this.owner.selectedIndex === this.index) {
-				this.backgroundBitmap = this.loadBitmapFromView(this.owner.nativeViewProtected);
-			}
-
-			super.onPause();
-		}
-
-		private loadBitmapFromView(view: android.view.View): android.graphics.Bitmap {
-			// Another way to get view bitmap. Test performance vs setDrawingCacheEnabled
-			// const width = view.getWidth();
-			// const height = view.getHeight();
-			// const bitmap = android.graphics.Bitmap.createBitmap(width, height, android.graphics.Bitmap.Config.ARGB_8888);
-			// const canvas = new android.graphics.Canvas(bitmap);
-			// view.layout(0, 0, width, height);
-			// view.draw(canvas);
-
-			view.setDrawingCacheEnabled(true);
-			const bitmap = android.graphics.Bitmap.createBitmap(view.getDrawingCache());
-			view.setDrawingCacheEnabled(false);
-
-			return bitmap;
-		}
 	}
 
 	const POSITION_UNCHANGED = -1;
@@ -449,7 +406,6 @@ export class TabView extends TabViewBase {
 	private _viewPager: androidx.viewpager.widget.ViewPager;
 	private _pagerAdapter: androidx.viewpager.widget.PagerAdapter;
 	private _androidViewId = -1;
-	public _originalBackground: any;
 
 	constructor() {
 		super();
@@ -590,20 +546,14 @@ export class TabView extends TabViewBase {
 
 	public onLoaded(): void {
 		super.onLoaded();
-
-		if (this._originalBackground) {
-			this.backgroundColor = null;
-			this.backgroundColor = this._originalBackground;
-			this._originalBackground = null;
-		}
-
 		this.setAdapterItems(this.items);
 	}
 
 	public onUnloaded(): void {
-		super.onUnloaded();
-
+		// clear fragments before calling super to ensure the fragmentManager is the
+		// same as the one used during item instantiation
 		this.setAdapterItems(null);
+		super.onUnloaded();
 	}
 
 	public disposeNativeView() {
diff --git a/packages/core/ui/tab-view/tab-view-common.ts b/packages/core/ui/tab-view/tab-view-common.ts
index f2c880ffb3..5bc4d2f5f7 100644
--- a/packages/core/ui/tab-view/tab-view-common.ts
+++ b/packages/core/ui/tab-view/tab-view-common.ts
@@ -2,6 +2,7 @@ import { TabView as TabViewDefinition, TabViewItem as TabViewItemDefinition, Sel
 import { View, AddArrayFromBuilder, AddChildFromBuilder, CSSType } from '../core/view';
 import { ViewBase, booleanConverter } from '../core/view-base';
 import { Style } from '../styling/style';
+import { colorConverter } from '../styling/style-properties';
 import { EventData } from '../../data/observable';
 import { Color } from '../../color';
 import { Property, CssProperty, CoercibleProperty } from '../core/properties';
@@ -283,7 +284,7 @@ export const tabTextColorProperty = new CssProperty<Style, Color>({
 	name: 'tabTextColor',
 	cssName: 'tab-text-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 tabTextColorProperty.register(Style);
 
@@ -291,7 +292,7 @@ export const tabBackgroundColorProperty = new CssProperty<Style, Color>({
 	name: 'tabBackgroundColor',
 	cssName: 'tab-background-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 tabBackgroundColorProperty.register(Style);
 
@@ -299,7 +300,7 @@ export const selectedTabTextColorProperty = new CssProperty<Style, Color>({
 	name: 'selectedTabTextColor',
 	cssName: 'selected-tab-text-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 selectedTabTextColorProperty.register(Style);
 
@@ -307,6 +308,6 @@ export const androidSelectedTabHighlightColorProperty = new CssProperty<Style, C
 	name: 'androidSelectedTabHighlightColor',
 	cssName: 'android-selected-tab-highlight-color',
 	equalityComparer: Color.equals,
-	valueConverter: (v) => new Color(v),
+	valueConverter: colorConverter,
 });
 androidSelectedTabHighlightColorProperty.register(Style);
diff --git a/packages/core/ui/text-base/index.ios.ts b/packages/core/ui/text-base/index.ios.ts
index b52994014f..85d0c13f4e 100644
--- a/packages/core/ui/text-base/index.ios.ts
+++ b/packages/core/ui/text-base/index.ios.ts
@@ -277,20 +277,142 @@ export class TextBase extends TextBaseCommon {
 		const letterSpacing = this.style.letterSpacing ? this.style.letterSpacing : 0;
 		const lineHeight = this.style.lineHeight ? this.style.lineHeight : 0;
 		if (this.formattedText) {
-			(<any>this.nativeTextViewProtected).nativeScriptSetFormattedTextDecorationAndTransformLetterSpacingLineHeight(this.getFormattedStringDetails(this.formattedText), letterSpacing, lineHeight);
+			this.setFormattedTextDecorationAndTransform();
+			// (<any>this.nativeTextViewProtected).nativeScriptSetFormattedTextDecorationAndTransformLetterSpacingLineHeight(this.getFormattedStringDetails(this.formattedText), letterSpacing, lineHeight);
 		} else {
+			this.setTextDecorationAndTransform();
 			// console.log('setTextDecorationAndTransform...')
-			const text = getTransformedText(isNullOrUndefined(this.text) ? '' : `${this.text}`, this.textTransform);
-			(<any>this.nativeTextViewProtected).nativeScriptSetTextDecorationAndTransformTextDecorationLetterSpacingLineHeight(text, this.style.textDecoration || '', letterSpacing, lineHeight);
+			// const text = getTransformedText(isNullOrUndefined(this.text) ? '' : `${this.text}`, this.textTransform);
+			// (<any>this.nativeTextViewProtected).nativeScriptSetTextDecorationAndTransformTextDecorationLetterSpacingLineHeight(text, this.style.textDecoration || '', letterSpacing, lineHeight);
 
-			if (!this.style?.color && majorVersion >= 13 && UIColor.labelColor) {
-				this._setColor(UIColor.labelColor);
+			// if (!this.style?.color && majorVersion >= 13 && UIColor.labelColor) {
+			// 	this._setColor(UIColor.labelColor);
+			// }
+		}
+	}
+	setFormattedTextDecorationAndTransform() {
+		const attrText = this.createFormattedTextNative(this.formattedText);
+		if (this.letterSpacing !== 0) {
+			attrText.addAttributeValueRange(NSKernAttributeName, this.letterSpacing * this.nativeTextViewProtected.font.pointSize, { location: 0, length: attrText.length });
+		}
+
+		if (this.style.lineHeight) {
+			const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+			paragraphStyle.minimumLineHeight = this.lineHeight;
+			// make sure a possible previously set text alignment setting is not lost when line height is specified
+			if (this.nativeTextViewProtected instanceof UIButton) {
+				paragraphStyle.alignment = (<UIButton>this.nativeTextViewProtected).titleLabel.textAlignment;
+			} else {
+				paragraphStyle.alignment = (<UITextField | UITextView | UILabel>this.nativeTextViewProtected).textAlignment;
 			}
+
+			if (this.nativeTextViewProtected instanceof UILabel) {
+				// make sure a possible previously set line break mode is not lost when line height is specified
+				paragraphStyle.lineBreakMode = this.nativeTextViewProtected.lineBreakMode;
+			}
+			attrText.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, { location: 0, length: attrText.length });
+		} else if (this.nativeTextViewProtected instanceof UITextView) {
+			const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+			paragraphStyle.alignment = (<UITextView>this.nativeTextViewProtected).textAlignment;
+			attrText.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, { location: 0, length: attrText.length });
+		}
+
+		if (this.nativeTextViewProtected instanceof UIButton) {
+			this.nativeTextViewProtected.setAttributedTitleForState(attrText, UIControlState.Normal);
+		} else {
+			if (majorVersion >= 13 && UIColor.labelColor) {
+				this.nativeTextViewProtected.textColor = UIColor.labelColor;
+			}
+
+			this.nativeTextViewProtected.attributedText = attrText;
+		}
+	}
+	setTextDecorationAndTransform() {
+		const style = this.style;
+		const dict = new Map<string, any>();
+		switch (style.textDecoration) {
+			case 'none':
+				break;
+			case 'underline':
+				dict.set(NSUnderlineStyleAttributeName, NSUnderlineStyle.Single);
+				break;
+			case 'line-through':
+				dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.Single);
+				break;
+			case 'underline line-through':
+				dict.set(NSUnderlineStyleAttributeName, NSUnderlineStyle.Single);
+				dict.set(NSStrikethroughStyleAttributeName, NSUnderlineStyle.Single);
+				break;
+			default:
+				throw new Error(`Invalid text decoration value: ${style.textDecoration}. Valid values are: 'none', 'underline', 'line-through', 'underline line-through'.`);
+		}
+
+		if (style.letterSpacing !== 0 && this.nativeTextViewProtected.font) {
+			const kern = style.letterSpacing * this.nativeTextViewProtected.font.pointSize;
+			dict.set(NSKernAttributeName, kern);
+			if (this.nativeTextViewProtected instanceof UITextField) {
+				this.nativeTextViewProtected.defaultTextAttributes.setValueForKey(kern, NSKernAttributeName);
+			}
+		}
+
+		const isTextView = this.nativeTextViewProtected instanceof UITextView;
+		if (style.lineHeight) {
+			const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+			paragraphStyle.lineSpacing = style.lineHeight;
+			// make sure a possible previously set text alignment setting is not lost when line height is specified
+			if (this.nativeTextViewProtected instanceof UIButton) {
+				paragraphStyle.alignment = (<UIButton>this.nativeTextViewProtected).titleLabel.textAlignment;
+			} else {
+				paragraphStyle.alignment = (<UITextField | UITextView | UILabel>this.nativeTextViewProtected).textAlignment;
+			}
+
+			if (this.nativeTextViewProtected instanceof UILabel) {
+				// make sure a possible previously set line break mode is not lost when line height is specified
+				paragraphStyle.lineBreakMode = this.nativeTextViewProtected.lineBreakMode;
+			}
+			dict.set(NSParagraphStyleAttributeName, paragraphStyle);
+		} else if (isTextView) {
+			const paragraphStyle = NSMutableParagraphStyle.alloc().init();
+			paragraphStyle.alignment = (<UITextView>this.nativeTextViewProtected).textAlignment;
+			dict.set(NSParagraphStyleAttributeName, paragraphStyle);
+		}
+
+		const source = getTransformedText(isNullOrUndefined(this.text) ? '' : `${this.text}`, this.textTransform);
+		if (dict.size > 0 || isTextView) {
+			if (isTextView && this.nativeTextViewProtected.font) {
+				// UITextView's font seems to change inside.
+				dict.set(NSFontAttributeName, this.nativeTextViewProtected.font);
+			}
+
+			const result = NSMutableAttributedString.alloc().initWithString(source);
+			result.setAttributesRange(<any>dict, {
+				location: 0,
+				length: source.length,
+			});
+			if (this.nativeTextViewProtected instanceof UIButton) {
+				this.nativeTextViewProtected.setAttributedTitleForState(result, UIControlState.Normal);
+			} else {
+				this.nativeTextViewProtected.attributedText = result;
+			}
+		} else {
+			if (this.nativeTextViewProtected instanceof UIButton) {
+				// Clear attributedText or title won't be affected.
+				this.nativeTextViewProtected.setAttributedTitleForState(null, UIControlState.Normal);
+				this.nativeTextViewProtected.setTitleForState(source, UIControlState.Normal);
+			} else {
+				// Clear attributedText or text won't be affected.
+				this.nativeTextViewProtected.attributedText = undefined;
+				this.nativeTextViewProtected.text = source;
+			}
+		}
+
+		if (!style.color && majorVersion >= 13 && UIColor.labelColor) {
+			this._setColor(UIColor.labelColor);
 		}
 	}
 
 	createFormattedTextNative(value: FormattedString) {
-		return NativeScriptUtils.createMutableStringWithDetails(<any>this.getFormattedStringDetails(value));
+		return NativeScriptUtils.createMutableStringWithDetails(this.getFormattedStringDetails(value) as any);
 	}
 
 	getFormattedStringDetails(formattedString: FormattedString) {
diff --git a/packages/core/ui/text-base/text-base-common.ts b/packages/core/ui/text-base/text-base-common.ts
index e328f6ccee..5d3d55cd7e 100644
--- a/packages/core/ui/text-base/text-base-common.ts
+++ b/packages/core/ui/text-base/text-base-common.ts
@@ -15,9 +15,7 @@ import { TextBase as TextBaseDefinition } from '.';
 import { Color } from '../../color';
 import { CSSShadow, parseCSSShadow } from '../styling/css-shadow';
 
-const CHILD_SPAN = 'Span';
 const CHILD_FORMATTED_TEXT = 'formattedText';
-const CHILD_FORMATTED_STRING = 'FormattedString';
 
 export abstract class TextBaseCommon extends View implements TextBaseDefinition {
 	public _isSingleLine: boolean;
@@ -175,7 +173,7 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
 	}
 
 	public _addChildFromBuilder(name: string, value: any): void {
-		if (name === CHILD_SPAN) {
+		if (name === Span.name) {
 			if (!this.formattedText) {
 				const formattedText = new FormattedString();
 				formattedText.spans.push(value);
@@ -183,7 +181,7 @@ export abstract class TextBaseCommon extends View implements TextBaseDefinition
 			} else {
 				this.formattedText.spans.push(value);
 			}
-		} else if (name === CHILD_FORMATTED_TEXT || name === CHILD_FORMATTED_STRING) {
+		} else if (name === CHILD_FORMATTED_TEXT || name === FormattedString.name) {
 			this.formattedText = value;
 		}
 	}
diff --git a/packages/core/ui/transition/slide-transition.android.ts b/packages/core/ui/transition/slide-transition.android.ts
index 901381715c..9bdd6ce8a1 100644
--- a/packages/core/ui/transition/slide-transition.android.ts
+++ b/packages/core/ui/transition/slide-transition.android.ts
@@ -112,7 +112,6 @@ export class SlideTransition extends Transition {
 			animator.setDuration(duration);
 		}
 		animator.setInterpolator(this.getCurve());
-
 		const animatorSet = new android.animation.AnimatorSet();
 		animatorSet.play(animator);
 		return animatorSet;
diff --git a/packages/core/ui/web-view/index.android.ts b/packages/core/ui/web-view/index.android.ts
index ec18b3dc30..0c50c088ae 100644
--- a/packages/core/ui/web-view/index.android.ts
+++ b/packages/core/ui/web-view/index.android.ts
@@ -125,9 +125,9 @@ export class WebView extends WebViewBase {
 		const nativeView = this.nativeViewProtected;
 		if (nativeView) {
 			nativeView.destroy();
+			nativeView.setWebViewClient(null);
+			(<any>nativeView).client.owner = null;
 		}
-
-		(<any>nativeView).client.owner = null;
 		super.disposeNativeView();
 	}
 
diff --git a/packages/core/xhr/index.ts b/packages/core/xhr/index.ts
index 848409703d..30a76b2043 100644
--- a/packages/core/xhr/index.ts
+++ b/packages/core/xhr/index.ts
@@ -353,28 +353,6 @@ const statuses = {
 	505: 'HTTP Version Not Supported',
 };
 
-export class FormData {
-	private _data: Map<string, any>;
-
-	constructor() {
-		this._data = new Map<string, any>();
-	}
-
-	append(name: string, value: any) {
-		this._data.set(name, value);
-	}
-
-	toString(): string {
-		const arr = new Array<string>();
-
-		this._data.forEach(function (value, name, map) {
-			arr.push(`${encodeURIComponent(name)}=${encodeURIComponent(value)}`);
-		});
-
-		return arr.join('&');
-	}
-}
-
 export class Blob {
 	// Note: only for use by XHR
 	public static InternalAccessor = class {
diff --git a/packages/types-android/src/lib/android/android-declarations.d.ts b/packages/types-android/src/lib/android/android-declarations.d.ts
index f49e25a4a4..ff8093ac48 100644
--- a/packages/types-android/src/lib/android/android-declarations.d.ts
+++ b/packages/types-android/src/lib/android/android-declarations.d.ts
@@ -8,6 +8,12 @@ declare function long(num: number): any;
  */
 declare var gc: () => void;
 
+
+/**
+ * Returns the version of the runtime.
+ */
+declare const __runtimeVersion: string;
+
 /**
  * Releases the reference to the wrapped native object
  * @param object The Java object to release.
diff --git a/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts b/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts
index 54a9be7aeb..8bca29dcc5 100644
--- a/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts
+++ b/packages/types-android/src/lib/android/org.nativescript.widgets.d.ts
@@ -365,7 +365,7 @@
                 constructor(context: android.content.Context);
             }
 
-            export class VerticalScrollView extends android.widget.ScrollView {
+            export class VerticalScrollView extends androidx.core.widget.NestedScrollView {
                 constructor(context: android.content.Context);
                 public getScrollableLength(): number;
                 public getScrollEnabled(): boolean;
diff --git a/packages/types-ios/src/lib/ios/runtime.d.ts b/packages/types-ios/src/lib/ios/runtime.d.ts
index 18d517e068..21694b2f89 100644
--- a/packages/types-ios/src/lib/ios/runtime.d.ts
+++ b/packages/types-ios/src/lib/ios/runtime.d.ts
@@ -1,5 +1,12 @@
 /// <reference path="interop.d.ts" />
 
+
+
+/**
+ * Returns the version of the runtime.
+ */
+declare const __runtimeVersion: string;
+
 /**
  * Triggers garbage collection in JavaScript
  */
diff --git a/packages/ui-mobile-base/android/widgets/build.gradle b/packages/ui-mobile-base/android/widgets/build.gradle
index a17206f3d3..49c3843c10 100644
--- a/packages/ui-mobile-base/android/widgets/build.gradle
+++ b/packages/ui-mobile-base/android/widgets/build.gradle
@@ -33,7 +33,12 @@ def computeTargetSdkVersion() {
     }
 }
 
+
 android {
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_1_8
+        targetCompatibility JavaVersion.VERSION_1_8
+    }
     compileSdkVersion computeCompileSdkVersion()
     buildToolsVersion computeBuildToolsVersion()
 
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
index 65c2208ee2..0e95cb36f8 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/BorderDrawable.java
@@ -19,13 +19,20 @@
 import android.graphics.drawable.Drawable;
 
 import androidx.annotation.NonNull;
+import androidx.annotation.RequiresApi;
 
 import org.nativescript.widgets.image.BitmapOwner;
 import org.nativescript.widgets.image.Fetcher;
 
+import java.util.Arrays;
+import java.util.HashMap;
+import java.util.HashSet;
 import java.util.Locale;
 import java.util.regex.Pattern;
 
+import android.os.Build;
+import android.util.Log;
+
 /**
  * Created by hristov on 6/15/2016.
  */
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
index ff49c3432a..571c00b74c 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/LayoutBase.java
@@ -1,6 +1,14 @@
 package org.nativescript.widgets;
 
 import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.Path;
+import android.graphics.PorterDuff;
+import android.graphics.PorterDuffXfermode;
+import android.graphics.drawable.Drawable;
+import android.os.Build;
 import android.util.AttributeSet;
 import android.view.Gravity;
 import android.view.MotionEvent;
@@ -8,6 +16,10 @@
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
+import android.util.Log;
+
+import androidx.annotation.RequiresApi;
+
 /**
  * @author hhristov
  */
@@ -57,10 +69,10 @@ protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams fro
 		return new CommonLayoutParams(from);
 	}
 
-	@Override
-	public boolean shouldDelayChildPressedState() {
-		return false;
-	}
+    @Override
+    public boolean shouldDelayChildPressedState() {
+        return false;
+    }
 
 	@Override
 	public boolean onTouchEvent(MotionEvent event) {
diff --git a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/VerticalScrollView.java b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/VerticalScrollView.java
index 2a1f576968..588352210b 100644
--- a/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/VerticalScrollView.java
+++ b/packages/ui-mobile-base/android/widgets/src/main/java/org/nativescript/widgets/VerticalScrollView.java
@@ -8,14 +8,14 @@
 import android.view.View;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
-import android.widget.ScrollView;
+import androidx.core.widget.NestedScrollView;
 
 import org.nativescript.widgets.HorizontalScrollView.SavedState;
 
 /**
  * @author hhristov
  */
-public class VerticalScrollView extends ScrollView {
+public class VerticalScrollView extends NestedScrollView {
 
 	private final Rect mTempRect = new Rect();
 
@@ -212,7 +212,7 @@ protected void onLayout(boolean changed, int left, int top, int right, int botto
 	}
 
 	@Override
-	protected void onAttachedToWindow() {
+	public void onAttachedToWindow() {
 		super.onAttachedToWindow();
 		this.isFirstLayout = true;
 	}
diff --git a/packages/ui-mobile-base/build.android.sh b/packages/ui-mobile-base/build.android.sh
index 64401f5247..f0fc51915d 100755
--- a/packages/ui-mobile-base/build.android.sh
+++ b/packages/ui-mobile-base/build.android.sh
@@ -13,7 +13,7 @@ echo "Build android"
 cd android
 ./gradlew --quiet assembleRelease
 cd ..
-cp android/widgets/build/outputs/aar/widgets-release.aar dist/package/platforms/android/widgets-release.aar
+cp android/widgets/build/outputs/aar/widgets.aar dist/package/platforms/android/widgets-release.aar
 
 if [ "$1" ]
 then
@@ -26,7 +26,7 @@ then
   echo "SKIP pack" 
 else
   echo "Copy NPM artefacts"
-  cp .npmignore LICENSE README.md package.json dist/package
+  cp .npmignore README.md package.json dist/package
   echo "NPM pack"
   cd dist/package
   PACKAGE="$(npm pack)"
diff --git a/packages/ui-mobile-base/ios/TNSWidgets/build.xcconfig b/packages/ui-mobile-base/ios/TNSWidgets/build.xcconfig
new file mode 100644
index 0000000000..f5b2a4bb9d
--- /dev/null
+++ b/packages/ui-mobile-base/ios/TNSWidgets/build.xcconfig
@@ -0,0 +1,2 @@
+EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64=arm64 arm64e armv7 armv7s armv6 armv8
+EXCLUDED_ARCHS=$(inherited) $(EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_$(EFFECTIVE_PLATFORM_SUFFIX)__NATIVE_ARCH_64_BIT_$(NATIVE_ARCH_64_BIT))
\ No newline at end of file
diff --git a/packages/webpack5/src/helpers/flavor.ts b/packages/webpack5/src/helpers/flavor.ts
index 87b2bd8d55..cc2d319ebc 100644
--- a/packages/webpack5/src/helpers/flavor.ts
+++ b/packages/webpack5/src/helpers/flavor.ts
@@ -2,6 +2,30 @@ import { defaultConfigs } from '@nativescript/webpack';
 import { getAllDependencies } from './dependencies';
 import { error } from './log';
 
+/**
+ * Utility to determine the project flavor based on installed dependencies
+ * (vue, angular, react, svelete, typescript, javascript...)
+ */
+export function projectUsesCustomFlavor(): boolean {
+	const dependencies = getAllDependencies();
+	return [
+		'vue',
+		'angular',
+		'react',
+		'svelte',
+		//@ts-ignore
+	].includes(determineProjectFlavor());
+	if (
+		dependencies.includes('nativescript-vue') ||
+		dependencies.includes('@nativescript/angular') ||
+		dependencies.includes('react-nativescript') ||
+		dependencies.includes('svelte-native')
+	) {
+		return true;
+	}
+
+	return false;
+}
 /**
  * Utility to determine the project flavor based on installed dependencies
  * (vue, angular, react, svelete, typescript, javascript...)
diff --git a/packages/webpack5/src/helpers/index.ts b/packages/webpack5/src/helpers/index.ts
index 88c5b62675..b36eb63211 100644
--- a/packages/webpack5/src/helpers/index.ts
+++ b/packages/webpack5/src/helpers/index.ts
@@ -1,22 +1,15 @@
 import { merge } from 'webpack-merge';
 
-import {
-	getPackageJson,
-	getProjectRootPath,
-	getProjectFilePath,
-} from './project';
-import { addVirtualEntry, addVirtualModule } from './virtualModules';
-import { applyFileReplacements } from './fileReplacements';
 import { addCopyRule, removeCopyRule } from './copyRules';
-import { error, info, warn, warnOnce } from './log';
-import { determineProjectFlavor } from './flavor';
+import { determineProjectFlavor, projectUsesCustomFlavor } from './flavor';
+import { error, info, warn } from './log';
 import { getValue } from './config';
-import { getIPS } from './host';
 import {
 	getAllDependencies,
 	hasDependency,
 	getDependencyPath,
 } from './dependencies';
+import { getPackageJson, getProjectRootPath } from './project';
 import {
 	addPlatform,
 	getAbsoluteDistPath,
@@ -37,7 +30,6 @@ export default {
 	merge,
 	addCopyRule,
 	removeCopyRule,
-	applyFileReplacements,
 	config: {
 		getValue,
 	},
@@ -48,15 +40,16 @@ export default {
 	},
 	flavor: {
 		determineProjectFlavor,
-	},
-	host: {
-		getIPS,
+		projectUsesCustomFlavor,
 	},
 	log: {
 		error,
 		info,
 		warn,
-		warnOnce,
+	},
+	project: {
+		getProjectRootPath,
+		getPackageJson,
 	},
 	platform: {
 		addPlatform,
@@ -67,15 +60,6 @@ export default {
 		getPlatform,
 		getPlatformName,
 	},
-	project: {
-		getProjectFilePath,
-		getProjectRootPath,
-		getPackageJson,
-	},
-	virtualModules: {
-		addVirtualEntry,
-		addVirtualModule,
-	},
 	tsconfig: {
 		readTsConfig,
 	},
diff --git a/tools/assets/App_Resources/Android/native-api-usage.json b/tools/assets/App_Resources/Android/native-api-usage.json
new file mode 100644
index 0000000000..eb1316f37c
--- /dev/null
+++ b/tools/assets/App_Resources/Android/native-api-usage.json
@@ -0,0 +1,8 @@
+{
+    "whitelist-plugins-usages": true,
+    "blacklist": [
+        "androidx.appcompat*:R.*", "androidx.appcompat*:R*", "*:*BuildConfig", 
+        "com.nativescript*:R.*", "com.nativescript*:R", 
+        "org.nativescript*:R.*", "org.nativescript*:R"
+    ]
+  }
\ No newline at end of file
diff --git a/tools/assets/App_Resources/iOS/Info.plist b/tools/assets/App_Resources/iOS/Info.plist
index 3c0d86fce4..2c66cc9f00 100644
--- a/tools/assets/App_Resources/iOS/Info.plist
+++ b/tools/assets/App_Resources/iOS/Info.plist
@@ -26,10 +26,6 @@
 	<string>LaunchScreen</string>
 	<key>UIRequiresFullScreen</key>
 	<true/>
-	<key>UIRequiredDeviceCapabilities</key>
-	<array>
-		<string>armv7</string>
-	</array>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
diff --git a/tools/assets/App_Resources/iOS/build.xcconfig b/tools/assets/App_Resources/iOS/build.xcconfig
index f8e9da1818..e77e78db95 100644
--- a/tools/assets/App_Resources/iOS/build.xcconfig
+++ b/tools/assets/App_Resources/iOS/build.xcconfig
@@ -4,4 +4,3 @@
 // To build for device with Xcode 8 you need to specify your development team. More info: https://developer.apple.com/library/prerelease/content/releasenotes/DeveloperTools/RN-Xcode/Introduction.html
 // DEVELOPMENT_TEAM = YOUR_TEAM_ID;
 ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
-IPHONEOS_DEPLOYMENT_TARGET = 12.0;