Permalink
Browse files

Expose flexGrow, flexShrink, and flexBasis properties

Reviewed By: javache, astreet

Differential Revision: D3785140

fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88
  • Loading branch information...
1 parent 4178d21 commit 899adf5343c2faa43e1f6b4b75c75b3a170112a0 @emilsjolander emilsjolander committed with Facebook Github Bot 2 Aug 30, 2016
@@ -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
Contributor
rclai 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.