diff --git a/packages/react-native/__typetests__/stylesheet-style-props.tsx b/packages/react-native/__typetests__/stylesheet-style-props.tsx new file mode 100644 index 000000000000..30d412b06593 --- /dev/null +++ b/packages/react-native/__typetests__/stylesheet-style-props.tsx @@ -0,0 +1,104 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +// The hand-written legacy ImageStyle and TextStyle must accept every ViewStyle +// prop, as the generated (strict API) types do. ImageStyle only narrows +// `overflow`. See https://github.com/facebook/react-native/issues/52957 + +import * as React from 'react'; +// @ts-ignore +import { + Image, + View, + type ImageStyle, + type TextStyle, + type ViewStyle, +} from 'react-native'; + +type MissingKeys = Exclude; + +// On failure, the error names every ViewStyle prop the target type lacks. +const imageStyleHasAllViewStyleKeys: [ + MissingKeys>, +] extends [never] + ? true + : MissingKeys> = true; + +const textStyleHasAllViewStyleKeys: [ + MissingKeys, +] extends [never] + ? true + : MissingKeys = true; + +function viewStyleToImageStyle(style: Omit): ImageStyle { + return style; +} + +const imageStyle: ImageStyle = { + borderBlockColor: 'red', + borderBlockEndColor: 'red', + borderBlockStartColor: 'red', + borderBottomColor: 'red', + borderEndColor: 'red', + borderLeftColor: 'red', + borderRightColor: 'red', + borderStartColor: 'red', + borderTopColor: 'red', + borderBottomEndRadius: 4, + borderBottomStartRadius: 4, + borderEndEndRadius: 4, + borderEndStartRadius: 4, + borderStartEndRadius: 4, + borderStartStartRadius: 4, + borderTopEndRadius: 4, + borderTopStartRadius: 4, + borderCurve: 'continuous', + borderStyle: 'dashed', + outlineColor: 'blue', + outlineOffset: 2, + outlineStyle: 'solid', + outlineWidth: 1, + elevation: 2, + pointerEvents: 'none', + isolation: 'isolate', + boxShadow: '0 2px 4px black', + filter: 'blur(4px)', + mixBlendMode: 'multiply', + backgroundImage: 'linear-gradient(red, blue)', + experimental_backgroundImage: 'linear-gradient(red, blue)', + backgroundSize: '50% 50%', + experimental_backgroundSize: '50% 50%', + backgroundPosition: 'center', + experimental_backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', + experimental_backgroundRepeat: 'no-repeat', +}; + +const imageStyleWithScrollOverflow: ImageStyle = { + // @ts-expect-error Image does not support `overflow: 'scroll'`. + overflow: 'scroll', +}; + +const imageStyleWithTextProp: ImageStyle = { + // @ts-expect-error `fontSize` is not an Image style prop. + fontSize: 12, +}; + +const viewStyle: ViewStyle = { + backgroundColor: 'white', +}; + +export function App() { + return ( + + + + + ); +} diff --git a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts index 4aa9f68b437d..478e9d092195 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -649,20 +649,10 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle { * Image style * @see https://reactnative.dev/docs/image#style */ -export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { +export interface ImageStyle extends ViewStyle { resizeMode?: ImageResizeMode | undefined; - backfaceVisibility?: 'visible' | 'hidden' | undefined; - borderBottomLeftRadius?: AnimatableNumericValue | string | undefined; - borderBottomRightRadius?: AnimatableNumericValue | string | undefined; - backgroundColor?: ColorValue | undefined; - borderColor?: ColorValue | undefined; - borderRadius?: AnimatableNumericValue | string | undefined; - borderTopLeftRadius?: AnimatableNumericValue | string | undefined; - borderTopRightRadius?: AnimatableNumericValue | string | undefined; overflow?: 'visible' | 'hidden' | undefined; overlayColor?: ColorValue | undefined; tintColor?: ColorValue | undefined; - opacity?: AnimatableNumericValue | undefined; objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none' | undefined; - cursor?: CursorValue | undefined; }