From 3c569effedbc593e845c42bd396ff68a0d72171d Mon Sep 17 00:00:00 2001
From: William Juan <williamjuan027@gmail.com>
Date: Wed, 24 Mar 2021 21:49:30 +0700
Subject: [PATCH] fix(layouts): rootlayout not closing when no shadecover
 transition specified (#9278)

---
 packages/core/package.json                    |  2 +-
 .../layouts/root-layout/root-layout-common.ts | 33 +++++++++++--------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/core/package.json b/packages/core/package.json
index 10e538520..b5eecc11b 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -3,7 +3,7 @@
   "main": "index",
   "types": "index.d.ts",
   "description": "NativeScript Core Modules",
-  "version": "8.0.0-alpha.2",
+  "version": "8.0.0-alpha.4",
   "homepage": "https://nativescript.org",
   "repository": {
       "type": "git",
diff --git a/packages/core/ui/layouts/root-layout/root-layout-common.ts b/packages/core/ui/layouts/root-layout/root-layout-common.ts
index d17811ff8..837de29b8 100644
--- a/packages/core/ui/layouts/root-layout/root-layout-common.ts
+++ b/packages/core/ui/layouts/root-layout/root-layout-common.ts
@@ -45,21 +45,25 @@ export class RootLayoutBase extends GridLayout {
 						this.updateShadeCover(this.shadeCover, options.shadeCover);
 					}
 
+					view.opacity = 0; // always begin with view invisible when adding dynamically
 					this.insertChild(view, this.getChildrenCount() + 1);
 
 					if (options?.animation?.enterFrom) {
-						this.applyInitialState(view, options.animation.enterFrom);
-						this.getEnterAnimation(view, options.animation.enterFrom)
-							.play()
-							.then(() => {
-								this.applyDefaultState(view);
-								resolve();
-							})
-							.catch((ex) => {
-								if (Trace.isEnabled()) {
-									Trace.write(`Error playing enter animation: ${ex}`, Trace.categories.Layout, Trace.messageType.error);
-								}
-							});
+						setTimeout(() => {
+							// only apply initial state and animate after the first tick - ensures safe areas and other measurements apply correctly
+							this.applyInitialState(view, options.animation.enterFrom);
+							this.getEnterAnimation(view, options.animation.enterFrom)
+								.play()
+								.then(() => {
+									this.applyDefaultState(view);
+									resolve();
+								})
+								.catch((ex) => {
+									if (Trace.isEnabled()) {
+										Trace.write(`Error playing enter animation: ${ex}`, Trace.categories.Layout, Trace.messageType.error);
+									}
+								});
+						});
 					} else {
 						resolve();
 					}
@@ -88,7 +92,7 @@ export class RootLayoutBase extends GridLayout {
 
 					// update shade cover with the topmost popupView options (if not specifically told to ignore)
 					const shadeCoverOptions = this.popupViews[this.popupViews.length - 1]?.options?.shadeCover;
-					if (shadeCoverOptions && !poppedView?.options?.shadeCover.ignoreShadeRestore) {
+					if (this.shadeCover && shadeCoverOptions && !poppedView?.options?.shadeCover.ignoreShadeRestore) {
 						this.updateShadeCover(this.shadeCover, shadeCoverOptions);
 					}
 
@@ -97,7 +101,7 @@ export class RootLayoutBase extends GridLayout {
 						const exitAnimations: Promise<any>[] = [exitAnimation.play()];
 
 						// add remove shade cover animation if this is the last opened popup view
-						if (this.popupViews.length === 0) {
+						if (this.popupViews.length === 0 && this.shadeCover) {
 							exitAnimations.push(this.closeShadeCover(poppedView.options.shadeCover));
 						}
 						return Promise.all(exitAnimations)
@@ -341,6 +345,7 @@ export class RootLayoutBase extends GridLayout {
 					resolve();
 				});
 			}
+			resolve();
 		});
 	}