diff --git a/apps/ui/src/issues/issue-7469-page.ts b/apps/ui/src/issues/issue-7469-page.ts index eca14bb6a4..764397a83e 100644 --- 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 index c2d32f4718..9b6ca38136 100644 --- a/packages/core/ui/core/properties/index.ts +++ b/packages/core/ui/core/properties/index.ts @@ -1363,6 +1363,8 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit type PropertyInterface = Property | CssProperty | CssAnimationProperty; export const initNativeView = profile('"properties".initNativeView', function initNativeView(view: ViewBase): void { + const wasSuspended = view.suspendRequestLayout; + view.suspendRequestLayout = true; if (view._suspendedUpdates) { applyPendingNativeSetters(view); } else { @@ -1370,6 +1372,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 { diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts index fcce724276..e95f1f14bb 100644 --- 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 index 29e6236193..9eaa002565 100644 --- 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 index 862db9f0ec..574f50f266 100644 --- 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 index 64fa7e8d4e..edbee315f7 100644 --- 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');