Enable animating skew in transforms with native driver

Summary: Skew is already supported on the platform side; there's no reason to disable animating it. Changelog: [General][Added] - Enable animating skew in transforms with native driver Differential Revision: D45053914 fbshipit-source-id: 5379d39927f0e18b90e3b540944b5846defa383c
facebook · Apr 17, 2023 · 6528f41 · 6528f41
1 parent 72d2880
commit 6528f41
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 18 deletions.
diff --git a/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js b/packages/react-native/Libraries/Animated/NativeAnimatedHelper.js
@@ -425,6 +425,8 @@ const SUPPORTED_TRANSFORMS = {
   rotateY: true,
   rotateZ: true,
   perspective: true,
+  skewX: true,
+  skewY: true,
 };
 
 const SUPPORTED_INTERPOLATION_PARAMS = {
@@ -451,19 +453,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/StyleSheet/private/_TransformStyle.js b/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,

diff --git a/packages/rn-tester/js/examples/Animated/TransformStylesExample.js b/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);