Skip to content

Commit

Permalink
chore: stricter TS check for transform style (facebook#38348)
Browse files Browse the repository at this point in the history
Summary:
This improves the strictness of TS typings for `transform` on `View`'s `style` prop. Consider the following example, with what TS reports in case of errors, using RN 0.72.3. The ❌ / ✅ symbols indicate whether TS is happy with the code

```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} />              //  TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} />                  //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
✅ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} /> // this is WRONG, corrected in the next row
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```

With this change, TS will report an error even for line 4

```tsx
❌ <View style={{ transform: [{ scale: undefined }] }} />              //  TS2769: No overload matches this call.
❌ <View style={{ transform: [{ something: 1 }] }} />                  //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { rotate: '90deg' }] }} />
❌ <View style={{ transform: [{ scale: 1, translateX: 1 }] }} />      //  TS2769: No overload matches this call.
✅ <View style={{ transform: [{ scale: 1 }, { translateX: 1 }] }} />
```

## Changelog:

<!-- Help reviewers and the release process by writing your own changelog entry.

[GENERAL] [CHANGED] - stricter TS check for transform style

For more details, see:
https://reactnative.dev/contributing/changelogs-in-pull-requests

Pull Request resolved: facebook#38348

Test Plan: tested locally with the example given above; also added a TS type test

Reviewed By: rshest

Differential Revision: D47526366

Pulled By: NickGerleman

fbshipit-source-id: 5bd007ce29509ccdfce74c3864dee24290d9a175
  • Loading branch information
vonovak authored and facebook-github-bot committed Jul 18, 2023
1 parent 0cdb9e6 commit e414713
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 15 deletions.
34 changes: 19 additions & 15 deletions packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
/**
Expand Down
2 changes: 2 additions & 0 deletions packages/react-native/types/__typetests__/animated.tsx
Original file line number Diff 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>
);
}

0 comments on commit e414713

Please sign in to comment.