diff --git a/packages/react-native/__typetests__/stylesheet-image-style.tsx b/packages/react-native/__typetests__/stylesheet-image-style.tsx new file mode 100644 index 000000000000..f8d61fcaea7f --- /dev/null +++ b/packages/react-native/__typetests__/stylesheet-image-style.tsx @@ -0,0 +1,84 @@ +/** + * 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 + */ + +import * as React from 'react'; +// @ts-ignore +import {Image, StyleSheet, type ImageStyle} from 'react-native'; + +// `ImageStyle` must accept every `ViewStyle` property. This matches the Flow +// definition of `____ImageStyle_InternalCore`, which spreads +// `____ViewStyle_Internal`, and the generated strict API, which declares +// `Omit<____ViewStyle_Internal, 'overflow'> & {...}`. +const viewStyleProperties: ImageStyle = { + backgroundImage: 'linear-gradient(to right, red, blue)', + borderCurve: 'continuous', + boxShadow: '0 0 10px red', + cursor: 'pointer', + elevation: 4, + filter: 'brightness(0.5)', + isolation: 'isolate', + mixBlendMode: 'multiply', + outlineColor: 'red', + outlineOffset: 2, + outlineStyle: 'dashed', + outlineWidth: 1, + pointerEvents: 'none', +}; + +// Image-specific properties remain available. +const imageStyleProperties: ImageStyle = { + objectFit: 'contain', + overlayColor: 'red', + resizeMode: 'cover', + tintColor: 'blue', +}; + +// Unlike `ViewStyle`, `overflow` on `ImageStyle` is narrowed to +// 'visible' | 'hidden' — 'scroll' is not accepted. +const overflowVisible: ImageStyle = {overflow: 'visible'}; +const overflowHidden: ImageStyle = {overflow: 'hidden'}; +// @ts-expect-error - 'scroll' is not a valid `overflow` value for `ImageStyle` +const overflowScroll: ImageStyle = {overflow: 'scroll'}; + +// Unknown properties are still rejected. +// @ts-expect-error - 'notAStyleProperty' does not exist on `ImageStyle` +const unknownProperty: ImageStyle = {notAStyleProperty: 1}; + +const styles = StyleSheet.create({ + image: { + boxShadow: '0 0 10px red', + filter: 'brightness(0.5)', + resizeMode: 'cover', + } as ImageStyle, +}); + +export function App() { + return ( + <> + + {/* The user-visible path: writing `ViewStyle` properties inline on ``. */} + + + ); +} + +export { + imageStyleProperties, + overflowHidden, + overflowScroll, + overflowVisible, + unknownProperty, + viewStyleProperties, +}; 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 8e17f07e04fc..b2de7a7d1eef 100644 --- a/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/types_DEPRECATED/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -638,20 +638,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 Omit { 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; }