diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts index 9446cbe4a2487d..f572cade2318cb 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts @@ -367,7 +367,7 @@ export type BlendMode = | 'color' | 'luminosity'; -export type GradientValue = { +export type LinearGradientValue = { type: 'linear-gradient'; // Angle or direction enums direction?: string | undefined; @@ -377,6 +377,89 @@ export type GradientValue = { }>; }; +export type GradientValue = LinearGradientValue; + +type RadialExtent = + | 'closest-corner' + | 'closest-side' + | 'farthest-corner' + | 'farthest-side'; +export type RadialGradientPosition = + | { + top: number | string; + left: number | string; + } + | { + top: number | string; + right: number | string; + } + | { + bottom: number | string; + left: number | string; + } + | { + bottom: number | string; + right: number | string; + }; + +export type RadialGradientShape = 'circle' | 'ellipse'; +export type RadialGradientSize = + | RadialExtent + | { + x: string | number; + y: string | number; + }; + +type RadialGradientValue = { + type: 'radial-gradient'; + shape: RadialGradientShape; + size: RadialGradientSize; + position: RadialGradientPosition; + colorStops: ReadonlyArray<{ + color: ColorValue | null; + positions?: ReadonlyArray | undefined; + }>; +}; + +export type BackgroundImageValue = LinearGradientValue | RadialGradientValue; + +export type BackgroundSizeValue = + | { + x: string | number; + y: string | number; + } + | 'cover' + | 'contain'; + +export type BackgroundRepeatKeyword = + | 'repeat' + | 'space' + | 'round' + | 'no-repeat'; + +export type BackgroundPositionValue = + | { + top: number | string; + left: number | string; + } + | { + top: number | string; + right: number | string; + } + | { + bottom: number | string; + left: number | string; + } + | { + bottom: number | string; + right: number | string; + }; + +export type BackgroundRepeatValue = { + x: BackgroundRepeatKeyword; + y: BackgroundRepeatKeyword; +}; + /** * @see https://reactnative.dev/docs/view#style */ @@ -440,6 +523,18 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle { | ReadonlyArray | string | undefined; + experimental_backgroundSize?: + | ReadonlyArray + | string + | undefined; + experimental_backgroundPosition?: + | ReadonlyArray + | string + | undefined; + experimental_backgroundRepeat?: + | ReadonlyArray + | string + | undefined; } export type FontVariant =