[fix] Animated support for string transforms

Fix #2528
Fix #2523
Close #2546
Close #2530

Author: necolas

packages/react-native-web/src/exports/StyleSheet/parseTransform.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ */
+
+function parsePixelValues(value: string): string | number {
+  if (value.indexOf('px') > -1) {
+    return parseFloat(value);
+  }
+  if (!Number.isNaN(Number(value))) {
+    return Number(value);
+  }
+  return value;
+}
+
+type TransformArray = Array<{ [key: string]: number | string }>;
+
+export function parseTransform(transformString: string): TransformArray {
+  if (transformString === 'none') {
+    return [];
+  }
+
+  const transforms = transformString.trim().split(/\) |\)/);
+  const transformsArray = [];
+
+  transforms.forEach((transform: string) => {
+    if (!transform) return;
+
+    const [nameString, transformValue] = transform.split('(');
+    const name = nameString.trim();
+    if (
+      // Skip 3d entirely for now, since React Native doesn't support most Z axis
+      name.indexOf('3d') > -1 ||
+      name === 'scaleZ' ||
+      name === 'skewZ' ||
+      name === 'translateZ'
+    ) {
+      console.error(
+        `React Strict DOM: transform "${name}" is not supported by React Native`
+      );
+      return;
+    }
+
+    const valueArray = transformValue.split(',');
+    const values = valueArray.map((val) => {
+      return parsePixelValues(
+        val.indexOf(')') === val.length - 1 ? val.replace(')', '') : val.trim()
+      );
+    });
+    const value = values.length === 1 ? values[0] : values;
+    transformsArray.push({ [name]: value });
+  });
+
+  return transformsArray;
+}

packages/react-native-web/src/vendor/react-native/Animated/nodes/AnimatedStyle.js

@@ -16,6 +16,7 @@ import AnimatedWithChildren from './AnimatedWithChildren';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
 import StyleSheet from '../../../../exports/StyleSheet';
+import { parseTransform } from '../../../../exports/StyleSheet/parseTransform';
 
 const flattenStyle = StyleSheet.flatten;
 
@@ -24,8 +25,8 @@ function createAnimatedStyle(inputStyle: any): Object {
   const animatedStyles = {}
   for (const key in style) {
     const value = style[key];
-    if (key === 'transform') {
-      animatedStyles[key] = new AnimatedTransform(value);
+    if (key === 'transform' && value != null) {
+      animatedStyles[key] = new AnimatedTransform(typeof value === 'string' ? parseTransform(value) : value);
     }
     else if (value instanceof AnimatedNode) {
       animatedStyles[key] = value;