From 74f467b00a12ba2ff7008443b958e445d74dfa8d Mon Sep 17 00:00:00 2001
From: Jason Brown <browniefed@gmail.com>
Date: Wed, 23 Sep 2015 20:03:16 -0700
Subject: [PATCH] Add skewX and skewY to the transform style options
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Reviewed By: @​trunkagent, @​svcscm

Differential Revision: D2437758

Pulled By: @vjeux
---
 Libraries/StyleSheet/TransformPropTypes.js |  4 +++-
 Libraries/StyleSheet/precomputeStyle.js    |  8 ++++++++
 Libraries/Utilities/MatrixMath.js          | 10 ++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/Libraries/StyleSheet/TransformPropTypes.js b/Libraries/StyleSheet/TransformPropTypes.js
index 7cd698057..2c797ae32 100644
--- a/Libraries/StyleSheet/TransformPropTypes.js
+++ b/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),
diff --git a/Libraries/StyleSheet/precomputeStyle.js b/Libraries/StyleSheet/precomputeStyle.js
index 5a9ed809f..97bf5a0c1 100644
--- a/Libraries/StyleSheet/precomputeStyle.js
+++ b/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',
diff --git a/Libraries/Utilities/MatrixMath.js b/Libraries/Utilities/MatrixMath.js
index 21ad74ae2..23db73811 100755
--- a/Libraries/Utilities/MatrixMath.js
+++ b/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],