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

Libraries/StyleSheet/LayoutPropTypes.js

@@ -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.`

React/Base/RCTConvert.m

@@ -666,7 +666,9 @@ RCT_ENUM_CONVERTER(YGAlign, (@{
   @"center": @(YGAlignCenter),
   @"auto": @(YGAlignAuto),
   @"stretch": @(YGAlignStretch),
-  @"baseline": @(YGAlignBaseline)
+  @"baseline": @(YGAlignBaseline),
+  @"space-between": @(YGAlignSpaceBetween),
+  @"space-around": @(YGAlignSpaceAround)
 }), YGAlignFlexStart, intValue)
 
 RCT_ENUM_CONVERTER(YGDirection, (@{

React/Views/RCTShadowView.h

@@ -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;
 

React/Views/RCTShadowView.m

@@ -700,6 +700,7 @@ RCT_STYLE_PROPERTY(FlexDirection, flexDirection, FlexDirection, YGFlexDirection)
 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)

React/Views/RCTViewManager.m

@@ -305,6 +305,7 @@ RCT_EXPORT_SHADOW_PROPERTY(flexWrap, YGWrap)
 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)
 

ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java

@@ -283,6 +283,16 @@ public class LayoutShadowNode extends ReactShadowNode {
             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()) {

ReactAndroid/src/main/java/com/facebook/react/uimanager/ReactShadowNode.java

@@ -650,6 +650,10 @@ public class ReactShadowNode {
     mYogaNode.setAlignItems(alignItems);
   }
 
+  public void setAlignContent(YogaAlign alignContent) {
+    mYogaNode.setAlignContent(alignContent);
+  }
+
   public void setJustifyContent(YogaJustify justifyContent) {
     mYogaNode.setJustifyContent(justifyContent);
   }

ReactAndroid/src/main/java/com/facebook/react/uimanager/ViewProps.java

@@ -25,6 +25,7 @@ public class ViewProps {
   // !!! 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 @@ public class ViewProps {
             FLEX_WRAP,
             JUSTIFY_CONTENT,
             OVERFLOW,
+            ALIGN_CONTENT,
 
             /* position */
             POSITION,