diff --git a/tns-core-modules/ui/core/properties.ts b/tns-core-modules/ui/core/properties.ts
index 7e1df7ed3..2b5362b1c 100644
--- a/tns-core-modules/ui/core/properties.ts
+++ b/tns-core-modules/ui/core/properties.ts
@@ -47,6 +47,8 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
     private readonly name: string;
     public readonly key: symbol;
     public readonly native: symbol;
+    public readonly defaultValueKey: symbol;
+    public readonly defaultValue: U;
 
     public get: () => U;
     public set: (value: U) => void;
@@ -54,24 +56,29 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
     public configurable: boolean = true;
 
     constructor(options: PropertyOptions<T, U>) {
-        let name = options.name;
+        const name = options.name;
         this.name = name;
 
-        let key = Symbol(name + ":propertyKey");
+        const key = Symbol(name + ":propertyKey");
         this.key = key;
 
-        let native: symbol = Symbol(name + ":nativeKey");
+        const native: symbol = Symbol(name + ":nativeKey");
         this.native = native;
 
-        let eventName = name + "Change";
-        let defaultValue: U = options.defaultValue;
-        let affectsLayout: boolean = options.affectsLayout;
-        let equalityComparer = options.equalityComparer;
-        let valueChanged = options.valueChanged;
-        let valueConverter = options.valueConverter;
+        const defaultValueKey = Symbol(name + ":nativeDefaultValue");
+        this.defaultValueKey = defaultValueKey;
+
+        const defaultValue: U = options.defaultValue;
+        this.defaultValue = defaultValue;
+
+        const eventName = name + "Change";
+        const affectsLayout: boolean = options.affectsLayout;
+        const equalityComparer = options.equalityComparer;
+        const valueChanged = options.valueChanged;
+        const valueConverter = options.valueConverter;
 
         this.set = function (this: T, value: any): void {
-            let reset = value === unsetValue;
+            const reset = value === unsetValue;
             let unboxedValue: U;
             let wrapped: boolean;
             if (reset) {
@@ -85,8 +92,8 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
                 }
             }
 
-            let currentValue = key in this ? this[key] : defaultValue;
-            let changed: boolean = equalityComparer ? !equalityComparer(currentValue, unboxedValue) : currentValue !== unboxedValue;
+            const currentValue = key in this ? this[key] : defaultValue;
+            const changed: boolean = equalityComparer ? !equalityComparer(currentValue, unboxedValue) : currentValue !== unboxedValue;
 
             if (wrapped || changed) {
                 if (reset) {
@@ -96,6 +103,10 @@ export class Property<T extends ViewBase, U> implements PropertyDescriptor {
                 }
 
                 if (this.nativeView) {
+                    if (!(defaultValueKey in this)) {
+                        this[defaultValueKey] = this[native];
+                    }
+
                     this[native] = unboxedValue;
                 }
 
@@ -139,41 +150,48 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
     private readonly name: string;
     public readonly key: symbol;
     public readonly native: symbol;
+    public readonly defaultValueKey: symbol;
+    public readonly defaultValue: U;
 
-    public get: () => U;
-    public set: (value: U) => void;
-    public enumerable: boolean = true;
-    public configurable: boolean = true;
+    public readonly get: () => U;
+    public readonly set: (value: U) => void;
+    public readonly enumerable: boolean = true;
+    public readonly configurable: boolean = true;
 
     public readonly coerce: (target: T) => void;
 
     constructor(options: CoerciblePropertyOptions<T, U>) {
-        let name = options.name;
+        const name = options.name;
         this.name = name;
 
-        let key = Symbol(name + ":propertyKey");
+        const key = Symbol(name + ":propertyKey");
         this.key = key;
 
-        let native: symbol = Symbol(name + ":nativeKey");
+        const native: symbol = Symbol(name + ":nativeKey");
         this.native = native;
 
-        let coerceKey = Symbol(name + ":coerceKey");
+        const defaultValueKey = Symbol(name + ":nativeDefaultValue");
+        this.defaultValueKey = defaultValueKey;
 
-        let eventName = name + "Change";
-        let defaultValue: U = options.defaultValue;
-        let affectsLayout: boolean = options.affectsLayout;
-        let equalityComparer = options.equalityComparer;
-        let valueChanged = options.valueChanged;
-        let valueConverter = options.valueConverter;
-        let coerceCallback = options.coerceValue;
+        const coerceKey = Symbol(name + ":coerceKey");
+
+        const defaultValue: U = options.defaultValue;
+        this.defaultValue = defaultValue;
+
+        const eventName = name + "Change";
+        const affectsLayout: boolean = options.affectsLayout;
+        const equalityComparer = options.equalityComparer;
+        const valueChanged = options.valueChanged;
+        const valueConverter = options.valueConverter;
+        const coerceCallback = options.coerceValue;
 
         this.coerce = function (target: T): void {
-            let originalValue: U = coerceKey in target ? target[coerceKey] : defaultValue;
+            const originalValue: U = coerceKey in target ? target[coerceKey] : defaultValue;
             target[key] = originalValue;
         }
 
         this.set = function (this: T, value: U): void {
-            let reset = value === unsetValue;
+            const reset = value === unsetValue;
             let unboxedValue: U;
             let wrapped: boolean;
             if (reset) {
@@ -191,8 +209,8 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
                 unboxedValue = coerceCallback(this, unboxedValue);
             }
 
-            let currentValue = key in this ? this[key] : defaultValue;
-            let changed: boolean = equalityComparer ? !equalityComparer(currentValue, unboxedValue) : currentValue !== unboxedValue;
+            const currentValue = key in this ? this[key] : defaultValue;
+            const changed: boolean = equalityComparer ? !equalityComparer(currentValue, unboxedValue) : currentValue !== unboxedValue;
 
             if (wrapped || changed) {
                 if (reset) {
@@ -202,6 +220,10 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
                 }
 
                 if (this.nativeView) {
+                    if (!(defaultValueKey in this)) {
+                        this[defaultValueKey] = this[native];
+                    }
+
                     this[native] = unboxedValue;
                 }
 
@@ -241,29 +263,29 @@ export class CoercibleProperty<T extends ViewBase, U> implements PropertyDescrip
 }
 
 export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> {
-    public sourceKey: symbol;
-    public setInheritedValue: (value: U) => void;
+    public readonly sourceKey: symbol;
+    public readonly setInheritedValue: (value: U) => void;
 
     constructor(options: PropertyOptions<T, U>) {
         super(options);
-        let name = options.name;
-        let key = this.key;
-        let defaultValue = options.defaultValue;
+        const name = options.name;
+        const key = this.key;
+        const defaultValue = options.defaultValue;
 
-        let sourceKey = Symbol(name + ":valueSourceKey");
+        const sourceKey = Symbol(name + ":valueSourceKey");
         this.sourceKey = sourceKey;
 
-        let setBase = this.set;
-        let setFunc = (valueSource: ValueSource) => function (value: U): void {
-            let that = <T>this;
-            let currentValueSource: number = that[sourceKey] || ValueSource.Default;
+        const setBase = this.set;
+        const setFunc = (valueSource: ValueSource) => function (value: U): void {
+            const that = <T>this;
+            const currentValueSource: number = that[sourceKey] || ValueSource.Default;
 
             let unboxedValue: U;
             let newValueSource: number;
 
             if (value === unsetValue) {
                 // If unsetValue - we want to reset the property.
-                let parent: ViewBase = that.parent;
+                const parent: ViewBase = that.parent;
                 // If we have parent and it has non-default value we use as our inherited value.
                 if (parent && parent[sourceKey] !== ValueSource.Default) {
                     unboxedValue = parent[key];
@@ -280,16 +302,16 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> {
             }
 
             // take currentValue before calling base - base may change it.
-            let currentValue = that[key];
+            const currentValue = that[key];
             setBase.call(that, unboxedValue);
 
-            let newValue = that[key];
+            const newValue = that[key];
             that[sourceKey] = newValueSource;
 
             if (currentValue !== newValue) {
-                let reset = newValueSource === ValueSource.Default;
+                const reset = newValueSource === ValueSource.Default;
                 that.eachChild((child) => {
-                    let childValueSource = child[sourceKey];
+                    const childValueSource = child[sourceKey];
                     if (reset) {
                         if (childValueSource === ValueSource.Inherited) {
                             setFunc.call(child, unsetValue);
@@ -304,7 +326,7 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> {
             }
         }
 
-        let setInheritedValue = setFunc(ValueSource.Inherited);
+        const setInheritedValue = setFunc(ValueSource.Inherited);
         this.setInheritedValue = setInheritedValue;
 
         this.set = setFunc(ValueSource.Local);
@@ -315,47 +337,51 @@ export class InheritedProperty<T extends ViewBase, U> extends Property<T, U> {
 
 export class CssProperty<T extends Style, U> {
     private registered: boolean;
-    private setLocalValue: (value: U) => void;
-    private setCssValue: (value: U) => void;
+    private readonly setLocalValue: (value: U) => void;
+    private readonly setCssValue: (value: U) => void;
 
-    public name: string;
-    public cssName: string;
+    public readonly name: string;
+    public readonly cssName: string;
 
-    protected cssValueDescriptor: PropertyDescriptor;
-    protected localValueDescriptor: PropertyDescriptor;
+    protected readonly cssValueDescriptor: PropertyDescriptor;
+    protected readonly localValueDescriptor: PropertyDescriptor;
 
-    public key: symbol;
-    public native: symbol;
-    public sourceKey: symbol;
-    public defaultValueKey: symbol;
+    public readonly key: symbol;
+    public readonly native: symbol;
+    public readonly sourceKey: symbol;
+    public readonly defaultValueKey: symbol;
+    public readonly defaultValue: U;
 
     constructor(options: CssPropertyOptions<T, U>) {
-        let name = options.name;
+        const name = options.name;
         this.name = name;
 
-        let cssName = `css-${options.cssName}`;
+        const cssName = `css-${options.cssName}`;
         this.cssName = cssName;
 
-        let key = Symbol(name + ":propertyKey");
+        const key = Symbol(name + ":propertyKey");
         this.key = key;
 
-        let sourceKey = Symbol(name + ":valueSourceKey");
+        const sourceKey = Symbol(name + ":valueSourceKey");
         this.sourceKey = sourceKey;
 
-        let native = Symbol(name + ":nativeKey");
+        const native = Symbol(name + ":nativeKey");
         this.native = native;
 
-        let defaultValueKey = Symbol(name + ":nativeDefaultValue");
+        const defaultValueKey = Symbol(name + ":nativeDefaultValue");
         this.defaultValueKey = defaultValueKey;
-        let eventName = name + "Change";
-        let defaultValue: U = options.defaultValue;
-        let affectsLayout: boolean = options.affectsLayout;
-        let equalityComparer = options.equalityComparer;
-        let valueChanged = options.valueChanged;
-        let valueConverter = options.valueConverter;
+
+        const defaultValue: U = options.defaultValue;
+        this.defaultValue = defaultValue;
+
+        const eventName = name + "Change";
+        const affectsLayout: boolean = options.affectsLayout;
+        const equalityComparer = options.equalityComparer;
+        const valueChanged = options.valueChanged;
+        const valueConverter = options.valueConverter;
 
         function setLocalValue(this: T, value: U): void {
-            let reset = value === unsetValue;
+            const reset = value === unsetValue;
             if (reset) {
                 value = defaultValue;
                 delete this[sourceKey];
@@ -367,8 +393,8 @@ export class CssProperty<T extends Style, U> {
                 }
             }
 
-            let currentValue: U = key in this ? this[key] : defaultValue;
-            let changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
+            const currentValue: U = key in this ? this[key] : defaultValue;
+            const changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
 
             if (changed) {
                 if (reset) {
@@ -377,12 +403,12 @@ export class CssProperty<T extends Style, U> {
                     this[key] = value;
                 }
 
-                let view = this.view;
-                if (!(defaultValueKey in this)) {
-                    this[defaultValueKey] = view[native];
-                }
-
+                const view = this.view;
                 if (view.nativeView) {
+                    if (!(defaultValueKey in this)) {
+                        this[defaultValueKey] = view[native];
+                    }
+
                     view[native] = value;
                 }
 
@@ -406,8 +432,8 @@ export class CssProperty<T extends Style, U> {
         }
 
         function setCssValue(this: T, value: U): void {
-            let reset = value === unsetValue;
-            let currentValueSource: number = this[sourceKey] || ValueSource.Default;
+            const reset = value === unsetValue;
+            const currentValueSource: number = this[sourceKey] || ValueSource.Default;
 
             // We have localValueSource - NOOP.
             if (currentValueSource === ValueSource.Local) {
@@ -424,8 +450,8 @@ export class CssProperty<T extends Style, U> {
                 }
             }
 
-            let currentValue: U = key in this ? this[key] : defaultValue;
-            let changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
+            const currentValue: U = key in this ? this[key] : defaultValue;
+            const changed: boolean = equalityComparer ? !equalityComparer(currentValue, value) : currentValue !== value;
 
             if (changed) {
                 if (reset) {
@@ -434,8 +460,12 @@ export class CssProperty<T extends Style, U> {
                     this[key] = value;
                 }
 
-                let view = this.view;
+                const view = this.view;
                 if (view.nativeView) {
+                    if (!(defaultValueKey in this)) {
+                        this[defaultValueKey] = view[native];
+                    }
+
                     view[native] = value;
                 }
 
@@ -494,30 +524,28 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
 
     constructor(options: CssPropertyOptions<T, U>) {
         super(options);
-        let name = options.name;
-        this.name = name;
+        const name = options.name;
+        const cssName = `css-${name}`;
 
-        let cssName = `css-${name}`;
-        this.cssName = cssName;
+        const key = this.key;
+        const sourceKey = this.sourceKey;
+        const native = this.native;
+        const defaultValueKey = this.defaultValueKey;
 
-        let key = this.key;
-        let sourceKey = this.sourceKey;
-        let native = this.native;
+        const eventName = name + "Change";
+        const defaultValue: U = options.defaultValue;
+        const affectsLayout: boolean = options.affectsLayout;
+        const equalityComparer = options.equalityComparer;
+        const valueChanged = options.valueChanged;
+        const valueConverter = options.valueConverter;
 
-        let eventName = name + "Change";
-        let defaultValue: U = options.defaultValue;
-        let affectsLayout: boolean = options.affectsLayout;
-        let equalityComparer = options.equalityComparer;
-        let valueChanged = options.valueChanged;
-        let valueConverter = options.valueConverter;
+        const dependentProperty = options.dependentProperty;
+        const dependentPropertyKey = dependentProperty ? dependentProperty.key : undefined;
+        const dependentPropertyNativeKey = dependentProperty ? dependentProperty.native : undefined;
 
-        let dependentProperty = options.dependentProperty;
-        let dependentPropertyKey = dependentProperty ? dependentProperty.key : undefined;
-        let dependentPropertyNativeKey = dependentProperty ? dependentProperty.native : undefined;
-
-        let setFunc = (valueSource: ValueSource) => function (this: T, value: any): void {
-            let reset = value === unsetValue;
-            let currentValueSource: number = this[sourceKey] || ValueSource.Default;
+        const setFunc = (valueSource: ValueSource) => function (this: T, value: any): void {
+            const reset = value === unsetValue;
+            const currentValueSource: number = this[sourceKey] || ValueSource.Default;
             if (reset) {
                 // If we want to reset cssValue and we have localValue - return;
                 if (valueSource === ValueSource.Css && currentValueSource === ValueSource.Local) {
@@ -529,7 +557,7 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 }
             }
 
-            let view = this.view;
+            const view = this.view;
             let newValue: U;
             if (reset) {
                 // If unsetValue - we want to reset this property.
@@ -553,8 +581,8 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 }
             }
 
-            let currentValue: U = key in this ? this[key] : defaultValue;
-            let changed: boolean = equalityComparer ? !equalityComparer(currentValue, newValue) : currentValue !== newValue;
+            const currentValue: U = key in this ? this[key] : defaultValue;
+            const changed: boolean = equalityComparer ? !equalityComparer(currentValue, newValue) : currentValue !== newValue;
 
             if (changed) {
                 if (reset) {
@@ -563,8 +591,12 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                     this[key] = newValue;
                 }
 
-                let nativeView = view.nativeView;
+                const nativeView = view.nativeView;
                 if (nativeView) {
+                    if (!(defaultValueKey in this)) {
+                        this[defaultValueKey] = view[native];
+                    }
+
                     view[native] = value;
                     if (dependentPropertyNativeKey) {
                         // Call the native setter for dependent property. 
@@ -590,8 +622,8 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
                 }
 
                 view.eachChild((child) => {
-                    let childStyle = child.style;
-                    let childValueSource = childStyle[sourceKey] || ValueSource.Default;
+                    const childStyle = child.style;
+                    const childValueSource = childStyle[sourceKey] || ValueSource.Default;
                     if (reset) {
                         if (childValueSource === ValueSource.Inherited) {
                             setDefaultFunc.call(childStyle, unsetValue);
@@ -606,8 +638,8 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
             }
         }
 
-        let setDefaultFunc = setFunc(ValueSource.Default);
-        let setInheritedFunc = setFunc(ValueSource.Inherited);
+        const setDefaultFunc = setFunc(ValueSource.Default);
+        const setInheritedFunc = setFunc(ValueSource.Inherited);
 
         this.setInhertiedValue = setInheritedFunc;
         this.cssValueDescriptor.set = setFunc(ValueSource.Css);
@@ -618,33 +650,33 @@ export class InheritedCssProperty<T extends Style, U> extends CssProperty<T, U>
 }
 
 export class ShorthandProperty<T extends Style> {
-    private setLocalValue: (value: string) => void;
-    private setCssValue: (value: string) => void;
+    private readonly setLocalValue: (value: string) => void;
+    private readonly setCssValue: (value: string) => void;
 
-    public key: symbol;
-    public name: string;
-    public cssName: string;
+    public readonly key: symbol;
+    public readonly name: string;
+    public readonly cssName: string;
 
-    protected cssValueDescriptor: PropertyDescriptor;
-    protected localValueDescriptor: PropertyDescriptor;
+    protected readonly cssValueDescriptor: PropertyDescriptor;
+    protected readonly localValueDescriptor: PropertyDescriptor;
 
-    public native: symbol;
-    public sourceKey: symbol;
+    public readonly native: symbol;
+    public readonly sourceKey: symbol;
 
     constructor(options: ShorthandPropertyOptions) {
-        let name = options.name;
+        const name = options.name;
         this.name = name;
 
-        let key = Symbol(name + ":propertyKey");
+        const key = Symbol(name + ":propertyKey");
         this.key = key;
 
-        let cssName = `css-${options.cssName}`;
+        const cssName = `css-${options.cssName}`;
         this.cssName = cssName;
 
-        let sourceKey = Symbol(name + ":valueSourceKey");
+        const sourceKey = Symbol(name + ":valueSourceKey");
         this.sourceKey = sourceKey;
 
-        let converter = options.converter;
+        const converter = options.converter;
 
         function setLocalValue(this: T, value: string): void {
             this[sourceKey] = ValueSource.Local;
@@ -657,7 +689,7 @@ export class ShorthandProperty<T extends Style> {
         }
 
         function setCssValue(this: T, value: string): void {
-            let currentValueSource: number = this[sourceKey] || ValueSource.Default;
+            const currentValueSource: number = this[sourceKey] || ValueSource.Default;
             // We have localValueSource - NOOP.
             if (currentValueSource === ValueSource.Local) {
                 return;
@@ -695,10 +727,10 @@ export class ShorthandProperty<T extends Style> {
 }
 
 function inheritablePropertyValuesOn(view: ViewBase): Array<{ property: InheritedProperty<any, any>, value: any }> {
-    let array = new Array<{ property: InheritedProperty<any, any>, value: any }>();
+    const array = new Array<{ property: InheritedProperty<any, any>, value: any }>();
     for (let prop of inheritableProperties) {
-        let sourceKey = prop.sourceKey;
-        let valueSource: number = view[sourceKey] || ValueSource.Default;
+        const sourceKey = prop.sourceKey;
+        const valueSource: number = view[sourceKey] || ValueSource.Default;
         if (valueSource !== ValueSource.Default) {
             array.push({ property: prop, value: view[prop.key] });
         }
@@ -708,10 +740,10 @@ function inheritablePropertyValuesOn(view: ViewBase): Array<{ property: Inherite
 }
 
 function inheritableCssPropertyValuesOn(style: Style): Array<{ property: InheritedCssProperty<any, any>, value: any }> {
-    let array = new Array<{ property: InheritedCssProperty<any, any>, value: any }>();
+    const array = new Array<{ property: InheritedCssProperty<any, any>, value: any }>();
     for (let prop of inheritableCssProperties) {
-        let sourceKey = prop.sourceKey;
-        let valueSource: number = style[sourceKey] || ValueSource.Default;
+        const sourceKey = prop.sourceKey;
+        const valueSource: number = style[sourceKey] || ValueSource.Default;
         if (valueSource !== ValueSource.Default) {
             array.push({ property: prop, value: style[prop.key] });
         }
@@ -721,10 +753,10 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit
 }
 
 function inheritablePropertiesOn(view: ViewBase): Array<InheritedProperty<any, any>> {
-    let array = new Array<InheritedProperty<any, any>>();
+    const array = new Array<InheritedProperty<any, any>>();
     for (let prop of inheritableProperties) {
-        let sourceKey = prop.sourceKey;
-        let valueSource: number = view[sourceKey] || ValueSource.Default;
+        const sourceKey = prop.sourceKey;
+        const valueSource: number = view[sourceKey] || ValueSource.Default;
         if (valueSource === ValueSource.Inherited) {
             array.push(prop);
         }
@@ -734,10 +766,10 @@ function inheritablePropertiesOn(view: ViewBase): Array<InheritedProperty<any, a
 }
 
 function inheritableCssPropertiesOn(style: Object): Array<InheritedCssProperty<any, any>> {
-    let array = new Array<InheritedCssProperty<any, any>>();
+    const array = new Array<InheritedCssProperty<any, any>>();
     for (let prop of inheritableCssProperties) {
-        let sourceKey = prop.sourceKey;
-        let valueSource: number = style[sourceKey] || ValueSource.Default;
+        const sourceKey = prop.sourceKey;
+        const valueSource: number = style[sourceKey] || ValueSource.Default;
         if (valueSource === ValueSource.Inherited) {
             array.push(prop);
         }
@@ -749,29 +781,39 @@ function inheritableCssPropertiesOn(style: Object): Array<InheritedCssProperty<a
 export function applyNativeSetters(view: ViewBase): void {
     let symbols = (<any>Object).getOwnPropertySymbols(view);
     for (let symbol of symbols) {
-        let property: Property<any, any> = symbolPropertyMap[symbol];
+        const property: Property<any, any> = symbolPropertyMap[symbol];
         if (!property) {
             continue;
         }
 
-        let native = property.native;
+        const native = property.native;
         if (view[native]) {
-            let value = view[symbol];
+            const defaultValueKey = property.defaultValueKey;
+            if (!(defaultValueKey in view)) {
+                view[defaultValueKey] = view[native];
+            }
+
+            const value = view[symbol];
             view[native] = value;
         }
     }
 
-    let style = view.style;
+    const style = view.style;
     symbols = (<any>Object).getOwnPropertySymbols(style);
     for (let symbol of symbols) {
-        let property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
+        const property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
         if (!property) {
             continue;
         }
 
-        let native = property.native;
+        const native = property.native;
         if (view[native]) {
-            let value = style[symbol];
+            const defaultValueKey = property.defaultValueKey;
+            if (!(defaultValueKey in style)) {
+                style[defaultValueKey] = view[native];
+            }
+
+            const value = style[symbol];
             view[native] = value;
         }
     }
@@ -779,15 +821,15 @@ export function applyNativeSetters(view: ViewBase): void {
 
 export function clearInheritedProperties(view: ViewBase): void {
     for (let prop of inheritableProperties) {
-        let sourceKey = prop.sourceKey;
+        const sourceKey = prop.sourceKey;
         if (view[sourceKey] === ValueSource.Inherited) {
             prop.set.call(view, unsetValue);
         }
     }
 
-    let style = view.style;
+    const style = view.style;
     for (let prop of inheritableCssProperties) {
-        let sourceKey = prop.sourceKey;
+        const sourceKey = prop.sourceKey;
         if (style[sourceKey] === ValueSource.Inherited) {
             prop.setInhertiedValue.call(style, unsetValue);
         }
@@ -796,14 +838,14 @@ export function clearInheritedProperties(view: ViewBase): void {
 
 export function resetStyleProperties(style: Style): void {
     let symbols = (<any>Object).getOwnPropertySymbols(style);
-    let view = style.view;
+    const view = style.view;
     for (let symbol of symbols) {
-        let property: CssProperty<any, any> = symbolPropertyMap[symbol];
+        const property: CssProperty<any, any> = symbolPropertyMap[symbol];
         if (!property) {
             continue;
         }
 
-        let native = property.native;
+        const native = property.native;
         if (view[native]) {
             view[native] = style[property.defaultValueKey];
             delete style[property.defaultValueKey];
@@ -815,13 +857,13 @@ export function resetStyleProperties(style: Style): void {
 }
 
 export function propagateInheritedProperties(view: ViewBase): void {
-    let inheritablePropertyValues = inheritablePropertyValuesOn(view);
-    let inheritableCssPropertyValues = inheritableCssPropertyValuesOn(view.style);
+    const inheritablePropertyValues = inheritablePropertyValuesOn(view);
+    const inheritableCssPropertyValues = inheritableCssPropertyValuesOn(view.style);
     view.eachChild((child) => {
         for (let pair of inheritablePropertyValues) {
-            let prop = pair.property;
-            let sourceKey = prop.sourceKey;
-            let currentValueSource: number = child[sourceKey] || ValueSource.Default;
+            const prop = pair.property;
+            const sourceKey = prop.sourceKey;
+            const currentValueSource: number = child[sourceKey] || ValueSource.Default;
             if (currentValueSource <= ValueSource.Inherited) {
                 prop.setInheritedValue.call(child, pair.value);
             }
@@ -829,10 +871,10 @@ export function propagateInheritedProperties(view: ViewBase): void {
         }
 
         for (let pair of inheritableCssPropertyValues) {
-            let prop = pair.property;
-            let sourceKey = prop.sourceKey;
-            let style = child.style;
-            let currentValueSource: number = style[sourceKey] || ValueSource.Default;
+            const prop = pair.property;
+            const sourceKey = prop.sourceKey;
+            const style = child.style;
+            const currentValueSource: number = style[sourceKey] || ValueSource.Default;
             if (currentValueSource <= ValueSource.Inherited) {
                 prop.setInhertiedValue.call(style, pair.value, ValueSource.Inherited);
             }
diff --git a/tns-core-modules/ui/core/view-base.ts b/tns-core-modules/ui/core/view-base.ts
index dc9d17fdb..5d05fec0b 100644
--- a/tns-core-modules/ui/core/view-base.ts
+++ b/tns-core-modules/ui/core/view-base.ts
@@ -1,6 +1,6 @@
 import { ViewBase as ViewBaseDefinition } from "ui/core/view-base";
 import { Observable, EventData } from "data/observable";
-import { Property, InheritedProperty, CssProperty, Style, clearInheritedProperties, propagateInheritedProperties } from "./properties";
+import { Property, InheritedProperty, CssProperty, Style, clearInheritedProperties, propagateInheritedProperties, resetStyleProperties } from "./properties";
 import { Binding, BindingOptions, Bindable } from "ui/core/bindable";
 import { isIOS, isAndroid } from "platform";
 import { fromString as gestureFromString } from "ui/gestures";
@@ -134,7 +134,7 @@ export class ViewBase extends Observable implements ViewBaseDefinition {
         }
     }
 
-    private _applyStyleFromScope() {
+    public _applyStyleFromScope() {
         let rootPage = this.page;
         if (!rootPage || !rootPage.isLoaded) {
             return;
@@ -482,14 +482,14 @@ export const classNameProperty = new Property<ViewBase, string>({ name: "classNa
 classNameProperty.register(ViewBase);
 
 function resetStyles(view: ViewBase): void {
-    // view.style._resetCssValues();
-    // view._applyStyleFromScope();
     view.eachChild((child) => {
-        // TODO.. Check old implementation....
+        child._cancelAllAnimations();
+        resetStyleProperties(child.style);
+        child._applyStyleFromScope();
         resetStyles(child);
         return true;
     });
 }
 
 export const idProperty = new Property<ViewBase, string>({ name: "id", valueChanged: (view, oldValue, newValue) => resetStyles(view) });
-idProperty.register(ViewBase);
+idProperty.register(ViewBase);
\ No newline at end of file
diff --git a/tns-core-modules/ui/core/view-common.ts b/tns-core-modules/ui/core/view-common.ts
index 7e2da7801..a97bb011e 100644
--- a/tns-core-modules/ui/core/view-common.ts
+++ b/tns-core-modules/ui/core/view-common.ts
@@ -32,26 +32,22 @@ export {
 //     instance.set("text", propertyValue);
 // });
 
-declare module "ui/styling/style" {
-    interface Style {
-        effectiveMinWidth: number;
-        effectiveMinHeight: number;
-        effectiveWidth: number;
-        effectiveHeight: number;
-        effectiveMarginTop: number;
-        effectiveMarginRight: number;
-        effectiveMarginBottom: number;
-        effectiveMarginLeft: number;
-        effectivePaddingTop: number;
-        effectivePaddingRight: number;
-        effectivePaddingBottom: number;
-        effectivePaddingLeft: number;
-        effectiveBorderTopWidth: number;
-        effectiveBorderRightWidth: number;
-        effectiveBorderBottomWidth: number;
-        effectiveBorderLeftWidth: number;
-    }
-}
+Style.prototype.effectiveMinWidth = 0;
+Style.prototype.effectiveMinHeight = 0;
+Style.prototype.effectiveWidth = 0;
+Style.prototype.effectiveHeight = 0;
+Style.prototype.effectiveMarginTop = 0;
+Style.prototype.effectiveMarginRight = 0;
+Style.prototype.effectiveMarginBottom = 0;
+Style.prototype.effectiveMarginLeft = 0;
+Style.prototype.effectivePaddingTop = 0;
+Style.prototype.effectivePaddingRight = 0;
+Style.prototype.effectivePaddingBottom = 0;
+Style.prototype.effectivePaddingLeft = 0;
+Style.prototype.effectiveBorderTopWidth = 0;
+Style.prototype.effectiveBorderRightWidth = 0;
+Style.prototype.effectiveBorderBottomWidth = 0;
+Style.prototype.effectiveBorderLeftWidth = 0;
 
 export function getViewById(view: ViewDefinition, id: string): ViewDefinition {
     if (!view) {
@@ -63,7 +59,7 @@ export function getViewById(view: ViewDefinition, id: string): ViewDefinition {
     }
 
     let retVal: ViewDefinition;
-    let descendantsCallback = function (child: ViewDefinition): boolean {
+    const descendantsCallback = function (child: ViewDefinition): boolean {
         if (child.id === id) {
             retVal = child;
             // break the iteration by returning false
@@ -1186,7 +1182,7 @@ widthProperty.register(Style);
 export const heightProperty = new CssProperty<Style, PercentLength>({ name: "height", cssName: "height", defaultValue: matchParent, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
 heightProperty.register(Style);
 
-export const marginProperty = new ShorthandProperty<Style>({
+const marginProperty = new ShorthandProperty<Style>({
     name: "margin", cssName: "margin",
     getter: function (this: Style) { return `${this.marginTop} ${this.marginRight} ${this.marginBottom} ${this.marginLeft}`; },
     converter: convertToMargins
@@ -1205,7 +1201,7 @@ marginTopProperty.register(Style);
 export const marginBottomProperty = new CssProperty<Style, PercentLength>({ name: "marginBottom", cssName: "margin-bottom", defaultValue: zeroLength, affectsLayout: isIOS, equalityComparer: lengthComparer, valueConverter: PercentLength.parse });
 marginBottomProperty.register(Style);
 
-export const paddingProperty = new ShorthandProperty<Style>({
+const paddingProperty = new ShorthandProperty<Style>({
     name: "padding", cssName: "padding",
     getter: function (this: Style) { return `${this.paddingTop} ${this.paddingRight} ${this.paddingBottom} ${this.paddingLeft}`; },
     converter: convertToPaddings
@@ -1340,7 +1336,7 @@ translateXProperty.register(Style);
 export const translateYProperty = new CssProperty<Style, number>({ name: "translateY", cssName: "translateY", defaultValue: 0, valueConverter: (v) => parseFloat(v) });
 translateYProperty.register(Style);
 
-export const transformProperty = new ShorthandProperty<Style>({
+const transformProperty = new ShorthandProperty<Style>({
     name: "transform", cssName: "transform",
     getter: function (this: Style) {
         let scaleX = this.scaleX;
@@ -1595,7 +1591,7 @@ function parseBorderColor(value: string): { top: Color, right: Color, bottom: Co
 }
 
 // Border Color properties.
-export const borderColorProperty = new ShorthandProperty<Style>({
+const borderColorProperty = new ShorthandProperty<Style>({
     name: "borderColor", cssName: "border-color",
     getter: function (this: Style) {
         if (Color.equals(this.borderTopColor, this.borderRightColor) &&
@@ -1651,7 +1647,7 @@ export const borderLeftColorProperty = new CssProperty<Style, Color>({
 borderLeftColorProperty.register(Style);
 
 // Border Width properties.
-export const borderWidthProperty = new ShorthandProperty<Style>({
+const borderWidthProperty = new ShorthandProperty<Style>({
     name: "borderWidth", cssName: "border-width",
     getter: function (this: Style) {
         if (Color.equals(this.borderTopColor, this.borderRightColor) &&
@@ -1731,7 +1727,7 @@ export const borderLeftWidthProperty = new CssProperty<Style, Length>({
 borderLeftWidthProperty.register(Style);
 
 // Border Radius properties.
-export const borderRadiusProperty = new ShorthandProperty<Style>({
+const borderRadiusProperty = new ShorthandProperty<Style>({
     name: "borderRadius", cssName: "border-radius",
     getter: function (this: Style) {
         if (this.borderTopLeftRadius === this.borderTopRightRadius &&
@@ -1902,7 +1898,7 @@ export const fontWeightProperty = new InheritedCssProperty<Style, "100" | "200"
 });
 fontWeightProperty.register(Style);
 
-export const fontProperty = new ShorthandProperty<Style>({
+const fontProperty = new ShorthandProperty<Style>({
     name: "font", cssName: "font",
     getter: function (this: Style) {
         return `${this.fontStyle} ${this.fontWeight} ${this.fontSize} ${this.fontFamily}`;
diff --git a/tns-core-modules/ui/core/view.d.ts b/tns-core-modules/ui/core/view.d.ts
index 0eecccacf..9f17fe54c 100644
--- a/tns-core-modules/ui/core/view.d.ts
+++ b/tns-core-modules/ui/core/view.d.ts
@@ -1,3 +1,24 @@
+declare module "ui/styling/style" {
+    interface Style {
+        effectiveMinWidth: number;
+        effectiveMinHeight: number;
+        effectiveWidth: number;
+        effectiveHeight: number;
+        effectiveMarginTop: number;
+        effectiveMarginRight: number;
+        effectiveMarginBottom: number;
+        effectiveMarginLeft: number;
+        effectivePaddingTop: number;
+        effectivePaddingRight: number;
+        effectivePaddingBottom: number;
+        effectivePaddingLeft: number;
+        effectiveBorderTopWidth: number;
+        effectiveBorderRightWidth: number;
+        effectiveBorderBottomWidth: number;
+        effectiveBorderLeftWidth: number;
+    }
+}
+
 declare module "ui/core/view" {
     import { GestureTypes, GesturesObserver, GestureEventData, TouchGestureEventData, TouchAction } from "ui/gestures";
     import { Animation, AnimationDefinition, AnimationPromise } from "ui/animation";
@@ -544,7 +565,7 @@ declare module "ui/core/view" {
 
         // Lifecycle events
 
-       
+
         _context: any /* android.content.Context */;
 
         _childIndexToNativeChildIndex(index?: number): number;
@@ -567,7 +588,7 @@ declare module "ui/core/view" {
 
         isCollapsed: boolean;
         isLayoutRequired: boolean;
-       
+
         _gestureObservers: any;
         // _isInheritedChange(): boolean;
         _domId: number;
diff --git a/tns-core-modules/ui/definitions.d.ts b/tns-core-modules/ui/definitions.d.ts
index 7c6e8314e..5ff5b7fb2 100644
--- a/tns-core-modules/ui/definitions.d.ts
+++ b/tns-core-modules/ui/definitions.d.ts
@@ -136,6 +136,7 @@ declare module "ui/core/properties" {
         constructor(options: PropertyOptions<T, U>);
 
         public readonly native: symbol;
+        public readonly defaultValue: U;
         public register(cls: { prototype: T }): void;
     }
 
@@ -143,6 +144,7 @@ declare module "ui/core/properties" {
         constructor(options: CoerciblePropertyOptions<T, U>);
 
         public readonly native: symbol;
+        public readonly defaultValue: U;
         public readonly coerce: (target: T) => void;
         public register(cls: { prototype: T }): void;
     }
@@ -157,6 +159,7 @@ declare module "ui/core/properties" {
         public readonly native: symbol;
         public readonly name: string;
         public readonly cssName: string;
+        public readonly defaultValue: U;
         public register(cls: { prototype: T }): void;
     }
 
diff --git a/tns-core-modules/ui/enums/enums.d.ts b/tns-core-modules/ui/enums/enums.d.ts
index 7489f7320..988dff6cc 100644
--- a/tns-core-modules/ui/enums/enums.d.ts
+++ b/tns-core-modules/ui/enums/enums.d.ts
@@ -1,623 +1,623 @@
-// declare module "ui/enums" {
-
-//     import animationModule = require("ui/animation");
-
-//     /**
-//      * Represents a soft keyboard flavor.
-//      */
-//     module KeyboardType {
-//         /**
-//          * Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL)
-//          * iOS:  [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
-//          */
-//         export var datetime: string;
-
-//         /**
-//          * Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE)
-//          * iOS:  [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
-//          */
-//         export var phone: string;
-
-//         /**
-//          * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL)
-//          * iOS:  [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
-//          */
-//         export var number: string;
-
-//         /**
-//          * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI)
-//          * iOS:  [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
-//          */
-//         export var url: string;
-
-//         /**
-//          * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
-//          * iOS:  [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
-//          */
-//         export var email: string;
-//     }
-
-//     /**
-//      * Represents the flavor of the return key on the soft keyboard.
-//      */
-//     module ReturnKeyType {
-//         /**
-//          * Android: [IME_ACTION_DONE](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_DONE)
-//          * iOS: [UIReturnKeyDone](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
-//          */
-//         export var done: string;
-
-//         /**
-//          * Android: [IME_ACTION_NEXT](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_NEXT)
-//          * iOS: [UIReturnKeyNext](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
-//          */
-//         export var next: string;
-
-//         /**
-//          * Android: [IME_ACTION_GO](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_GO)
-//          * iOS: [UIReturnKeyGo](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
-//          */
-//         export var go: string;
-
-//         /**
-//          * Android: [IME_ACTION_SEARCH](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEARCH)
-//          * iOS: [UIReturnKeySearch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
-//          */
-//         export var search: string;
-
-//         /**
-//          * Android: [IME_ACTION_SEND](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEND)
-//          * iOS: [UIReturnKeySend](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
-//          */
-//         export var send: string;
-//     }
-
-//     /**
-//      * Represents a text-align enumeration.
-//      */
-//     module TextAlignment {
-//         /**
-//          * Represents left text-align.
-//          */
-//         export var left: string;
-
-//         /**
-//          * Represents center text-align.
-//          */
-//         export var center: string;
-
-//         /**
-//          * Represents right text-align.
-//          */
-//         export var right: string;
-//     }
-
-//     /**
-//      * Orientation indicates a direction of a layout that can exist in a horizontal or vertical state.
-//      */
-//     module Orientation {
-//         /**
-//          * Layout should be horizontally oriented.
-//          */
-//         export var horizontal: string;
-//         /**
-//          * Layout should be vertically oriented.
-//          */
-//         export var vertical: string;
-//     }
-
-//     /**
-//      * Orientation of a device.
-//      */
-//     module DeviceOrientation {
-//         /**
-//          * Portrait orientation.
-//          */
-//         export var portrait: string;
-//         /**
-//          * Landscape orientation.
-//          */
-//         export var landscape: string;
-//         /**
-//          * Orientation cannot be determined.
-//          */
-//         export var unknown: string;
-//     }
-
-//     /**
-//      * HorizontalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element.
-//      */
-//     module HorizontalAlignment {
-//         /**
-//          * An element should be left aligned.
-//          */
-//         export var left: string;
-
-//         /**
-//          * An element should be center aligned.
-//          */
-//         export var center: string;
-
-//         /**
-//          * An element should be right aligned.
-//          */
-//         export var right: string;
-
-//         /**
-//          * An element should be stretched to fill all the available size.
-//          */
-//         export var stretch: string;
-//     }
-
-//     /**
-//      * VerticalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element.
-//      */
-//     module VerticalAlignment {
-//         /**
-//          * An element should be top aligned.
-//          */
-//         export var top: string;
-
-//         /**
-//          * An element should be center aligned.
-//          */
-//         export var center: string;
-
-//         /**
-//          * Same as center. An element should be aligned in the middle.
-//          */
-//         export var middle: string;
-
-//         /**
-//          * An element should be bottom aligned.
-//          */
-//         export var bottom: string;
-
-//         /**
-//          * An element should be stretched to fill all the available size.
-//          */
-//         export var stretch: string;
-//     }
-
-//     /**
-//      * Describes how content is resized to fill its allocated space.
-//      */
-//     module Stretch {
-//         /**
-//          * The image preserves its original size.
-//          */
-//         export var none: string;
-
-//         /**
-//          * The image is resized to fill in the destination dimensions while it preserves its native aspect ratio.
-//          */
-//         export var aspectFill: string;
-
-//         /**
-//          * The image is resized to fit the destination dimensions while it preserves
-//          * its native aspect ratio. If the aspect ratio of the destination rectangle differs from the image,
-//          * the image is clipped to fit in the destination
-//          */
-//         export var aspectFit: string;
-
-//         /**
-//          * The image is resized to fill the destination dimensions. The aspect ratio is not preserved.
-//          */
-//         export var fill: string;
-//     }
-
-//     /**
-//      * Represents the visibility mode of a view.
-//      */
-//     export module Visibility {
-//         /**
-//          * The view is visible.
-//          */
-//         export var visible: string;
-
-//         /**
-//          * Obsolete. Please use 'collapse' instead!
-//          */
-//         export var collapsed: string;
-
-//         /**
-//          * The view is not visible and won't take place in the layout.
-//          */
-//         export var collapse: string;
-
-//         /**
-//          * The view is not visible but will take place in the layout.
-//          */
-//         export var hidden: string;
-//     }
-
-//     /**
-//      * A flag enum that represents common font attributes.
-//      */
-//     module FontAttributes {
-//         /**
-//          * Denotes that text should be drawn in a normal style.
-//          */
-//         export var Normal: number;
-
-//         /**
-//          * Denotes that text should be drawn in a bold weight.
-//          */
-//         export var Bold: number;
-
-//         /**
-//          * Denotes that text should be drawn in a italic style.
-//          */
-//         export var Italic: number;
-//     }
-
-//     /**
-//      * Describes the type of a device
-//      */
-//     module DeviceType {
-//         /**
-//          * Indicates a smart-phone device.
-//          */
-//         export var Phone: string;
-
-//         /**
-//          * Indicates a tablet device.
-//          */
-//         export var Tablet: string;
-//     }
-
-//     /**
-//      * Represents an enumeration specifying when the text property of an EditableTextBase will be updated.
-//      */
-//     module UpdateTextTrigger {
-//         /**
-//          * The text property will be udpaded when the widget loses focus.
-//          */
-//         export var focusLost: string;
-
-//         /**
-//          * The text property will be udpaded on every single character typed by the user.
-//          */
-//         export var textChanged: string;
-//     }
-
-//     /**
-//      * Specifies common accuracy values.
-//      */
-//     module Accuracy {
-//         /**
-//          * The default accuracy. About 300 meters.
-//          */
-//         export var any: number;
-
-//         /**
-//          * High accuracy. About 3 meters.
-//          */
-//         export var high: number;
-//     }
-
-//     /**
-//      * Specifies the Dock position of a child element that is inside a DockLayout.
-//      */
-//     module Dock {
-//         /**
-//          * A child element that is positioned on the left side of the DockLayout.
-//          */
-//         export var left: string;
-
-//         /**
-//          * A child element that is positioned on the top side of the DockLayout.
-//          */
-//         export var top: string;
-
-//         /**
-//          * A child element that is positioned on the right side of the DockLayout.
-//          */
-//         export var right: string;
-
-//         /**
-//          * A child element that is positioned on the bottom side of the DockLayout.
-//          */
-//         export var bottom: string;
-//     }
-
-//     /**
-//      * Represents the auto-capitalization style for a text input.
-//      */
-//     module AutocapitalizationType {
-//         /**
-//          * Do not capitalize any text automatically.
-//          */
-//         export var none: string;
-
-//         /**
-//          * Capitalize the first letter of each word automatically.
-//          */
-//         export var words: string;
-
-//         /**
-//          * Capitalize the first letter of each sentence automatically.
-//          */
-//         export var sentences: string;
-
-//         /**
-//          * Capitalize all characters automatically.
-//          */
-//         export var allCharacters: string;
-//     }
-
-//     /**
-//      * Defines the recognized image formats.
-//      */
-//     module ImageFormat {
-//         /**
-//          * The W3C Portable Network Graphics (PNG) image format.
-//          */
-//         export var png: string;
-
-//         /**
-//          * The Joint Photographic Experts Group (JPEG) image format.
-//          */
-//         export var jpeg: string;
-
-//         /**
-//          * The Joint Photographic Experts Group (JPEG) image format.
-//          */
-//         export var jpg: string;
-//     }
-
-//     /**
-//      * Specifies NavigationBar visibility mode.
-//      */
-//     module NavigationBarVisibility {
-//         /**
-//          * NavigationBar will be visible if there if frame backstack canGoBack is true or if the page Action Bar is not empty.
-//          */
-//         export var auto: string;
-
-//         /**
-//          * NavigationBar will be hidden.
-//          */
-//         export var never: string;
-
-//         /**
-//          * NavigationBar will be visible.
-//          */
-//         export var always: string;
-//     }
-
-//     /**
-//      * Specifies the visibility of the application bar icon
-//      */
-//     export module AndroidActionBarIconVisibility {
-//         export var auto: string;
-//         export var never: string;
-//         export var always: string;
-//     }
-
-//     /**
-//      * Specifies android MenuItem position.
-//      */
-//     module AndroidActionItemPosition {
-//         /**
-//          * Always show this item as a button in an Action Bar.
-//          */
-//         export var actionBar: string;
-
-//         /**
-//          * Show this item as a button in an Action Bar if the system decides there is room for it.
-//          */
-//         export var actionBarIfRoom: string;
-
-//         /**
-//          * Never show this item as a button in an Action Bar.
-//          */
-//         export var popup: string;
-//     }
-
-//     /**
-//      * Specifies different font styles.
-//      */
-//     export module FontStyle {
-//         /**
-//          * Normal font style.
-//          */
-//         export var normal: string;
-
-//         /**
-//          * Italic font style.
-//          */
-//         export var italic: string;
-//     }
-
-//     /**
-//      * Specifies different text decorations.
-//      */
-//     export module TextDecoration {
-//         /**
-//          * No decoration.
-//          */
-//         export var none: string;
-
-//         /**
-//          * Text decoration underline.
-//          */
-//         export var underline: string;
-
-//         /**
-//          * Text decoration line-through.
-//          */
-//         export var lineThrough: string;
-//     }
-
-//     /**
-//      * Specifies different text transforms.
-//      */
-//     export module TextTransform {
-//         /**
-//          * No transform.
-//          */
-//         export var none: string;
-
-//         /**
-//          * Text transform capitalize.
-//          */
-//         export var capitalize: string;
-
-//         /**
-//          * Text transform uppercase.
-//          */
-//         export var uppercase: string;
-
-//         /**
-//          * Text transform lowercase.
-//          */
-//         export var lowercase: string;
-//     }
-
-//     /**
-//      * Specifies different white spaces.
-//      */
-//     export module WhiteSpace {
-//         /**
-//          * Normal wrap.
-//          */
-//         export var normal: string;
-
-//         /**
-//          * No wrap.
-//          */
-//         export var nowrap: string;
-//     }
-
-//     /**
-//      * Specifies different font weights.
-//      */
-//     export module FontWeight {
-//         /**
-//          * Thin font weight. CSS font-weight 100.
-//          */
-//         export var thin: string;
+declare module "ui/enums" {
+
+    import animationModule = require("ui/animation");
+
+    /**
+     * Represents a soft keyboard flavor.
+     */
+    module KeyboardType {
+        /**
+         * Android: [TYPE_CLASS_DATETIME](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_DATETIME) | [TYPE_DATETIME_VARIATION_NORMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_DATETIME_VARIATION_NORMAL)
+         * iOS:  [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
+         */
+        export var datetime: string;
+
+        /**
+         * Android: [TYPE_CLASS_PHONE](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_PHONE)
+         * iOS:  [UIKeyboardTypePhonePad](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
+         */
+        export var phone: string;
+
+        /**
+         * Android: [TYPE_CLASS_NUMBER](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_NUMBER) | [TYPE_NUMBER_VARIATION_NORMAL](http://developer.android.com/intl/es/reference/android/text/InputType.html#TYPE_NUMBER_VARIATION_NORMAL) | [TYPE_NUMBER_FLAG_SIGNED](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_SIGNED) | [TYPE_NUMBER_FLAG_DECIMAL](http://developer.android.com/reference/android/text/InputType.html#TYPE_NUMBER_FLAG_DECIMAL)
+         * iOS:  [UIKeyboardTypeNumbersAndPunctuation](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
+         */
+        export var number: string;
+
+        /**
+         * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_URI](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_URI)
+         * iOS:  [UIKeyboardTypeURL](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
+         */
+        export var url: string;
+
+        /**
+         * Android: [TYPE_CLASS_TEXT](http://developer.android.com/reference/android/text/InputType.html#TYPE_CLASS_TEXT) | [TYPE_TEXT_VARIATION_EMAIL_ADDRESS](http://developer.android.com/reference/android/text/InputType.html#TYPE_TEXT_VARIATION_EMAIL_ADDRESS)
+         * iOS:  [UIKeyboardTypeEmailAddress](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIKeyboardType)
+         */
+        export var email: string;
+    }
+
+    /**
+     * Represents the flavor of the return key on the soft keyboard.
+     */
+    module ReturnKeyType {
+        /**
+         * Android: [IME_ACTION_DONE](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_DONE)
+         * iOS: [UIReturnKeyDone](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
+         */
+        export var done: string;
+
+        /**
+         * Android: [IME_ACTION_NEXT](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_NEXT)
+         * iOS: [UIReturnKeyNext](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
+         */
+        export var next: string;
+
+        /**
+         * Android: [IME_ACTION_GO](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_GO)
+         * iOS: [UIReturnKeyGo](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
+         */
+        export var go: string;
+
+        /**
+         * Android: [IME_ACTION_SEARCH](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEARCH)
+         * iOS: [UIReturnKeySearch](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
+         */
+        export var search: string;
+
+        /**
+         * Android: [IME_ACTION_SEND](http://developer.android.com/reference/android/view/inputmethod/EditorInfo.html#IME_ACTION_SEND)
+         * iOS: [UIReturnKeySend](https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextInputTraits_Protocol/index.html#//apple_ref/c/tdef/UIReturnKeyType)
+         */
+        export var send: string;
+    }
+
+    /**
+     * Represents a text-align enumeration.
+     */
+    module TextAlignment {
+        /**
+         * Represents left text-align.
+         */
+        export var left: string;
+
+        /**
+         * Represents center text-align.
+         */
+        export var center: string;
+
+        /**
+         * Represents right text-align.
+         */
+        export var right: string;
+    }
+
+    /**
+     * Orientation indicates a direction of a layout that can exist in a horizontal or vertical state.
+     */
+    module Orientation {
+        /**
+         * Layout should be horizontally oriented.
+         */
+        export var horizontal: string;
+        /**
+         * Layout should be vertically oriented.
+         */
+        export var vertical: string;
+    }
+
+    /**
+     * Orientation of a device.
+     */
+    module DeviceOrientation {
+        /**
+         * Portrait orientation.
+         */
+        export var portrait: string;
+        /**
+         * Landscape orientation.
+         */
+        export var landscape: string;
+        /**
+         * Orientation cannot be determined.
+         */
+        export var unknown: string;
+    }
+
+    /**
+     * HorizontalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element.
+     */
+    module HorizontalAlignment {
+        /**
+         * An element should be left aligned.
+         */
+        export var left: string;
+
+        /**
+         * An element should be center aligned.
+         */
+        export var center: string;
+
+        /**
+         * An element should be right aligned.
+         */
+        export var right: string;
+
+        /**
+         * An element should be stretched to fill all the available size.
+         */
+        export var stretch: string;
+    }
+
+    /**
+     * VerticalAlignment indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element.
+     */
+    module VerticalAlignment {
+        /**
+         * An element should be top aligned.
+         */
+        export var top: string;
+
+        /**
+         * An element should be center aligned.
+         */
+        export var center: string;
+
+        /**
+         * Same as center. An element should be aligned in the middle.
+         */
+        export var middle: string;
+
+        /**
+         * An element should be bottom aligned.
+         */
+        export var bottom: string;
+
+        /**
+         * An element should be stretched to fill all the available size.
+         */
+        export var stretch: string;
+    }
+
+    /**
+     * Describes how content is resized to fill its allocated space.
+     */
+    module Stretch {
+        /**
+         * The image preserves its original size.
+         */
+        export var none: string;
+
+        /**
+         * The image is resized to fill in the destination dimensions while it preserves its native aspect ratio.
+         */
+        export var aspectFill: string;
+
+        /**
+         * The image is resized to fit the destination dimensions while it preserves
+         * its native aspect ratio. If the aspect ratio of the destination rectangle differs from the image,
+         * the image is clipped to fit in the destination
+         */
+        export var aspectFit: string;
+
+        /**
+         * The image is resized to fill the destination dimensions. The aspect ratio is not preserved.
+         */
+        export var fill: string;
+    }
+
+    /**
+     * Represents the visibility mode of a view.
+     */
+    export module Visibility {
+        /**
+         * The view is visible.
+         */
+        export var visible: string;
+
+        /**
+         * Obsolete. Please use 'collapse' instead!
+         */
+        export var collapsed: string;
+
+        /**
+         * The view is not visible and won't take place in the layout.
+         */
+        export var collapse: string;
+
+        /**
+         * The view is not visible but will take place in the layout.
+         */
+        export var hidden: string;
+    }
+
+    /**
+     * A flag enum that represents common font attributes.
+     */
+    module FontAttributes {
+        /**
+         * Denotes that text should be drawn in a normal style.
+         */
+        export var Normal: number;
+
+        /**
+         * Denotes that text should be drawn in a bold weight.
+         */
+        export var Bold: number;
+
+        /**
+         * Denotes that text should be drawn in a italic style.
+         */
+        export var Italic: number;
+    }
+
+    /**
+     * Describes the type of a device
+     */
+    module DeviceType {
+        /**
+         * Indicates a smart-phone device.
+         */
+        export var Phone: string;
+
+        /**
+         * Indicates a tablet device.
+         */
+        export var Tablet: string;
+    }
+
+    /**
+     * Represents an enumeration specifying when the text property of an EditableTextBase will be updated.
+     */
+    module UpdateTextTrigger {
+        /**
+         * The text property will be udpaded when the widget loses focus.
+         */
+        export var focusLost: string;
+
+        /**
+         * The text property will be udpaded on every single character typed by the user.
+         */
+        export var textChanged: string;
+    }
+
+    /**
+     * Specifies common accuracy values.
+     */
+    module Accuracy {
+        /**
+         * The default accuracy. About 300 meters.
+         */
+        export var any: number;
+
+        /**
+         * High accuracy. About 3 meters.
+         */
+        export var high: number;
+    }
+
+    /**
+     * Specifies the Dock position of a child element that is inside a DockLayout.
+     */
+    module Dock {
+        /**
+         * A child element that is positioned on the left side of the DockLayout.
+         */
+        export var left: string;
+
+        /**
+         * A child element that is positioned on the top side of the DockLayout.
+         */
+        export var top: string;
+
+        /**
+         * A child element that is positioned on the right side of the DockLayout.
+         */
+        export var right: string;
+
+        /**
+         * A child element that is positioned on the bottom side of the DockLayout.
+         */
+        export var bottom: string;
+    }
+
+    /**
+     * Represents the auto-capitalization style for a text input.
+     */
+    module AutocapitalizationType {
+        /**
+         * Do not capitalize any text automatically.
+         */
+        export var none: string;
+
+        /**
+         * Capitalize the first letter of each word automatically.
+         */
+        export var words: string;
+
+        /**
+         * Capitalize the first letter of each sentence automatically.
+         */
+        export var sentences: string;
+
+        /**
+         * Capitalize all characters automatically.
+         */
+        export var allCharacters: string;
+    }
+
+    /**
+     * Defines the recognized image formats.
+     */
+    module ImageFormat {
+        /**
+         * The W3C Portable Network Graphics (PNG) image format.
+         */
+        export var png: string;
+
+        /**
+         * The Joint Photographic Experts Group (JPEG) image format.
+         */
+        export var jpeg: string;
+
+        /**
+         * The Joint Photographic Experts Group (JPEG) image format.
+         */
+        export var jpg: string;
+    }
+
+    /**
+     * Specifies NavigationBar visibility mode.
+     */
+    module NavigationBarVisibility {
+        /**
+         * NavigationBar will be visible if there if frame backstack canGoBack is true or if the page Action Bar is not empty.
+         */
+        export var auto: string;
+
+        /**
+         * NavigationBar will be hidden.
+         */
+        export var never: string;
+
+        /**
+         * NavigationBar will be visible.
+         */
+        export var always: string;
+    }
+
+    /**
+     * Specifies the visibility of the application bar icon
+     */
+    export module AndroidActionBarIconVisibility {
+        export var auto: string;
+        export var never: string;
+        export var always: string;
+    }
+
+    /**
+     * Specifies android MenuItem position.
+     */
+    module AndroidActionItemPosition {
+        /**
+         * Always show this item as a button in an Action Bar.
+         */
+        export var actionBar: string;
+
+        /**
+         * Show this item as a button in an Action Bar if the system decides there is room for it.
+         */
+        export var actionBarIfRoom: string;
+
+        /**
+         * Never show this item as a button in an Action Bar.
+         */
+        export var popup: string;
+    }
+
+    /**
+     * Specifies different font styles.
+     */
+    export module FontStyle {
+        /**
+         * Normal font style.
+         */
+        export var normal: string;
+
+        /**
+         * Italic font style.
+         */
+        export var italic: string;
+    }
+
+    /**
+     * Specifies different text decorations.
+     */
+    export module TextDecoration {
+        /**
+         * No decoration.
+         */
+        export var none: string;
+
+        /**
+         * Text decoration underline.
+         */
+        export var underline: string;
+
+        /**
+         * Text decoration line-through.
+         */
+        export var lineThrough: string;
+    }
+
+    /**
+     * Specifies different text transforms.
+     */
+    export module TextTransform {
+        /**
+         * No transform.
+         */
+        export var none: string;
+
+        /**
+         * Text transform capitalize.
+         */
+        export var capitalize: string;
+
+        /**
+         * Text transform uppercase.
+         */
+        export var uppercase: string;
+
+        /**
+         * Text transform lowercase.
+         */
+        export var lowercase: string;
+    }
+
+    /**
+     * Specifies different white spaces.
+     */
+    export module WhiteSpace {
+        /**
+         * Normal wrap.
+         */
+        export var normal: string;
+
+        /**
+         * No wrap.
+         */
+        export var nowrap: string;
+    }
+
+    /**
+     * Specifies different font weights.
+     */
+    export module FontWeight {
+        /**
+         * Thin font weight. CSS font-weight 100.
+         */
+        export var thin: string;
         
-//         /**
-//          * Extra-light / Ultra-light font weight. CSS font-weight 200.
-//          */
-//         export var extraLight: string;
+        /**
+         * Extra-light / Ultra-light font weight. CSS font-weight 200.
+         */
+        export var extraLight: string;
         
-//         /**
-//          * Light font weight. CSS font-weight 300.
-//          */
-//         export var light: string;
+        /**
+         * Light font weight. CSS font-weight 300.
+         */
+        export var light: string;
 
-//         /**
-//          * Normal font weight. CSS font-weight 400.
-//          */
-//         export var normal: string;
+        /**
+         * Normal font weight. CSS font-weight 400.
+         */
+        export var normal: string;
 
-//         /**
-//          * Medium font weight. CSS font-weight 500.
-//          */
-//         export var medium: string;
+        /**
+         * Medium font weight. CSS font-weight 500.
+         */
+        export var medium: string;
 
-//         /**
-//          * Semi-bold / Demi-bold font weight. CSS font-weight 600.
-//          */
-//         export var semiBold: string;
+        /**
+         * Semi-bold / Demi-bold font weight. CSS font-weight 600.
+         */
+        export var semiBold: string;
         
-//         /**
-//          * Bold font weight. CSS font-weight 700.
-//          */
-//         export var bold: string;
+        /**
+         * Bold font weight. CSS font-weight 700.
+         */
+        export var bold: string;
 
-//         /**
-//          * Extra-bold / Ultra-bold font weight. CSS font-weight 800.
-//          */
-//         export var extraBold: string;
+        /**
+         * Extra-bold / Ultra-bold font weight. CSS font-weight 800.
+         */
+        export var extraBold: string;
 
-//         /**
-//          * Black font weight. CSS font-weight 900.
-//          */
-//         export var black: string;
-//     }
+        /**
+         * Black font weight. CSS font-weight 900.
+         */
+        export var black: string;
+    }
 
-//     /**
-//      * Specifies background repeat.
-//      */
-//     export module BackgroundRepeat {
-//         export var repeat: string;
-//         export var repeatX: string;
-//         export var repeatY: string;
-//         export var noRepeat: string;
-//     }
+    /**
+     * Specifies background repeat.
+     */
+    export module BackgroundRepeat {
+        export var repeat: string;
+        export var repeatX: string;
+        export var repeatY: string;
+        export var noRepeat: string;
+    }
 
-//     /**
-//      * Specifies android MenuItem position.
-//      */
-//     module IOSActionItemPosition {
-//         /**
-//          * Show this item at the left of the navigation bar.
-//          */
-//         export var left: string;
+    /**
+     * Specifies android MenuItem position.
+     */
+    module IOSActionItemPosition {
+        /**
+         * Show this item at the left of the navigation bar.
+         */
+        export var left: string;
 
-//         /**
-//          * Show this item at the right of the action bar.
-//          */
-//         export var right: string;
-//     }
+        /**
+         * Show this item at the right of the action bar.
+         */
+        export var right: string;
+    }
 
-//     /**
-//      * Represents an animation curve type.
-//      */
-//     export module AnimationCurve {
+    /**
+     * Represents an animation curve type.
+     */
+    export module AnimationCurve {
 
-//         /**
-//          * Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
-//          */
-//         export var ease: string;
+        /**
+         * Default value. Specifies a transition effect with a slow start, then fast, then end slowly (equivalent to cubic-bezier(0.25,0.1,0.25,1))
+         */
+        export var ease: string;
         
-//         /**
-//          * An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
-//          */
-//         export var easeIn: string;
+        /**
+         * An ease-in curve causes the animation to begin slowly, and then speed up as it progresses.
+         */
+        export var easeIn: string;
 
-//         /**
-//          * An ease-out curve causes the animation to begin quickly, and then slow down as it completes.
-//          */
-//         export var easeOut: string;
+        /**
+         * An ease-out curve causes the animation to begin quickly, and then slow down as it completes.
+         */
+        export var easeOut: string;
 
-//         /**
-//          * An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.
-//          */
-//         export var easeInOut: string;
+        /**
+         * An ease-in ease-out curve causes the animation to begin slowly, accelerate through the middle of its duration, and then slow again before completing.
+         */
+        export var easeInOut: string;
 
-//         /**
-//          * A linear animation curve causes an animation to occur evenly over its duration.
-//          */
-//         export var linear: string;
+        /**
+         * A linear animation curve causes an animation to occur evenly over its duration.
+         */
+        export var linear: string;
 
-//         /**
-//          * A spring animation curve causes an animation to produce a spring (bounce) effect.
-//          */
-//         export var spring: string;
+        /**
+         * A spring animation curve causes an animation to produce a spring (bounce) effect.
+         */
+        export var spring: string;
 
-//        /**
-//         * A custom cubic bezier function defined by its two control points. Possible values are numeric values from 0 to 1
-//         */
-//        export function cubicBezier(x1: number, y1: number, x2: number, y2: number): animationModule.CubicBezierAnimationCurve;
-//    }
+       /**
+        * A custom cubic bezier function defined by its two control points. Possible values are numeric values from 0 to 1
+        */
+       export function cubicBezier(x1: number, y1: number, x2: number, y2: number): animationModule.CubicBezierAnimationCurve;
+   }
 
-//    /**
-//     * Specifies the types of the status bar style.
-//     */
-//    export module StatusBarStyle {
-//        /**
-//         * The light style of the status bar - light background with dark letters.
-//         */
-//        export var light: string;
+   /**
+    * Specifies the types of the status bar style.
+    */
+   export module StatusBarStyle {
+       /**
+        * The light style of the status bar - light background with dark letters.
+        */
+       export var light: string;
 
-//        /**
-//         * The dark style of the status bar - dark background with light letters.
-//         */
-//        export var dark: string;
-//    }
-//}
+       /**
+        * The dark style of the status bar - dark background with light letters.
+        */
+       export var dark: string;
+   }
+}
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
index f849e00f4..a0dbc1adf 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts
@@ -1,29 +1,23 @@
-import {LayoutBase} from "ui/layouts/layout-base";
-import {View} from "ui/core/view";
-import {PropertyMetadata} from "ui/core/proxy";
-import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
-import {registerSpecialProperty} from "ui/builder/special-properties";
-import {isAndroid} from "platform";
-import {isString, isBoolean} from "utils/types";
-import styleProperty = require("ui/styling/style-property");
-import * as style from "ui/styling/style";
 import * as flexbox from "ui/layouts/flexbox-layout";
+import { LayoutBase, View, Style, Property, CssProperty, isIOS, ShorthandProperty } from "ui/layouts/layout-base";
 
-declare module "ui/layouts/flexbox-layout" {
-    export function _onNativeOrderPropertyChanged(view: View, newValue: number): void;
-    export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void;
-    export function _onNativeFlexShrinkPropertyChanged(view: View, newValue: number): void;
-    export function _onNativeAlignSelfPropertyChanged(view: View, newValue: AlignSelf): void;
-    export function _onNativeFlexWrapBeforePropertyChanged(view: View, newValue: boolean): void;
-}
+export * from "ui/layouts/layout-base";
+
+// declare module "ui/layouts/flexbox-layout" {
+//     export function _onNativeOrderPropertyChanged(view: View, newValue: number): void;
+//     export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void;
+//     export function _onNativeFlexShrinkPropertyChanged(view: View, newValue: number): void;
+//     export function _onNativeAlignSelfPropertyChanged(view: View, newValue: AlignSelf): void;
+//     export function _onNativeFlexWrapBeforePropertyChanged(view: View, newValue: boolean): void;
+// }
 
 export type Basis = "auto" | number;
 
-const ORDER_DEFAULT = 1;
-const FLEX_GROW_DEFAULT = 0.0;
-const FLEX_SHRINK_DEFAULT = 1.0;
+export const ORDER_DEFAULT = 1;
+export const FLEX_GROW_DEFAULT = 0.0;
+export const FLEX_SHRINK_DEFAULT = 1.0;
 
-function makeValidator<T>(... values: T[]): (value: any) => value is T {
+function makeValidator<T>(...values: T[]): (value: any) => value is T {
     const set = new Set(values);
     return (value: any): value is T => set.has(value);
 }
@@ -100,7 +94,7 @@ export namespace AlignContent {
 export type Order = number;
 export namespace Order {
     export function isValid(value): boolean {
-         return isFinite(parseInt(value));
+        return isFinite(parseInt(value));
     }
     export const parse = parseInt;
 }
@@ -126,10 +120,10 @@ export namespace FlexShrink {
 export type FlexWrapBefore = boolean;
 export namespace FlexWrapBefore {
     export function isValid(value) {
-        if (isBoolean(value)) {
+        if (typeof value === "boolean") {
             return true;
         }
-        if (isString(value)) {
+        if (typeof value === "string") {
             const str = value.trim().toLowerCase();
             return str === "true" || str === "false";
         }
@@ -164,209 +158,259 @@ function validateArgs(element: View): View {
  * A common base class for all cross platform flexbox layout implementations.
  */
 export abstract class FlexboxLayoutBase extends LayoutBase {
-
-    constructor() {
-        super();
-    }
-
     get flexDirection(): FlexDirection {
-        return this.style._getValue(flexDirectionProperty);
+        return this.style.flexDirection;
     }
     set flexDirection(value: FlexDirection) {
-        this.style._setValue(flexDirectionProperty, value);
+        this.style.flexDirection = value;
     }
 
     get flexWrap(): FlexWrap {
-        return this.style._getValue(flexWrapProperty);
+        return this.style.flexWrap;
     }
     set flexWrap(value: FlexWrap) {
-        this.style._setValue(flexWrapProperty, value);
+        this.style.flexWrap = value;
     }
 
     get justifyContent(): JustifyContent {
-        return this.style._getValue(justifyContentProperty);
+        return this.style.justifyContent;
     }
     set justifyContent(value: JustifyContent) {
-        this.style._setValue(justifyContentProperty, value);
+        this.style.justifyContent = value;
     }
 
     get alignItems(): AlignItems {
-        return this.style._getValue(alignItemsProperty);
+        return this.style.alignItems;
     }
     set alignItems(value: AlignItems) {
-        this.style._setValue(alignItemsProperty, value);
+        this.style.alignItems = value;
     }
 
     get alignContent(): AlignContent {
-        return this.style._getValue(alignContentProperty);
+        return this.style.alignContent;
     }
     set alignContent(value: AlignContent) {
-        this.style._setValue(alignContentProperty, value);
+        this.style.alignContent = value;
     }
 
     public static setOrder(view: View, order: number) {
-        validateArgs(view).style._setValue(orderProperty, order);
+        validateArgs(view).style.order = order;
     }
     public static getOrder(view: View): number {
-        return validateArgs(view).style._getValue(orderProperty);
+        return validateArgs(view).style.order;
     }
 
     public static setFlexGrow(view: View, grow: number) {
-        validateArgs(view).style._setValue(flexGrowProperty, grow);
+        validateArgs(view).style.flexGrow = grow;
     }
     public static getFlexGrow(view: View) {
-        return validateArgs(view).style._getValue(flexGrowProperty);
+        return validateArgs(view).style.flexGrow;
     }
 
     public static setFlexShrink(view: View, shrink: number) {
-        validateArgs(view).style._setValue(flexShrinkProperty, shrink);
+        validateArgs(view).style.flexShrink = shrink;
     }
     public static getFlexShrink(view: View): number {
-        return validateArgs(view).style._getValue(flexShrinkProperty);
+        return validateArgs(view).style.flexShrink;
     }
 
     public static setAlignSelf(view: View, align: AlignSelf) {
-        validateArgs(view).style._setValue(alignSelfProperty, align);
+        validateArgs(view).style.alignSelf = align;
     }
     public static getAlignSelf(view: View): AlignSelf {
-        return validateArgs(view).style._getValue(alignSelfProperty);
+        return validateArgs(view).style.alignSelf;
     }
 
     public static setFlexWrapBefore(view: View, wrap: boolean) {
-        validateArgs(view).style._setValue(flexWrapBeforeProperty, wrap);
+        validateArgs(view).style.flexWrapBefore = wrap;
     }
     public static getFlexWrapBefore(view: View): boolean {
-        return validateArgs(view).style._getValue(flexWrapBeforeProperty);
+        return validateArgs(view).style.flexWrapBefore;
     }
-
-    abstract _setNativeFlexDirection(flexDirection: FlexDirection);
-    abstract _setNativeFlexWrap(flexWrap: FlexWrap);
-    abstract _setNativeJustifyContent(justifyContent: JustifyContent);
-    abstract _setNativeAlignItems(alignItems: AlignItems);
-    abstract _setNativeAlignContent(alignContent: AlignContent);
 }
 
-const flexboxAffectsLayout = isAndroid ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
+export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({ name: "flexDirection", cssName: "flex-direction", defaultValue: FlexDirection.ROW, affectsLayout: isIOS, valueConverter: FlexDirection.parse });
+flexDirectionProperty.register(Style);
 
-export const flexDirectionProperty = new styleProperty.Property("flexDirection", "flex-direction", new PropertyMetadata(FlexDirection.ROW, flexboxAffectsLayout, undefined, FlexDirection.isValid), FlexDirection.parse);
-export const flexWrapProperty = new styleProperty.Property("flexWrap", "flex-wrap", new PropertyMetadata(FlexWrap.NOWRAP, flexboxAffectsLayout, undefined, FlexWrap.isValid), FlexWrap.parse);
-export const justifyContentProperty = new styleProperty.Property("justifyContent", "justify-content", new PropertyMetadata(JustifyContent.FLEX_START, flexboxAffectsLayout, undefined, JustifyContent.isValid), JustifyContent.parse);
-export const alignItemsProperty = new styleProperty.Property("alignItems", "align-items", new PropertyMetadata(AlignItems.STRETCH, flexboxAffectsLayout, undefined, AlignItems.isValid), AlignItems.parse);
-export const alignContentProperty = new styleProperty.Property("alignContent", "align-content", new PropertyMetadata(AlignContent.STRETCH, flexboxAffectsLayout, undefined, AlignContent.isValid), AlignContent.parse);
+export const flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: FlexWrap.NOWRAP, affectsLayout: isIOS, valueConverter: FlexWrap.parse });
+flexWrapProperty.register(Style);
 
-export const orderProperty = new styleProperty.Property("order", "order", new PropertyMetadata(ORDER_DEFAULT, PropertyMetadataSettings.None, undefined, Order.isValid), Order.parse);
-export const flexGrowProperty = new styleProperty.Property("flexGrow", "flex-grow", new PropertyMetadata(FLEX_GROW_DEFAULT, PropertyMetadataSettings.None, undefined, FlexGrow.isValid), FlexGrow.parse);
-export const flexShrinkProperty = new styleProperty.Property("flexShrink", "flex-shrink", new PropertyMetadata(FLEX_SHRINK_DEFAULT, PropertyMetadataSettings.None, undefined, FlexShrink.isValid), FlexShrink.parse);
-export const flexWrapBeforeProperty = new styleProperty.Property("flexWrapBefore", "flex-wrap-before", new PropertyMetadata(false, PropertyMetadataSettings.None, undefined, FlexWrapBefore.isValid), FlexWrapBefore.parse);
-export const alignSelfProperty = new styleProperty.Property("alignSelf", "align-self", new PropertyMetadata(AlignSelf.AUTO, PropertyMetadataSettings.None, undefined, AlignSelf.isValid), AlignSelf.parse);
+export const justifyContentProperty = new CssProperty<Style, JustifyContent>({ name: "justifyContent", cssName: "justify-content", defaultValue: JustifyContent.FLEX_START, affectsLayout: isIOS, valueConverter: JustifyContent.parse });
+justifyContentProperty.register(Style);
 
-registerSpecialProperty("order", (instance, propertyValue) => {
-    FlexboxLayoutBase.setOrder(instance, !isNaN(+propertyValue) && +propertyValue);
-});
-registerSpecialProperty("flexGrow", (instance, propertyValue) => {
-    FlexboxLayoutBase.setFlexGrow(instance, !isNaN(+propertyValue) && +propertyValue);
-});
-registerSpecialProperty("flexShrink", (instance, propertyValue) => {
-    FlexboxLayoutBase.setFlexShrink(instance, !isNaN(+propertyValue) && +propertyValue);
-});
-registerSpecialProperty("alignSelf", (instance, propertyValue) => {
-    FlexboxLayoutBase.setAlignSelf(instance, propertyValue);
-});
-registerSpecialProperty("flexWrapBefore", (instance, propertyValue) => {
-    FlexboxLayoutBase.setFlexWrapBefore(instance, isString(propertyValue) ? FlexWrapBefore.parse(propertyValue) : propertyValue);
-});
+export const alignItemsProperty = new CssProperty<Style, AlignItems>({ name: "alignItems", cssName: "align-items", defaultValue: AlignItems.STRETCH, affectsLayout: isIOS, valueConverter: AlignItems.parse });
+alignItemsProperty.register(Style);
 
-const flexboxGuard = <T>(handler: (flexbox: FlexboxLayoutBase, newValue: any) => void) => (view: View, newValue: any) => view instanceof FlexboxLayoutBase ? handler(view, newValue) : void 0;
-style.registerHandler(flexDirectionProperty, new style.StylePropertyChangedHandler(
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(newValue)),
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(FlexDirection.ROW))), "FlexboxLayout");
-style.registerHandler(flexWrapProperty, new style.StylePropertyChangedHandler(
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(newValue)),
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(FlexWrap.NOWRAP))), "FlexboxLayout");
-style.registerHandler(justifyContentProperty, new style.StylePropertyChangedHandler(
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(newValue)),
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(JustifyContent.FLEX_START))), "FlexboxLayout");
-style.registerHandler(alignItemsProperty, new style.StylePropertyChangedHandler(
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(newValue)),
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(AlignItems.STRETCH))), "FlexboxLayout");
-style.registerHandler(alignContentProperty, new style.StylePropertyChangedHandler(
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(newValue)),
-    flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(AlignContent.STRETCH))), "FlexboxLayout");
+export const alignContentProperty = new CssProperty<Style, AlignContent>({ name: "alignContent", cssName: "align-content", defaultValue: AlignContent.STRETCH, affectsLayout: isIOS, valueConverter: AlignContent.parse });
+alignContentProperty.register(Style);
 
-style.registerHandler(orderProperty, new style.StylePropertyChangedHandler(
-    (view, value) => flexbox._onNativeOrderPropertyChanged(view, value),
-    (view, value) => flexbox._onNativeOrderPropertyChanged(view, 1)), "View");
-style.registerHandler(flexGrowProperty, new style.StylePropertyChangedHandler(
-    (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, value),
-    (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, 0)), "View");
-style.registerHandler(flexShrinkProperty, new style.StylePropertyChangedHandler(
-    (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, value),
-    (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, 1)), "View");
-style.registerHandler(flexWrapBeforeProperty, new style.StylePropertyChangedHandler(
-    (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, value),
-    (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, false)), "View");
-style.registerHandler(alignSelfProperty, new style.StylePropertyChangedHandler(
-    (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, value),
-    (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
+
+export const orderProperty = new CssProperty<Style, Order>({ name: "order", cssName: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
+orderProperty.register(Style);
+
+export const flexGrowProperty = new CssProperty<Style, FlexGrow>({ name: "flexGrow", cssName: "flex-grow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
+flexGrowProperty.register(Style);
+
+export const flexShrinkProperty = new CssProperty<Style, FlexShrink>({ name: "flexShrink", cssName: "flex-shrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
+flexShrinkProperty.register(Style);
+
+export const flexWrapBeforeProperty = new CssProperty<Style, FlexWrapBefore>({ name: "flexWrapBefore", cssName: "flex-wrap-before", defaultValue: false, valueConverter: FlexWrapBefore.parse });
+flexWrapBeforeProperty.register(Style);
+
+export const alignSelfProperty = new CssProperty<Style, AlignSelf>({ name: "alignSelf", cssName: "align-self", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
+alignSelfProperty.register(Style);
+
+// These support setting attached properties through XML. Delete if we stop supporting them.
+// they could be set in XML through style -- <button style.order="1" />
+const orderProperty1 = new Property<View, Order>({ name: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
+orderProperty1.register(View);
+
+const flexGrowProperty1 = new Property<View, FlexGrow>({ name: "flexGrow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
+flexGrowProperty1.register(View);
+
+const flexShrinkProperty1 = new Property<View, FlexShrink>({ name: "flexShrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
+flexShrinkProperty1.register(View);
+
+const flexWrapBeforeProperty1 = new Property<View, FlexWrapBefore>({ name: "flexWrapBefore", defaultValue: false, valueConverter: FlexWrapBefore.parse });
+flexWrapBeforeProperty1.register(View);
+
+const alignSelfProperty1 = new Property<View, AlignSelf>({ name: "alignSelf", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
+alignSelfProperty1.register(View);
+
+
+// registerSpecialProperty("order", (instance, propertyValue) => {
+//     FlexboxLayoutBase.setOrder(instance, !isNaN(+propertyValue) && +propertyValue);
+// });
+// registerSpecialProperty("flexGrow", (instance, propertyValue) => {
+//     FlexboxLayoutBase.setFlexGrow(instance, !isNaN(+propertyValue) && +propertyValue);
+// });
+// registerSpecialProperty("flexShrink", (instance, propertyValue) => {
+//     FlexboxLayoutBase.setFlexShrink(instance, !isNaN(+propertyValue) && +propertyValue);
+// });
+// registerSpecialProperty("alignSelf", (instance, propertyValue) => {
+//     FlexboxLayoutBase.setAlignSelf(instance, propertyValue);
+// });
+// registerSpecialProperty("flexWrapBefore", (instance, propertyValue) => {
+//     FlexboxLayoutBase.setFlexWrapBefore(instance, isString(propertyValue) ? FlexWrapBefore.parse(propertyValue) : propertyValue);
+// });
+
+// const flexboxGuard = <T>(handler: (flexbox: FlexboxLayoutBase, newValue: any) => void) => (view: View, newValue: any) => view instanceof FlexboxLayoutBase ? handler(view, newValue) : void 0;
+// style.registerHandler(flexDirectionProperty, new style.StylePropertyChangedHandler(
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(newValue)),
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexDirection(FlexDirection.ROW))), "FlexboxLayout");
+// style.registerHandler(flexWrapProperty, new style.StylePropertyChangedHandler(
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(newValue)),
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeFlexWrap(FlexWrap.NOWRAP))), "FlexboxLayout");
+// style.registerHandler(justifyContentProperty, new style.StylePropertyChangedHandler(
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(newValue)),
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeJustifyContent(JustifyContent.FLEX_START))), "FlexboxLayout");
+// style.registerHandler(alignItemsProperty, new style.StylePropertyChangedHandler(
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(newValue)),
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignItems(AlignItems.STRETCH))), "FlexboxLayout");
+// style.registerHandler(alignContentProperty, new style.StylePropertyChangedHandler(
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(newValue)),
+//     flexboxGuard((flexbox, newValue) => flexbox._setNativeAlignContent(AlignContent.STRETCH))), "FlexboxLayout");
+
+// style.registerHandler(orderProperty, new style.StylePropertyChangedHandler(
+//     (view, value) => flexbox._onNativeOrderPropertyChanged(view, value),
+//     (view, value) => flexbox._onNativeOrderPropertyChanged(view, 1)), "View");
+// style.registerHandler(flexGrowProperty, new style.StylePropertyChangedHandler(
+//     (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, value),
+//     (view, value) => flexbox._onNativeFlexGrowPropertyChanged(view, 0)), "View");
+// style.registerHandler(flexShrinkProperty, new style.StylePropertyChangedHandler(
+//     (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, value),
+//     (view, value) => flexbox._onNativeFlexShrinkPropertyChanged(view, 1)), "View");
+// style.registerHandler(flexWrapBeforeProperty, new style.StylePropertyChangedHandler(
+//     (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, value),
+//     (view, value) => flexbox._onNativeFlexWrapBeforePropertyChanged(view, false)), "View");
+// style.registerHandler(alignSelfProperty, new style.StylePropertyChangedHandler(
+//     (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, value),
+//     (view, value) => flexbox._onNativeAlignSelfPropertyChanged(view, AlignSelf.AUTO)), "View");
 
 // flex-flow: <flex-direction> || <flex-wrap>
-styleProperty.registerShorthandCallback("flex-flow", value => {
-    const properties: styleProperty.KeyValuePair<styleProperty.Property, any>[] = [];
-    const trimmed = value && value.trim();
-    if (trimmed) {
-        let values = trimmed.split(/\s+/);
-        if (values.length >= 1 && FlexDirection.isValid(values[0])) {
-            properties.push({ property: flexDirectionProperty, value: FlexDirection.parse(values[0]) });
-        }
-        if (value.length >= 2 && FlexWrap.isValid(values[1])) {
-            properties.push({ property: flexWrapProperty, value: FlexWrap.parse(values[1]) });
+const flexFlowProperty = new ShorthandProperty<Style>({
+    name: "flex-flow", cssName: "flex-flow",
+    getter: function (this: Style) {
+        return `${this.flexDirection} ${this.flexWrap}`;
+    },
+    converter: function (value: string) {
+        const properties: [CssProperty<any, any>, any][] = [];
+        const trimmed = value && value.trim();
+        if (trimmed) {
+            const values = trimmed.split(/\s+/);
+            if (values.length >= 1 && FlexDirection.isValid(values[0])) {
+                properties.push([flexDirectionProperty, FlexDirection.parse(values[0])]);
+            }
+            if (value.length >= 2 && FlexWrap.isValid(values[1])) {
+                properties.push([flexWrapProperty, FlexWrap.parse(values[1])]);
+            }
         }
+        return properties;;
     }
-    return properties;
-});
+})
+flexFlowProperty.register(Style);
 
 // flex: inital | auto | none | <flex-grow> <flex-shrink> || <flex-basis>
-styleProperty.registerShorthandCallback("flex", value => {
-    const properties: styleProperty.KeyValuePair<styleProperty.Property, any>[] = [];
-    const trimmed = value && value.trim();
-    if (trimmed) {
-        let values = trimmed.split(/\s+/);
-        if (values.length === 1) {
-            switch(values[0]) {
-                case "inital":
-                    properties.push({ property: flexGrowProperty, value: 0});
-                    properties.push({ property: flexShrinkProperty, value: 1});
-                    // properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
-                    break;
-                case "auto":
-                    properties.push({ property: flexGrowProperty, value: 1});
-                    properties.push({ property: flexShrinkProperty, value: 1});
-                    // properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
-                    break;
-                case "none":
-                    properties.push({ property: flexGrowProperty, value: 0});
-                    properties.push({ property: flexShrinkProperty, value: 0});
-                    // properties.push({ property: flexBasisProperty, value: FlexBasis.AUTO})
-                    break;
-                default:
-                    if (FlexGrow.isValid(values[0])) {
-                        properties.push({ property: flexGrowProperty, value: FlexGrow.parse(values[0])});
-                        properties.push({ property: flexShrinkProperty, value: 1});
-                        // properties.push({ property: flexBasisProperty, value: 0})
-                    }
+const flexProperty = new ShorthandProperty<Style>({
+    name: "flex", cssName: "flex",
+    getter: function (this: Style) {
+        return `${this.flexGrow} ${this.flexShrink}`;
+    },
+    converter: function (value: string) {
+        const properties: [CssProperty<any, any>, any][] = [];
+        const trimmed = value && value.trim();
+        if (trimmed) {
+            const values = trimmed.split(/\s+/);
+            if (values.length === 1) {
+                switch (values[0]) {
+                    case "inital":
+                        properties.push([flexGrowProperty, 0]);
+                        properties.push([flexShrinkProperty, 1]);
+                        // properties.push([flexBasisProperty, FlexBasis.AUTO])
+                        break;
+                    case "auto":
+                        properties.push([flexGrowProperty, 1]);
+                        properties.push([flexShrinkProperty, 1]);
+                        // properties.push([flexBasisProperty, FlexBasis.AUTO])
+                        break;
+                    case "none":
+                        properties.push([flexGrowProperty, 0]);
+                        properties.push([flexShrinkProperty, 0]);
+                        // properties.push([flexBasisProperty, FlexBasis.AUTO])
+                        break;
+                    default:
+                        if (FlexGrow.isValid(values[0])) {
+                            properties.push([flexGrowProperty, FlexGrow.parse(values[0])]);
+                            properties.push([flexShrinkProperty, 1]);
+                            // properties.push([flexBasisProperty, 0])
+                        }
+                }
             }
-        }
-        if (values.length >= 2) {
-            if (FlexGrow.isValid(values[0]) && FlexShrink.isValid(values[1])) {
-                properties.push({ property: flexGrowProperty, value: FlexGrow.parse(values[0])});
-                properties.push({ property: flexShrinkProperty, value: FlexShrink.parse(values[1])});
+            if (values.length >= 2) {
+                if (FlexGrow.isValid(values[0]) && FlexShrink.isValid(values[1])) {
+                    properties.push([flexGrowProperty, FlexGrow.parse(values[0])]);
+                    properties.push([flexShrinkProperty, FlexShrink.parse(values[1])]);
+                }
             }
+            // if (value.length >= 3) {
+            //     properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
+            // }
         }
-        // if (value.length >= 3) {
-        //     properties.push({ property: flexBasisProperty, value: FlexBasis.parse(values[2])})
-        // }
-    }
-    return properties;
-});
+        return properties;
 
-// No flex-basis in our implementation.
+    }
+})
+flexProperty.register(Style);
+
+Style.prototype.flexDirection = flexDirectionProperty.defaultValue;
+Style.prototype.flexWrap = flexWrapProperty.defaultValue;
+Style.prototype.justifyContent = justifyContentProperty.defaultValue;
+Style.prototype.alignItems = alignItemsProperty.defaultValue;
+Style.prototype.alignContent = alignContentProperty.defaultValue;
+Style.prototype.order = orderProperty.defaultValue;
+Style.prototype.flexGrow = flexGrowProperty.defaultValue;
+Style.prototype.flexShrink = flexShrinkProperty.defaultValue;
+Style.prototype.flexWrapBefore = flexWrapBeforeProperty.defaultValue;
+Style.prototype.alignSelf = alignSelfProperty.defaultValue;
+
+// No flex-basis in our implementation.
\ No newline at end of file
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts
index 8e2a48bcd..e878c720e 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts
@@ -1,19 +1,79 @@
-import {View} from "ui/core/view";
 import {
-    FlexDirection,
-    FlexWrap,
-    JustifyContent,
-    AlignItems,
-    AlignContent,
-    AlignSelf,
-    FlexboxLayoutBase
+    FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
+    FlexboxLayoutBase, View, layout,
+    orderProperty, Order,
+    flexGrowProperty, FlexGrow, 
+    flexShrinkProperty, FlexShrink, 
+    flexWrapBeforeProperty, FlexWrapBefore,
+    alignSelfProperty, AlignSelf,
+    flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty
 } from "./flexbox-layout-common";
-import {layout} from "utils/utils";
+
+export * from "./flexbox-layout-common";
+
+const orderDescriptor: TypedPropertyDescriptor<Order> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => orderProperty.defaultValue,
+    set: function (this: View, value: Order) {
+        setLayoutParamsProperty(this, (lp) => lp.order = value);
+    }
+}
+
+const flexGrowDescriptor: TypedPropertyDescriptor<FlexGrow> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => flexGrowProperty.defaultValue,
+    set: function (this: View, value: FlexGrow) {
+        setLayoutParamsProperty(this, (lp) => lp.flexGrow = value);
+    }
+}
+
+const flexShrinkDescriptor: TypedPropertyDescriptor<FlexShrink> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => flexShrinkProperty.defaultValue,
+    set: function (this: View, value: FlexShrink) {
+        setLayoutParamsProperty(this, (lp) => lp.flexShrink = value);
+    }
+}
+
+const flexWrapBeforeDescriptor: TypedPropertyDescriptor<FlexWrapBefore> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => false,
+    set: function (this: View, value: FlexWrapBefore) {
+        setLayoutParamsProperty(this, (lp) => lp.wrapBefore = value);
+    }
+}
+
+const alignSelfDescriptor: TypedPropertyDescriptor<AlignSelf> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => AlignSelf.AUTO,
+    set: function (this: View, value: AlignSelf) {
+        setLayoutParamsProperty(this, (lp) => lp.alignSelf = alignSelfMap[value]);
+    }
+}
+
+// register native properties on View type.
+Object.defineProperties(View, {
+    [orderProperty.native]: orderDescriptor,
+    [flexGrowProperty.native]: flexGrowDescriptor,
+    [flexShrinkProperty.native]: flexShrinkDescriptor,
+    [flexWrapBeforeProperty.native]: flexWrapBeforeDescriptor,
+    [alignSelfProperty.native]: alignSelfDescriptor
+});
 
 function setLayoutParamsProperty(view: View, setter: (lp: org.nativescript.widgets.FlexboxLayout.LayoutParams) => void) {
-    let nativeView: android.view.View = view._nativeView;
+    const nativeView: android.view.View = view._nativeView;
     if (nativeView) {
-        var lp = nativeView.getLayoutParams() || new org.nativescript.widgets.FlexboxLayout.LayoutParams();
+        let lp = nativeView.getLayoutParams() || new org.nativescript.widgets.FlexboxLayout.LayoutParams();
         if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
             setter(lp);
             nativeView.setLayoutParams(lp);
@@ -21,28 +81,6 @@ function setLayoutParamsProperty(view: View, setter: (lp: org.nativescript.widge
     }
 }
 
-export function _onNativeOrderPropertyChanged(view: View, newValue: number): void {
-    setLayoutParamsProperty(view, lp => lp.order = newValue);
-}
-
-export function _onNativeFlexGrowPropertyChanged(view: View, newValue: number): void {
-    setLayoutParamsProperty(view, lp => lp.flexGrow = newValue);
-}
-
-export function _onNativeFlexShrinkPropertyChanged(view: View, newValue: number): void {
-    setLayoutParamsProperty(view, lp => lp.flexShrink = newValue);
-}
-
-export function _onNativeAlignSelfPropertyChanged(view: View, newValue: AlignSelf): void {
-    setLayoutParamsProperty(view, lp => lp.alignSelf = alignSelfMap[newValue]);
-}
-
-export function _onNativeFlexWrapBeforePropertyChanged(view: View, newValue: boolean): void {
-    setLayoutParamsProperty(view, lp => lp.wrapBefore = newValue);
-}
-
-export * from "./flexbox-layout-common";
-
 import FlexboxLayoutWidget = org.nativescript.widgets.FlexboxLayout;
 
 const flexDirectionMap = {
@@ -106,24 +144,38 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         this._layout = new org.nativescript.widgets.FlexboxLayout(this._context);
     }
 
-    _setNativeFlexDirection(flexDirection: FlexDirection) {
-        let value = flexDirectionMap[flexDirection];
-        this.android.setFlexDirection(value);
+    get [flexDirectionProperty.native](): FlexDirection {
+        return flexDirectionProperty.defaultValue;
+    }
+    set [flexDirectionProperty.native](flexDirection: FlexDirection) {
+        this.android.setFlexDirection(flexDirectionMap[flexDirection]);
     }
 
-    _setNativeFlexWrap(flexWrap: FlexWrap) {
+    get [flexWrapProperty.native](): FlexWrap {
+        return flexWrapProperty.defaultValue;
+    }
+    set [flexWrapProperty.native](flexWrap: FlexWrap) {
         this.android.setFlexWrap(flexWrapMap[flexWrap]);
     }
 
-    _setNativeJustifyContent(justifyContent: JustifyContent) {
+    get [justifyContentProperty.native](): JustifyContent {
+        return justifyContentProperty.defaultValue;
+    }
+    set [justifyContentProperty.native](justifyContent: JustifyContent) {
         this.android.setJustifyContent(justifyContentMap[justifyContent]);
     }
 
-    _setNativeAlignItems(alignItems: AlignItems) {
+    get [alignItemsProperty.native](): AlignItems{
+        return alignItemsProperty.defaultValue;
+    }
+    set [alignItemsProperty.native](alignItems: AlignItems) {
         this.android.setAlignItems(alignItemsMap[alignItems]);
     }
 
-    _setNativeAlignContent(alignContent: AlignContent) {
+    get [alignContentProperty.native](): AlignContent {
+        return alignContentProperty.defaultValue;
+    }
+    set [alignContentProperty.native](alignContent: AlignContent) {
         this.android.setAlignContent(alignContentMap[alignContent]);
     }
 }
@@ -134,6 +186,8 @@ export function _setAndroidLayoutParams(lp: org.nativescript.widgets.FlexboxLayo
     lp.flexShrink = FlexboxLayout.getFlexShrink(view);
     lp.alignSelf = alignSelfMap[FlexboxLayout.getAlignSelf(view)];
     lp.wrapBefore = FlexboxLayout.getFlexWrapBefore(view);
-    lp.minWidth = layout.toDevicePixels(view.minWidth);
-    lp.minHeight = layout.toDevicePixels(view.minHeight);
-}
+    const style = view.style;
+
+    lp.minWidth = layout.toDevicePixels(style.effectiveMinWidth);
+    lp.minHeight = layout.toDevicePixels(style.effectiveMinHeight);
+}
\ No newline at end of file
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts
index 934396c11..a89eec1fb 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts
@@ -1,8 +1,26 @@
+declare module "ui/styling/style" {
+    import {
+        FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
+        Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf
+    } from "ui/layouts/flexbox-layout"
+    
+    interface Style {
+        flexDirection: FlexDirection;
+        flexWrap: FlexWrap;
+        justifyContent: JustifyContent;
+        alignItems: AlignItems;
+        alignContent: AlignContent;
+        order: Order;
+        flexGrow: FlexGrow;
+        flexShrink: FlexShrink;
+        flexWrapBefore: FlexWrapBefore;
+        alignSelf: AlignSelf;
+    }
+}
+
 declare module "ui/layouts/flexbox-layout" {
 
-    import {View} from "ui/core/view";
-    import {LayoutBase} from "ui/layouts/layout-base";
-    import {PropertyMetadata} from "ui/core/proxy";
+    import { LayoutBase, View, Style, CssProperty } from "ui/layouts/layout-base";
 
     export type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
     export namespace FlexDirection {
@@ -106,11 +124,6 @@ declare module "ui/layouts/flexbox-layout" {
     }
 
     export class FlexboxLayout extends LayoutBase {
-        public static flexDirectionProperty: PropertyMetadata;
-        public static flexWrapProperty: PropertyMetadata;
-        public static justifyContentProperty: PropertyMetadata;
-        public static alignItemsProperty: PropertyMetadata;
-
         public flexDirection: FlexDirection;
         public flexWrap: FlexWrap;
         public justifyContent: JustifyContent;
@@ -132,4 +145,15 @@ declare module "ui/layouts/flexbox-layout" {
         public static setFlexWrapBefore(view: View, wrap: boolean);
         public static getFlexWrapBefore(view: View): boolean;
     }
+
+    export const flexDirectionProperty: CssProperty<Style, FlexDirection>;
+    export const flexWrapProperty: CssProperty<Style, FlexWrap>;
+    export const justifyContentProperty: CssProperty<Style, JustifyContent>;
+    export const alignItemsProperty: CssProperty<Style, AlignItems>;
+
+    export const orderProperty: CssProperty<Style, Order>;
+    export const flexGrowProperty: CssProperty<Style, FlexGrow>;
+    export const flexShrinkProperty: CssProperty<Style, FlexShrink>;
+    export const flexWrapBeforeProperty: CssProperty<Style, FlexWrapBefore>;
+    export const alignSelfProperty: CssProperty<Style, AlignSelf>;
 }
\ No newline at end of file
diff --git a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
index ab15a6d0d..660727468 100644
--- a/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
+++ b/tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts
@@ -1,28 +1,23 @@
 import {
-    FlexDirection,
-    FlexWrap,
-    JustifyContent,
-    AlignItems,
-    AlignContent,
-    AlignSelf,
-    FlexboxLayoutBase,
-    FlexBasisPercent
+    FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
+    FlexboxLayoutBase, View, layout,
+    orderProperty, Order as OrderBase,
+    flexGrowProperty, FlexGrow,
+    flexShrinkProperty, FlexShrink,
+    flexWrapBeforeProperty, FlexWrapBefore,
+    alignSelfProperty, AlignSelf,
+    FlexBasisPercent,
+    flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty
 } from "./flexbox-layout-common";
 
 export * from "./flexbox-layout-common";
 
-import {CommonLayoutParams, nativeLayoutParamsProperty} from "ui/styling/style";
-import {LayoutBase} from "ui/layouts/layout-base";
-import {View} from "ui/core/view";
-import * as utils from "utils/utils";
-import * as enums from "ui/enums";
+import EXACTLY = layout.EXACTLY;
+import AT_MOST = layout.AT_MOST;
+import UNSPECIFIED = layout.UNSPECIFIED;
 
-import EXACTLY = utils.layout.EXACTLY;
-import AT_MOST = utils.layout.AT_MOST;
-import UNSPECIFIED = utils.layout.UNSPECIFIED;
-
-import MEASURED_SIZE_MASK = utils.layout.MEASURED_SIZE_MASK;
-import MEASURED_STATE_TOO_SMALL = utils.layout.MEASURED_STATE_TOO_SMALL;
+import MEASURED_SIZE_MASK = layout.MEASURED_SIZE_MASK;
+import MEASURED_STATE_TOO_SMALL = layout.MEASURED_STATE_TOO_SMALL;
 
 function childHandler(view) {
     if (!(view instanceof View)) {
@@ -34,11 +29,64 @@ function childHandler(view) {
     }
 }
 
-export const _onNativeOrderPropertyChanged = childHandler;
-export const _onNativeFlexGrowPropertyChanged = childHandler;
-export const _onNativeFlexShrinkPropertyChanged = childHandler;
-export const _onNativeAlignSelfPropertyChanged = childHandler;
-export const _onNativeFlexWrapBeforePropertyChanged = childHandler;
+const orderDescriptor: TypedPropertyDescriptor<OrderBase> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => orderProperty.defaultValue,
+    set: function (this: View, value: OrderBase) {
+        childHandler(this);
+    }
+}
+
+const flexGrowDescriptor: TypedPropertyDescriptor<FlexGrow> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => flexGrowProperty.defaultValue,
+    set: function (this: View, value: FlexGrow) {
+        childHandler(this);
+    }
+}
+
+const flexShrinkDescriptor: TypedPropertyDescriptor<FlexShrink> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => flexShrinkProperty.defaultValue,
+    set: function (this: View, value: FlexShrink) {
+        childHandler(this);
+    }
+}
+
+const flexWrapBeforeDescriptor: TypedPropertyDescriptor<FlexWrapBefore> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => false,
+    set: function (this: View, value: FlexWrapBefore) {
+        childHandler(this);
+    }
+}
+
+const alignSelfDescriptor: TypedPropertyDescriptor<AlignSelf> = {
+    enumerable: true,
+    configurable: true,
+    writable: true,
+    get: () => AlignSelf.AUTO,
+    set: function (this: View, value: AlignSelf) {
+        childHandler(this);
+    }
+}
+
+// register native properties on View type.
+Object.defineProperties(View, {
+    [orderProperty.native]: orderDescriptor,
+    [flexGrowProperty.native]: flexGrowDescriptor,
+    [flexShrinkProperty.native]: flexShrinkDescriptor,
+    [flexWrapBeforeProperty.native]: flexWrapBeforeDescriptor,
+    [alignSelfProperty.native]: alignSelfDescriptor
+});
 
 const MATCH_PARENT = -1;
 const WRAP_CONTENT = -2;
@@ -46,11 +94,11 @@ const WRAP_CONTENT = -2;
 const View_sUseZeroUnspecifiedMeasureSpec = true; // NOTE: android version < M
 
 // Long ints may not be safe in JavaScript
-const MAX_SIZE = 0x00FFFFFF  & MEASURED_SIZE_MASK;
+const MAX_SIZE = 0x00FFFFFF & MEASURED_SIZE_MASK;
 
-import makeMeasureSpec = utils.layout.makeMeasureSpec;
-import getMeasureSpecMode = utils.layout.getMeasureSpecMode;
-import getMeasureSpecSize = utils.layout.getMeasureSpecSize;
+import makeMeasureSpec = layout.makeMeasureSpec;
+import getMeasureSpecMode = layout.getMeasureSpecMode;
+import getMeasureSpecSize = layout.getMeasureSpecSize;
 
 class FlexLine {
 
@@ -103,25 +151,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     private _flexLines: FlexLine[] = [];
     private _childrenFrozen: boolean[];
 
-    _setNativeFlexDirection(flexDirection: FlexDirection) {
-        // lint happy no-op
-    }
-    _setNativeFlexWrap(flexWrap: FlexWrap) {
-        // lint happy no-op
-    }
-    _setNativeJustifyContent(justifyContent: JustifyContent) {
-        // lint happy no-op
-    }
-    _setNativeAlignItems(alignItems: AlignItems) {
-        // lint happy no-op
-    }
-    _setNativeAlignContent(alignContent: AlignContent) {
-        // lint happy no-op
-    }
-
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        LayoutBase.adjustChildrenLayoutParams(this, widthMeasureSpec, heightMeasureSpec);
-
         // Omit: super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
         if (this._isOrderChangedFromLastMeasurement) {
@@ -131,7 +161,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             this._childrenFrozen = new Array(this.getChildrenCount());
         }
 
-        switch(this.flexDirection) {
+        switch (this.flexDirection) {
             case FlexDirection.ROW:
             case FlexDirection.ROW_REVERSE:
                 this._measureHorizontal(widthMeasureSpec, heightMeasureSpec);
@@ -213,8 +243,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     private _measureHorizontal(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        let widthMode = getMeasureSpecMode(widthMeasureSpec);
-        let widthSize = getMeasureSpecSize(widthMeasureSpec);
+        const widthMode = getMeasureSpecMode(widthMeasureSpec);
+        const widthSize = getMeasureSpecSize(widthMeasureSpec);
         let childState = 0;
 
         this._flexLines.length = 0;
@@ -233,29 +263,29 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 if (child === null) {
                     this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
                     continue;
-                } else if (FlexboxLayout.isGone(child)) {
+                } else if (child.isCollapsed) {
                     flexLine._itemCount++;
                     this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
                     continue;
                 }
 
-                let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
+                let lp = child.style;
                 if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
                     flexLine._indicesAlignSelfStretch.push(i);
                 }
 
-                let childWidth = lp.width;
+                let childWidth = lp.effectiveWidth;
                 if (FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/ !== FlexBasisPercent.DEFAULT && widthMode === EXACTLY) {
                     childWidth = Math.round(widthSize * FlexBasisPercent.DEFAULT /*lp.flexBasisPercent*/);
                 }
 
                 let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec,
-                    this.paddingLeft + this.paddingRight + lp.leftMargin
-                        + lp.rightMargin, childWidth < 0 ? WRAP_CONTENT : childWidth);
+                    lp.effectivePaddingLeft + lp.effectivePaddingRight + lp.effectiveMarginLeft
+                    + lp.effectiveMarginRight, childWidth < 0 ? WRAP_CONTENT : childWidth);
 
                 let childHeightMeasureSpec = FlexboxLayout.getChildMeasureSpec(heightMeasureSpec,
-                    this.paddingTop + this.paddingBottom + lp.topMargin
-                        + lp.bottomMargin, lp.height < 0 ? WRAP_CONTENT : lp.height);
+                    lp.effectivePaddingTop + lp.effectivePaddingBottom + lp.effectiveMarginTop
+                    + lp.effectiveMarginBottom, lp.effectiveHeight < 0 ? WRAP_CONTENT : lp.effectiveHeight);
 
                 child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 
@@ -263,11 +293,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 
                 childState = View.combineMeasuredStates(childState, child.getMeasuredState());
                 largestHeightInRow = Math.max(largestHeightInRow,
-                    child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);
+                    child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom);
 
                 if (this._isWrapRequired(child, widthMode, widthSize, flexLine._mainSize,
-                        child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin,
-                        i, indexInFlexLine)) {
+                    child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight,
+                    i, indexInFlexLine)) {
                     if (flexLine.itemCount > 0) {
                         this._addFlexLine(flexLine);
                     }
@@ -275,13 +305,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     flexLine = new FlexLine();
                     flexLine._itemCount = 1;
                     flexLine._mainSize = paddingStart + paddingEnd;
-                    largestHeightInRow = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
+                    largestHeightInRow = child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
                     indexInFlexLine = 0;
                 } else {
                     flexLine._itemCount++;
                     indexInFlexLine++;
                 }
-                flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
+                flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
                 flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
                 flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
 
@@ -290,9 +320,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 // Omit divider
 
                 if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
-                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, FlexboxLayout.getBaseline(child) + lp.topMargin)
+                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, FlexboxLayout.getBaseline(child) + lp.effectiveMarginTop)
                 } else {
-                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, child.getMeasuredHeight() - FlexboxLayout.getBaseline(child) + lp.bottomMargin);
+                    flexLine._maxBaseline = Math.max(flexLine._maxBaseline, child.getMeasuredHeight() - FlexboxLayout.getBaseline(child) + lp.effectiveMarginBottom);
                 }
                 this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
             }
@@ -306,15 +336,15 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 let largestHeightInLine = Number.MIN_VALUE;
                 for (let i = viewIndex; i < viewIndex + flexLine._itemCount; i++) {
                     let child = this._getReorderedChildAt(i);
-                    let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
+                    const lp = child.style;
                     if (this.flexWrap !== FlexWrap.WRAP_REVERSE) {
                         let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(child);
-                        marginTop = Math.max(marginTop, lp.topMargin);
-                        largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + marginTop + lp.bottomMargin);
+                        marginTop = Math.max(marginTop, lp.effectiveMarginTop);
+                        largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + marginTop + lp.effectiveMarginBottom);
                     } else {
                         let marginBottom = flexLine._maxBaseline - child.getMeasuredHeight() + FlexboxLayout.getBaseline(child);
-                        marginBottom = Math.max(marginBottom, lp.bottomMargin);
-                        largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + lp.topMargin + marginBottom);
+                        marginBottom = Math.max(marginBottom, lp.effectiveMarginBottom);
+                        largestHeightInLine = Math.max(largestHeightInLine, child.getActualSize().height + lp.effectiveMarginTop + marginBottom);
                     }
                 }
                 flexLine._crossSize = largestHeightInLine;
@@ -322,7 +352,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             });
         }
 
-        this._determineCrossSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec, this.paddingTop + this.paddingBottom);
+        const style = this.style;
+        this._determineCrossSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec, style.effectivePaddingTop + style.effectivePaddingBottom);
         this._stretchViews(this.flexDirection, this.alignItems);
         this._setMeasuredDimensionForFlex(this.flexDirection, widthMeasureSpec, heightMeasureSpec, childState);
     }
@@ -335,51 +366,52 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         this._flexLines.length = 0;
 
         let childCount = this.getChildrenCount();
-        let paddingTop = this.paddingTop;
-        let paddingBottom = this.paddingBottom;
+        const style = this.style;
+        let paddingTop = style.effectivePaddingTop;
+        let paddingBottom = style.effectivePaddingBottom;
         let largestWidthInColumn = Number.MIN_VALUE;
         let flexLine = new FlexLine();
         flexLine._mainSize = paddingTop + paddingBottom;
 
         let indexInFlexLine = 0;
-        for(let i = 0; i < childCount; i++) {
+        for (let i = 0; i < childCount; i++) {
             let child = this._getReorderedChildAt(i);
             if (child === null) {
                 this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
                 continue;
-            } else if (FlexboxLayout.isGone(child)) {
+            } else if (child.isCollapsed) {
                 flexLine._itemCount++;
                 this._addFlexLineIfLastFlexItem(i, childCount, flexLine);
                 continue;
             }
 
-            let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
+            const lp = child.style;
             if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
                 flexLine._indicesAlignSelfStretch.push(i);
             }
 
-            let childHeight = lp.height;
+            let childHeight = lp.effectiveHeight;
             // TODO: This should always be false
             if (FlexBasisPercent.DEFAULT /* lp.flexBasisPercent */ !== FlexBasisPercent.DEFAULT && heightMode === EXACTLY) {
                 childHeight = Math.round(heightSize * FlexBasisPercent.DEFAULT /* lp.flexBasisPercent */);
             }
 
             let childWidthMeasureSpec = FlexboxLayout.getChildMeasureSpec(widthMeasureSpec,
-                this.paddingLeft + this.paddingRight + lp.leftMargin
-                    + lp.rightMargin, lp.width < 0 ? WRAP_CONTENT : lp.width);
+                style.effectivePaddingLeft + style.effectivePaddingRight + lp.effectiveMarginLeft
+                + lp.effectiveMarginRight, lp.effectiveWidth < 0 ? WRAP_CONTENT : lp.effectiveWidth);
             let childHeightMeasureSpec = FlexboxLayout.getChildMeasureSpec(heightMeasureSpec,
-                this.paddingTop + this.paddingBottom + lp.topMargin
-                    + lp.bottomMargin, childHeight < 0 ? WRAP_CONTENT : childHeight);
+                style.effectivePaddingTop + style.effectivePaddingBottom + lp.effectiveMarginTop
+                + lp.effectiveMarginBottom, childHeight < 0 ? WRAP_CONTENT : childHeight);
             child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 
             this._checkSizeConstraints(child);
 
             childState = View.combineMeasuredStates(childState, child.getMeasuredState());
             largestWidthInColumn = Math.max(largestWidthInColumn,
-                child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);
-            
+                child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight);
+
             if (this._isWrapRequired(child, heightMode, heightSize, flexLine.mainSize,
-                child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin,
+                child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom,
                 i, indexInFlexLine)) {
 
                 if (flexLine._itemCount > 0) {
@@ -389,14 +421,14 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 flexLine = new FlexLine();
                 flexLine._itemCount = 1;
                 flexLine._mainSize = paddingTop + paddingBottom;
-                largestWidthInColumn = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
+                largestWidthInColumn = child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
                 indexInFlexLine = 0;
             } else {
                 flexLine._itemCount++;
                 indexInFlexLine++;
             }
 
-            flexLine._mainSize += child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
+            flexLine._mainSize += child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
             flexLine._totalFlexGrow += FlexboxLayout.getFlexGrow(child);
             flexLine._totalFlexShrink += FlexboxLayout.getFlexShrink(child);
 
@@ -407,7 +439,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         }
 
         this._determineMainSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec);
-        this._determineCrossSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec, this.paddingLeft + this.paddingRight);
+        this._determineCrossSize(this.flexDirection, widthMeasureSpec, heightMeasureSpec, style.effectivePaddingLeft + style.effectivePaddingRight);
         this._stretchViews(this.flexDirection, this.alignItems);
         this._setMeasuredDimensionForFlex(this.flexDirection, widthMeasureSpec, heightMeasureSpec, childState);
     }
@@ -417,7 +449,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let childWidth = view.getMeasuredWidth();
         let childHeight = view.getMeasuredHeight();
 
-        let minWidth = view.minWidth;
+        const style = view.style;
+        let minWidth = style.effectiveMinWidth;
         if (view.getMeasuredWidth() < minWidth) {
             needsMeasure = true;
             childWidth = minWidth;
@@ -426,7 +459,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             childWidth = MAX_SIZE /*lp.maxWidth*/;
         }
 
-        let minHeight = view.minHeight;
+        let minHeight = style.effectiveMinHeight;
         if (childHeight < minHeight) {
             needsMeasure = true;
             childHeight = minHeight;
@@ -453,8 +486,9 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     private _determineMainSize(flexDirection: FlexDirection, widthMeasureSpec: number, heightMeasureSpec: number) {
         let mainSize: number;
         let paddingAlongMainAxis: number;
+        const style = this.style;
 
-        switch(flexDirection) {
+        switch (flexDirection) {
             case FlexDirection.ROW:
             case FlexDirection.ROW_REVERSE:
                 let widthMode = getMeasureSpecMode(widthMeasureSpec);
@@ -464,7 +498,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 } else {
                     mainSize = this._getLargestMainSize();
                 }
-                paddingAlongMainAxis = this.paddingLeft + this.paddingRight;
+                paddingAlongMainAxis = style.effectivePaddingLeft + style.effectivePaddingRight;
                 break;
             case FlexDirection.COLUMN:
             case FlexDirection.COLUMN_REVERSE:
@@ -475,7 +509,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 } else {
                     mainSize = this._getLargestMainSize();
                 }
-                paddingAlongMainAxis = this.paddingTop + this.paddingBottom;
+                paddingAlongMainAxis = style.effectivePaddingTop + style.effectivePaddingBottom;
                 break;
             default:
                 throw new Error("Invalid flex direction: " + flexDirection);
@@ -507,11 +541,11 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             let child = this._getReorderedChildAt(childIndex);
             if (child === null) {
                 continue;
-            } else if (FlexboxLayout.isGone(child)) {
+            } else if (child.isCollapsed) {
                 childIndex++;
                 continue;
             }
-            let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
+            const lp = child.style;
             if (this._isMainAxisDirectionHorizontal(flexDirection)) {
                 if (!this._childrenFrozen[childIndex]) {
                     let flexGrow = FlexboxLayout.getFlexGrow(child);
@@ -528,7 +562,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     }
                     child.measure(makeMeasureSpec(roundedCalculatedWidth, EXACTLY), makeMeasureSpec(child.getMeasuredHeight(), EXACTLY));
                 }
-                flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
+                flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
             } else {
                 if (!this._childrenFrozen[childIndex]) {
                     let flexGrow = FlexboxLayout.getFlexGrow(child);
@@ -545,7 +579,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     }
                     child.measure(makeMeasureSpec(child.getMeasuredWidth(), EXACTLY), makeMeasureSpec(roundedCalculatedHeight, EXACTLY));
                 }
-                flexLine._mainSize += child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
+                flexLine._mainSize += child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
             }
             childIndex++;
         }
@@ -571,18 +605,18 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             let child = this._getReorderedChildAt(childIndex);
             if (child === null) {
                 continue;
-            } else if (FlexboxLayout.isGone(child)) {
+            } else if (child.isCollapsed) {
                 childIndex++;
                 continue;
             }
-            let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
+            const lp = child.style;
             if (this._isMainAxisDirectionHorizontal(flexDirection)) {
                 // The direction of main axis is horizontal
                 if (!this._childrenFrozen[childIndex]) {
                     let flexShrink = FlexboxLayout.getFlexShrink(child);
                     let rawCalculatedWidth = child.getMeasuredWidth() - unitShrink * flexShrink + accumulatedRoundError;
                     let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
-                    let minWidth = child.minWidth;
+                    let minWidth = child.style.effectiveMinWidth;
                     if (roundedCalculatedWidth < minWidth) {
                         needsReshrink = true;
                         roundedCalculatedWidth = minWidth;
@@ -593,15 +627,16 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     }
                     child.measure(makeMeasureSpec(roundedCalculatedWidth, EXACTLY), makeMeasureSpec(child.getMeasuredHeight(), EXACTLY));
                 }
-                flexLine._mainSize += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
+                flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
             } else {
                 if (!this._childrenFrozen[childIndex]) {
                     let flexShrink = FlexboxLayout.getFlexShrink(child);
                     let rawCalculatedHeight = child.getMeasuredHeight() - unitShrink * flexShrink + accumulatedRoundError;
                     let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
-                    if (roundedCalculatedHeight < child.minHeight) {
+                    const minHeight = child.style.effectiveMinHeight;
+                    if (roundedCalculatedHeight < minHeight) {
                         needsReshrink = true;
-                        roundedCalculatedHeight = child.minHeight;
+                        roundedCalculatedHeight = minHeight;
                         this._childrenFrozen[childIndex] = true;
                         flexLine._totalFlexShrink -= flexShrink;
                     } else {
@@ -609,7 +644,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     }
                     child.measure(makeMeasureSpec(child.getMeasuredWidth(), EXACTLY), makeMeasureSpec(roundedCalculatedHeight, EXACTLY));
                 }
-                flexLine._mainSize += child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
+                flexLine._mainSize += child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
             }
             childIndex++;
         }
@@ -666,7 +701,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                                 flexLine._crossSize = newCrossSize;
                             }
                         })();
-                    break;
+                        break;
                     case AlignContent.SPACE_AROUND:
                         (() => {
                             let spaceTopAndBottom = size - totalCrossSize;
@@ -751,7 +786,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         if (alignItems === AlignItems.STRETCH) {
             let viewIndex = 0;
             this._flexLines.forEach(flexLine => {
-                for (let i = 0; i < flexLine.itemCount; i++, viewIndex++) {
+                for (let i = 0; i < flexLine.itemCount; i++ , viewIndex++) {
                     let view = this._getReorderedChildAt(viewIndex);
                     let alignSelf = FlexboxLayout.getAlignSelf(view);
                     if (alignSelf !== AlignSelf.AUTO && alignSelf !== AlignSelf.STRETCH) {
@@ -793,20 +828,21 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     private _stretchViewVertically(view: View, crossSize: number) {
-        let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
-        let newHeight = crossSize - lp.topMargin - lp.bottomMargin;
+        let lp = view.style;
+        let newHeight = crossSize - lp.effectiveMarginTop - lp.effectiveMarginBottom;
         newHeight = Math.max(newHeight, 0);
         view.measure(makeMeasureSpec(view.getMeasuredWidth(), EXACTLY), makeMeasureSpec(newHeight, EXACTLY));
     }
 
     private _stretchViewHorizontally(view: View, crossSize: number) {
-        let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
-        let newWidth = crossSize - lp.leftMargin - lp.rightMargin;
+        let lp = view.style;
+        let newWidth = crossSize - lp.effectiveMarginLeft - lp.effectiveMarginRight;
         newWidth = Math.max(newWidth, 0);
         view.measure(makeMeasureSpec(newWidth, EXACTLY), makeMeasureSpec(view.getMeasuredHeight(), EXACTLY));
     }
 
     private _setMeasuredDimensionForFlex(flexDirection: FlexDirection, widthMeasureSpec: number, heightMeasureSpec: number, childState: number) {
+        const style = this.style;
         let widthMode = getMeasureSpecMode(widthMeasureSpec);
         let widthSize = getMeasureSpecSize(widthMeasureSpec);
         let heightMode = getMeasureSpecMode(heightMeasureSpec);
@@ -816,13 +852,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         switch (flexDirection) {
             case FlexDirection.ROW:
             case FlexDirection.ROW_REVERSE:
-                calculatedMaxHeight = this._getSumOfCrossSize() + this.paddingTop + this.paddingBottom;
+                calculatedMaxHeight = this._getSumOfCrossSize() + style.effectivePaddingTop + style.effectivePaddingBottom;
                 calculatedMaxWidth = this._getLargestMainSize();
                 break;
             case FlexDirection.COLUMN:
             case FlexDirection.COLUMN_REVERSE:
                 calculatedMaxHeight = this._getLargestMainSize();
-                calculatedMaxWidth = this._getSumOfCrossSize() + this.paddingLeft + this.paddingRight;
+                calculatedMaxWidth = this._getSumOfCrossSize() + style.effectivePaddingLeft + style.effectivePaddingRight;
                 break;
             default:
                 throw new Error("Invalid flex direction: " + flexDirection);
@@ -856,13 +892,13 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         switch (heightMode) {
             case EXACTLY:
                 if (heightSize < calculatedMaxHeight) {
-                    childState = View.combineMeasuredStates(childState, MEASURED_STATE_TOO_SMALL >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT);
+                    childState = View.combineMeasuredStates(childState, MEASURED_STATE_TOO_SMALL >> layout.MEASURED_HEIGHT_STATE_SHIFT);
                 }
                 heightSizeAndState = View.resolveSizeAndState(heightSize, heightSize, heightMode, childState);
                 break;
             case AT_MOST: {
                 if (heightSize < calculatedMaxHeight) {
-                    childState = View.combineMeasuredStates(childState, MEASURED_STATE_TOO_SMALL >> utils.layout.MEASURED_HEIGHT_STATE_SHIFT);
+                    childState = View.combineMeasuredStates(childState, MEASURED_STATE_TOO_SMALL >> layout.MEASURED_HEIGHT_STATE_SHIFT);
                 } else {
                     heightSize = calculatedMaxHeight;
                 }
@@ -937,13 +973,12 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             default:
                 throw new Error("Invalid flex direction is set: " + this.flexDirection);
         }
-
-        LayoutBase.restoreOriginalParams(this);
     }
 
     private _layoutHorizontal(isRtl: boolean, left: number, top: number, right: number, bottom: number) {
-        let paddingLeft = this.paddingLeft;
-        let paddingRight = this.paddingRight;
+        const style = this.style;
+        let paddingLeft = style.effectivePaddingLeft;
+        let paddingRight = style.effectivePaddingRight;
 
         let childLeft;
         let currentViewIndex = 0;
@@ -951,8 +986,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let height = bottom - top;
         let width = right - left;
 
-        let childBottom = height - this.paddingBottom;
-        let childTop = this.paddingTop;
+        let childBottom = height - style.effectivePaddingBottom;
+        let childTop = style.effectivePaddingTop;
 
         let childRight;
         this._flexLines.forEach((flexLine, i) => {
@@ -995,49 +1030,49 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 let child = this._getReorderedChildAt(currentViewIndex);
                 if (child === null) {
                     continue;
-                } else if (FlexboxLayout.isGone(child)) {
+                } else if (child.isCollapsed) {
                     currentViewIndex++;
                     continue;
                 }
-                let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
-                childLeft += lp.leftMargin;
-                childRight -= lp.rightMargin;
+                const lp = child.style;
+                childLeft += lp.effectiveMarginLeft;
+                childRight -= lp.effectiveMarginRight;
 
                 // Omit divider
 
                 if (this.flexWrap === FlexWrap.WRAP_REVERSE) {
                     if (isRtl) {
                         this._layoutSingleChildHorizontal(child, flexLine, this.flexWrap, this.alignItems,
-                                Math.round(childRight) - child.getMeasuredWidth(),
-                                childBottom - child.getMeasuredHeight(), Math.round(childRight),
-                                childBottom);
+                            Math.round(childRight) - child.getMeasuredWidth(),
+                            childBottom - child.getMeasuredHeight(), Math.round(childRight),
+                            childBottom);
                     } else {
                         this._layoutSingleChildHorizontal(child, flexLine, this.flexWrap, this.alignItems,
-                                Math.round(childLeft), childBottom - child.getMeasuredHeight(),
-                                Math.round(childLeft) + child.getMeasuredWidth(),
-                                childBottom);
+                            Math.round(childLeft), childBottom - child.getMeasuredHeight(),
+                            Math.round(childLeft) + child.getMeasuredWidth(),
+                            childBottom);
                     }
                 } else {
                     if (isRtl) {
                         this._layoutSingleChildHorizontal(child, flexLine, this.flexWrap, this.alignItems,
-                                Math.round(childRight) - child.getMeasuredWidth(), childTop,
-                                Math.round(childRight), childTop + child.getMeasuredHeight());
+                            Math.round(childRight) - child.getMeasuredWidth(), childTop,
+                            Math.round(childRight), childTop + child.getMeasuredHeight());
                     } else {
                         this._layoutSingleChildHorizontal(child, flexLine, this.flexWrap, this.alignItems,
-                                Math.round(childLeft), childTop,
-                                Math.round(childLeft) + child.getMeasuredWidth(),
-                                childTop + child.getMeasuredHeight());
+                            Math.round(childLeft), childTop,
+                            Math.round(childLeft) + child.getMeasuredWidth(),
+                            childTop + child.getMeasuredHeight());
                     }
                 }
-                childLeft += child.getMeasuredWidth() + spaceBetweenItem + lp.rightMargin;
-                childRight -= child.getMeasuredWidth() + spaceBetweenItem + lp.leftMargin;
+                childLeft += child.getMeasuredWidth() + spaceBetweenItem + lp.effectiveMarginRight;
+                childRight -= child.getMeasuredWidth() + spaceBetweenItem + lp.effectiveMarginLeft;
                 currentViewIndex++;
 
                 let bounds = child._getCurrentLayoutBounds();
-                flexLine._left = Math.min(flexLine._left, bounds.left - lp.leftMargin);
-                flexLine._top = Math.min(flexLine._top, bounds.top - lp.topMargin);
-                flexLine._right = Math.max(flexLine._right, bounds.right + lp.rightMargin);
-                flexLine._bottom = Math.max(flexLine._bottom, bounds.bottom + lp.bottomMargin);
+                flexLine._left = Math.min(flexLine._left, bounds.left - lp.effectiveMarginLeft);
+                flexLine._top = Math.min(flexLine._top, bounds.top - lp.effectiveMarginTop);
+                flexLine._right = Math.max(flexLine._right, bounds.right + lp.effectiveMarginRight);
+                flexLine._bottom = Math.max(flexLine._bottom, bounds.bottom + lp.effectiveMarginBottom);
             }
 
             childTop += flexLine._crossSize;
@@ -1046,7 +1081,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     private _layoutSingleChildHorizontal(view: View, flexLine: FlexLine, flexWrap: FlexWrap, alignItems: AlignItems, left: number, top: number, right: number, bottom: number): void {
-        let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
+        let lp = view.style;
 
         let alignSelf = FlexboxLayout.getAlignSelf(view);
         if (alignSelf !== AlignSelf.AUTO) {
@@ -1058,53 +1093,54 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             case AlignItems.FLEX_START:
             case AlignItems.STRETCH:
                 if (flexWrap !== FlexWrap.WRAP_REVERSE) {
-                    view.layout(left, top + lp.topMargin, right, bottom + lp.topMargin);
+                    view.layout(left, top + lp.effectiveMarginTop, right, bottom + lp.effectiveMarginTop);
                 } else {
-                    view.layout(left, top - lp.bottomMargin, right, bottom - lp.bottomMargin);
+                    view.layout(left, top - lp.effectiveMarginBottom, right, bottom - lp.effectiveMarginBottom);
                 }
                 break;
             case AlignItems.BASELINE:
                 if (flexWrap !== FlexWrap.WRAP_REVERSE) {
                     let marginTop = flexLine._maxBaseline - FlexboxLayout.getBaseline(view);
-                    marginTop = Math.max(marginTop, lp.topMargin);
+                    marginTop = Math.max(marginTop, lp.effectiveMarginTop);
                     view.layout(left, top + marginTop, right, bottom + marginTop);
                 } else {
                     let marginBottom = flexLine._maxBaseline - view.getMeasuredHeight() + FlexboxLayout.getBaseline(view);
-                    marginBottom = Math.max(marginBottom, lp.bottomMargin);
+                    marginBottom = Math.max(marginBottom, lp.effectiveMarginBottom);
                     view.layout(left, top - marginBottom, right, bottom - marginBottom);
                 }
                 break;
             case AlignItems.FLEX_END:
                 if (flexWrap !== FlexWrap.WRAP_REVERSE) {
                     view.layout(left,
-                            top + crossSize - view.getMeasuredHeight() - lp.bottomMargin,
-                            right, top + crossSize - lp.bottomMargin);
+                        top + crossSize - view.getMeasuredHeight() - lp.effectiveMarginBottom,
+                        right, top + crossSize - lp.effectiveMarginBottom);
                 } else {
-                    view.layout(left, top - crossSize + view.getMeasuredHeight() + lp.topMargin,
-                            right, bottom - crossSize + view.getMeasuredHeight() + lp.topMargin);
+                    view.layout(left, top - crossSize + view.getMeasuredHeight() + lp.effectiveMarginTop,
+                        right, bottom - crossSize + view.getMeasuredHeight() + lp.effectiveMarginTop);
                 }
                 break;
             case AlignItems.CENTER:
                 let topFromCrossAxis = (crossSize - view.getMeasuredHeight()) / 2;
                 if (flexWrap !== FlexWrap.WRAP_REVERSE) {
-                    view.layout(left, top + topFromCrossAxis + lp.topMargin - lp.bottomMargin,
-                            right, top + topFromCrossAxis + view.getMeasuredHeight() + lp.topMargin
-                                    - lp.bottomMargin);
+                    view.layout(left, top + topFromCrossAxis + lp.effectiveMarginTop - lp.effectiveMarginBottom,
+                        right, top + topFromCrossAxis + view.getMeasuredHeight() + lp.effectiveMarginTop
+                        - lp.effectiveMarginBottom);
                 } else {
-                    view.layout(left, top - topFromCrossAxis + lp.topMargin - lp.bottomMargin,
-                            right, top - topFromCrossAxis + view.getMeasuredHeight() + lp.topMargin
-                                    - lp.bottomMargin);
+                    view.layout(left, top - topFromCrossAxis + lp.effectiveMarginTop - lp.effectiveMarginBottom,
+                        right, top - topFromCrossAxis + view.getMeasuredHeight() + lp.effectiveMarginTop
+                        - lp.effectiveMarginBottom);
                 }
                 break;
         }
     }
 
     private _layoutVertical(isRtl: boolean, fromBottomToTop: boolean, left: number, top: number, right: number, bottom: number) {
-        let paddingTop = this.paddingTop;
-        let paddingBottom = this.paddingBottom;
+        const style = this.style;
+        let paddingTop = style.effectivePaddingTop;
+        let paddingBottom = style.effectivePaddingBottom;
 
-        let paddingRight = this.paddingRight;
-        let childLeft = this.paddingLeft;
+        let paddingRight = style.effectivePaddingRight;
+        let childLeft = style.effectivePaddingLeft;
         let currentViewIndex = 0;
 
         let width = right - left;
@@ -1155,48 +1191,48 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 let child = this._getReorderedChildAt(currentViewIndex);
                 if (child === null) {
                     continue;
-                } else if (FlexboxLayout.isGone(child)) {
+                } else if (child.isCollapsed) {
                     currentViewIndex++;
                     continue;
                 }
-                let lp = <CommonLayoutParams>child.style._getValue(nativeLayoutParamsProperty);
-                childTop += lp.topMargin;
-                childBottom -= lp.bottomMargin;
+                const lp = child.style;
+                childTop += lp.effectiveMarginTop;
+                childBottom -= lp.effectiveMarginBottom;
 
                 // Omit divider.
 
                 if (isRtl) {
                     if (fromBottomToTop) {
                         this._layoutSingleChildVertical(child, flexLine, true, this.alignItems,
-                                childRight - child.getMeasuredWidth(),
-                                Math.round(childBottom) - child.getMeasuredHeight(), childRight,
-                                Math.round(childBottom));
+                            childRight - child.getMeasuredWidth(),
+                            Math.round(childBottom) - child.getMeasuredHeight(), childRight,
+                            Math.round(childBottom));
                     } else {
                         this._layoutSingleChildVertical(child, flexLine, true, this.alignItems,
-                                childRight - child.getMeasuredWidth(), Math.round(childTop),
-                                childRight, Math.round(childTop) + child.getMeasuredHeight());
+                            childRight - child.getMeasuredWidth(), Math.round(childTop),
+                            childRight, Math.round(childTop) + child.getMeasuredHeight());
                     }
                 } else {
                     if (fromBottomToTop) {
                         this._layoutSingleChildVertical(child, flexLine, false, this.alignItems,
-                                childLeft, Math.round(childBottom) - child.getMeasuredHeight(),
-                                childLeft + child.getMeasuredWidth(), Math.round(childBottom));
+                            childLeft, Math.round(childBottom) - child.getMeasuredHeight(),
+                            childLeft + child.getMeasuredWidth(), Math.round(childBottom));
                     } else {
                         this._layoutSingleChildVertical(child, flexLine, false, this.alignItems,
-                                childLeft, Math.round(childTop),
-                                childLeft + child.getMeasuredWidth(),
-                                Math.round(childTop) + child.getMeasuredHeight());
+                            childLeft, Math.round(childTop),
+                            childLeft + child.getMeasuredWidth(),
+                            Math.round(childTop) + child.getMeasuredHeight());
                     }
                 }
-                childTop += child.getMeasuredHeight() + spaceBetweenItem + lp.bottomMargin;
-                childBottom -= child.getMeasuredHeight() + spaceBetweenItem + lp.topMargin;
+                childTop += child.getMeasuredHeight() + spaceBetweenItem + lp.effectiveMarginBottom;
+                childBottom -= child.getMeasuredHeight() + spaceBetweenItem + lp.effectiveMarginTop;
                 currentViewIndex++;
 
                 let bounds = child._getCurrentLayoutBounds();
-                flexLine._left = Math.min(flexLine._left, bounds.left - lp.leftMargin);
-                flexLine._top = Math.min(flexLine._top, bounds.top - lp.topMargin);
-                flexLine._right = Math.max(flexLine._right, bounds.right + lp.rightMargin);
-                flexLine._bottom = Math.max(flexLine._bottom, bounds.bottom + lp.bottomMargin);
+                flexLine._left = Math.min(flexLine._left, bounds.left - lp.effectiveMarginLeft);
+                flexLine._top = Math.min(flexLine._top, bounds.top - lp.effectiveMarginTop);
+                flexLine._right = Math.max(flexLine._right, bounds.right + lp.effectiveMarginRight);
+                flexLine._bottom = Math.max(flexLine._bottom, bounds.bottom + lp.effectiveMarginBottom);
             }
 
             childLeft += flexLine.crossSize;
@@ -1205,7 +1241,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     }
 
     private _layoutSingleChildVertical(view: View, flexLine: FlexLine, isRtl: boolean, alignItems: AlignItems, left: number, top: number, right: number, bottom: number) {
-        let lp = <CommonLayoutParams>view.style._getValue(nativeLayoutParamsProperty);
+        let lp = view.style;
         let alignSelf = FlexboxLayout.getAlignSelf(view);
         if (alignSelf !== AlignSelf.AUTO) {
             alignItems = alignSelf;
@@ -1216,34 +1252,34 @@ export class FlexboxLayout extends FlexboxLayoutBase {
             case AlignItems.STRETCH:
             case AlignItems.BASELINE:
                 if (!isRtl) {
-                    view.layout(left + lp.leftMargin, top, right + lp.leftMargin, bottom);
+                    view.layout(left + lp.effectiveMarginLeft, top, right + lp.effectiveMarginLeft, bottom);
                 } else {
-                    view.layout(left - lp.rightMargin, top, right - lp.rightMargin, bottom);
+                    view.layout(left - lp.effectiveMarginRight, top, right - lp.effectiveMarginRight, bottom);
                 }
                 break;
             case AlignItems.FLEX_END:
                 if (!isRtl) {
-                    view.layout(left + crossSize - view.getMeasuredWidth() - lp.rightMargin,
-                            top, right + crossSize - view.getMeasuredWidth() - lp.rightMargin,
-                            bottom);
+                    view.layout(left + crossSize - view.getMeasuredWidth() - lp.effectiveMarginRight,
+                        top, right + crossSize - view.getMeasuredWidth() - lp.effectiveMarginRight,
+                        bottom);
                 } else {
                     // If the flexWrap === FLEX_WRAP_WRAP_REVERSE, the direction of the
                     // flexEnd is flipped (from left to right).
-                    view.layout(left - crossSize + view.getMeasuredWidth() + lp.leftMargin, top,
-                            right - crossSize + view.getMeasuredWidth() + lp.leftMargin,
-                            bottom);
+                    view.layout(left - crossSize + view.getMeasuredWidth() + lp.effectiveMarginLeft, top,
+                        right - crossSize + view.getMeasuredWidth() + lp.effectiveMarginLeft,
+                        bottom);
                 }
                 break;
             case AlignItems.CENTER:
                 let leftFromCrossAxis = (crossSize - view.getMeasuredWidth()) / 2;
                 if (!isRtl) {
-                    view.layout(left + leftFromCrossAxis + lp.leftMargin - lp.rightMargin,
-                            top, right + leftFromCrossAxis + lp.leftMargin - lp.rightMargin,
-                            bottom);
+                    view.layout(left + leftFromCrossAxis + lp.effectiveMarginLeft - lp.effectiveMarginRight,
+                        top, right + leftFromCrossAxis + lp.effectiveMarginLeft - lp.effectiveMarginRight,
+                        bottom);
                 } else {
-                    view.layout(left - leftFromCrossAxis + lp.leftMargin - lp.rightMargin,
-                            top, right - leftFromCrossAxis + lp.leftMargin - lp.rightMargin,
-                            bottom);
+                    view.layout(left - leftFromCrossAxis + lp.effectiveMarginLeft - lp.effectiveMarginRight,
+                        top, right - leftFromCrossAxis + lp.effectiveMarginLeft - lp.effectiveMarginRight,
+                        bottom);
                 }
                 break;
         }
@@ -1255,8 +1291,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
 
     // NOTE Consider moving to View if frequently used
     private static getChildMeasureSpec(spec: number, padding: number, childDimension: number): number {
-        let specMode = utils.layout.getMeasureSpecMode(spec);
-        let specSize = utils.layout.getMeasureSpecSize(spec);
+        let specMode = layout.getMeasureSpecMode(spec);
+        let specSize = layout.getMeasureSpecSize(spec);
 
         let size = Math.max(0, specSize - padding);
 
@@ -1272,7 +1308,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 } else if (childDimension === MATCH_PARENT) {
                     resultSize = size;
                     resultMode = EXACTLY;
-                } else if (childDimension ===  WRAP_CONTENT) {
+                } else if (childDimension === WRAP_CONTENT) {
                     resultSize = size;
                     resultMode = AT_MOST;
                 }
@@ -1304,7 +1340,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 }
                 break;
         }
-        return utils.layout.makeMeasureSpec(resultSize, resultMode);
+        return layout.makeMeasureSpec(resultSize, resultMode);
     }
 }
 
@@ -1314,15 +1350,11 @@ export namespace FlexboxLayout {
         return 0;
     }
 
-    export function isGone(child: View): boolean {
-        return child.visibility !== enums.Visibility.visible;
-    }
-
     export function getPaddingStart(child: View): number {
-        return child.style.paddingLeft;
+        return child.style.effectivePaddingLeft;
     }
 
     export function getPaddingEnd(child: View): number {
-        return child.style.paddingRight;
+        return child.style.effectivePaddingRight;
     }
 }
diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts
index bc7d7a738..1b7bfd158 100644
--- a/tns-core-modules/ui/page/page-common.ts
+++ b/tns-core-modules/ui/page/page-common.ts
@@ -1,7 +1,7 @@
 import { Page as PageDefinition, NavigatedData, ShownModallyData } from "ui/page";
 import {
     ContentView, EventData, View, Template, KeyedTemplate, Length, backgroundColorProperty,
-    eachDescendant, Property, Color, isIOS, booleanConverter
+    eachDescendant, Property, Color, isIOS, booleanConverter, resetStyleProperties
 } from "ui/content-view";
 import { Frame, topmost as topmostFrame, resolvePageFromEntry } from "ui/frame";
 import { ActionBar } from "ui/action-bar";
@@ -282,7 +282,8 @@ export class PageBase extends ContentView implements PageDefinition {
 
     private _resetCssValues() {
         const resetCssValuesFunc = (view: View): boolean => {
-            view.style._resetCssValues();
+            view._cancelAllAnimations();
+            resetStyleProperties(view.style);
             return true;
         };
 
diff --git a/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts b/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
index 846f06fc3..29305dbcc 100644
--- a/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
+++ b/tns-core-modules/ui/proxy-view-container/proxy-view-container.ts
@@ -62,7 +62,7 @@ export class ProxyViewContainer extends LayoutBase implements ProxyViewContainer
         super._addViewToNativeVisualTree(child);
 
         const parent = this.parent;
-        if (parent) {
+        if (parent instanceof View) {
             let baseIndex = 0;
             let insideIndex = 0;
             if (parent instanceof LayoutBase) {
@@ -92,7 +92,7 @@ export class ProxyViewContainer extends LayoutBase implements ProxyViewContainer
         super._removeViewFromNativeVisualTree(child);
 
         const parent = this.parent;
-        if (parent) {
+        if (parent instanceof View) {
             return parent._removeViewFromNativeVisualTree(child);
         }
     }
diff --git a/tns-core-modules/ui/repeater/repeater.ts b/tns-core-modules/ui/repeater/repeater.ts
index cc25cce3f..6e3cba330 100644
--- a/tns-core-modules/ui/repeater/repeater.ts
+++ b/tns-core-modules/ui/repeater/repeater.ts
@@ -1,6 +1,6 @@
 import { Repeater as RepeaterDefinition, ItemsSource } from "ui/repeater";
 import { Label } from "ui/label";
-import { LayoutBase, CustomLayoutView, View, Template, Property, Observable } from "ui/layouts/layout-base";
+import { LayoutBase, CustomLayoutView, View, Template, Property, Observable ,layout } from "ui/layouts/layout-base";
 import { StackLayout } from "ui/layouts/stack-layout";
 import { ObservableArray, ChangedData } from "data/observable-array";
 import { addWeakEventListener, removeWeakEventListener } from "ui/core/weak-event-listener";
@@ -103,7 +103,7 @@ export class Repeater extends CustomLayoutView implements RepeaterDefinition {
     }
 
     public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void {
-        var result = View.measureChild(this, this.itemsLayout, widthMeasureSpec, heightMeasureSpec);
+        const result = View.measureChild(this, this.itemsLayout, widthMeasureSpec, heightMeasureSpec);
 
         const width = layout.getMeasureSpecSize(widthMeasureSpec);
         const widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts
index fbe67d4f0..0c8ff1f85 100644
--- a/tns-core-modules/ui/styling/style-scope.ts
+++ b/tns-core-modules/ui/styling/style-scope.ts
@@ -1,4 +1,4 @@
-import { ViewBase } from "ui/core/view-base";
+import { ViewBase, resetStyleProperties } from "ui/core/view-base";
 import { SyntaxTree, Keyframes, parse as parseCss, Rule, Declaration, Node } from "css";
 import { RuleSet, SelectorsMap, SelectorCore, SelectorsMatch, ChangeMap, fromAstNodes } from "ui/styling/css-selector";
 import { KeyframeAnimationInfo, KeyframeAnimation } from "ui/animation/keyframe-animation";
@@ -23,7 +23,9 @@ export class CssState {
     }
 
     public apply(): void {
-        this.view.style._resetCssValues();
+        this.view._cancelAllAnimations();
+        resetStyleProperties(this.view.style);
+
         let matchingSelectors = this.match.selectors.filter(sel => sel.dynamic ? sel.match(this.view) : true);
         matchingSelectors.forEach(s => applyDescriptors(this.view, s.ruleset));
     }
diff --git a/tns-core-modules/ui/styling/style.d.ts b/tns-core-modules/ui/styling/style.d.ts
index 3cf8a3ab1..8599039c5 100644
--- a/tns-core-modules/ui/styling/style.d.ts
+++ b/tns-core-modules/ui/styling/style.d.ts
@@ -128,7 +128,7 @@ declare module "ui/styling/style" {
 
         // public _beginUpdate();
         // public _endUpdate();
-        public _resetCssValues(): void;
+        // public _resetCssValues(): void;
         // public _syncNativeProperties(): void;
         // public _inheritStyleProperty(property: Property): void;
         // public _inheritStyleProperties(parent: View): void;
diff --git a/tns-core-modules/ui/styling/style.ts b/tns-core-modules/ui/styling/style.ts
index 57b005370..b823991f9 100644
--- a/tns-core-modules/ui/styling/style.ts
+++ b/tns-core-modules/ui/styling/style.ts
@@ -3,12 +3,17 @@ import { Length, PercentLength, Color, Background, Font, ViewBase } from "ui/cor
 import { Observable } from "data/observable";
 import { resetStyleProperties } from "ui/core/properties";
 
+import {
+    FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
+    Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf
+} from "ui/layouts/flexbox-layout"
+
 export class Style extends Observable implements StyleDefinition {
     constructor(public view: ViewBase) {
         super();
     }
 
-    private _updateCounter = 0;
+    // private _updateCounter = 0;
     // private _nativeSetters = new Map<Property, any>();
 
     public fontInternal: Font;
@@ -113,6 +118,17 @@ export class Style extends Observable implements StyleDefinition {
     effectiveBorderBottomWidth: number;
     effectiveBorderLeftWidth: number;
 
+    flexDirection: FlexDirection;
+    flexWrap: FlexWrap;
+    justifyContent: JustifyContent;
+    alignItems: AlignItems;
+    alignContent: AlignContent;
+    order: Order;
+    flexGrow: FlexGrow;
+    flexShrink: FlexShrink;
+    flexWrapBefore: FlexWrapBefore;
+    alignSelf: AlignSelf;
+
     // public _updateTextDecoration() {
     //     if (this.textDecoration !== TextDecoration.none) {
     //         this._applyProperty(textDecorationProperty, this._getValue(textDecorationProperty));
@@ -141,10 +157,10 @@ export class Style extends Observable implements StyleDefinition {
     //     }
     // }
 
-    public _resetCssValues() {
-        this.view._cancelAllAnimations();
-        resetStyleProperties(this);
-    }
+    // public _resetCssValues() {
+    //     this.view._cancelAllAnimations();
+    //     resetStyleProperties(this);
+    // }
 
     // public _resetLocalValues() {
     //     this._resetValues(ValueSource.Local);