Add skewX and skewY to the transform style options

Summary: Closes https://github.com/facebook/react-native/pull/2652

Reviewed By: @​trunkagent, @​svcscm

Differential Revision: D2437758

Pulled By: @vjeux

Libraries/StyleSheet/TransformPropTypes.js

@@ -25,7 +25,9 @@ var TransformPropTypes = {
       ReactPropTypes.shape({scaleX: ReactPropTypes.number}),
       ReactPropTypes.shape({scaleY: ReactPropTypes.number}),
       ReactPropTypes.shape({translateX: ReactPropTypes.number}),
-      ReactPropTypes.shape({translateY: ReactPropTypes.number})
+      ReactPropTypes.shape({translateY: ReactPropTypes.number}),
+      ReactPropTypes.shape({skewX: ReactPropTypes.string}),
+      ReactPropTypes.shape({skewY: ReactPropTypes.string})
     ])
   ),
   transformMatrix: ReactPropTypes.arrayOf(ReactPropTypes.number),

Libraries/StyleSheet/precomputeStyle.js

@@ -128,6 +128,12 @@ function _precomputeTransforms(style: Object): Object {
       case 'translateY':
         _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [0, value]);
         break;
+      case 'skewX':
+        _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [_convertToRadians(value)]);
+        break;
+      case 'skewY':
+        _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [_convertToRadians(value)]);
+        break;
       default:
         throw new Error('Invalid transform name: ' + key);
     }
@@ -209,6 +215,8 @@ function _validateTransform(key, value, transformation) {
     case 'rotateY':
     case 'rotateZ':
     case 'rotate':
+    case 'skewX':
+    case 'skewY':
       invariant(
         typeof value === 'string',
         'Transform with key of "%s" must be a string: %s',

Libraries/Utilities/MatrixMath.js

@@ -157,6 +157,16 @@ var MatrixMath = {
     return mat;
   },
 
+  reuseSkewXCommand: function(matrixCommand, radians) {
+    matrixCommand[4] = Math.sin(radians);
+    matrixCommand[5] = Math.cos(radians);
+  },
+
+  reuseSkewYCommand: function(matrixCommand, radians) {
+    matrixCommand[0] = Math.cos(radians);
+    matrixCommand[1] = Math.sin(radians);
+  },
+
   multiplyInto: function(out, a, b) {
     var a00 = a[0], a01 = a[1], a02 = a[2], a03 = a[3],
       a10 = a[4], a11 = a[5], a12 = a[6], a13 = a[7],