Enable animating skew in transforms with native driver

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

@@ -425,6 +425,9 @@ const SUPPORTED_TRANSFORMS = {
   rotateY: true,
   rotateZ: true,
   perspective: true,
+  skewX: true,
+  skewY: true,
+  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
 };
 
 const SUPPORTED_INTERPOLATION_PARAMS = {
@@ -451,19 +454,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/AnimatedProps.js

@@ -12,7 +12,6 @@
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import ReactNativeFeatureFlags from '../../ReactNative/ReactNativeFeatureFlags';
 import {findNodeHandle} from '../../ReactNative/RendererProxy';
 import {AnimatedEvent} from '../AnimatedEvent';
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
@@ -29,10 +28,7 @@ function createAnimatedProps(inputProps: Object): Object {
       props[key] = new AnimatedStyle(value);
     } else if (value instanceof AnimatedNode) {
       props[key] = value;
-    } else if (
-      ReactNativeFeatureFlags.isAnimatedObjectEnabled &&
-      hasAnimatedNode(value)
-    ) {
+    } else if (hasAnimatedNode(value)) {
       props[key] = new AnimatedObject(value);
     } else {
       props[key] = value;

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

@@ -31,13 +31,13 @@ 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 (
-      ReactNativeFeatureFlags.isAnimatedObjectEnabled &&
-      hasAnimatedNode(value)
-    ) {
+    } else if (hasAnimatedNode(value)) {
       animatedStyles[key] = new AnimatedObject(value);
     } else if (keepUnanimatedValues) {
       animatedStyles[key] = value;

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

@@ -46,9 +46,9 @@ export type FeatureFlags = {|
    */
   enableAccessToHostTreeInFabric: () => boolean,
   /**
-   * Enables animating object and array prop values.
+   * Enables use of AnimatedObject for animating transform values.
    */
-  isAnimatedObjectEnabled: () => boolean,
+  shouldUseAnimatedObjectForTransform: () => boolean,
 |};
 
 const ReactNativeFeatureFlags: FeatureFlags = {
@@ -59,7 +59,7 @@ const ReactNativeFeatureFlags: FeatureFlags = {
   animatedShouldUseSingleOp: () => false,
   isGlobalWebPerformanceLoggerEnabled: () => false,
   enableAccessToHostTreeInFabric: () => false,
-  isAnimatedObjectEnabled: () => false,
+  shouldUseAnimatedObjectForTransform: () => false,
 };
 
 module.exports = ReactNativeFeatureFlags;

packages/react-native/Libraries/StyleSheet/private/_TransformStyle.js

@@ -44,8 +44,8 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
               | [number | AnimatedNode, number | AnimatedNode]
               | AnimatedNode,
           |}
-        | {|+skewX: string|}
-        | {|+skewY: string|}
+        | {|+skewX: string | AnimatedNode|}
+        | {|+skewY: string | AnimatedNode|}
         // TODO: what is the actual type it expects?
         | {|
             +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,

packages/rn-tester/js/examples/Animated/TransformStylesExample.js

@@ -74,10 +74,6 @@ function AnimatedView({
   );
 }
 
-function notSupportedByNativeDriver(property: string) {
-  return property === 'skewX' || property === 'skewY';
-}
-
 function AnimatedTransformStyleExample(): React.Node {
   const [properties, setProperties] = React.useState(transformProperties);
   const [useNativeDriver, setUseNativeDriver] = React.useState(false);
@@ -109,9 +105,6 @@ function AnimatedTransformStyleExample(): React.Node {
                 key={property}
                 label={property}
                 multiSelect
-                disabled={
-                  notSupportedByNativeDriver(property) && useNativeDriver
-                }
                 selected={properties[property].selected}
                 onPress={() => {
                   onToggle(property);
@@ -127,9 +120,7 @@ function AnimatedTransformStyleExample(): React.Node {
         useNativeDriver={useNativeDriver}
         // $FlowFixMe[incompatible-call]
         properties={Object.keys(properties).filter(
-          property =>
-            properties[property].selected &&
-            !(useNativeDriver && notSupportedByNativeDriver(property)),
+          property => properties[property].selected,
         )}
       />
     </View>
@@ -163,7 +154,6 @@ const styles = StyleSheet.create({
 export default ({
   title: 'Transform Styles',
   name: 'transformStyles',
-  description:
-    'Variations of transform styles. `skewX` and `skewY` are not supported on native driver.',
+  description: 'Variations of transform styles.',
   render: () => <AnimatedTransformStyleExample />,
 }: RNTesterModuleExample);