Add support for reverse flex directions on Android and iOS

Summary:
This PR adds support for both 'row-reverse' and 'column-reverse' for Android and iOS and is based on the changes in #6683 that looked like it's all but abandoned.
It also adds examples for the new directions to the "Layout - Flexbox" section of UIExplorer as well as some rad new colors to the section to make the difference between "row-reverse" and "flex-end" more apparent.

**Test plan (required)**
Tested inside of UIExplorer

Android
<img width="571" alt="screen shot 2016-06-05 at 7 42 14 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807140/cf8e05de-2b55-11e6-9366-a2e3194cabf8.png">

iOS
<img width="578" alt="screen shot 2016-06-05 at 7 41 35 pm" src="https://cloud.githubusercontent.com/assets/4332237/15807143/dee8e9b8-2b55-11e6-8777-c30329fa54e8.png">
Closes https://github.com/facebook/react-native/pull/7938

Differential Revision: D3417182

fbshipit-source-id: e8c9f5976ca95b2d2069a5b31a20f6d6309eb3cc

Examples/UIExplorer/LayoutExample.js

@@ -29,11 +29,12 @@ var UIExplorerPage = require('./UIExplorerPage');
 var Circle = React.createClass({
   render: function() {
     var size = this.props.size || 20;
+    var backgroundColor = this.props.bgColor || '#527fe4';
     return (
       <View
         style={{
           borderRadius: size / 2,
-          backgroundColor: '#527fe4',
+          backgroundColor: backgroundColor,
           width: size,
           height: size,
           margin: 1,
@@ -69,16 +70,32 @@ var LayoutExample = React.createClass({
   displayName: 'LayoutExample',
 
   render: function() {
+    var fiveColoredCircles = [
+      <Circle bgColor="#527fe4" key="blue" />,
+      <Circle bgColor="#D443E3" key="violet" />,
+      <Circle bgColor="#FF9049" key="orange" />,
+      <Circle bgColor="#FFE649" key="yellow" />,
+      <Circle bgColor="#7FE040" key="green" />
+    ];
+
     return (
       <UIExplorerPage title={this.props.navigator ? null : 'Layout'}>
         <UIExplorerBlock title="Flex Direction">
           <Text>row</Text>
           <CircleBlock style={{flexDirection: 'row'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
+          </CircleBlock>
+          <Text>row-reverse</Text>
+          <CircleBlock style={{flexDirection: 'row-reverse'}}>
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>column</Text>
           <CircleBlock style={{flexDirection: 'column'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
+          </CircleBlock>
+          <Text>column-reverse</Text>
+          <CircleBlock style={{flexDirection: 'column-reverse'}}>
+            {fiveColoredCircles}
           </CircleBlock>
           <View style={[styles.overlay, {position: 'absolute', top: 15, left: 160}]}>
             <Text>{'top: 15, left: 160'}</Text>
@@ -88,23 +105,23 @@ var LayoutExample = React.createClass({
         <UIExplorerBlock title="Justify Content - Main Direction">
           <Text>flex-start</Text>
           <CircleBlock style={{justifyContent: 'flex-start'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>center</Text>
           <CircleBlock style={{justifyContent: 'center'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>flex-end</Text>
           <CircleBlock style={{justifyContent: 'flex-end'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>space-between</Text>
           <CircleBlock style={{justifyContent: 'space-between'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
           <Text>space-around</Text>
           <CircleBlock style={{justifyContent: 'space-around'}}>
-            <Circle /><Circle /><Circle /><Circle /><Circle />
+            {fiveColoredCircles}
           </CircleBlock>
         </UIExplorerBlock>
         <UIExplorerBlock title="Align Items - Other Direction">

Libraries/StyleSheet/LayoutPropTypes.js

@@ -60,7 +60,9 @@ var LayoutPropTypes = {
   // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
   flexDirection: ReactPropTypes.oneOf([
     'row',
-    'column'
+    'row-reverse',
+    'column',
+    'column-reverse'
   ]),
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

React/Base/RCTConvert.m

@@ -816,7 +816,9 @@ RCT_ENUM_CONVERTER(css_clip_t, (@{
 
 RCT_ENUM_CONVERTER(css_flex_direction_t, (@{
   @"row": @(CSS_FLEX_DIRECTION_ROW),
-  @"column": @(CSS_FLEX_DIRECTION_COLUMN)
+  @"row-reverse": @(CSS_FLEX_DIRECTION_ROW_REVERSE),
+  @"column": @(CSS_FLEX_DIRECTION_COLUMN),
+  @"column-reverse": @(CSS_FLEX_DIRECTION_COLUMN_REVERSE)
 }), CSS_FLEX_DIRECTION_COLUMN, intValue)
 
 RCT_ENUM_CONVERTER(css_justify_t, (@{

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

@@ -60,7 +60,7 @@ public class LayoutShadowNode extends ReactShadowNode {
   public void setFlexDirection(@Nullable String flexDirection) {
     setFlexDirection(
         flexDirection == null ? CSSFlexDirection.COLUMN : CSSFlexDirection.valueOf(
-            flexDirection.toUpperCase(Locale.US)));
+            flexDirection.toUpperCase(Locale.US).replace("-", "_")));
   }
 
   @ReactProp(name = ViewProps.FLEX_WRAP)