Add Basic support to transform props, including translate, rotate, scale, skewX, skewY and matrix. Keep in mind that the current implementation doesn't support 3-arguments rotate(a, x, y) transform yet.

README.md

@@ -801,7 +801,7 @@ npm i
 3. Mask element.
 4. Marker element.
 5. Load Image from URL.
-6. Transform prop support.
+6. ~~Transform prop support~~.
 
 ### Known issues:
 1. Unable to apply focus point of RadialGradient on Android.

lib/extract/extractProps.js

@@ -24,11 +24,7 @@ export default function(props, ref) {
     Object.assign(extractedProps, extractStroke(props, styleProperties));
     Object.assign(extractedProps, extractFill(props, styleProperties));
 
-    if (props.transform) {
-        extractedProps.matrix = extractTransform(props.transform);
-    } else {
-        extractedProps.matrix = extractTransform(props);
-    }
+    extractedProps.matrix = extractTransform(props);
 
     Object.assign(extractedProps, extractResponder(props, ref));
 

lib/extract/extractTransform.js

@@ -13,18 +13,109 @@ function transformToMatrix(props, transform) {
     return pooledMatrix.toArray();
 }
 
+class TransformParser {
+    constructor() {
+        var floating = '(\\-?[\\d\\.e]+)';
+        var commaSpace = '\\,?\\s*';
+
+        this.regex = {
+          split: /[\s*(\s*|\s*)\s*|\s*,\s*]/,
+          matrix: new RegExp(
+            '^matrix\\(' +
+              floating + commaSpace +
+              floating + commaSpace +
+              floating + commaSpace +
+              floating + commaSpace +
+              floating + commaSpace +
+              floating + '\\)$')
+        };
+    }
+
+    parse(transform) {
+        if (transform) {
+            var retval = {};
+            let transLst = _.filter(
+              transform.split(this.regex.split),
+              (ele) => {
+                return ele !== "";
+              }
+            );
+            for (let i=0; i<transLst.length; i++) {
+                let trans = transLst[i];
+                switch (trans) {
+                    case "matrix":
+                        if (i+7 <= transLst.length) {
+                            retval.matrix = _.map((transLst.slice(i+1,i+7)), parseFloat);
+                        }
+                        break;
+                    case "translate":
+                        retval.translateX = transLst[i+1];
+                        retval.translateY = (i+2 <= transLst.length) ? transLst[i+2] : 0;
+                        break;
+                    case "scale":
+                        retval.scaleX = transLst[i+1];
+                        retval.scaleY = (i+2 <= transLst.length) ? transLst[i+2] : retval.scaleX;
+                        break;
+                    case "rotate":
+                        retval.rotation = transLst[i+1];
+                        break;
+                    case "skewX":
+                        retval.skewX = transLst[i+1];
+                        break;
+                    case "skewY":
+                        retval.skewY = transLst[i+1];
+                        break;
+                    default:
+                        break;
+                }
+            }
+            return retval;
+        }
+    }
+
+    parseMatrix(transform) {
+        var matrix = this.regex.matrix.exec(transform);
+        if (matrix) {
+            matrix.shift();
+            for (var i = matrix.length-1; i >= 0 ; i--) {
+                matrix[i] = parseFloat(matrix[i]);
+            };
+        }
+        return matrix;
+    }
+}
+
+const tp = new TransformParser();
+
+
 function appendTransform(transform) {
-    pooledMatrix
-        .appendTransform(
-            transform.x + transform.originX,
-            transform.y + transform.originY,
-            transform.scaleX, transform.scaleY,
-            transform.rotation,
-            transform.skewX,
-            transform.skewY,
-            transform.originX,
-            transform.originY
-        );
+    if (transform) {
+        if (typeof transform === "string") {
+            var transformParsed = tp.parse(transform);
+            if (transformParsed.matrix) {
+                pooledMatrix.append(...transformParsed.matrix);
+            }
+            else {
+                let trans = props2transform(transformParsed);
+                if (typeof trans !== 'string') {
+                    transform = trans;
+                }
+            }
+        }
+        if (typeof transform !== "string") {
+            pooledMatrix
+                .appendTransform(
+                    transform.x + transform.originX,
+                    transform.y + transform.originY,
+                    transform.scaleX, transform.scaleY,
+                    transform.rotation,
+                    transform.skewX,
+                    transform.skewY,
+                    transform.originX,
+                    transform.originY
+                );
+        }
+    }
 }
 
 function universal2axis(universal, axisX, axisY, defaultValue) {
@@ -57,13 +148,16 @@ function universal2axis(universal, axisX, axisY, defaultValue) {
 }
 
 function props2transform(props) {
+    if (props && (typeof props === "string")) {
+      return props;
+    }
     let [originX, originY] = universal2axis(props.origin, props.originX, props.originY);
     let [scaleX, scaleY] = universal2axis(props.scale, props.scaleX, props.scaleY, 1);
     let [skewX, skewY] = universal2axis(props.skew, props.skewX, props.skewY);
     let [translateX, translateY] = universal2axis(
         props.translate,
-        _.isNil(props.translateX) ? props.x : props.translateX,
-        _.isNil(props.translateY) ? props.y : props.translateY
+        _.isNil(props.translateX) ? (props.x || 0): props.translateX,
+        _.isNil(props.translateY) ? (props.y || 0) : props.translateY
     );
 
     return {