Merge pull request #3408 from NativeScript/cankov/modules30-flexbox

Cankov/modules30 flexbox

tests/app/testRunner.ts

@@ -62,7 +62,7 @@ allTests["WRAPLAYOUT"] = require("./ui/layouts/wrap-layout-tests");
 allTests["ABSOLUTELAYOUT"] = require("./ui/layouts/absolute-layout-tests");
 allTests["GRIDLAYOUT"] = require("./ui/layouts/grid-layout-tests");
 allTests["STACKLAYOUT"] = require("./ui/layouts/stack-layout-tests");
-// allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
+allTests["FLEXBOXLAYOUT"] = require("./ui/layouts/flexbox-layout-tests");
 // allTests["STYLE-PROPERTIES"] = require("./ui/styling/style-properties-tests");
 // allTests["FRAME"] = require("./ui/frame/frame-tests");
 // allTests["VIEW"] = require("./ui/view/view-tests");

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

@@ -12,6 +12,9 @@ import { observe as gestureObserve, GesturesObserver, GestureTypes, GestureEvent
 import { Font, parseFont, FontStyle, FontWeight } from "ui/styling/font";
 import { fontSizeConverter } from "../styling/converters";
 
+// Only types:
+import { Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf } from "ui/layouts/flexbox-layout"
+
 // TODO: Remove this and start using string as source (for android).
 import { fromFileOrResource, fromBase64, fromUrl } from "image-source";
 import { isDataURI, isFileOrResourcePath, layout } from "utils/utils";
@@ -61,6 +64,12 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     rowSpan: number;
     colSpan: number;
 
+    order: Order;
+    flexGrow: FlexGrow;
+    flexShrink: FlexShrink;
+    flexWrapBefore: FlexWrapBefore;
+    alignSelf: AlignSelf;
+
     public static loadedEvent = "loaded";
     public static unloadedEvent = "unloaded";
 
@@ -69,10 +78,14 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
 
     _currentWidthMeasureSpec: number;
     _currentHeightMeasureSpec: number;
-    private _oldLeft: number;
+
-    private _oldTop: number;
+    _oldLeft: number;
-    private _oldRight: number;
+    _oldTop: number;
-    private _oldBottom: number;
+    _oldRight: number;
+    _oldBottom: number;
+
+    _minWidthNative: Length;
+    _minHeightNative: Length;
 
     private _isLayoutValid: boolean;
     private _cssType: string;
@@ -662,14 +675,13 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
         let measureHeight = 0;
 
         if (child && !child.isCollapsed) {
-            let density = layout.getDisplayDensity();
             let width = layout.getMeasureSpecSize(widthMeasureSpec);
             let widthMode = layout.getMeasureSpecMode(widthMeasureSpec);
 
             let height = layout.getMeasureSpecSize(heightMeasureSpec);
             let heightMode = layout.getMeasureSpecMode(heightMeasureSpec);
 
-            updateChildLayoutParams(child, parent, density);
+            child._updateEffectiveLayoutValues(parent);
 
             let style = child.style;
             let horizontalMargins = child.effectiveMarginLeft + child.effectiveMarginRight;
@@ -871,7 +883,35 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
     public _setValue(): never {
         throw new Error("The View._setValue is obsolete. There is a new property system.")
     }
+
+    _updateEffectiveLayoutValues(parent: ViewDefinition): void {
+        const density = layout.getDisplayDensity();
+        const style = this.style;
+
+        let parentWidthMeasureSpec = parent._currentWidthMeasureSpec;
+        let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
+        let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
+        let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
+
+        this.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth)
+        this.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, parentAvailableWidth);
+        this.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, parentAvailableWidth);
+
+        let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
+        let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
+        let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
+        let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
+
+        this.effectiveHeight = PercentLength.toDevicePixels(style.height, -2, parentAvailableHeight);
+        this.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, parentAvailableHeight);
+        this.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, parentAvailableHeight);
     }
+}
+
+ViewCommon.prototype._oldLeft = 0;
+ViewCommon.prototype._oldTop = 0;
+ViewCommon.prototype._oldRight = 0;
+ViewCommon.prototype._oldBottom = 0;
 
 ViewCommon.prototype.effectiveMinWidth = 0;
 ViewCommon.prototype.effectiveMinHeight = 0;
