diff --git a/Libraries/StyleSheet/TransformPropTypes.js b/Libraries/StyleSheet/TransformPropTypes.js index 7cd6980573..2c797ae324 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 5a9ed809f5..97bf5a0c1e 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 21ad74ae20..23db73811f 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],