chore: stricter TS check for transform style

facebook · Jul 14, 2023 · 50cc6bf · 50cc6bf
1 parent 06668fc
commit 50cc6bf
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -173,23 +173,27 @@ interface MatrixTransform {
   matrix: AnimatableNumericValue[];
 }
 
+type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
+  ? {[P in K]: T[K]} & {[P in Exclude<keyof T, K>]?: never}
+  : never;
+
 export interface TransformsStyle {
   transform?:
-    | (
-        | PerpectiveTransform
-        | RotateTransform
-        | RotateXTransform
-        | RotateYTransform
-        | RotateZTransform
-        | ScaleTransform
-        | ScaleXTransform
-        | ScaleYTransform
-        | TranslateXTransform
-        | TranslateYTransform
-        | SkewXTransform
-        | SkewYTransform
-        | MatrixTransform
-      )[]
+    | MaximumOneOf<
+        PerpectiveTransform &
+          RotateTransform &
+          RotateXTransform &
+          RotateYTransform &
+          RotateZTransform &
+          ScaleTransform &
+          ScaleXTransform &
+          ScaleYTransform &
+          TranslateXTransform &
+          TranslateYTransform &
+          SkewXTransform &
+          SkewYTransform &
+          MatrixTransform
+      >[]
     | string
     | undefined;
   /**

diff --git a/packages/react-native/types/__typetests__/animated.tsx b/packages/react-native/types/__typetests__/animated.tsx
@@ -237,6 +237,8 @@ function TestAnimatedAPI() {
         }}
       />
       ;
+      {/* @ts-expect-error the transform object must contain only one key-value pair */}
+      <Animated.View style={{transform: [{scale: 1, translateX: 20}]}} />;
     </View>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -237,6 +237,8 @@ function TestAnimatedAPI() { @@
             }}
           />
           ;
+          {/* @ts-expect-error the transform object must contain only one key-value pair */}
+          <Animated.View style={{transform: [{scale: 1, translateX: 20}]}} />;
         </View>
       );
     }