From 58e217118ed7a7a8995af4e60e20247ebad3fea2 Mon Sep 17 00:00:00 2001
From: Genki Kondo <gkondo@meta.com>
Date: Tue, 18 Apr 2023 09:20:46 -0700
Subject: [PATCH] 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
---
 .../Libraries/Animated/NativeAnimatedHelper.js           | 9 +++++----
 .../Libraries/Animated/nodes/AnimatedStyle.js            | 6 +++++-
 .../Libraries/ReactNative/ReactNativeFeatureFlags.js     | 5 +++++
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js b/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js
index e96cbd75c16e7e..58eed675d949d9 100644
--- a/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js
+++ b/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(
diff --git a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js b/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
index 86a100f485e32e..8fdc6532aeb2e3 100644
--- a/packages/react-native/Libraries/Animated/nodes/AnimatedStyle.js
+++ b/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)) {
diff --git a/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js b/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js
index 8881d287fe5727..2dafd7de630c41 100644
--- a/packages/react-native/Libraries/ReactNative/ReactNativeFeatureFlags.js
+++ b/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;