Skip to content
Permalink
Browse files

Expose flexGrow, flexShrink, and flexBasis properties

Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
  • Loading branch information...
Emil Sjolander Facebook Github Bot 2
Emil Sjolander authored and Facebook Github Bot 2 committed Aug 30, 2016
1 parent 4178d21 commit 899adf5343c2faa43e1f6b4b75c75b3a170112a0
@@ -344,8 +344,13 @@ var LayoutPropTypes = {
* When `flex` is -1, the component is normally sized according
* `width` and `height`. However, if there's not enough space,
* the component will shrink to its `minWidth` and `minHeight`.
*
* flexGrow, flexShrink, and flexBasis work the same as in CSS.
*/
flex: ReactPropTypes.number,
flexGrow: ReactPropTypes.number,
flexShrink: ReactPropTypes.number,
flexBasis: ReactPropTypes.number,

/** `zIndex` controls which components display on top of others.
* Normally, you don't use `zIndex`. Components render according to
@@ -133,6 +133,9 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
@property (nonatomic, assign) CSSPositionType position;
@property (nonatomic, assign) CSSWrapType flexWrap;
@property (nonatomic, assign) CGFloat flex;
@property (nonatomic, assign) CGFloat flexGrow;
@property (nonatomic, assign) CGFloat flexShrink;
@property (nonatomic, assign) CGFloat flexBasis;

/**
* z-index, used to override sibling order in the view
@@ -626,6 +626,9 @@ - (type)getProp \
}

RCT_STYLE_PROPERTY(Flex, flex, Flex, CGFloat)
RCT_STYLE_PROPERTY(FlexGrow, flexGrow, FlexGrow, CGFloat)
RCT_STYLE_PROPERTY(FlexShrink, flexShrink, FlexShrink, CGFloat)
RCT_STYLE_PROPERTY(FlexBasis, flexBasis, FlexBasis, CGFloat)
RCT_STYLE_PROPERTY(FlexDirection, flexDirection, FlexDirection, CSSFlexDirection)
RCT_STYLE_PROPERTY(JustifyContent, justifyContent, JustifyContent, CSSJustify)
RCT_STYLE_PROPERTY(AlignSelf, alignSelf, AlignSelf, CSSAlign)
@@ -295,6 +295,9 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
RCT_EXPORT_SHADOW_PROPERTY(padding, CGFloat)

RCT_EXPORT_SHADOW_PROPERTY(flex, CGFloat)
RCT_EXPORT_SHADOW_PROPERTY(flexGrow, CGFloat)
RCT_EXPORT_SHADOW_PROPERTY(flexShrink, CGFloat)
RCT_EXPORT_SHADOW_PROPERTY(flexBasis, CGFloat)
RCT_EXPORT_SHADOW_PROPERTY(flexDirection, CSSFlexDirection)
RCT_EXPORT_SHADOW_PROPERTY(flexWrap, CSSWrapType)
RCT_EXPORT_SHADOW_PROPERTY(justifyContent, CSSJustify)
@@ -56,6 +56,21 @@ public void setFlex(float flex) {
super.setFlex(flex);
}

@ReactProp(name = ViewProps.FLEX_GROW, defaultFloat = 0f)
public void setFlexGrow(float flexGrow) {
super.setFlexGrow(flexGrow);
}

@ReactProp(name = ViewProps.FLEX_SHRINK, defaultFloat = 0f)
public void setFlexShrink(float flexShrink) {
super.setFlexShrink(flexShrink);
}

@ReactProp(name = ViewProps.FLEX_BASIS, defaultFloat = 0f)
public void setFlexBasis(float flexBasis) {
super.setFlexBasis(flexBasis);
}

@ReactProp(name = ViewProps.FLEX_DIRECTION)
public void setFlexDirection(@Nullable String flexDirection) {
setFlexDirection(
@@ -29,6 +29,9 @@
public static final String BOTTOM = "bottom";
public static final String COLLAPSABLE = "collapsable";
public static final String FLEX = "flex";
public static final String FLEX_GROW = "flexGrow";
public static final String FLEX_SHRINK = "flexShrink";
public static final String FLEX_BASIS = "flexBasis";
public static final String FLEX_DIRECTION = "flexDirection";
public static final String FLEX_WRAP = "flexWrap";
public static final String HEIGHT = "height";

1 comment on commit 899adf5

@rclai

This comment has been minimized.

Copy link
Contributor

commented on 899adf5 Sep 16, 2016

Are you guys able to incorporate examples of these flex properties to the UIExplorer?

Please sign in to comment.
You can’t perform that action at this time.