diff --git a/Examples/UIExplorer/LayoutExample.js b/Examples/UIExplorer/LayoutExample.js
index e60ff89c776..6d1095ae527 100644
--- a/Examples/UIExplorer/LayoutExample.js
+++ b/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">
diff --git a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png
index 2c657345393..90558447391 100644
Binary files a/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png and b/Examples/UIExplorer/UIExplorerIntegrationTests/ReferenceImages/Examples-UIExplorer-UIExplorerApp.ios/testLayoutExample_1@2x.png differ
diff --git a/Libraries/StyleSheet/LayoutPropTypes.js b/Libraries/StyleSheet/LayoutPropTypes.js
index a07e16fe2f9..558cd447ba6 100644
--- a/Libraries/StyleSheet/LayoutPropTypes.js
+++ b/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
diff --git a/React/Base/RCTConvert.m b/React/Base/RCTConvert.m
index 73f41000f08..917a5b627de 100644
--- a/React/Base/RCTConvert.m
+++ b/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, (@{
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 97d83ea143d..2660337e517 100644
--- a/ReactAndroid/src/main/java/com/facebook/react/uimanager/LayoutShadowNode.java
+++ b/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)