@@ -890,28 +930,6 @@ ViewCommon.prototype.effectiveBorderRightWidth = 0;
 ViewCommon.prototype.effectiveBorderBottomWidth = 0;
 ViewCommon.prototype.effectiveBorderLeftWidth = 0;
 
-function updateChildLayoutParams(child: ViewCommon, parent: ViewCommon, density: number): void {
-    let style = child.style;
-
-    let parentWidthMeasureSpec = parent._currentWidthMeasureSpec;
-    let parentWidthMeasureSize = layout.getMeasureSpecSize(parentWidthMeasureSpec);
-    let parentWidthMeasureMode = layout.getMeasureSpecMode(parentWidthMeasureSpec);
-    let parentAvailableWidth = parentWidthMeasureMode === layout.UNSPECIFIED ? -1 : parentWidthMeasureSize;
-
-    child.effectiveWidth = PercentLength.toDevicePixels(style.width, -2, parentAvailableWidth)
-    child.effectiveMarginLeft = PercentLength.toDevicePixels(style.marginLeft, 0, parentAvailableWidth);
-    child.effectiveMarginRight = PercentLength.toDevicePixels(style.marginRight, 0, parentAvailableWidth);
-
-    let parentHeightMeasureSpec = parent._currentHeightMeasureSpec;
-    let parentHeightMeasureSize = layout.getMeasureSpecSize(parentHeightMeasureSpec);
-    let parentHeightMeasureMode = layout.getMeasureSpecMode(parentHeightMeasureSpec);
-    let parentAvailableHeight = parentHeightMeasureMode === layout.UNSPECIFIED ? -1 : parentHeightMeasureSize;
-
-    child.effectiveHeight = PercentLength.toDevicePixels(style.height, -2, parentAvailableHeight);
-    child.effectiveMarginTop = PercentLength.toDevicePixels(style.marginTop, 0, parentAvailableHeight);
-    child.effectiveMarginBottom = PercentLength.toDevicePixels(style.marginBottom, 0, parentAvailableHeight);
-}
-
 function equalsCommon(a: Length, b: Length): boolean;
 function equalsCommon(a: PercentLength, b: PercentLength): boolean;
 function equalsCommon(a: PercentLength, b: PercentLength): boolean {

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

@@ -1,7 +1,8 @@
 import { PercentLength, Point, CustomLayoutView as CustomLayoutViewDefinition } from "ui/core/view";
 import { ad as androidBackground } from "ui/styling/background";
 import {
-    ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty, minWidthProperty, minHeightProperty,
+    ViewCommon, layout, isEnabledProperty, originXProperty, originYProperty, automationTextProperty, isUserInteractionEnabledProperty, visibilityProperty, opacityProperty,
+    minWidthProperty, minHeightProperty, Length,
     widthProperty, heightProperty, marginLeftProperty, marginTopProperty,
     marginRightProperty, marginBottomProperty, horizontalAlignmentProperty, verticalAlignmentProperty,
     rotateProperty, scaleXProperty, scaleYProperty,
@@ -447,6 +448,22 @@ export class View extends ViewCommon {
             androidBackground.onBackgroundOrBorderPropertyChanged(this);
         }
     }
+
+    set [minWidthProperty.native](value: Length) {
+        if (this.parent instanceof CustomLayoutView && this.parent.nativeView) {
+            this.parent._setChildMinWidthNative(this);
+        } else {
+            this._minWidthNative = this.minWidth;
+        }
+    }
+
+    set [minHeightProperty.native](value: Length) {
+        if (this.parent instanceof CustomLayoutView && this.parent.nativeView) {
+            this.parent._setChildMinHeightNative(this);
+        } else {
+            this._minHeightNative = this.minHeight;
+        }
+    }
 }
 
 type NativeSetter = { (view: android.view.View, value: number): void };
@@ -534,13 +551,13 @@ createNativePercentLengthProperty({
 });
 
 createNativePercentLengthProperty({
-    key: minWidthProperty.native,
+    key: "_minWidthNative",
     getPixels: ViewHelper.getMinWidth,
     setPixels: ViewHelper.setMinWidth
 });
 
 createNativePercentLengthProperty({
-    key: minHeightProperty.native,
+    key: "_minHeightNative",
     getPixels: ViewHelper.getMinHeight,
     setPixels: ViewHelper.setMinHeight
 });
