From 899adf5343c2faa43e1f6b4b75c75b3a170112a0 Mon Sep 17 00:00:00 2001 From: Emil Sjolander Date: Tue, 30 Aug 2016 03:09:52 -0700 Subject: [PATCH] Expose flexGrow, flexShrink, and flexBasis properties Reviewed By: javache, astreet Differential Revision: D3785140 fbshipit-source-id: a735602c53da72e3bce69ba30936c4ed25d76b88 --- Libraries/StyleSheet/LayoutPropTypes.js | 5 +++++ React/Views/RCTShadowView.h | 3 +++ React/Views/RCTShadowView.m | 3 +++ React/Views/RCTViewManager.m | 3 +++ .../react/uimanager/LayoutShadowNode.java | 15 +++++++++++++++ .../com/facebook/react/uimanager/ViewProps.java | 3 +++ 6 files changed, 32 insertions(+) diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js index 0073b8784..3ac6aff64 100644 --- a/Libraries/StyleSheet/LayoutPropTypes.js +++ b/Libraries/StyleSheet/LayoutPropTypes.js @@ -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 diff --git a/React/Views/RCTShadowView.h b/React/Views/RCTShadowView.h index e0ac977a6..18ed4f40e 100644 --- a/React/Views/RCTShadowView.h +++ b/React/Views/RCTShadowView.h @@ -133,6 +133,9 @@ typedef void (^RCTApplierBlock)(NSDictionary *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 diff --git a/React/Views/RCTShadowView.m b/React/Views/RCTShadowView.m index 688084a3f..d3befdcb4 100644 --- a/React/Views/RCTShadowView.m +++ b/React/Views/RCTShadowView.m @@ -626,6 +626,9 @@ static inline void RCTAssignSuggestedDimension(CSSNodeRef cssNode, CSSDimension } 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) diff --git a/React/Views/RCTViewManager.m b/React/Views/RCTViewManager.m index fef287205..ea8b92d8b 100644 --- a/React/Views/RCTViewManager.m +++ b/React/Views/RCTViewManager.m @@ -295,6 +295,9 @@ RCT_EXPORT_SHADOW_PROPERTY(paddingHorizontal, CGFloat) 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) diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java index b7e8620d3..710153085 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java @@ -56,6 +56,21 @@ public class LayoutShadowNode extends ReactShadowNode { 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( diff --git a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java index c344e0fd7..748f9c18f 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java +++ b/ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java @@ -29,6 +29,9 @@ public class ViewProps { 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";