Enable animating transform matrix (#36935)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/36935

With the addition of AnimatedObject, animating prop values with arbitrary map/array nestings are possible (including transform matrix).

Note: this is only enabled when ReactNativeFeatureFlags.useAnimatedObjectForTransform is true.

Changelog:
[General][Added] - Enable animating skew in transforms with native driver

Reviewed By: mdvacca

Differential Revision: D45055381

fbshipit-source-id: 1b9224c0603ca7e89cd6f220d38a4579a4722e02

packages/react-native/Libraries/Animated/NativeAnimatedHelper.js

@@ -425,6 +425,7 @@ const SUPPORTED_TRANSFORMS = {
   rotateY: true,
   rotateZ: true,
   perspective: true,
+  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
 };
 
 const SUPPORTED_INTERPOLATION_PARAMS = {
@@ -451,19 +452,19 @@ function addWhitelistedInterpolationParam(param: string): void {
 }
 
 function isSupportedColorStyleProp(prop: string): boolean {
-  return SUPPORTED_COLOR_STYLES.hasOwnProperty(prop);
+  return SUPPORTED_COLOR_STYLES[prop] === true;
 }
 
 function isSupportedStyleProp(prop: string): boolean {
-  return SUPPORTED_STYLES.hasOwnProperty(prop);
+  return SUPPORTED_STYLES[prop] === true;
 }
 
 function isSupportedTransformProp(prop: string): boolean {
-  return SUPPORTED_TRANSFORMS.hasOwnProperty(prop);
+  return SUPPORTED_TRANSFORMS[prop] === true;
 }
 
 function isSupportedInterpolationParam(param: string): boolean {
-  return SUPPORTED_INTERPOLATION_PARAMS.hasOwnProperty(param);
+  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
 }
 
 function validateTransform(

packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js

@@ -12,6 +12,7 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
+import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
@@ -30,7 +31,10 @@ function createAnimatedStyle(
   for (const key in style) {
     const value = style[key];
     if (key === 'transform') {
-      animatedStyles[key] = new AnimatedTransform(value);
+      animatedStyles[key] =
+        ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform()
+          ? new AnimatedObject(value)
+          : new AnimatedTransform(value);
     } else if (value instanceof AnimatedNode) {
       animatedStyles[key] = value;
     } else if (hasAnimatedNode(value)) {

packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js

@@ -45,6 +45,10 @@ export type FeatureFlags = {|
    * Enables access to the host tree in Fabric using DOM-compatible APIs.
    */
   enableAccessToHostTreeInFabric: () => boolean,
+  /**
+   * Enables use of AnimatedObject for animating transform values.
+   */
+  shouldUseAnimatedObjectForTransform: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -55,6 +59,7 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   animatedShouldUseSingleOp: () => false,
   isGlobalWebPerformanceLoggerEnabled: () => false,
   enableAccessToHostTreeInFabric: () => false,
+  shouldUseAnimatedObjectForTransform: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;