Skip to content

Commit

Permalink
fix(TypeScript): Allow readonly arrays in transform (#46310)
Browse files Browse the repository at this point in the history
Summary:
Currently readonly arrays aren't allowed in components' style, but readonly objects are accepted. This becomes evident in such case:

```ts
import { View } from 'react-native';

interface AppProps {
  transform: readonly ({ translateX: number } | { translateY: number })[];
  shadowOffset: Readonly<{ width: number; height: number }>;
}

export default function App({ transform, shadowOffset }: AppProps) {
  return (
    <>
      {/* TypeScript error with transform */}
      <View style={{ transform }} />
      {/* No errors with shadowOffset */}
      <View style={{ shadowOffset }} />
    </>
  );
}
```

## Changelog:

[GENERAL] [FIXED] - Allow readonly array type for transform property

Pull Request resolved: #46310

Test Plan:
`yarn test-typescript`

I added relevant tests cases.

Reviewed By: robhogan

Differential Revision: D62140462

Pulled By: NickGerleman

fbshipit-source-id: 87374b0901ebc40cab48d442b61fe7a65711bc89
  • Loading branch information
tjzel authored and cipolleschi committed Sep 11, 2024
1 parent d4bb582 commit bfb7e16
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 16 deletions.
32 changes: 17 additions & 15 deletions packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -182,21 +182,23 @@ type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T

export interface TransformsStyle {
transform?:
| MaximumOneOf<
PerspectiveTransform &
RotateTransform &
RotateXTransform &
RotateYTransform &
RotateZTransform &
ScaleTransform &
ScaleXTransform &
ScaleYTransform &
TranslateXTransform &
TranslateYTransform &
SkewXTransform &
SkewYTransform &
MatrixTransform
>[]
| Readonly<
MaximumOneOf<
PerspectiveTransform &
RotateTransform &
RotateXTransform &
RotateYTransform &
RotateZTransform &
ScaleTransform &
ScaleXTransform &
ScaleYTransform &
TranslateXTransform &
TranslateYTransform &
SkewXTransform &
SkewYTransform &
MatrixTransform
>[]
>
| string
| undefined;
transformOrigin?: Array<string | number> | string | undefined;
Expand Down
14 changes: 13 additions & 1 deletion packages/react-native/types/__typetests__/stylesheet-create.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import * as React from 'react';
import {View, StyleSheet} from 'react-native';
import {View, StyleSheet, type ShadowStyleIOS} from 'react-native';

export function App() {
return <View style={styles.container} />;
Expand Down Expand Up @@ -40,3 +40,15 @@ const styles2 = StyleSheet.create({
magrinRight: 1,
},
});

const shadowOffsetConst: Readonly<ShadowStyleIOS['shadowOffset']> = {
width: 1,
height: 2,
};

const styles3 = StyleSheet.create({
transforms: {
transform: [{translateX: 40}] as const,
shadowOffset: shadowOffsetConst,
},
});

0 comments on commit bfb7e16

Please sign in to comment.