fix-next(css): className to preserve root views classes (#7725)

tests/app/ui/styling/root-views-css-classes-tests.ts

@@ -22,6 +22,7 @@ import {
 } from "tns-core-modules/ui/core/view/view-common";
 import { DeviceType } from "tns-core-modules/ui/enums/enums";
 
+const CLASS_NAME = "class-name";
 const ROOT_CSS_CLASS = "ns-root";
 const MODAL_CSS_CLASS = "ns-modal";
 const ANDROID_PLATFORM_CSS_CLASS = "ns-android";
@@ -32,18 +33,41 @@ const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
 const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
 const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
 
-export function test_root_view_root_css_class() {
-    const rootViewCssClasses = getRootView().cssClasses;
+function _test_root_view_root_css_class(shouldSetClassName: boolean) {
+    const rootView = getRootView();
+    if (shouldSetClassName) {
+        rootView.className = CLASS_NAME;
+    }
 
+    const rootViewCssClasses = rootView.cssClasses;
     TKUnit.assertTrue(rootViewCssClasses.has(
         ROOT_CSS_CLASS),
         `${ROOT_CSS_CLASS} CSS class is missing`
     );
+
+    if (shouldSetClassName) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            CLASS_NAME),
+            `${CLASS_NAME} CSS class is missing`
+        );
+    }
 }
 
-export function test_root_view_platform_css_class() {
-    const rootViewCssClasses = getRootView().cssClasses;
+export function test_root_view_root_css_class() {
+    _test_root_view_root_css_class(false);
+}
 
+export function test_root_view_class_name_preserve_root_css_class() {
+    _test_root_view_root_css_class(true);
+}
+
+function _test_root_view_platform_css_class(shouldSetClassName: boolean) {
+    const rootView = getRootView();
+    if (shouldSetClassName) {
+        rootView.className = CLASS_NAME;
+    }
+
+    const rootViewCssClasses = rootView.cssClasses;
     if (isAndroid) {
         TKUnit.assertTrue(rootViewCssClasses.has(
             ANDROID_PLATFORM_CSS_CLASS),
@@ -63,10 +87,30 @@ export function test_root_view_platform_css_class() {
             `${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`
         );
     }
+
+    if (shouldSetClassName) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            CLASS_NAME),
+            `${CLASS_NAME} CSS class is missing`
+        );
+    }
 }
 
-export function test_root_view_device_type_css_class() {
-    const rootViewCssClasses = getRootView().cssClasses;
+export function test_root_view_platform_css_class() {
+    _test_root_view_platform_css_class(false);
+}
+
+export function test_root_view_class_name_preserve_platform_css_class() {
+    _test_root_view_platform_css_class(true);
+}
+
+function _test_root_view_device_type_css_class(shouldSetClassName: boolean) {
+    const rootView = getRootView();
+    if (shouldSetClassName) {
+        rootView.className = CLASS_NAME;
+    }
+
+    const rootViewCssClasses = rootView.cssClasses;
     const deviceType = device.deviceType;
 
     if (deviceType === DeviceType.Phone) {
@@ -88,10 +132,30 @@ export function test_root_view_device_type_css_class() {
             `${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`
         );
     }
+
+    if (shouldSetClassName) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            CLASS_NAME),
+            `${CLASS_NAME} CSS class is missing`
+        );
+    }
 }
 
