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;