@@ -568,12 +585,28 @@ export class CustomLayoutView extends View implements CustomLayoutViewDefinition
                 traceWrite(`${this}.nativeView.addView(${child}.nativeView, ${atIndex})`, traceCategories.VisualTreeEvents);
             }
             this._nativeView.addView(child.nativeView, atIndex);
+            if (child instanceof View) {
+                this._updateNativeLayoutParams(child);
+            }
             return true;
         }
 
         return false;
     }
 
+    public _updateNativeLayoutParams(child: View): void {
+        this._setChildMinWidthNative(child);
+        this._setChildMinHeightNative(child);
+    }
+
+    public _setChildMinWidthNative(child: View): void {
+        child._minWidthNative = child.minWidth;
+    }
+
+    public _setChildMinHeightNative(child: View): void {
+        child._minHeightNative = child.minHeight;
+    }
+
     public _removeViewFromNativeVisualTree(child: ViewCommon): void {
         super._removeViewFromNativeVisualTree(child);
 

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

@@ -569,6 +569,14 @@ declare module "ui/core/view" {
         _nativeView: any;
         _setNativeViewFrame(nativeView: any, frame: any): void;
         // _onStylePropertyChanged(property: dependencyObservable.Property): void;
+
+        _updateEffectiveLayoutValues(parent: View): void;
+
+        _currentWidthMeasureSpec: number;
+        _currentHeightMeasureSpec: number;
+
+        _minWidthNative: Length;
+        _minHeightNative: Length;
         //@endprivate
 
         public effectiveMinWidth: number;
@@ -603,6 +611,11 @@ declare module "ui/core/view" {
      * Base class for all UI components that implements custom layouts. 
      */
     export class CustomLayoutView extends View {
+        //@private
+        _updateNativeLayoutParams(child: View): void;
+        _setChildMinWidthNative(child: View): void;
+        _setChildMinHeightNative(child: View): void;
+        //@endprivate
     }
 
     /**

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout-common.ts

@@ -231,7 +231,7 @@ export abstract class FlexboxLayoutBase extends LayoutBase {
 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 flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: FlexWrap.NOWRAP, affectsLayout: isIOS, valueConverter: FlexWrap.parse });
+export const flexWrapProperty = new CssProperty<Style, FlexWrap>({ name: "flexWrap", cssName: "flex-wrap", defaultValue: "nowrap", affectsLayout: isIOS, valueConverter: FlexWrap.parse });
 flexWrapProperty.register(Style);
 
 export const justifyContentProperty = new CssProperty<Style, JustifyContent>({ name: "justifyContent", cssName: "justify-content", defaultValue: JustifyContent.FLEX_START, affectsLayout: isIOS, valueConverter: JustifyContent.parse });
@@ -245,84 +245,68 @@ alignContentProperty.register(Style);
 
 export const orderProperty = new CssProperty<Style, Order>({ name: "order", cssName: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
 orderProperty.register(Style);
+Object.defineProperty(View.prototype, "order", {
+    get(this: View): Order {
+        return this.style.order;
+    },
+    set(this: View, value: Order) {
+        this.style.order = value;
+    },
+    enumerable: true,
+    configurable: true
+});
 
 export const flexGrowProperty = new CssProperty<Style, FlexGrow>({ name: "flexGrow", cssName: "flex-grow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
 flexGrowProperty.register(Style);
+Object.defineProperty(View.prototype, "flexGrow", {
+    get(this: View): FlexGrow {
+        return this.style.flexGrow;
+    },
+    set(this: View, value: FlexGrow) {
+        this.style.flexGrow = value;
+    },
+    enumerable: true,
+    configurable: true
+});
 
 export const flexShrinkProperty = new CssProperty<Style, FlexShrink>({ name: "flexShrink", cssName: "flex-shrink", defaultValue: FLEX_SHRINK_DEFAULT, valueConverter: FlexShrink.parse });
 flexShrinkProperty.register(Style);
+Object.defineProperty(View.prototype, "flexShrink", {
+    get(this: View): FlexShrink {
+        return this.style.flexShrink;
+    },
+    set(this: View, value: FlexShrink) {
+        this.style.flexShrink = value;
+    },
+    enumerable: true,
+    configurable: true
+});
 
 export const flexWrapBeforeProperty = new CssProperty<Style, FlexWrapBefore>({ name: "flexWrapBefore", cssName: "flex-wrap-before", defaultValue: false, valueConverter: FlexWrapBefore.parse });
 flexWrapBeforeProperty.register(Style);
+Object.defineProperty(View.prototype, "flexWrapBefore", {
+    get(this: View): FlexWrapBefore {
+        return this.style.flexWrapBefore;
+    },
+    set(this: View, value: FlexWrapBefore) {
+        this.style.flexWrapBefore = value;
+    },
+    enumerable: true,
+    configurable: true
+});
 
 export const alignSelfProperty = new CssProperty<Style, AlignSelf>({ name: "alignSelf", cssName: "align-self", defaultValue: AlignSelf.AUTO, valueConverter: AlignSelf.parse });
 alignSelfProperty.register(Style);
-
+Object.defineProperty(View.prototype, "alignSelf", {
-// These support setting attached properties through XML. Delete if we stop supporting them.
+    get(this: View): AlignSelf {
-// they could be set in XML through style -- <button style.order="1" />
+        return this.style.alignSelf;
-const orderProperty1 = new Property<View, Order>({ name: "order", defaultValue: ORDER_DEFAULT, valueConverter: Order.parse });
+    },
-orderProperty1.register(View);
+    set(this: View, value: AlignSelf) {
-
+        this.style.alignSelf = value;
-const flexGrowProperty1 = new Property<View, FlexGrow>({ name: "flexGrow", defaultValue: FLEX_GROW_DEFAULT, valueConverter: FlexGrow.parse });
+    },
-flexGrowProperty1.register(View);
+    enumerable: true,
-
+    configurable: true
-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>
 const flexFlowProperty = new ShorthandProperty<Style, string>({

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.android.ts

@@ -1,6 +1,9 @@
 import {
     FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent,
-    FlexboxLayoutBase, View, layout,
+    FlexboxLayoutBase, View, ViewBase, layout,
+    widthProperty, heightProperty, minWidthProperty, minHeightProperty,
+    marginTopProperty, marginRightProperty, marginBottomProperty, marginLeftProperty,
+    Length,
     orderProperty, Order,
     flexGrowProperty, FlexGrow,
     flexShrinkProperty, FlexShrink,
@@ -173,15 +176,34 @@ export class FlexboxLayout extends FlexboxLayoutBase {
     set [alignContentProperty.native](alignContent: AlignContent) {
         this.android.setAlignContent(alignContentMap[alignContent]);
     }
+
+    public _updateNativeLayoutParams(child: View): void {
+        super._updateNativeLayoutParams(child);
+
+        const lp = <org.nativescript.widgets.FlexboxLayout.LayoutParams>child.nativeView.getLayoutParams();
+        lp.order = child.order;
+        lp.flexGrow = child.flexGrow;
+        lp.flexShrink = child.flexShrink;
+        lp.wrapBefore = child.flexWrapBefore;
+        lp.alignSelf = alignSelfMap[child.alignSelf];
+        child.nativeView.setLayoutParams(lp);
     }
 
-export function _setAndroidLayoutParams(lp: org.nativescript.widgets.FlexboxLayout.LayoutParams, view: View) {
+    public _setChildMinWidthNative(child: View): void {
-    lp.order = FlexboxLayout.getOrder(view);
+        child._minWidthNative = 0;
-    lp.flexGrow = FlexboxLayout.getFlexGrow(view);
+        const lp = child.nativeView.getLayoutParams();
-    lp.flexShrink = FlexboxLayout.getFlexShrink(view);
+        if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
-    lp.alignSelf = alignSelfMap[FlexboxLayout.getAlignSelf(view)];
+            lp.minWidth = Length.toDevicePixels(child.minWidth, 0);
-    lp.wrapBefore = FlexboxLayout.getFlexWrapBefore(view);
+            child.nativeView.setLayoutParams(lp);
-
+        }
-    lp.minWidth = layout.toDevicePixels(view.effectiveMinWidth);
+    }
-    lp.minHeight = layout.toDevicePixels(view.effectiveMinHeight);
+
+    public _setChildMinHeightNative(child: View): void {
+        child._minHeightNative = 0;
+        const lp = child.nativeView.getLayoutParams();
+        if (lp instanceof org.nativescript.widgets.FlexboxLayout.LayoutParams) {
+            lp.minHeight = Length.toDevicePixels(child.minHeight, 0);
+            child.nativeView.setLayoutParams(lp);
+        }
+    }
 }

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.d.ts

@@ -18,6 +18,20 @@ declare module "ui/styling/style" {
     }
 }
 
+declare module "ui/core/view" {
+    import {
+        Order, FlexGrow, FlexShrink, FlexWrapBefore, AlignSelf
+    } from "ui/layouts/flexbox-layout"
+
+    interface View {
+        order: Order;
+        flexGrow: FlexGrow;
+        flexShrink: FlexShrink;
+        flexWrapBefore: FlexWrapBefore;
+        alignSelf: AlignSelf;
+    }
+}
+
 declare module "ui/layouts/flexbox-layout" {
 
     import { LayoutBase, View, Style, CssProperty } from "ui/layouts/layout-base";

tns-core-modules/ui/layouts/flexbox-layout/flexbox-layout.ios.ts

@@ -263,6 +263,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     continue;
                 }
 
+                child._updateEffectiveLayoutValues(this);
                 let lp = child; // child.style;
                 if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
                     flexLine._indicesAlignSelfStretch.push(i);
@@ -377,6 +378,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                 continue;
             }
 
+            child._updateEffectiveLayoutValues(this);
             const lp = child; // .style;
             if (FlexboxLayout.getAlignSelf(child) === AlignSelf.STRETCH) {
                 flexLine._indicesAlignSelfStretch.push(i);
@@ -442,6 +444,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         let childHeight = view.getMeasuredHeight();
 
         let minWidth = view.effectiveMinWidth;
+        view.effectiveMinWidth = 0;
         if (view.getMeasuredWidth() < minWidth) {
             needsMeasure = true;
             childWidth = minWidth;
@@ -451,6 +454,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         }
 
         let minHeight = view.effectiveMinHeight;
+        view.effectiveMinHeight = 0;
         if (childHeight < minHeight) {
             needsMeasure = true;
             childHeight = minHeight;
@@ -461,6 +465,8 @@ export class FlexboxLayout extends FlexboxLayoutBase {
         if (needsMeasure) {
             view.measure(makeMeasureSpec(childWidth, EXACTLY), makeMeasureSpec(childHeight, EXACTLY));
         }
+        view.effectiveMinWidth = minWidth;
+        view.effectiveMinHeight = minHeight;
     }
 
     private _addFlexLineIfLastFlexItem(childIndex: number, childCount: number, flexLine: FlexLine) {
@@ -607,6 +613,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     let rawCalculatedWidth = child.getMeasuredWidth() - unitShrink * flexShrink + accumulatedRoundError;
                     let roundedCalculatedWidth = Math.round(rawCalculatedWidth);
                     let minWidth = child.effectiveMinWidth;
+                    child.effectiveMinWidth = 0;
                     if (roundedCalculatedWidth < minWidth) {
                         needsReshrink = true;
                         roundedCalculatedWidth = minWidth;
@@ -616,6 +623,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                         accumulatedRoundError = rawCalculatedWidth - roundedCalculatedWidth;
                     }
                     child.measure(makeMeasureSpec(roundedCalculatedWidth, EXACTLY), makeMeasureSpec(child.getMeasuredHeight(), EXACTLY));
+                    child.effectiveMinWidth = minWidth;
                 }
                 flexLine._mainSize += child.getMeasuredWidth() + lp.effectiveMarginLeft + lp.effectiveMarginRight;
             } else {
@@ -624,6 +632,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                     let rawCalculatedHeight = child.getMeasuredHeight() - unitShrink * flexShrink + accumulatedRoundError;
                     let roundedCalculatedHeight = Math.round(rawCalculatedHeight);
                     const minHeight = child.effectiveMinHeight;
+                    child.effectiveMinHeight = 0;
                     if (roundedCalculatedHeight < minHeight) {
                         needsReshrink = true;
                         roundedCalculatedHeight = minHeight;
@@ -633,6 +642,7 @@ export class FlexboxLayout extends FlexboxLayoutBase {
                         accumulatedRoundError = rawCalculatedHeight - roundedCalculatedHeight;
                     }
                     child.measure(makeMeasureSpec(child.getMeasuredWidth(), EXACTLY), makeMeasureSpec(roundedCalculatedHeight, EXACTLY));
+                    child.effectiveMinHeight = minHeight;
                 }
                 flexLine._mainSize += child.getMeasuredHeight() + lp.effectiveMarginTop + lp.effectiveMarginBottom;
             }