@nativescript/core 8.9.0-alpha.3 → 8.9.0-napi-es5.0

package/ui/core/view/view-common.js

@@ -17,27 +17,31 @@ import { accessibilityBlurEvent, accessibilityFocusChangedEvent, accessibilityFo
 import { SharedTransition } from '../../transition/shared-transition';
 // helpers (these are okay re-exported here)
 export * from './view-helper';
-let animationModule;
+var animationModule;
 function ensureAnimationModule() {
     if (!animationModule) {
         animationModule = require('../../animation');
     }
 }
 export function CSSType(type) {
-    return (cls) => {
+    return function (cls) {
         cls.prototype.cssType = type;
     };
 }
 export function viewMatchesModuleContext(view, context, types) {
-    return context && view._moduleName && context.type && types.some((type) => type === context.type) && context.path && context.path.includes(view._moduleName);
+    return context && view._moduleName && context.type && types.some(function (type) { return type === context.type; }) && context.path && context.path.includes(view._moduleName);
 }
-export function PseudoClassHandler(...pseudoClasses) {
-    const stateEventNames = pseudoClasses.map((s) => ':' + s);
-    const listeners = Symbol('listeners');
-    return (target, propertyKey, descriptor) => {
+export function PseudoClassHandler() {
+    var pseudoClasses = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        pseudoClasses[_i] = arguments[_i];
+    }
+    var stateEventNames = pseudoClasses.map(function (s) { return ':' + s; });
+    var listeners = Symbol('listeners');
+    return function (target, propertyKey, descriptor) {
         function update(change) {
-            const prev = this[listeners] || 0;
-            const next = prev + change;
+            var prev = this[listeners] || 0;
+            var next = prev + change;
             if (prev <= 0 && next > 0) {
                 this[propertyKey](true);
             }
@@ -45,39 +49,45 @@ export function PseudoClassHandler(...pseudoClasses) {
                 this[propertyKey](false);
             }
         }
-        stateEventNames.forEach((s) => (target[s] = update));
+        stateEventNames.forEach(function (s) { return (target[s] = update); });
     };
 }
-export const _rootModalViews = new Array();
+export var _rootModalViews = new Array();
 // TODO: remove once we fully switch to the new event system
-const warnedEvent = new Set();
-export class ViewCommon extends ViewBase {
-    constructor() {
-        super(...arguments);
-        this._gestureObservers = {};
-    }
-    get css() {
-        const scope = this._styleScope;
-        return scope && scope.css;
-    }
-    set css(value) {
-        this._updateStyleScope(undefined, undefined, value);
-    }
-    addCss(cssString) {
+var warnedEvent = new Set();
+var ViewCommon = /** @class */ (function (_super) {
+    __extends(ViewCommon, _super);
+    function ViewCommon() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._gestureObservers = {};
+        return _this;
+    }
+    Object.defineProperty(ViewCommon.prototype, "css", {
+        get: function () {
+            var scope = this._styleScope;
+            return scope && scope.css;
+        },
+        set: function (value) {
+            this._updateStyleScope(undefined, undefined, value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewCommon.prototype.addCss = function (cssString) {
         this._updateStyleScope(undefined, cssString);
-    }
-    addCssFile(cssFileName) {
+    };
+    ViewCommon.prototype.addCssFile = function (cssFileName) {
         this._updateStyleScope(cssFileName);
-    }
-    changeCssFile(cssFileName) {
-        const scope = this._styleScope;
+    };
+    ViewCommon.prototype.changeCssFile = function (cssFileName) {
+        var scope = this._styleScope;
         if (scope && cssFileName) {
             scope.changeCssFile(cssFileName);
             this._onCssStateChange();
         }
-    }
-    _updateStyleScope(cssFileName, cssString, css) {
-        let scope = this._styleScope;
+    };
+    ViewCommon.prototype._updateStyleScope = function (cssFileName, cssString, css) {
+        var scope = this._styleScope;
         if (!scope) {
             scope = new StyleScope();
             this.setScopeProperty(scope, cssFileName, cssString, css);
@@ -88,8 +98,8 @@ export class ViewCommon extends ViewBase {
             this.setScopeProperty(scope, cssFileName, cssString, css);
             this._onCssStateChange();
         }
-    }
-    setScopeProperty(scope, cssFileName, cssString, css) {
+    };
+    ViewCommon.prototype.setScopeProperty = function (scope, cssFileName, cssString, css) {
         if (cssFileName !== undefined) {
             scope.addCssFile(cssFileName);
         }
@@ -99,75 +109,73 @@ export class ViewCommon extends ViewBase {
         else if (css !== undefined) {
             scope.css = css;
         }
-    }
-    onLoaded() {
+    };
+    ViewCommon.prototype.onLoaded = function () {
         if (!this.isLoaded) {
-            const hasTap = this.hasListeners('tap') || this.hasListeners('tapChange') || !!this.getGestureObservers(GestureTypes.tap);
-            const enableTapAnimations = TouchManager.enableGlobalTapAnimations && hasTap;
+            var hasTap = this.hasListeners('tap') || this.hasListeners('tapChange') || !!this.getGestureObservers(GestureTypes.tap);
+            var enableTapAnimations = TouchManager.enableGlobalTapAnimations && hasTap;
             if (!this.ignoreTouchAnimation && (this.touchAnimation || enableTapAnimations)) {
                 TouchManager.addAnimations(this);
             }
             if (__VISIONOS__) {
-                const enableHoverStyle = TouchManager.enableGlobalHoverWhereTap && hasTap;
+                var enableHoverStyle = TouchManager.enableGlobalHoverWhereTap && hasTap;
                 if (!this.visionIgnoreHoverStyle && (this.visionHoverStyle || enableHoverStyle)) {
                     TouchManager.addHoverStyle(this);
                 }
             }
         }
-        super.onLoaded();
-        if (this.accessible) {
-            setupAccessibleView(this);
-        }
-    }
-    _closeAllModalViewsInternal() {
+        _super.prototype.onLoaded.call(this);
+        setupAccessibleView(this);
+    };
+    ViewCommon.prototype._closeAllModalViewsInternal = function () {
         if (_rootModalViews && _rootModalViews.length > 0) {
-            _rootModalViews.forEach((v) => {
+            _rootModalViews.forEach(function (v) {
                 v.closeModal();
             });
             return true;
         }
         return false;
-    }
-    _getRootModalViews() {
+    };
+    ViewCommon.prototype._getRootModalViews = function () {
         return _rootModalViews;
-    }
-    _onLivesync(context) {
+    };
+    ViewCommon.prototype._onLivesync = function (context) {
         if (Trace.isEnabled()) {
-            Trace.write(`${this}._onLivesync(${JSON.stringify(context)})`, Trace.categories.Livesync);
+            Trace.write("".concat(this, "._onLivesync(").concat(JSON.stringify(context), ")"), Trace.categories.Livesync);
         }
-        let handled = false;
+        var handled = false;
         if (this._closeAllModalViewsInternal()) {
             handled = true;
         }
         if (this._handleLivesync(context)) {
             return true;
         }
-        this.eachChildView((child) => {
+        this.eachChildView(function (child) {
             if (child._onLivesync(context)) {
                 handled = true;
                 return false;
             }
         });
         return handled;
-    }
-    _handleLivesync(context) {
+    };
+    ViewCommon.prototype._handleLivesync = function (context) {
         if (Trace.isEnabled()) {
-            Trace.write(`${this}._handleLivesync(${JSON.stringify(context)})`, Trace.categories.Livesync);
+            Trace.write("".concat(this, "._handleLivesync(").concat(JSON.stringify(context), ")"), Trace.categories.Livesync);
         }
         // Handle local CSS
         if (viewMatchesModuleContext(this, context, ['style'])) {
             if (Trace.isEnabled()) {
-                Trace.write(`Change Handled: Changing CSS for ${this}`, Trace.categories.Livesync);
+                Trace.write("Change Handled: Changing CSS for ".concat(this), Trace.categories.Livesync);
             }
             // Always load styles with ".css" extension. Even when changes are in ".scss" ot ".less" files
-            const cssModuleName = `${sanitizeModuleName(context.path)}.css`;
+            var cssModuleName = "".concat(sanitizeModuleName(context.path), ".css");
             this.changeCssFile(cssModuleName);
             return true;
         }
         // Handle script/markup changes in custom components by falling back to page refresh
         if (viewMatchesModuleContext(this, context, ['markup', 'script']) && this.page && this.page.frame) {
             if (Trace.isEnabled()) {
-                Trace.write(`Change Handled: Changing ${context.type} for ${this} inside ${this.page}`, Trace.categories.Livesync);
+                Trace.write("Change Handled: Changing ".concat(context.type, " for ").concat(this, " inside ").concat(this.page), Trace.categories.Livesync);
             }
             return this.page.frame._handleLivesync({
                 type: context.type,
@@ -175,16 +183,17 @@ export class ViewCommon extends ViewBase {
             });
         }
         return false;
-    }
-    _setupAsRootView(context) {
-        super._setupAsRootView(context);
+    };
+    ViewCommon.prototype._setupAsRootView = function (context) {
+        _super.prototype._setupAsRootView.call(this, context);
         if (!this._styleScope) {
             this._updateStyleScope();
         }
-    }
-    _observe(type, callback, thisArg) {
+    };
+    ViewCommon.prototype._observe = function (type, callback, thisArg) {
+        var _a;
         thisArg = thisArg || undefined;
-        if (this._gestureObservers[type]?.find((observer) => observer.callback === callback && observer.context === thisArg)) {
+        if ((_a = this._gestureObservers[type]) === null || _a === void 0 ? void 0 : _a.find(function (observer) { return observer.callback === callback && observer.context === thisArg; })) {
             // Already added.
             return;
         }
@@ -192,70 +201,70 @@ export class ViewCommon extends ViewBase {
             this._gestureObservers[type] = [];
         }
         this._gestureObservers[type].push(gestureObserve(this, type, callback, thisArg));
-    }
-    getGestureObservers(type) {
+    };
+    ViewCommon.prototype.getGestureObservers = function (type) {
         return this._gestureObservers[type];
-    }
-    addEventListener(eventNames, callback, thisArg) {
+    };
+    ViewCommon.prototype.addEventListener = function (eventNames, callback, thisArg) {
         thisArg = thisArg || undefined;
         // TODO: Remove this once we fully switch to the new event system
         if (typeof eventNames === 'number') {
             // likely a gesture type from a plugin
-            const gestureName = gestureToString(eventNames);
+            var gestureName = gestureToString(eventNames);
             if (!warnedEvent.has(gestureName)) {
-                console.warn(`Using a gesture type (${gestureName}) as an event name is deprecated. Please use the event name instead.`);
+                console.warn("Using a gesture type (".concat(gestureName, ") as an event name is deprecated. Please use the event name instead."));
                 warnedEvent.add(gestureName);
             }
             eventNames = gestureName;
         }
         // Normalize "ontap" -> "tap"
-        const normalizedName = getEventOrGestureName(eventNames);
+        var normalizedName = getEventOrGestureName(eventNames);
         // Coerce "tap" -> GestureTypes.tap
         // Coerce "loaded" -> undefined
-        const gestureType = gestureFromString(normalizedName);
+        var gestureType = gestureFromString(normalizedName);
         // If it's a gesture (and this Observable declares e.g. `static tapEvent`)
         if (gestureType && !this._isEvent(normalizedName)) {
             this._observe(gestureType, callback, thisArg);
             return;
         }
-        super.addEventListener(normalizedName, callback, thisArg);
-    }
-    removeEventListener(eventNames, callback, thisArg) {
+        _super.prototype.addEventListener.call(this, normalizedName, callback, thisArg);
+    };
+    ViewCommon.prototype.removeEventListener = function (eventNames, callback, thisArg) {
         thisArg = thisArg || undefined;
         // TODO: Remove this once we fully switch to the new event system
         if (typeof eventNames === 'number') {
             // likely a gesture type from a plugin
-            const gestureName = gestureToString(eventNames);
+            var gestureName = gestureToString(eventNames);
             if (!warnedEvent.has(gestureName)) {
-                console.warn(`Using a gesture type (${gestureName}) as an event name is deprecated. Please use the event name instead.`);
+                console.warn("Using a gesture type (".concat(gestureName, ") as an event name is deprecated. Please use the event name instead."));
                 warnedEvent.add(gestureName);
             }
             eventNames = gestureName;
         }
         // Normalize "ontap" -> "tap"
-        const normalizedName = getEventOrGestureName(eventNames);
+        var normalizedName = getEventOrGestureName(eventNames);
         // Coerce "tap" -> GestureTypes.tap
         // Coerce "loaded" -> undefined
-        const gestureType = gestureFromString(normalizedName);
+        var gestureType = gestureFromString(normalizedName);
         // If it's a gesture (and this Observable declares e.g. `static tapEvent`)
         if (gestureType && !this._isEvent(normalizedName)) {
             this._disconnectGestureObservers(gestureType, callback, thisArg);
             return;
         }
-        super.removeEventListener(normalizedName, callback, thisArg);
-    }
-    onBackPressed() {
+        _super.prototype.removeEventListener.call(this, normalizedName, callback, thisArg);
+    };
+    ViewCommon.prototype.onBackPressed = function () {
         return false;
-    }
-    _getFragmentManager() {
+    };
+    ViewCommon.prototype._getFragmentManager = function () {
         return undefined;
-    }
-    getModalOptions(args) {
+    };
+    ViewCommon.prototype.getModalOptions = function (args) {
         if (args.length === 0) {
             throw new Error('showModal without parameters is deprecated. Please call showModal on a view instance instead.');
         }
         else {
-            let options = null;
+            var options = null;
             if (args.length === 2) {
                 options = args[1];
             }
@@ -274,119 +283,137 @@ export class ViewCommon extends ViewBase {
                     stretched: args[5],
                 };
             }
-            const firstArgument = args[0];
-            const view = firstArgument instanceof ViewCommon ? firstArgument : Builder.createViewFromEntry({
+            var firstArgument = args[0];
+            var view = firstArgument instanceof ViewCommon ? firstArgument : Builder.createViewFromEntry({
                 moduleName: firstArgument,
             });
-            return { view, options };
+            return { view: view, options: options };
         }
-    }
-    showModal(...args) {
-        const { view, options } = this.getModalOptions(args);
-        if (options.transition?.instance) {
-            SharedTransition.updateState(options.transition?.instance.id, {
+    };
+    ViewCommon.prototype.showModal = function () {
+        var _a, _b;
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var _c = this.getModalOptions(args), view = _c.view, options = _c.options;
+        if ((_a = options.transition) === null || _a === void 0 ? void 0 : _a.instance) {
+            SharedTransition.updateState((_b = options.transition) === null || _b === void 0 ? void 0 : _b.instance.id, {
                 page: this,
                 toPage: view,
             });
         }
         view._showNativeModalView(this, options);
         return view;
-    }
-    closeModal(...args) {
-        const closeCallback = this._closeModalCallback;
+    };
+    ViewCommon.prototype.closeModal = function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var closeCallback = this._closeModalCallback;
         if (closeCallback) {
-            closeCallback(...args);
+            closeCallback.apply(void 0, args);
         }
         else {
-            const parent = this.parent;
-            if (parent) {
-                parent.closeModal(...args);
+            var parent_1 = this.parent;
+            if (parent_1) {
+                parent_1.closeModal.apply(parent_1, args);
             }
         }
-    }
-    get modal() {
-        return this._modal;
-    }
-    _showNativeModalView(parent, options) {
+    };
+    Object.defineProperty(ViewCommon.prototype, "modal", {
+        get: function () {
+            return this._modal;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewCommon.prototype._showNativeModalView = function (parent, options) {
+        var _this = this;
         _rootModalViews.push(this);
         this.cssClasses.add(CSSUtils.MODAL_ROOT_VIEW_CSS_CLASS);
-        const modalRootViewCssClasses = CSSUtils.getSystemCssClasses();
-        modalRootViewCssClasses.forEach((c) => this.cssClasses.add(c));
+        var modalRootViewCssClasses = CSSUtils.getSystemCssClasses();
+        modalRootViewCssClasses.forEach(function (c) { return _this.cssClasses.add(c); });
         parent._modal = this;
         this.style.fontScaleInternal = getCurrentFontScale();
         this._modalParent = parent;
         this._modalContext = options.context;
-        this._closeModalCallback = (...originalArgs) => {
-            const cleanupModalViews = () => {
-                const modalIndex = _rootModalViews.indexOf(this);
+        this._closeModalCallback = function () {
+            var originalArgs = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                originalArgs[_i] = arguments[_i];
+            }
+            var cleanupModalViews = function () {
+                var modalIndex = _rootModalViews.indexOf(_this);
                 _rootModalViews.splice(modalIndex, 1);
-                this._modalParent = null;
-                this._modalContext = null;
-                this._closeModalCallback = null;
-                this._dialogClosed();
+                _this._modalParent = null;
+                _this._modalContext = null;
+                _this._closeModalCallback = null;
+                _this._dialogClosed();
                 parent._modal = null;
             };
-            const whenClosedCallback = () => {
-                const transitionState = SharedTransition.getState(this.transitionId);
-                if (transitionState?.interactiveBegan) {
-                    SharedTransition.updateState(this.transitionId, {
+            var whenClosedCallback = function () {
+                var transitionState = SharedTransition.getState(_this.transitionId);
+                if (transitionState === null || transitionState === void 0 ? void 0 : transitionState.interactiveBegan) {
+                    SharedTransition.updateState(_this.transitionId, {
                         interactiveBegan: false,
                     });
-                    if (!transitionState?.interactiveCancelled) {
+                    if (!(transitionState === null || transitionState === void 0 ? void 0 : transitionState.interactiveCancelled)) {
                         cleanupModalViews();
                     }
                 }
-                if (!transitionState?.interactiveCancelled) {
+                if (!(transitionState === null || transitionState === void 0 ? void 0 : transitionState.interactiveCancelled)) {
                     if (typeof options.closeCallback === 'function') {
                         options.closeCallback.apply(undefined, originalArgs);
                     }
-                    this._tearDownUI(true);
+                    _this._tearDownUI(true);
                 }
             };
-            const transitionState = SharedTransition.getState(this.transitionId);
-            if (!transitionState?.interactiveBegan) {
+            var transitionState = SharedTransition.getState(_this.transitionId);
+            if (!(transitionState === null || transitionState === void 0 ? void 0 : transitionState.interactiveBegan)) {
                 cleanupModalViews();
             }
-            this._hideNativeModalView(parent, whenClosedCallback);
+            _this._hideNativeModalView(parent, whenClosedCallback);
         };
-    }
-    _hideNativeModalView(parent, whenClosedCallback) { }
-    _raiseLayoutChangedEvent() {
-        const args = {
+    };
+    ViewCommon.prototype._hideNativeModalView = function (parent, whenClosedCallback) { };
+    ViewCommon.prototype._raiseLayoutChangedEvent = function () {
+        var args = {
             eventName: ViewCommon.layoutChangedEvent,
             object: this,
         };
         this.notify(args);
-    }
-    _raiseShownModallyEvent() {
-        const args = {
+    };
+    ViewCommon.prototype._raiseShownModallyEvent = function () {
+        var args = {
             eventName: ViewCommon.shownModallyEvent,
             object: this,
             context: this._modalContext,
             closeCallback: this._closeModalCallback,
         };
         this.notify(args);
-    }
-    _raiseShowingModallyEvent() {
-        const args = {
+    };
+    ViewCommon.prototype._raiseShowingModallyEvent = function () {
+        var args = {
             eventName: ViewCommon.showingModallyEvent,
             object: this,
             context: this._modalContext,
             closeCallback: this._closeModalCallback,
         };
         this.notify(args);
-    }
-    _isEvent(name) {
-        return this.constructor && `${name}Event` in this.constructor;
-    }
-    _disconnectGestureObservers(type, callback, thisArg) {
+    };
+    ViewCommon.prototype._isEvent = function (name) {
+        return this.constructor && "".concat(name, "Event") in this.constructor;
+    };
+    ViewCommon.prototype._disconnectGestureObservers = function (type, callback, thisArg) {
         // Largely mirrors the implementation of Observable.innerRemoveEventListener().
-        const observers = this.getGestureObservers(type);
+        var observers = this.getGestureObservers(type);
         if (!observers) {
             return;
         }
-        for (let i = 0; i < observers.length; i++) {
-            const observer = observers[i];
+        for (var i = 0; i < observers.length; i++) {
+            var observer = observers[i];
             // If we have a `thisArg`, refine on both `callback` and `thisArg`.
             if (thisArg && (observer.callback !== callback || observer.context !== thisArg)) {
                 continue;
@@ -402,460 +429,732 @@ export class ViewCommon extends ViewBase {
         if (!observers.length) {
             delete this._gestureObservers[type];
         }
-    }
-    // START Style property shortcuts
-    get borderColor() {
-        return this.style.borderColor;
-    }
-    set borderColor(value) {
-        this.style.borderColor = value;
-    }
-    get borderTopColor() {
-        return this.style.borderTopColor;
-    }
-    set borderTopColor(value) {
-        this.style.borderTopColor = value;
-    }
-    get borderRightColor() {
-        return this.style.borderRightColor;
-    }
-    set borderRightColor(value) {
-        this.style.borderRightColor = value;
-    }
-    get borderBottomColor() {
-        return this.style.borderBottomColor;
-    }
-    set borderBottomColor(value) {
-        this.style.borderBottomColor = value;
-    }
-    get borderLeftColor() {
-        return this.style.borderLeftColor;
-    }
-    set borderLeftColor(value) {
-        this.style.borderLeftColor = value;
-    }
-    get borderWidth() {
-        return this.style.borderWidth;
-    }
-    set borderWidth(value) {
-        this.style.borderWidth = value;
-    }
-    get borderTopWidth() {
-        return this.style.borderTopWidth;
-    }
-    set borderTopWidth(value) {
-        this.style.borderTopWidth = value;
-    }
-    get borderRightWidth() {
-        return this.style.borderRightWidth;
-    }
-    set borderRightWidth(value) {
-        this.style.borderRightWidth = value;
-    }
-    get borderBottomWidth() {
-        return this.style.borderBottomWidth;
-    }
-    set borderBottomWidth(value) {
-        this.style.borderBottomWidth = value;
-    }
-    get borderLeftWidth() {
-        return this.style.borderLeftWidth;
-    }
-    set borderLeftWidth(value) {
-        this.style.borderLeftWidth = value;
-    }
-    get borderRadius() {
-        return this.style.borderRadius;
-    }
-    set borderRadius(value) {
-        this.style.borderRadius = value;
-    }
-    get borderTopLeftRadius() {
-        return this.style.borderTopLeftRadius;
-    }
-    set borderTopLeftRadius(value) {
-        this.style.borderTopLeftRadius = value;
-    }
-    get borderTopRightRadius() {
-        return this.style.borderTopRightRadius;
-    }
-    set borderTopRightRadius(value) {
-        this.style.borderTopRightRadius = value;
-    }
-    get borderBottomRightRadius() {
-        return this.style.borderBottomRightRadius;
-    }
-    set borderBottomRightRadius(value) {
-        this.style.borderBottomRightRadius = value;
-    }
-    get borderBottomLeftRadius() {
-        return this.style.borderBottomLeftRadius;
-    }
-    set borderBottomLeftRadius(value) {
-        this.style.borderBottomLeftRadius = value;
-    }
-    get color() {
-        return this.style.color;
-    }
-    set color(value) {
-        this.style.color = value;
-    }
-    get background() {
-        return this.style.background;
-    }
-    set background(value) {
-        this.style.background = value;
-    }
-    get backgroundColor() {
-        return this.style.backgroundColor;
-    }
-    set backgroundColor(value) {
-        this.style.backgroundColor = value;
-    }
-    get backgroundImage() {
-        return this.style.backgroundImage;
-    }
-    set backgroundImage(value) {
-        this.style.backgroundImage = value;
-    }
-    get backgroundSize() {
-        return this.style.backgroundSize;
-    }
-    set backgroundSize(value) {
-        this.style.backgroundSize = value;
-    }
-    get backgroundPosition() {
-        return this.style.backgroundPosition;
-    }
-    set backgroundPosition(value) {
-        this.style.backgroundPosition = value;
-    }
-    get backgroundRepeat() {
-        return this.style.backgroundRepeat;
-    }
-    set backgroundRepeat(value) {
-        this.style.backgroundRepeat = value;
-    }
-    get boxShadow() {
-        return this.style.boxShadow;
-    }
-    set boxShadow(value) {
-        this.style.boxShadow = value;
-    }
-    get minWidth() {
-        return this.style.minWidth;
-    }
-    set minWidth(value) {
-        this.style.minWidth = value;
-    }
-    get minHeight() {
-        return this.style.minHeight;
-    }
-    set minHeight(value) {
-        this.style.minHeight = value;
-    }
-    get width() {
-        return this.style.width;
-    }
-    set width(value) {
-        this.style.width = value;
-    }
-    get height() {
-        return this.style.height;
-    }
-    set height(value) {
-        this.style.height = value;
-    }
-    get margin() {
-        return this.style.margin;
-    }
-    set margin(value) {
-        this.style.margin = value;
-    }
-    get marginLeft() {
-        return this.style.marginLeft;
-    }
-    set marginLeft(value) {
-        this.style.marginLeft = value;
-    }
-    get marginTop() {
-        return this.style.marginTop;
-    }
-    set marginTop(value) {
-        this.style.marginTop = value;
-    }
-    get marginRight() {
-        return this.style.marginRight;
-    }
-    set marginRight(value) {
-        this.style.marginRight = value;
-    }
-    get marginBottom() {
-        return this.style.marginBottom;
-    }
-    set marginBottom(value) {
-        this.style.marginBottom = value;
-    }
-    get horizontalAlignment() {
-        return this.style.horizontalAlignment;
-    }
-    set horizontalAlignment(value) {
-        this.style.horizontalAlignment = value;
-    }
-    get verticalAlignment() {
-        return this.style.verticalAlignment;
-    }
-    set verticalAlignment(value) {
-        this.style.verticalAlignment = value;
-    }
-    get visibility() {
-        return this.style.visibility;
-    }
-    set visibility(value) {
-        this.style.visibility = value;
-    }
-    get opacity() {
-        return this.style.opacity;
-    }
-    set opacity(value) {
-        this.style.opacity = value;
-    }
-    get rotate() {
-        return this.style.rotate;
-    }
-    set rotate(value) {
-        this.style.rotate = value;
-    }
-    get rotateX() {
-        return this.style.rotateX;
-    }
-    set rotateX(value) {
-        this.style.rotateX = value;
-    }
-    get rotateY() {
-        return this.style.rotateY;
-    }
-    set rotateY(value) {
-        this.style.rotateY = value;
-    }
-    get perspective() {
-        return this.style.perspective;
-    }
-    set perspective(value) {
-        this.style.perspective = value;
-    }
-    get textTransform() {
-        return this.style.textTransform;
-    }
-    set textTransform(value) {
-        this.style.textTransform = value;
-    }
-    get translateX() {
-        return this.style.translateX;
-    }
-    set translateX(value) {
-        this.style.translateX = value;
-    }
-    get translateY() {
-        return this.style.translateY;
-    }
-    set translateY(value) {
-        this.style.translateY = value;
-    }
-    get scaleX() {
-        return this.style.scaleX;
-    }
-    set scaleX(value) {
-        this.style.scaleX = value;
-    }
-    get scaleY() {
-        return this.style.scaleY;
-    }
-    set scaleY(value) {
-        this.style.scaleY = value;
-    }
-    get accessible() {
-        return this.style.accessible;
-    }
-    set accessible(value) {
-        this.style.accessible = value;
-    }
-    get accessibilityHidden() {
-        return this.style.accessibilityHidden;
-    }
-    set accessibilityHidden(value) {
-        this.style.accessibilityHidden = value;
-    }
-    get accessibilityRole() {
-        return this.style.accessibilityRole;
-    }
-    set accessibilityRole(value) {
-        this.style.accessibilityRole = value;
-    }
-    get accessibilityState() {
-        return this.style.accessibilityState;
-    }
-    set accessibilityState(value) {
-        this.style.accessibilityState = value;
-    }
-    get accessibilityLiveRegion() {
-        return this.style.accessibilityLiveRegion;
-    }
-    set accessibilityLiveRegion(value) {
-        this.style.accessibilityLiveRegion = value;
-    }
-    get accessibilityLanguage() {
-        return this.style.accessibilityLanguage;
-    }
-    set accessibilityLanguage(value) {
-        this.style.accessibilityLanguage = value;
-    }
-    get accessibilityMediaSession() {
-        return this.style.accessibilityMediaSession;
-    }
-    set accessibilityMediaSession(value) {
-        this.style.accessibilityMediaSession = value;
-    }
-    get iosAccessibilityAdjustsFontSize() {
-        return this.style.iosAccessibilityAdjustsFontSize;
-    }
-    set iosAccessibilityAdjustsFontSize(value) {
-        this.style.iosAccessibilityAdjustsFontSize = value;
-    }
-    get iosAccessibilityMinFontScale() {
-        return this.style.iosAccessibilityMinFontScale;
-    }
-    set iosAccessibilityMinFontScale(value) {
-        this.style.iosAccessibilityMinFontScale = value;
-    }
-    get iosAccessibilityMaxFontScale() {
-        return this.style.iosAccessibilityMaxFontScale;
-    }
-    set iosAccessibilityMaxFontScale(value) {
-        this.style.iosAccessibilityMaxFontScale = value;
-    }
-    get automationText() {
-        return this.accessibilityIdentifier;
-    }
-    set automationText(value) {
-        this.accessibilityIdentifier = value;
-    }
-    get androidElevation() {
-        return this.style.androidElevation;
-    }
-    set androidElevation(value) {
-        this.style.androidElevation = value;
-    }
-    get androidDynamicElevationOffset() {
-        return this.style.androidDynamicElevationOffset;
-    }
-    set androidDynamicElevationOffset(value) {
-        this.style.androidDynamicElevationOffset = value;
-    }
-    get isLayoutValid() {
-        return this._isLayoutValid;
-    }
-    get cssType() {
-        if (!this._cssType) {
-            this._cssType = this.typeName.toLowerCase();
-        }
-        return this._cssType;
-    }
-    set cssType(type) {
-        this._cssType = type.toLowerCase();
-    }
-    get isLayoutRequired() {
-        return true;
-    }
-    measure(widthMeasureSpec, heightMeasureSpec) {
+    };
+    Object.defineProperty(ViewCommon.prototype, "flexFlow", {
+        // START Style property shortcuts
+        get: function () {
+            return this.style.flexFlow;
+        },
+        set: function (value) {
+            this.style.flexFlow = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "flex", {
+        get: function () {
+            return this.style.flex;
+        },
+        set: function (value) {
+            this.style.flex = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderColor", {
+        get: function () {
+            return this.style.borderColor;
+        },
+        set: function (value) {
+            this.style.borderColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderTopColor", {
+        get: function () {
+            return this.style.borderTopColor;
+        },
+        set: function (value) {
+            this.style.borderTopColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderRightColor", {
+        get: function () {
+            return this.style.borderRightColor;
+        },
+        set: function (value) {
+            this.style.borderRightColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderBottomColor", {
+        get: function () {
+            return this.style.borderBottomColor;
+        },
+        set: function (value) {
+            this.style.borderBottomColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderLeftColor", {
+        get: function () {
+            return this.style.borderLeftColor;
+        },
+        set: function (value) {
+            this.style.borderLeftColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderWidth", {
+        get: function () {
+            return this.style.borderWidth;
+        },
+        set: function (value) {
+            this.style.borderWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderTopWidth", {
+        get: function () {
+            return this.style.borderTopWidth;
+        },
+        set: function (value) {
+            this.style.borderTopWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderRightWidth", {
+        get: function () {
+            return this.style.borderRightWidth;
+        },
+        set: function (value) {
+            this.style.borderRightWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderBottomWidth", {
+        get: function () {
+            return this.style.borderBottomWidth;
+        },
+        set: function (value) {
+            this.style.borderBottomWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderLeftWidth", {
+        get: function () {
+            return this.style.borderLeftWidth;
+        },
+        set: function (value) {
+            this.style.borderLeftWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderRadius", {
+        get: function () {
+            return this.style.borderRadius;
+        },
+        set: function (value) {
+            this.style.borderRadius = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderTopLeftRadius", {
+        get: function () {
+            return this.style.borderTopLeftRadius;
+        },
+        set: function (value) {
+            this.style.borderTopLeftRadius = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderTopRightRadius", {
+        get: function () {
+            return this.style.borderTopRightRadius;
+        },
+        set: function (value) {
+            this.style.borderTopRightRadius = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderBottomRightRadius", {
+        get: function () {
+            return this.style.borderBottomRightRadius;
+        },
+        set: function (value) {
+            this.style.borderBottomRightRadius = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "borderBottomLeftRadius", {
+        get: function () {
+            return this.style.borderBottomLeftRadius;
+        },
+        set: function (value) {
+            this.style.borderBottomLeftRadius = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "color", {
+        get: function () {
+            return this.style.color;
+        },
+        set: function (value) {
+            this.style.color = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "background", {
+        get: function () {
+            return this.style.background;
+        },
+        set: function (value) {
+            this.style.background = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "backgroundColor", {
+        get: function () {
+            return this.style.backgroundColor;
+        },
+        set: function (value) {
+            this.style.backgroundColor = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "backgroundImage", {
+        get: function () {
+            return this.style.backgroundImage;
+        },
+        set: function (value) {
+            this.style.backgroundImage = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "backgroundSize", {
+        get: function () {
+            return this.style.backgroundSize;
+        },
+        set: function (value) {
+            this.style.backgroundSize = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "backgroundPosition", {
+        get: function () {
+            return this.style.backgroundPosition;
+        },
+        set: function (value) {
+            this.style.backgroundPosition = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "backgroundRepeat", {
+        get: function () {
+            return this.style.backgroundRepeat;
+        },
+        set: function (value) {
+            this.style.backgroundRepeat = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "boxShadow", {
+        get: function () {
+            return this.style.boxShadow;
+        },
+        set: function (value) {
+            this.style.boxShadow = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "minWidth", {
+        get: function () {
+            return this.style.minWidth;
+        },
+        set: function (value) {
+            this.style.minWidth = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "minHeight", {
+        get: function () {
+            return this.style.minHeight;
+        },
+        set: function (value) {
+            this.style.minHeight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "width", {
+        get: function () {
+            return this.style.width;
+        },
+        set: function (value) {
+            this.style.width = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "height", {
+        get: function () {
+            return this.style.height;
+        },
+        set: function (value) {
+            this.style.height = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "margin", {
+        get: function () {
+            return this.style.margin;
+        },
+        set: function (value) {
+            this.style.margin = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "marginLeft", {
+        get: function () {
+            return this.style.marginLeft;
+        },
+        set: function (value) {
+            this.style.marginLeft = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "marginTop", {
+        get: function () {
+            return this.style.marginTop;
+        },
+        set: function (value) {
+            this.style.marginTop = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "marginRight", {
+        get: function () {
+            return this.style.marginRight;
+        },
+        set: function (value) {
+            this.style.marginRight = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "marginBottom", {
+        get: function () {
+            return this.style.marginBottom;
+        },
+        set: function (value) {
+            this.style.marginBottom = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "horizontalAlignment", {
+        get: function () {
+            return this.style.horizontalAlignment;
+        },
+        set: function (value) {
+            this.style.horizontalAlignment = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "verticalAlignment", {
+        get: function () {
+            return this.style.verticalAlignment;
+        },
+        set: function (value) {
+            this.style.verticalAlignment = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "visibility", {
+        get: function () {
+            return this.style.visibility;
+        },
+        set: function (value) {
+            this.style.visibility = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "opacity", {
+        get: function () {
+            return this.style.opacity;
+        },
+        set: function (value) {
+            this.style.opacity = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "rotate", {
+        get: function () {
+            return this.style.rotate;
+        },
+        set: function (value) {
+            this.style.rotate = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "rotateX", {
+        get: function () {
+            return this.style.rotateX;
+        },
+        set: function (value) {
+            this.style.rotateX = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "rotateY", {
+        get: function () {
+            return this.style.rotateY;
+        },
+        set: function (value) {
+            this.style.rotateY = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "perspective", {
+        get: function () {
+            return this.style.perspective;
+        },
+        set: function (value) {
+            this.style.perspective = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "textTransform", {
+        get: function () {
+            return this.style.textTransform;
+        },
+        set: function (value) {
+            this.style.textTransform = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "translateX", {
+        get: function () {
+            return this.style.translateX;
+        },
+        set: function (value) {
+            this.style.translateX = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "translateY", {
+        get: function () {
+            return this.style.translateY;
+        },
+        set: function (value) {
+            this.style.translateY = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "scaleX", {
+        get: function () {
+            return this.style.scaleX;
+        },
+        set: function (value) {
+            this.style.scaleX = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "scaleY", {
+        get: function () {
+            return this.style.scaleY;
+        },
+        set: function (value) {
+            this.style.scaleY = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessible", {
+        get: function () {
+            return this.style.accessible;
+        },
+        set: function (value) {
+            this.style.accessible = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityHidden", {
+        get: function () {
+            return this.style.accessibilityHidden;
+        },
+        set: function (value) {
+            this.style.accessibilityHidden = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityRole", {
+        get: function () {
+            return this.style.accessibilityRole;
+        },
+        set: function (value) {
+            this.style.accessibilityRole = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityState", {
+        get: function () {
+            return this.style.accessibilityState;
+        },
+        set: function (value) {
+            this.style.accessibilityState = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityLiveRegion", {
+        get: function () {
+            return this.style.accessibilityLiveRegion;
+        },
+        set: function (value) {
+            this.style.accessibilityLiveRegion = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityLanguage", {
+        get: function () {
+            return this.style.accessibilityLanguage;
+        },
+        set: function (value) {
+            this.style.accessibilityLanguage = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "accessibilityMediaSession", {
+        get: function () {
+            return this.style.accessibilityMediaSession;
+        },
+        set: function (value) {
+            this.style.accessibilityMediaSession = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "iosAccessibilityAdjustsFontSize", {
+        get: function () {
+            return this.style.iosAccessibilityAdjustsFontSize;
+        },
+        set: function (value) {
+            this.style.iosAccessibilityAdjustsFontSize = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "iosAccessibilityMinFontScale", {
+        get: function () {
+            return this.style.iosAccessibilityMinFontScale;
+        },
+        set: function (value) {
+            this.style.iosAccessibilityMinFontScale = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "iosAccessibilityMaxFontScale", {
+        get: function () {
+            return this.style.iosAccessibilityMaxFontScale;
+        },
+        set: function (value) {
+            this.style.iosAccessibilityMaxFontScale = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "automationText", {
+        get: function () {
+            return this.accessibilityIdentifier;
+        },
+        set: function (value) {
+            this.accessibilityIdentifier = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "androidElevation", {
+        get: function () {
+            return this.style.androidElevation;
+        },
+        set: function (value) {
+            this.style.androidElevation = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "androidDynamicElevationOffset", {
+        get: function () {
+            return this.style.androidDynamicElevationOffset;
+        },
+        set: function (value) {
+            this.style.androidDynamicElevationOffset = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "isLayoutValid", {
+        get: function () {
+            return this._isLayoutValid;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "cssType", {
+        get: function () {
+            if (!this._cssType) {
+                this._cssType = this.typeName.toLowerCase();
+            }
+            return this._cssType;
+        },
+        set: function (type) {
+            this._cssType = type.toLowerCase();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "isLayoutRequired", {
+        get: function () {
+            return true;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ViewCommon.prototype, "needsNativeDrawableFill", {
+        get: function () {
+            return false;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    ViewCommon.prototype.measure = function (widthMeasureSpec, heightMeasureSpec) {
         this._setCurrentMeasureSpecs(widthMeasureSpec, heightMeasureSpec);
-    }
-    layout(left, top, right, bottom) {
+    };
+    ViewCommon.prototype.layout = function (left, top, right, bottom) {
         this._setCurrentLayoutBounds(left, top, right, bottom);
-    }
-    getMeasuredWidth() {
+    };
+    ViewCommon.prototype.getMeasuredWidth = function () {
         return this._measuredWidth & layout.MEASURED_SIZE_MASK || 0;
-    }
-    getMeasuredHeight() {
+    };
+    ViewCommon.prototype.getMeasuredHeight = function () {
         return this._measuredHeight & layout.MEASURED_SIZE_MASK || 0;
-    }
-    getMeasuredState() {
+    };
+    ViewCommon.prototype.getMeasuredState = function () {
         return (this._measuredWidth & layout.MEASURED_STATE_MASK) | ((this._measuredHeight >> layout.MEASURED_HEIGHT_STATE_SHIFT) & (layout.MEASURED_STATE_MASK >> layout.MEASURED_HEIGHT_STATE_SHIFT));
-    }
-    setMeasuredDimension(measuredWidth, measuredHeight) {
+    };
+    ViewCommon.prototype.setMeasuredDimension = function (measuredWidth, measuredHeight) {
         this._measuredWidth = measuredWidth;
         this._measuredHeight = measuredHeight;
         if (Trace.isEnabled()) {
             Trace.write(this + ' :setMeasuredDimension: ' + measuredWidth + ', ' + measuredHeight, Trace.categories.Layout);
         }
-    }
-    requestLayout() {
+    };
+    ViewCommon.prototype.requestLayout = function () {
         this._isLayoutValid = false;
-        super.requestLayout();
-    }
-    static resolveSizeAndState(size, specSize, specMode, childMeasuredState) {
+        _super.prototype.requestLayout.call(this);
+    };
+    ViewCommon.resolveSizeAndState = function (size, specSize, specMode, childMeasuredState) {
         return ViewHelper.resolveSizeAndState(size, specSize, specMode, childMeasuredState);
-    }
-    static combineMeasuredStates(curState, newState) {
+    };
+    ViewCommon.combineMeasuredStates = function (curState, newState) {
         return ViewHelper.combineMeasuredStates(curState, newState);
-    }
-    static layoutChild(parent, child, left, top, right, bottom, setFrame = true) {
+    };
+    ViewCommon.layoutChild = function (parent, child, left, top, right, bottom, setFrame) {
+        if (setFrame === void 0) { setFrame = true; }
         ViewHelper.layoutChild(parent, child, left, top, right, bottom);
-    }
-    static measureChild(parent, child, widthMeasureSpec, heightMeasureSpec) {
+    };
+    ViewCommon.measureChild = function (parent, child, widthMeasureSpec, heightMeasureSpec) {
         return ViewHelper.measureChild(parent, child, widthMeasureSpec, heightMeasureSpec);
-    }
-    _setCurrentMeasureSpecs(widthMeasureSpec, heightMeasureSpec) {
-        const changed = this._currentWidthMeasureSpec !== widthMeasureSpec || this._currentHeightMeasureSpec !== heightMeasureSpec;
+    };
+    ViewCommon.prototype._setCurrentMeasureSpecs = function (widthMeasureSpec, heightMeasureSpec) {
+        var changed = this._currentWidthMeasureSpec !== widthMeasureSpec || this._currentHeightMeasureSpec !== heightMeasureSpec;
         this._currentWidthMeasureSpec = widthMeasureSpec;
         this._currentHeightMeasureSpec = heightMeasureSpec;
         return changed;
-    }
-    _getCurrentLayoutBounds() {
+    };
+    ViewCommon.prototype._getCurrentLayoutBounds = function () {
         return { left: 0, top: 0, right: 0, bottom: 0 };
-    }
+    };
     /**
      * Returns two booleans - the first if "boundsChanged" the second is "sizeChanged".
      */
-    _setCurrentLayoutBounds(left, top, right, bottom) {
+    ViewCommon.prototype._setCurrentLayoutBounds = function (left, top, right, bottom) {
         this._isLayoutValid = true;
-        const boundsChanged = this._oldLeft !== left || this._oldTop !== top || this._oldRight !== right || this._oldBottom !== bottom;
-        const sizeChanged = this._oldRight - this._oldLeft !== right - left || this._oldBottom - this._oldTop !== bottom - top;
+        var boundsChanged = this._oldLeft !== left || this._oldTop !== top || this._oldRight !== right || this._oldBottom !== bottom;
+        var sizeChanged = this._oldRight - this._oldLeft !== right - left || this._oldBottom - this._oldTop !== bottom - top;
         this._oldLeft = left;
         this._oldTop = top;
         this._oldRight = right;
         this._oldBottom = bottom;
-        return { boundsChanged, sizeChanged };
-    }
-    eachChild(callback) {
+        return { boundsChanged: boundsChanged, sizeChanged: sizeChanged };
+    };
+    ViewCommon.prototype.eachChild = function (callback) {
         this.eachChildView(callback);
-    }
-    eachChildView(callback) {
+    };
+    ViewCommon.prototype.eachChildView = function (callback) {
         //
-    }
-    _getNativeViewsCount() {
+    };
+    ViewCommon.prototype._getNativeViewsCount = function () {
         return this._isAddedToNativeVisualTree ? 1 : 0;
-    }
-    _eachLayoutView(callback) {
+    };
+    ViewCommon.prototype._eachLayoutView = function (callback) {
         return callback(this);
-    }
-    focus() {
+    };
+    ViewCommon.prototype.focus = function () {
         return undefined;
-    }
-    getSafeAreaInsets() {
+    };
+    ViewCommon.prototype.getSafeAreaInsets = function () {
         return { left: 0, top: 0, right: 0, bottom: 0 };
-    }
-    getLocationInWindow() {
+    };
+    ViewCommon.prototype.getLocationInWindow = function () {
         return undefined;
-    }
-    getLocationOnScreen() {
+    };
+    ViewCommon.prototype.getLocationOnScreen = function () {
         return undefined;
-    }
-    getLocationRelativeTo(otherView) {
+    };
+    ViewCommon.prototype.getLocationRelativeTo = function (otherView) {
         return undefined;
-    }
-    getActualSize() {
-        const currentBounds = this._getCurrentLayoutBounds();
+    };
+    ViewCommon.prototype.getActualSize = function () {
+        var currentBounds = this._getCurrentLayoutBounds();
         if (!currentBounds) {
             return undefined;
         }
@@ -863,22 +1162,22 @@ export class ViewCommon extends ViewBase {
             width: layout.toDeviceIndependentPixels(currentBounds.right - currentBounds.left),
             height: layout.toDeviceIndependentPixels(currentBounds.bottom - currentBounds.top),
         };
-    }
-    animate(animation) {
+    };
+    ViewCommon.prototype.animate = function (animation) {
         return this.createAnimation(animation).play();
-    }
-    createAnimation(animation) {
+    };
+    ViewCommon.prototype.createAnimation = function (animation) {
         ensureAnimationModule();
         if (!this._localAnimations) {
             this._localAnimations = new Set();
         }
         animation.target = this;
-        const anim = new animationModule.Animation([animation]);
+        var anim = new animationModule.Animation([animation]);
         this._localAnimations.add(anim);
         return anim;
-    }
-    _removeAnimation(animation) {
-        const localAnimations = this._localAnimations;
+    };
+    ViewCommon.prototype._removeAnimation = function (animation) {
+        var localAnimations = this._localAnimations;
         if (localAnimations && localAnimations.has(animation)) {
             localAnimations.delete(animation);
             if (animation.isPlaying) {
@@ -887,154 +1186,152 @@ export class ViewCommon extends ViewBase {
             return true;
         }
         return false;
-    }
-    resetNativeView() {
+    };
+    ViewCommon.prototype.resetNativeView = function () {
+        var _this = this;
         if (this._localAnimations) {
-            this._localAnimations.forEach((a) => this._removeAnimation(a));
+            this._localAnimations.forEach(function (a) { return _this._removeAnimation(a); });
         }
-        super.resetNativeView();
-    }
-    _setNativeViewFrame(nativeView, frame) {
+        _super.prototype.resetNativeView.call(this);
+    };
+    ViewCommon.prototype._setNativeViewFrame = function (nativeView, frame) {
         //
-    }
-    _getValue() {
+    };
+    ViewCommon.prototype._getValue = function () {
         throw new Error('The View._getValue is obsolete. There is a new property system.');
-    }
-    _setValue() {
+    };
+    ViewCommon.prototype._setValue = function () {
         throw new Error('The View._setValue is obsolete. There is a new property system.');
-    }
-    _updateEffectiveLayoutValues(parentWidthMeasureSize, parentWidthMeasureMode, parentHeightMeasureSize, parentHeightMeasureMode) {
-        const style = this.style;
-        const availableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
+    };
+    ViewCommon.prototype._updateEffectiveLayoutValues = function (parentWidthMeasureSize, parentWidthMeasureMode, parentHeightMeasureSize, parentHeightMeasureMode) {
+        var style = this.style;
+        var availableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
         this.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, availableWidth);
         this.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, availableWidth);
         this.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, availableWidth);
-        const availableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
+        var availableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
         this.effectiveHeight = PercentLength.toDevicePixels(style.height, -2, availableHeight);
         this.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, availableHeight);
         this.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, availableHeight);
-    }
-    _setNativeClipToBounds() {
+    };
+    ViewCommon.prototype._setNativeClipToBounds = function () {
         //
-    }
-    _redrawNativeBackground(value) {
+    };
+    ViewCommon.prototype._redrawNativeBackground = function (value) {
         //
-    }
-    _applyBackground(background, isBorderDrawable, onlyColor, backgroundDrawable) {
+    };
+    ViewCommon.prototype._applyBackground = function (background, isBorderDrawable, onlyColor, backgroundDrawable) {
         //
-    }
-    _onAttachedToWindow() {
+    };
+    ViewCommon.prototype._onAttachedToWindow = function () {
         //
-    }
-    _onDetachedFromWindow() {
+    };
+    ViewCommon.prototype._onDetachedFromWindow = function () {
         //
-    }
-    _hasAncestorView(ancestorView) {
-        const matcher = (view) => view === ancestorView;
-        for (let parent = this.parent; parent != null; parent = parent.parent) {
-            if (matcher(parent)) {
+    };
+    ViewCommon.prototype._hasAncestorView = function (ancestorView) {
+        var matcher = function (view) { return view === ancestorView; };
+        for (var parent_2 = this.parent; parent_2 != null; parent_2 = parent_2.parent) {
+            if (matcher(parent_2)) {
                 return true;
             }
         }
         return false;
-    }
-    sendAccessibilityEvent(options) {
+    };
+    ViewCommon.prototype.sendAccessibilityEvent = function (options) {
         return;
-    }
-    accessibilityAnnouncement(msg) {
+    };
+    ViewCommon.prototype.accessibilityAnnouncement = function (msg) {
         return;
-    }
-    accessibilityScreenChanged() {
+    };
+    ViewCommon.prototype.accessibilityScreenChanged = function () {
         return;
-    }
-    setAccessibilityIdentifier(view, value) {
+    };
+    ViewCommon.prototype.setAccessibilityIdentifier = function (view, value) {
         return;
-    }
-}
-ViewCommon.layoutChangedEvent = 'layoutChanged';
-ViewCommon.shownModallyEvent = 'shownModally';
-ViewCommon.showingModallyEvent = 'showingModally';
-ViewCommon.accessibilityBlurEvent = accessibilityBlurEvent;
-ViewCommon.accessibilityFocusEvent = accessibilityFocusEvent;
-ViewCommon.accessibilityFocusChangedEvent = accessibilityFocusChangedEvent;
-ViewCommon.accessibilityPerformEscapeEvent = accessibilityPerformEscapeEvent;
-export const originXProperty = new Property({
+    };
+    ViewCommon.layoutChangedEvent = 'layoutChanged';
+    ViewCommon.shownModallyEvent = 'shownModally';
+    ViewCommon.showingModallyEvent = 'showingModally';
+    ViewCommon.accessibilityBlurEvent = accessibilityBlurEvent;
+    ViewCommon.accessibilityFocusEvent = accessibilityFocusEvent;
+    ViewCommon.accessibilityFocusChangedEvent = accessibilityFocusChangedEvent;
+    ViewCommon.accessibilityPerformEscapeEvent = accessibilityPerformEscapeEvent;
+    return ViewCommon;
+}(ViewBase));
+export { ViewCommon };
+export var originXProperty = new Property({
     name: 'originX',
     defaultValue: 0.5,
-    valueConverter: (v) => parseFloat(v),
+    valueConverter: function (v) { return parseFloat(v); },
 });
 originXProperty.register(ViewCommon);
-export const originYProperty = new Property({
+export var originYProperty = new Property({
     name: 'originY',
     defaultValue: 0.5,
-    valueConverter: (v) => parseFloat(v),
+    valueConverter: function (v) { return parseFloat(v); },
 });
 originYProperty.register(ViewCommon);
-export const defaultVisualStateProperty = new Property({
-    name: 'defaultVisualState',
-    defaultValue: 'normal',
-    valueChanged(target, oldValue, newValue) {
-        target.defaultVisualState = newValue || 'normal';
-        if (!target.visualState || target.visualState === oldValue) {
-            target._goToVisualState(target.defaultVisualState);
-        }
-    },
-});
-defaultVisualStateProperty.register(ViewCommon);
-export const isEnabledProperty = new Property({
+export var isEnabledProperty = new Property({
     name: 'isEnabled',
     defaultValue: true,
     valueConverter: booleanConverter,
-    valueChanged(target, oldValue, newValue) {
-        target._goToVisualState(newValue ? target.defaultVisualState : 'disabled');
+    valueChanged: function (target, oldValue, newValue) {
+        var state = 'disabled';
+        if (newValue) {
+            target._removeVisualState(state);
+        }
+        else {
+            target._addVisualState(state);
+        }
     },
 });
 isEnabledProperty.register(ViewCommon);
-export const isUserInteractionEnabledProperty = new Property({
+export var isUserInteractionEnabledProperty = new Property({
     name: 'isUserInteractionEnabled',
     defaultValue: true,
     valueConverter: booleanConverter,
 });
 isUserInteractionEnabledProperty.register(ViewCommon);
-export const iosOverflowSafeAreaProperty = new Property({
+export var iosOverflowSafeAreaProperty = new Property({
     name: 'iosOverflowSafeArea',
     defaultValue: false,
     valueConverter: booleanConverter,
 });
 iosOverflowSafeAreaProperty.register(ViewCommon);
-export const iosOverflowSafeAreaEnabledProperty = new InheritedProperty({
+export var iosOverflowSafeAreaEnabledProperty = new InheritedProperty({
     name: 'iosOverflowSafeAreaEnabled',
     defaultValue: true,
     valueConverter: booleanConverter,
 });
 iosOverflowSafeAreaEnabledProperty.register(ViewCommon);
-export const iosIgnoreSafeAreaProperty = new InheritedProperty({
+export var iosIgnoreSafeAreaProperty = new InheritedProperty({
     name: 'iosIgnoreSafeArea',
     defaultValue: false,
     valueConverter: booleanConverter,
 });
 iosIgnoreSafeAreaProperty.register(ViewCommon);
-export const visionHoverStyleProperty = new Property({
+export var visionHoverStyleProperty = new Property({
     name: 'visionHoverStyle',
-    valueChanged(view, oldValue, newValue) {
+    valueChanged: function (view, oldValue, newValue) {
         view.visionHoverStyle = newValue;
     },
 });
 visionHoverStyleProperty.register(ViewCommon);
-const visionIgnoreHoverStyleProperty = new Property({
+var visionIgnoreHoverStyleProperty = new Property({
     name: 'visionIgnoreHoverStyle',
-    valueChanged(view, oldValue, newValue) {
+    valueChanged: function (view, oldValue, newValue) {
         view.visionIgnoreHoverStyle = newValue;
     },
     valueConverter: booleanConverter,
 });
 visionIgnoreHoverStyleProperty.register(ViewCommon);
-const touchAnimationProperty = new Property({
+var touchAnimationProperty = new Property({
     name: 'touchAnimation',
-    valueChanged(view, oldValue, newValue) {
+    valueChanged: function (view, oldValue, newValue) {
         view.touchAnimation = newValue;
     },
-    valueConverter(value) {
+    valueConverter: function (value) {
         if (isObject(value)) {
             return value;
         }
@@ -1044,23 +1341,23 @@ const touchAnimationProperty = new Property({
     },
 });
 touchAnimationProperty.register(ViewCommon);
-const ignoreTouchAnimationProperty = new Property({
+var ignoreTouchAnimationProperty = new Property({
     name: 'ignoreTouchAnimation',
-    valueChanged(view, oldValue, newValue) {
+    valueChanged: function (view, oldValue, newValue) {
         view.ignoreTouchAnimation = newValue;
     },
     valueConverter: booleanConverter,
 });
 ignoreTouchAnimationProperty.register(ViewCommon);
-const touchDelayProperty = new Property({
+var touchDelayProperty = new Property({
     name: 'touchDelay',
-    valueChanged(view, oldValue, newValue) {
+    valueChanged: function (view, oldValue, newValue) {
         view.touchDelay = newValue;
     },
-    valueConverter: (v) => parseFloat(v),
+    valueConverter: function (v) { return parseFloat(v); },
 });
 touchDelayProperty.register(ViewCommon);
-export const testIDProperty = new Property({
+export var testIDProperty = new Property({
     name: 'testID',
 });
 testIDProperty.register(ViewCommon);