Enable animating skew in transforms with native driver (#36933)

Summary: Pull Request resolved: #36933 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 Reviewed By: mdvacca Differential Revision: D45053914 fbshipit-source-id: 31198c35eeb55211a3ff88c968707db65b025f49
facebook · Apr 18, 2023 · 645b643 · 645b643
1 parent e2e59c4
commit 645b643
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 14 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,
   matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
 };
 

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);