feat(view): "hidden" property binding is now supported

apps/toolbox/src/main-page.xml

@@ -11,6 +11,7 @@
         <Button text="root-layout" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="a11y" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
         <Button text="css-playground" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
+        <Button text="visibility-vs-hidden" tap="{{ viewDemo }}" class="btn btn-primary btn-view-demo"/>
       </StackLayout>
     </ScrollView>
   </StackLayout>

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 = <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}`);
+	}
+}

apps/toolbox/src/pages/visibility-vs-hidden.xml

@@ -0,0 +1,22 @@
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <Page.actionBar>
+        <ActionBar title="Visibility vs. Hidden" class="action-bar">
+        </ActionBar>
+    </Page.actionBar>
+
+    <StackLayout class="p-20">
+      <Label text="Explore Visibility vs. hidden here. They can be used for various use cases where needed. They are very subtly different." textWrap="true" class="m-b-20 v-center text-center" />
+      <Label text="{{currentVisibilityType}}" class="m-b-10 text-center" />
+			<ContentView visibility="{{currentVisibility}}">
+				<Label text="I appear, hide and disappear" class="v-center text-center" />
+			</ContentView>
+      <Button class="btn btn-primary m-b-30" text="Toggle Visibility: Visible/Collapse/Hidden" tap="{{ toggleVisibility }}" />
+
+      <Label text="{{currentHiddenType}}" class="v-center text-center" />
+			<ContentView hidden="{{currentHidden}}">
+				<Label text="I appear and disappear" class="v-center text-center" />
+			</ContentView>
+      <Button class="btn btn-primary" text="Toggle Hidden" tap="{{ toggleHidden }}" />
+
+		</StackLayout>
+</Page>

packages/core/ui/core/view-base/index.ts

@@ -1163,6 +1163,19 @@ export const bindingContextProperty = new InheritedProperty<ViewBase, any>({
 });
 bindingContextProperty.register(ViewBase);
 
+export const hiddenProperty = new Property<ViewBase, boolean>({
+	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<ViewBase, string>({
 	name: 'className',
 	valueChanged(view: ViewBase, oldValue: string, newValue: string) {

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) {

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;
 	}