Skip to content

Commit 4f0d295

Browse files
tjzelblakef
authored andcommitted
fix(TypeScript): Allow readonly arrays in transform (#46310)
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
1 parent 5e6fed3 commit 4f0d295

2 files changed

Lines changed: 30 additions & 16 deletions

File tree

packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -182,21 +182,23 @@ type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
182182

183183
export interface TransformsStyle {
184184
transform?:
185-
| MaximumOneOf<
186-
PerspectiveTransform &
187-
RotateTransform &
188-
RotateXTransform &
189-
RotateYTransform &
190-
RotateZTransform &
191-
ScaleTransform &
192-
ScaleXTransform &
193-
ScaleYTransform &
194-
TranslateXTransform &
195-
TranslateYTransform &
196-
SkewXTransform &
197-
SkewYTransform &
198-
MatrixTransform
199-
>[]
185+
| Readonly<
186+
MaximumOneOf<
187+
PerspectiveTransform &
188+
RotateTransform &
189+
RotateXTransform &
190+
RotateYTransform &
191+
RotateZTransform &
192+
ScaleTransform &
193+
ScaleXTransform &
194+
ScaleYTransform &
195+
TranslateXTransform &
196+
TranslateYTransform &
197+
SkewXTransform &
198+
SkewYTransform &
199+
MatrixTransform
200+
>[]
201+
>
200202
| string
201203
| undefined;
202204
transformOrigin?: Array<string | number> | string | undefined;

packages/react-native/types/__typetests__/stylesheet-create.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
*/
99

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

1313
export function App() {
1414
return <View style={styles.container} />;
@@ -40,3 +40,15 @@ const styles2 = StyleSheet.create({
4040
magrinRight: 1,
4141
},
4242
});
43+
44+
const shadowOffsetConst: Readonly<ShadowStyleIOS['shadowOffset']> = {
45+
width: 1,
46+
height: 2,
47+
};
48+
49+
const styles3 = StyleSheet.create({
50+
transforms: {
51+
transform: [{translateX: 40}] as const,
52+
shadowOffset: shadowOffsetConst,
53+
},
54+
});

0 commit comments

Comments
 (0)