Permalink
Browse files

Expose alignContent to react native

Summary:
This diff adds alignContent (https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) support to React Native. This enables aligning the lines of multi-line content. See below playground for example usage.

```
class Playground extends React.Component {
  render() {
    return (
      <View style={{width: '100%', height: '100%', flexDirection: 'row', backgroundColor: 'white', flexWrap: 'wrap', alignContent: 'space-between'}}>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
        <View style={{width: 100, height: 100, marginLeft: 10, marginTop: 10, backgroundColor: 'red'}}/>
      </View>
    );
  }
}
```

Reviewed By: astreet

Differential Revision: D4611803

fbshipit-source-id: ae7f6b4b7e9f4bc78d2502da948214294aad4dd2
  • Loading branch information...
emilsjolander authored and facebook-github-bot committed Mar 1, 2017
1 parent cc27555 commit 31f848a5fa56e17fbc6dbbba7d319a3b30083ac8
@@ -402,6 +402,20 @@ var LayoutPropTypes = {
'baseline'
]),
/** `alignContent` controls how a rows align in the cross direction,
* overriding the `alignContent` of the parent.
* See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
* for more details.
*/
alignContent: ReactPropTypes.oneOf([
'flex-start',
'flex-end',
'center',
'stretch',
'space-between',
'space-around'
]),
/** `overflow` controls how a children are measured and displayed.
* `overflow: hidden` causes views to be clipped while `overflow: scroll`
* causes views to be measured independently of their parents main axis.`
View
@@ -666,7 +666,9 @@ + (NSPropertyList)NSPropertyList:(id)json
@"center": @(YGAlignCenter),
@"auto": @(YGAlignAuto),
@"stretch": @(YGAlignStretch),
@"baseline": @(YGAlignBaseline)
@"baseline": @(YGAlignBaseline),
@"space-between": @(YGAlignSpaceBetween),
@"space-around": @(YGAlignSpaceAround)
}), YGAlignFlexStart, intValue)
RCT_ENUM_CONVERTER(YGDirection, (@{
@@ -130,6 +130,7 @@ typedef void (^RCTApplierBlock)(NSDictionary<NSNumber *, UIView *> *viewRegistry
@property (nonatomic, assign) YGJustify justifyContent;
@property (nonatomic, assign) YGAlign alignSelf;
@property (nonatomic, assign) YGAlign alignItems;
@property (nonatomic, assign) YGAlign alignContent;
@property (nonatomic, assign) YGPositionType position;
@property (nonatomic, assign) YGWrap flexWrap;
@@ -700,6 +700,7 @@ - (type)getProp \
RCT_STYLE_PROPERTY(JustifyContent, justifyContent, JustifyContent, YGJustify)
RCT_STYLE_PROPERTY(AlignSelf, alignSelf, AlignSelf, YGAlign)
RCT_STYLE_PROPERTY(AlignItems, alignItems, AlignItems, YGAlign)
RCT_STYLE_PROPERTY(AlignContent, alignContent, AlignContent, YGAlign)
RCT_STYLE_PROPERTY(Position, position, PositionType, YGPositionType)
RCT_STYLE_PROPERTY(FlexWrap, flexWrap, FlexWrap, YGWrap)
RCT_STYLE_PROPERTY(Overflow, overflow, Overflow, YGOverflow)
@@ -305,6 +305,7 @@ - (RCTViewManagerUIBlock)uiBlockToAmendWithShadowViewRegistry:(__unused NSDictio
RCT_EXPORT_SHADOW_PROPERTY(justifyContent, YGJustify)
RCT_EXPORT_SHADOW_PROPERTY(alignItems, YGAlign)
RCT_EXPORT_SHADOW_PROPERTY(alignSelf, YGAlign)
RCT_EXPORT_SHADOW_PROPERTY(alignContent, YGAlign)
RCT_EXPORT_SHADOW_PROPERTY(position, YGPositionType)
RCT_EXPORT_SHADOW_PROPERTY(aspectRatio, float)
@@ -283,6 +283,16 @@ public void setAlignItems(@Nullable String alignItems) {
alignItems.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.ALIGN_CONTENT)
public void setAlignContent(@Nullable String alignContent) {
if (isVirtual()) {
return;
}
setAlignContent(
alignContent == null ? YogaAlign.FLEX_START : YogaAlign.valueOf(
alignContent.toUpperCase(Locale.US).replace("-", "_")));
}
@ReactProp(name = ViewProps.JUSTIFY_CONTENT)
public void setJustifyContent(@Nullable String justifyContent) {
if (isVirtual()) {
@@ -650,6 +650,10 @@ public void setAlignItems(YogaAlign alignItems) {
mYogaNode.setAlignItems(alignItems);
}
public void setAlignContent(YogaAlign alignContent) {
mYogaNode.setAlignContent(alignContent);
}
public void setJustifyContent(YogaJustify justifyContent) {
mYogaNode.setJustifyContent(justifyContent);
}
@@ -25,6 +25,7 @@
// !!! Keep in sync with LAYOUT_ONLY_PROPS below
public static final String ALIGN_ITEMS = "alignItems";
public static final String ALIGN_SELF = "alignSelf";
public static final String ALIGN_CONTENT = "alignContent";
public static final String OVERFLOW = "overflow";
public static final String BOTTOM = "bottom";
public static final String COLLAPSABLE = "collapsable";
@@ -122,6 +123,7 @@
FLEX_WRAP,
JUSTIFY_CONTENT,
OVERFLOW,
ALIGN_CONTENT,
/* position */
POSITION,

0 comments on commit 31f848a

Please sign in to comment.