-export function test_root_view_orientation_css_class() {
-    const rootViewCssClasses = getRootView().cssClasses;
+export function test_root_view_device_type_css_class() {
+    _test_root_view_device_type_css_class(false);
+}
+
+export function test_root_view_class_name_preserve_device_type_css_class() {
+    _test_root_view_device_type_css_class(true);
+}
+
+function _test_root_view_orientation_css_class(shouldSetClassName: boolean) {
+    const rootView = getRootView();
+    if (shouldSetClassName) {
+        rootView.className = CLASS_NAME;
+    }
+
+    const rootViewCssClasses = rootView.cssClasses;
     let appOrientation;
 
     if (isAndroid) {
@@ -140,9 +204,24 @@ export function test_root_view_orientation_css_class() {
             `${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
         );
     }
+
+    if (shouldSetClassName) {
+        TKUnit.assertTrue(rootViewCssClasses.has(
+            CLASS_NAME),
+            `${CLASS_NAME} CSS class is missing`
+        );
+    }
 }
 
-export function test_modal_root_view_modal_css_class() {
+export function test_root_view_orientation_css_class() {
+    _test_root_view_orientation_css_class(false);
+}
+
+export function test_root_view_class_name_preserve_orientation_css_class() {
+    _test_root_view_orientation_css_class(true);
+}
+
+function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) {
     let modalClosed = false;
 
     const modalCloseCallback = function () {
@@ -153,7 +232,20 @@ export function test_modal_root_view_modal_css_class() {
         const page = <Page>args.object;
         page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);
 
-        TKUnit.assertTrue(_rootModalViews[0].cssClasses.has(MODAL_CSS_CLASS));
+        const rootModalView = _rootModalViews[0];
+        if (shouldSetClassName) {
+            rootModalView.className = CLASS_NAME;
+        }
+
+        const rootModalViewCssClasses = rootModalView.cssClasses;
+        TKUnit.assertTrue(rootModalViewCssClasses.has(MODAL_CSS_CLASS),
+            `${MODAL_CSS_CLASS} CSS class is missing`);
+
+        if (shouldSetClassName) {
+            TKUnit.assertTrue(rootModalViewCssClasses.has(CLASS_NAME),
+                `${CLASS_NAME} CSS class is missing`);
+        }
+
         args.closeCallback();
     };
 
@@ -186,3 +278,11 @@ export function test_modal_root_view_modal_css_class() {
     helper.navigate(hostPageFactory);
     TKUnit.waitUntilReady(() => modalClosed);
 }
+
+export function test_modal_root_view_modal_css_class() {
+    _test_modal_root_view_modal_css_class(false);
+}
+
+export function test_modal_root_view_class_name_preserve_modal_css_class() {
+    _test_modal_root_view_modal_css_class(true);
+}

tests/app/ui/styling/style-tests.ts

@@ -225,7 +225,7 @@ export function test_multiple_class_selector() {
     let page = helper.getClearCurrentPage();
     let btnWithClasses: buttonModule.Button;
 
-    page.css = ".style1 { color: red; } .style2 { background-color: blue } ";
+    page.css = ".style1 { color: red; } .style2 { background-color: blue; } ";
 
     //// Will be styled
     btnWithClasses = new buttonModule.Button();
@@ -239,6 +239,24 @@ export function test_multiple_class_selector() {
     helper.assertViewBackgroundColor(btnWithClasses, "#0000FF");
 }
 
+export function test_class_selector_overwriting() {
+    const page = helper.getClearCurrentPage();
+    page.css = ".first { color: red; } .second { background-color: blue; }";
+
+    const btnWithClass = new buttonModule.Button();
+    const stack = new stackModule.StackLayout();
+    page.content = stack;
+    stack.addChild(btnWithClass);
+
+    btnWithClass.className = "first";
+    helper.assertViewColor(btnWithClass, "#FF0000");
+    TKUnit.assert(btnWithClass.style.backgroundColor === undefined, " Background color should not have a value");
+
+    btnWithClass.className = "second";
+    TKUnit.assert(btnWithClass.style.color === undefined, "Color should not have a value");
+    helper.assertViewBackgroundColor(btnWithClass, "#0000FF");
+}
+
 export function test_id_selector() {
     let page = helper.getClearCurrentPage();
     page.style.color = unsetValue;
@@ -1497,7 +1515,7 @@ export function test_css_calc() {
     TKUnit.assertEqual(stack.width as any, 125, "Stack - width === 125");
 
     (stack as any).style = `width: calc(100% / 2)`;
-    TKUnit.assertDeepEqual(stack.width,  { unit: "%", value: 0.5 }, "Stack - width === 50%");
+    TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
 
     // This should log an error for the invalid css-calc expression, but not cause a crash
     stack.className = "invalid-css-calc";
@@ -1568,7 +1586,7 @@ export function test_nested_css_calc() {
 
     (stack as any).style = `width: calc(100% * calc(1 / 2)`;
 
-    TKUnit.assertDeepEqual(stack.width,  { unit: "%", value: 0.5 }, "Stack - width === 50%");
+    TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
 }
 
 export function test_css_variables() {
@@ -1678,7 +1696,7 @@ export function test_css_calc_and_variables() {
 
     // Test setting the CSS variable via the style-attribute, this should override any value set via css-class
     (stack as any).style = `${cssVarName}: 0.5`;
-    TKUnit.assertDeepEqual(stack.width,  { unit: "%", value: 0.5 }, "Stack - width === 50%");
+    TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
 }
 
 export function test_css_variable_fallback() {
@@ -1819,10 +1837,10 @@ export function test_nested_css_calc_and_variables() {
     // Test setting the CSS variable via the style-attribute, this should override any value set via css-class
     stack.className = "wide";
     (stack as any).style = `${cssVarName}: 0.25`;
-    TKUnit.assertDeepEqual(stack.width,  { unit: "%", value: 0.5 }, "Stack - width === 50%");
+    TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 0.5 }, "Stack - width === 50%");
 
     stack.className = "nested";
-    TKUnit.assertDeepEqual(stack.width,  { unit: "%", value: 1 }, "Stack - width === 100%");
+    TKUnit.assertDeepEqual(stack.width, { unit: "%", value: 1 }, "Stack - width === 100%");
 }
 
 export function test_css_variable_is_applied_to_normal_properties() {

tns-core-modules/application/application-common.ts

@@ -40,6 +40,8 @@ import {
     LoadAppCSSEventData,
     UnhandledErrorEventData
 } from "./application";
+
+import { CLASS_PREFIX, pushToRootViewCssClasses, removeFromRootViewCssClasses } from "../css/system-classes";
 import { DeviceOrientation } from "../ui/enums/enums";
 
 export { UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData };
@@ -54,11 +56,10 @@ export const uncaughtErrorEvent = "uncaughtError";
 export const discardedErrorEvent = "discardedError";
 export const orientationChangedEvent = "orientationChanged";
 
-export const CSS_CLASS_PREFIX = "ns-";
 const ORIENTATION_CSS_CLASSES = [
-    `${CSS_CLASS_PREFIX}${DeviceOrientation.portrait}`,
-    `${CSS_CLASS_PREFIX}${DeviceOrientation.landscape}`,
-    `${CSS_CLASS_PREFIX}${DeviceOrientation.unknown}`
+    `${CLASS_PREFIX}${DeviceOrientation.portrait}`,
+    `${CLASS_PREFIX}${DeviceOrientation.landscape}`,
+    `${CLASS_PREFIX}${DeviceOrientation.unknown}`
 ];
 
 let cssFile: string = "./app.css";
@@ -126,9 +127,15 @@ export function loadAppCss(): void {
 }
 
 export function orientationChanged(rootView: View, newOrientation: "portrait" | "landscape" | "unknown"): void {
-    const newOrientationCssClass = `${CSS_CLASS_PREFIX}${newOrientation}`;
+    const newOrientationCssClass = `${CLASS_PREFIX}${newOrientation}`;
     if (!rootView.cssClasses.has(newOrientationCssClass)) {
-        ORIENTATION_CSS_CLASSES.forEach(c => rootView.cssClasses.delete(c));
+        const removeCssClass = (c: string) => {
+            removeFromRootViewCssClasses(c);
+            rootView.cssClasses.delete(c);
+        };
+
+        ORIENTATION_CSS_CLASSES.forEach(c => removeCssClass(c));
+        pushToRootViewCssClasses(newOrientationCssClass);
         rootView.cssClasses.add(newOrientationCssClass);
         rootView._onCssStateChange();
     }

tns-core-modules/application/application.d.ts

@@ -53,11 +53,6 @@ export const lowMemoryEvent: string;
  */
 export const orientationChangedEvent: string;
 
-/**
- * String value "ns-" used for CSS class prefix.
- */
-export const CSS_CLASS_PREFIX: string;
-
 /**
  * Event data containing information for the application events.
  */

tns-core-modules/application/application.ios.ts

@@ -1,4 +1,3 @@
-
 import {
     ApplicationEventData,
     CssChangedEventData,
@@ -9,9 +8,8 @@ import {
 } from ".";
 
 import {
-    CSS_CLASS_PREFIX, displayedEvent, exitEvent, getCssFileName, launchEvent, livesync,
-    lowMemoryEvent, notify, on, orientationChanged, orientationChangedEvent, resumeEvent,
-    setApplication, suspendEvent
+    displayedEvent, exitEvent, getCssFileName, launchEvent, livesync, lowMemoryEvent, notify, on,
+    orientationChanged, orientationChangedEvent, resumeEvent, setApplication, suspendEvent
 } from "./application-common";
 
 // First reexport so that app module is initialized.
@@ -19,18 +17,15 @@ export * from "./application-common";
 
 // TODO: Remove this and get it from global to decouple builder for angular
 import { createViewFromEntry } from "../ui/builder";
+import { CLASS_PREFIX, getRootViewCssClasses, pushToRootViewCssClasses } from "../css/system-classes";
 import { ios as iosView, View } from "../ui/core/view";
 import { Frame, NavigationEntry } from "../ui/frame";
 import { device } from "../platform/platform";
 import { profile } from "../profiling";
 import { ios } from "../utils/utils";
 
-const ROOT = "root";
 const IOS_PLATFORM = "ios";
-const ROOT_VIEW_CSS_CLASSES = [
-    `${CSS_CLASS_PREFIX}${ROOT}`,
-    `${CSS_CLASS_PREFIX}${IOS_PLATFORM}`
-];
+
 const getVisibleViewController = ios.getVisibleViewController;
 
 // NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430
@@ -317,9 +312,12 @@ function createRootView(v?: View) {
     }
 
     const deviceType = device.deviceType.toLowerCase();
-    ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${deviceType}`);
-    ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${iosApp.orientation}`);
-    ROOT_VIEW_CSS_CLASSES.forEach(c => rootView.cssClasses.add(c));
+    pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
+    pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
+    pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
+
+    const rootViewCssClasses = getRootViewCssClasses();
+    rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));
 
     return rootView;
 }

tns-core-modules/css/system-classes.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @module "system-classes"
+ */ /** */
+
+/**
+ * String value "ns-" used for CSS system class prefix.
+ */
+export const CLASS_PREFIX: string;
+
+/**
+ * Gets CSS system class for modal root view.
+ */
+export function getModalRootViewCssClass(): string;
+
+/**
+ * Gets CSS system classes for root view.
+ */
+export function getRootViewCssClasses(): string[];
+
+/**
+ * * Appends new CSS class to the system classes and returns the new length of the array.
+ * @param value New CSS system class.
+ */
+export function pushToRootViewCssClasses(value: string): number;
+
+/**
+ * Removes CSS class from the system classes and returns it.
+ * @param value
+ */
+export function removeFromRootViewCssClasses(value: string): string;

tns-core-modules/css/system-classes.ts

@@ -0,0 +1,32 @@
+const MODAL = "modal";
+const ROOT = "root";
+
+export const CLASS_PREFIX = "ns-";
+
+const modalRootViewCssClass = `${CLASS_PREFIX}${MODAL}`;
+const rootViewCssClasses = [`${CLASS_PREFIX}${ROOT}`];
+
+export function getModalRootViewCssClass(): string {
+    return modalRootViewCssClass;
+}
+
+export function getRootViewCssClasses(): string[] {
+    return rootViewCssClasses;
+}
+
+export function pushToRootViewCssClasses(value: string): number {
+    rootViewCssClasses.push(value);
+
+    return rootViewCssClasses.length;
+}
+
+export function removeFromRootViewCssClasses(value: string): string {
+    const index = rootViewCssClasses.indexOf(value);
+    let removedElement;
+
+    if (index > -1) {
+        removedElement = rootViewCssClasses.splice(index, 1);
+    }
+
+    return removedElement;
+}

tns-core-modules/ui/core/view-base/view-base.ts

@@ -1,10 +1,13 @@
 // Definitions.
 import { ViewBase as ViewBaseDefinition } from ".";
+import {
+    AlignSelf, FlexGrow, FlexShrink, FlexWrapBefore, Order
+} from "../../layouts/flexbox-layout";
 import { Page } from "../../page";
-import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "../../layouts/flexbox-layout";
 
 // Types.
 import { Property, CssProperty, CssAnimationProperty, InheritedProperty, Style, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from "../properties";
+import { getModalRootViewCssClass, getRootViewCssClasses } from "../../../css/system-classes";
 import { Source } from "../../../utils/debug";
 import { Binding, BindingOptions, Observable, WrappedValue, PropertyChangeData, traceEnabled, traceWrite, traceCategories } from "../bindable";
 import { isIOS, isAndroid } from "../../../platform";
@@ -22,10 +25,9 @@ export { isIOS, isAndroid, layout, Color };
 export * from "../bindable";
 export * from "../properties";
 
+import * as dnm from "../../../debugger/dom-node";
 import * as ssm from "../../styling/style-scope";
 
-// import { DOMNode } from "../../../debugger/dom-node";
-import * as dnm from "../../../debugger/dom-node";
 let domNodeModule: typeof dnm;
 
 function ensuredomNodeModule(): void {
@@ -1036,11 +1038,26 @@ bindingContextProperty.register(ViewBase);
 export const classNameProperty = new Property<ViewBase, string>({
     name: "className",
     valueChanged(view: ViewBase, oldValue: string, newValue: string) {
-        let classes = view.cssClasses;
-        classes.clear();
-        if (typeof newValue === "string" && newValue !== "") {
-            newValue.split(" ").forEach(c => classes.add(c));
+        const cssClasses = view.cssClasses;
+
+        const modalViewCssClass = getModalRootViewCssClass();
+        const rootViewCssClasses = getRootViewCssClasses();
+
+        const shouldAddModalRootViewCssClass = cssClasses.has(modalViewCssClass);
+        const shouldAddRootViewCssClasses = cssClasses.has(rootViewCssClasses[0]);
+
+        cssClasses.clear();
+
+        if (shouldAddModalRootViewCssClass) {
+            cssClasses.add(modalViewCssClass);
+        } else if (shouldAddRootViewCssClasses) {
+            rootViewCssClasses.forEach(c => cssClasses.add(c));
         }
+
+        if (typeof newValue === "string" && newValue !== "") {
+            newValue.split(" ").forEach(c => cssClasses.add(c));
+        }
+
         view._onCssStateChange();
     }
 });

tns-core-modules/ui/core/view/view-common.ts

@@ -5,9 +5,8 @@ import {
 } from ".";
 
 import {
-    ViewBase, Property, booleanConverter, EventData, layout,
-    getEventOrGestureName, traceEnabled, traceWrite, traceCategories,
-    InheritedProperty, ShowModalOptions
+    booleanConverter, EventData, getEventOrGestureName, InheritedProperty, layout,
+    Property, ShowModalOptions, traceCategories, traceEnabled, traceWrite, ViewBase
 } from "../view-base";
 
 import { HorizontalAlignment, VerticalAlignment, Visibility, Length, PercentLength } from "../../styling/style-properties";
@@ -20,6 +19,7 @@ import {
     fromString as gestureFromString
 } from "../../gestures";
 
+import { getModalRootViewCssClass } from "../../../css/system-classes";
 import { createViewFromEntry } from "../../builder";
 import { sanitizeModuleName } from "../../builder/module-name-sanitizer";
 import { StyleScope } from "../../styling/style-scope";
@@ -31,9 +31,6 @@ export * from "../view-base";
 export { LinearGradient };
 
 import * as am from "../../animation";
-import { CSS_CLASS_PREFIX } from "../../../application";
-
-const MODAL = "modal";
 
 let animationModule: typeof am;
 function ensureAnimationModule() {
@@ -373,7 +370,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
     protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
         _rootModalViews.push(this);
-        this.cssClasses.add(`${CSS_CLASS_PREFIX}${MODAL}`);
+
+        const modalRootViewCssClass = getModalRootViewCssClass();
+        this.cssClasses.add(modalRootViewCssClass);
 
         parent._modal = this;
         this._modalParent = parent;

tns-core-modules/ui/frame/frame.android.ts

@@ -7,9 +7,10 @@ import { Page } from "../page";
 
 // Types.
 import * as application from "../../application";
+
 import {
-    FrameBase, goBack, _stack, NavigationType,
-    Observable, View, traceCategories, traceEnabled, traceError, traceWrite
+    _stack, FrameBase, goBack, NavigationType, Observable,
+    traceCategories, traceEnabled, traceError, traceWrite, View
 } from "./frame-common";
 
 import {
@@ -19,6 +20,7 @@ import {
 
 // TODO: Remove this and get it from global to decouple builder for angular
 import { createViewFromEntry } from "../builder";
+import { CLASS_PREFIX, getRootViewCssClasses, pushToRootViewCssClasses } from "../../css/system-classes";
 import { device } from "../../platform/platform";
 import { profile } from "../../profiling";
 
@@ -32,12 +34,7 @@ interface AnimatorState {
     transitionName: string;
 }
 
-const ROOT = "root";
 const ANDROID_PLATFORM = "android";
-const ROOT_VIEW_CSS_CLASSES = [
-    `${application.CSS_CLASS_PREFIX}${ROOT}`,
-    `${application.CSS_CLASS_PREFIX}${ANDROID_PLATFORM}`
-];
 
 const INTENT_EXTRA = "com.tns.activity";
 const ROOT_VIEW_ID_EXTRA = "com.tns.activity.rootViewId";
@@ -1289,9 +1286,12 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
             activityRootViewsMap.set(rootView._domId, new WeakRef(rootView));
 
             const deviceType = device.deviceType.toLowerCase();
-            ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${deviceType}`);
-            ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${application.android.orientation}`);
-            ROOT_VIEW_CSS_CLASSES.forEach(c => this._rootView.cssClasses.add(c));
+            pushToRootViewCssClasses(`${CLASS_PREFIX}${ANDROID_PLATFORM}`);
+            pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
+            pushToRootViewCssClasses(`${CLASS_PREFIX}${application.android.orientation}`);
+
+            const rootViewCssClasses = getRootViewCssClasses();
+            rootViewCssClasses.forEach(c => this._rootView.cssClasses.add(c));
         }
 
         // Initialize native visual tree;

tns-core-modules/ui/utils.d.ts

@@ -3,6 +3,7 @@
  */
 
 import { View } from "./core/view";
+
 export module ios {
     /**
      * Gets actual height of a [UIView](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIView_Class/) widget in device pixels.