Update LayoutPropTypes

* Consolidates certain style props under LayoutPropTypes.
* Adds 'direction' style prop.
* Adds 'scroll' to 'overflow' style prop.
* Filter out 'aspectRatio' for now.

Ref #420

src/apis/StyleSheet/expandStyle.js

@@ -78,6 +78,7 @@ const createReducer = (style, styleProps) => {
         break;
       }
       // ignore React Native styles
+      case 'aspectRatio':
       case 'elevation':
       case 'overlayColor':
       case 'resizeMode':

src/components/Image/ImageStylePropTypes.js

@@ -6,17 +6,13 @@ import ShadowPropTypes from '../../propTypes/ShadowPropTypes';
 import TransformPropTypes from '../../propTypes/TransformPropTypes';
 import { number, oneOf, string } from 'prop-types';
 
-const hiddenOrVisible = oneOf(['hidden', 'visible']);
-
 module.exports = {
   ...BorderPropTypes,
   ...LayoutPropTypes,
   ...ShadowPropTypes,
   ...TransformPropTypes,
-  backfaceVisibility: hiddenOrVisible,
   backgroundColor: ColorPropType,
   opacity: number,
-  overflow: hiddenOrVisible,
   resizeMode: oneOf(Object.keys(ImageResizeMode)),
   /**
    * @platform unsupported
@@ -26,6 +22,5 @@ module.exports = {
   /**
    * @platform web
    */
-  boxShadow: string,
+  boxShadow: string
-  visibility: hiddenOrVisible
 };

src/components/View/ViewStylePropTypes.js

@@ -6,20 +6,14 @@ import ShadowPropTypes from '../../propTypes/ShadowPropTypes';
 import TransformPropTypes from '../../propTypes/TransformPropTypes';
 import { number, oneOf, oneOfType, string } from 'prop-types';
 
-const autoOrHiddenOrVisible = oneOf(['auto', 'hidden', 'visible']);
-const hiddenOrVisible = oneOf(['hidden', 'visible']);
-
 module.exports = {
   ...AnimationPropTypes,
   ...BorderPropTypes,
   ...LayoutPropTypes,
   ...ShadowPropTypes,
   ...TransformPropTypes,
-  backfaceVisibility: hiddenOrVisible,
   backgroundColor: ColorPropType,
   opacity: number,
-  overflow: autoOrHiddenOrVisible,
-  zIndex: number,
   /**
    * @platform unsupported
    */
@@ -37,8 +31,6 @@ module.exports = {
   boxShadow: string,
   cursor: string,
   outline: string,
-  overflowX: autoOrHiddenOrVisible,
-  overflowY: autoOrHiddenOrVisible,
   perspective: oneOfType([number, string]),
   perspectiveOrigin: string,
   transitionDelay: string,
@@ -46,7 +38,6 @@ module.exports = {
   transitionProperty: string,
   transitionTimingFunction: string,
   userSelect: string,
-  visibility: hiddenOrVisible,
   willChange: string,
   WebkitOverflowScrolling: oneOf(['auto', 'touch'])
 };

src/propTypes/LayoutPropTypes.js

@@ -1,16 +1,39 @@
 import { number, oneOf, oneOfType, string } from 'prop-types';
+const OverflowPropType = oneOf(['auto', 'hidden', 'scroll', 'visible']);
+const hiddenOrVisible = oneOf(['hidden', 'visible']);
 const numberOrString = oneOfType([number, string]);
 
 const LayoutPropTypes = {
-  // box model
+  alignContent: oneOf([
+    'center',
+    'flex-end',
+    'flex-start',
+    'space-around',
+    'space-between',
+    'stretch'
+  ]),
+  alignItems: oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
+  alignSelf: oneOf(['auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
+  aspectRatio: number,
+  backfaceVisibility: hiddenOrVisible,
   borderWidth: numberOrString,
   borderBottomWidth: numberOrString,
   borderLeftWidth: numberOrString,
   borderRightWidth: numberOrString,
   borderTopWidth: numberOrString,
+  bottom: numberOrString,
   boxSizing: string,
+  direction: oneOf(['inherit', 'ltr', 'rtl']),
   display: string,
+  flex: number,
+  flexBasis: numberOrString,
+  flexDirection: oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
+  flexGrow: number,
+  flexShrink: number,
+  flexWrap: oneOf(['nowrap', 'wrap', 'wrap-reverse']),
   height: numberOrString,
+  justifyContent: oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between']),
+  left: numberOrString,
   margin: numberOrString,
   marginBottom: numberOrString,
   marginHorizontal: numberOrString,
@@ -22,6 +45,10 @@ const LayoutPropTypes = {
   maxWidth: numberOrString,
   minHeight: numberOrString,
   minWidth: numberOrString,
+  order: number,
+  overflow: OverflowPropType,
+  overflowX: OverflowPropType,
+  overflowY: OverflowPropType,
   padding: numberOrString,
   paddingBottom: numberOrString,
   paddingHorizontal: numberOrString,
@@ -29,32 +56,12 @@ const LayoutPropTypes = {
   paddingRight: numberOrString,
   paddingTop: numberOrString,
   paddingVertical: numberOrString,
-  width: numberOrString,
-  // flexbox
-  alignContent: oneOf([
-    'center',
-    'flex-end',
-    'flex-start',
-    'space-around',
-    'space-between',
-    'stretch'
-  ]),
-  alignItems: oneOf(['baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
-  alignSelf: oneOf(['auto', 'baseline', 'center', 'flex-end', 'flex-start', 'stretch']),
-  flex: number,
-  flexBasis: numberOrString,
-  flexDirection: oneOf(['column', 'column-reverse', 'row', 'row-reverse']),
-  flexGrow: number,
-  flexShrink: number,
-  flexWrap: oneOf(['nowrap', 'wrap', 'wrap-reverse']),
-  justifyContent: oneOf(['center', 'flex-end', 'flex-start', 'space-around', 'space-between']),
-  order: number,
-  // position
-  bottom: numberOrString,
-  left: numberOrString,
   position: oneOf(['absolute', 'fixed', 'relative', 'static']),
   right: numberOrString,
-  top: numberOrString
+  top: numberOrString,
+  visibility: hiddenOrVisible,
+  width: numberOrString,
+  zIndex: number
 };
 
 module.exports = LayoutPropTypes;