diff --git a/apps/toolbox/src/main-page.xml b/apps/toolbox/src/main-page.xml
index 4701aa24a..37a46ca60 100644
--- a/apps/toolbox/src/main-page.xml
+++ b/apps/toolbox/src/main-page.xml
@@ -11,6 +11,7 @@
+
diff --git a/apps/toolbox/src/pages/visibility-vs-hidden.ts b/apps/toolbox/src/pages/visibility-vs-hidden.ts
new file mode 100644
index 000000000..804351aa8
--- /dev/null
+++ b/apps/toolbox/src/pages/visibility-vs-hidden.ts
@@ -0,0 +1,32 @@
+import { Observable, EventData, Page, CoreTypes } from '@nativescript/core';
+
+let page: Page;
+
+export function navigatingTo(args: EventData) {
+ page = args.object;
+ page.bindingContext = new VisibilityVsHiddenModel();
+}
+
+export class VisibilityVsHiddenModel extends Observable {
+ currentVisibility = CoreTypes.Visibility.visible;
+ currentVisibilityType = `Current Visibility: ${this.currentVisibility}`;
+ currentVisibilityIndex = 0;
+ visibilityOptions = [CoreTypes.Visibility.visible, CoreTypes.Visibility.collapse, CoreTypes.Visibility.hidden];
+
+ currentHidden = false;
+ currentHiddenType = `Current Hidden: ${this.currentHidden}`;
+
+ toggleVisibility() {
+ this.currentVisibilityIndex++;
+ if (this.currentVisibilityIndex === 3) {
+ this.currentVisibilityIndex = 0;
+ }
+ this.set('currentVisibility', this.visibilityOptions[this.currentVisibilityIndex]);
+ this.set('currentVisibilityType', `Current Visibility: ${this.visibilityOptions[this.currentVisibilityIndex]}`);
+ }
+
+ toggleHidden() {
+ this.set('currentHidden', !this.currentHidden);
+ this.set('currentHiddenType', `Current Hidden: ${this.currentHidden}`);
+ }
+}
diff --git a/apps/toolbox/src/pages/visibility-vs-hidden.xml b/apps/toolbox/src/pages/visibility-vs-hidden.xml
new file mode 100644
index 000000000..0fe278cfe
--- /dev/null
+++ b/apps/toolbox/src/pages/visibility-vs-hidden.xml
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/core/ui/core/view-base/index.ts b/packages/core/ui/core/view-base/index.ts
index b185a7aec..f9728ee89 100644
--- a/packages/core/ui/core/view-base/index.ts
+++ b/packages/core/ui/core/view-base/index.ts
@@ -1163,6 +1163,19 @@ export const bindingContextProperty = new InheritedProperty({
});
bindingContextProperty.register(ViewBase);
+export const hiddenProperty = new Property({
+ name: 'hidden',
+ defaultValue: false,
+ affectsLayout: global.isIOS,
+ valueConverter: booleanConverter,
+ valueChanged: (target, oldValue, newValue) => {
+ if (target) {
+ target.isCollapsed = !!newValue;
+ }
+ },
+});
+hiddenProperty.register(ViewBase);
+
export const classNameProperty = new Property({
name: 'className',
valueChanged(view: ViewBase, oldValue: string, newValue: string) {
diff --git a/packages/core/ui/core/view/index.android.ts b/packages/core/ui/core/view/index.android.ts
index 1e481b058..a9bbbab5c 100644
--- a/packages/core/ui/core/view/index.android.ts
+++ b/packages/core/ui/core/view/index.android.ts
@@ -7,7 +7,7 @@ import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUser
import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties';
import { layout } from '../../../utils';
import { Trace } from '../../../trace';
-import { ShowModalOptions } from '../view-base';
+import { ShowModalOptions, hiddenProperty } from '../view-base';
import { EventData } from '../../../data/observable';
import { perspectiveProperty, visibilityProperty, opacityProperty, horizontalAlignmentProperty, verticalAlignmentProperty, minWidthProperty, minHeightProperty, widthProperty, heightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty, rotateProperty, rotateXProperty, rotateYProperty, scaleXProperty, scaleYProperty, translateXProperty, translateYProperty, zIndexProperty, backgroundInternalProperty, androidElevationProperty, androidDynamicElevationOffsetProperty } from '../../styling/style-properties';
@@ -730,6 +730,13 @@ export class View extends ViewCommon {
this.nativeViewProtected.setFocusable(value);
}
+ [hiddenProperty.getDefault](): boolean {
+ return this.nativeViewProtected.getVisibility() === android.view.View.GONE;
+ }
+ [hiddenProperty.setNative](value: boolean) {
+ this.nativeViewProtected.setVisibility(value ? android.view.View.GONE : android.view.View.VISIBLE);
+ }
+
[visibilityProperty.getDefault](): CoreTypes.VisibilityType {
const nativeVisibility = this.nativeViewProtected.getVisibility();
switch (nativeVisibility) {
diff --git a/packages/core/ui/core/view/index.ios.ts b/packages/core/ui/core/view/index.ios.ts
index 98dffdbc4..7b462be05 100644
--- a/packages/core/ui/core/view/index.ios.ts
+++ b/packages/core/ui/core/view/index.ios.ts
@@ -3,7 +3,7 @@ import { Point, View as ViewDefinition } from '.';
// Requires
import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty } from './view-common';
-import { ShowModalOptions } from '../view-base';
+import { ShowModalOptions, hiddenProperty } from '../view-base';
import { Trace } from '../../../trace';
import { layout, iOSNativeHelper } from '../../../utils';
import { IOSHelper } from './view-helper';
@@ -643,6 +643,13 @@ export class View extends ViewCommon implements ViewDefinition {
this.nativeViewProtected.userInteractionEnabled = value;
}
+ [hiddenProperty.getDefault](): boolean {
+ return this.nativeViewProtected.hidden;
+ }
+ [hiddenProperty.setNative](value: boolean) {
+ this.nativeViewProtected.hidden = value;
+ }
+
[visibilityProperty.getDefault](): CoreTypes.VisibilityType {
return this.nativeViewProtected.hidden ? CoreTypes.Visibility.collapse : CoreTypes.Visibility.visible;
}