NativeScript · NathanWalker · Aug 11, 2021 · Dec 7, 2020 · Dec 18, 2020 · Feb 1, 2021
diff --git a/apps/ui/src/issues/issue-7469-page.ts b/apps/ui/src/issues/issue-7469-page.ts
@@ -28,7 +28,7 @@ let loaded = false;
 let isIn1 = false;
 
 function updateVcToggleText() {
-	vcToggle.text = `Container is${reusableItem.reusable ? ' ' : ' NOT '}Reusable`
+	vcToggle.text = `Container is${reusableItem.reusable ? ' ' : ' NOT '}Reusable`;
 }
 
 export function pageLoaded(args) {
@@ -82,7 +82,7 @@ export function makeReusable(args: EventData) {
 	}
 	(args.object as any).___reusableRan = true;
 	(args.object as any).reusable = true;
-	if(args.object === reusableItem) {
+	if (args.object === reusableItem) {
 		updateVcToggleText();
 	}
 }

diff --git a/packages/core/ui/core/properties/index.ts b/packages/core/ui/core/properties/index.ts
@@ -1363,13 +1363,23 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit
 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 {
 		applyAllNativeSetters(view);
 	}
 	// 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 {

diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
@@ -431,7 +431,10 @@ 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();
 		this._resumeNativeUpdates(SuspendType.Loaded);
@@ -442,6 +445,7 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 			return true;
 		});
 
+		this.suspendRequestLayout = false;
 		this._emit('loaded');
 	}
 
@@ -658,6 +662,20 @@ export abstract class ViewBase extends Observable implements ViewBaseDefinition
 		}
 	}
 
+	_requestLayoutNeeded = false;
+
+	get isLayoutRequestNeeded() {
+		return this._requestLayoutNeeded;
+	}
+
+	_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).

diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
@@ -522,6 +522,11 @@ export class View extends ViewCommon {
 
 	@profile
 	public requestLayout(): void {
+		if (this._suspendRequestLayout) {
+			this._requestLayoutNeeded = true;
+			return;
+		}
+		this._requestLayoutNeeded = false;
 		super.requestLayout();
 		if (this.nativeViewProtected) {
 			this.nativeViewProtected.requestLayout();

diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
@@ -63,9 +63,21 @@ export class View extends ViewCommon implements ViewDefinition {
 		this.once(View.loadedEvent, () => setupAccessibleView(this));
 	}
 
+	requestLayoutIfNeeded() {
+		if (this.isLayoutRequired) {
+			this._requestLayoutNeeded = false;
+			this.requestLayout();
+		}
+	}
+
 	public requestLayout(): void {
-		super.requestLayout();
+		if (this._suspendRequestLayout) {
+			this._requestLayoutNeeded = true;
+			return;
+		}
+		this._requestLayoutNeeded = false;
 		this._privateFlags |= PFLAG_FORCE_LAYOUT;
+		super.requestLayout();
 
 		const nativeView = this.nativeViewProtected;
 		if (nativeView && nativeView.setNeedsLayout) {

diff --git a/packages/core/ui/text-base/index.android.ts b/packages/core/ui/text-base/index.android.ts
@@ -437,7 +437,7 @@ export class TextBase extends TextBaseCommon {
 	[paddingLeftProperty.setNative](value: CoreTypes.LengthType) {
 		org.nativescript.widgets.ViewHelper.setPaddingLeft(this.nativeTextViewProtected, Length.toDevicePixels(value, 0) + Length.toDevicePixels(this.style.borderLeftWidth, 0));
 	}
-	
+
 	[accessibilityIdentifierProperty.setNative](value: string): void {
 		// we override the default setter to apply it on nativeTextViewProtected
 		const id = Utils.ad.resources.getId(':id/nativescript_accessibility_id');