diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts index 17ab55d6bc9f..8593bf98c89f 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts +++ b/packages/react-native/Libraries/StyleSheet/StyleSheet.d.ts @@ -17,13 +17,7 @@ export interface StyleSheetProperties { type Falsy = undefined | null | false | ''; interface RecursiveArray extends Array | RecursiveArray> {} -/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle` and return `T`. */ -type RegisteredStyle = number & {__registeredStyleBrand: T}; -export type StyleProp = - | T - | RegisteredStyle - | RecursiveArray | Falsy> - | Falsy; +export type StyleProp = T | RecursiveArray | Falsy; type OpaqueColorValue = symbol & {__TYPE__: 'Color'}; export type ColorValue = string | OpaqueColorValue; @@ -127,24 +121,15 @@ export namespace StyleSheet { bottom: 0; } - /** - * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be - * used to create a customized entry in a `StyleSheet`, e.g.: - * - * const styles = StyleSheet.create({ - * wrapper: { - * ...StyleSheet.absoluteFillObject, - * top: 10, - * backgroundColor: 'transparent', - * }, - * }); - */ - export const absoluteFillObject: AbsoluteFillStyle; - /** * A very common pattern is to create overlays with position absolute and zero positioning, * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated * styles. */ - export const absoluteFill: RegisteredStyle; + export const absoluteFill: AbsoluteFillStyle; + + /** + * @deprecated Use `StyleSheet.absoluteFill`. + */ + export const absoluteFillObject: AbsoluteFillStyle; } diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js b/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js index e80111bd1f5b..c44af3c920c7 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js @@ -24,13 +24,7 @@ if (hairlineWidth === 0) { hairlineWidth = 1 / PixelRatio.get(); } -const absoluteFill: { - +bottom: 0, - +left: 0, - +position: 'absolute', - +right: 0, - +top: 0, -} = { +const absoluteFill = { position: 'absolute', left: 0, right: 0, @@ -108,7 +102,7 @@ export default { * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated * styles. */ - absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites. + absoluteFill, /** * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js.flow b/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js.flow index 7ef3056a0b83..031ca32d823d 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js.flow +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetExports.js.flow @@ -13,6 +13,14 @@ import type {____Styles_Internal} from './StyleSheetTypes'; import composeStyles from '../../src/private/styles/composeStyles'; import flattenStyle from './flattenStyle'; +type AbsoluteFillStyle = $ReadOnly<{ + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, +}>; + /** * This is defined as the width of a thin line on the platform. It can be * used as the thickness of a border or division between two elements. @@ -37,27 +45,12 @@ declare export const hairlineWidth: number; * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated * styles. */ -declare export const absoluteFill: any; +declare export const absoluteFill: AbsoluteFillStyle; /** - * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be - * used to create a customized entry in a `StyleSheet`, e.g.: - * - * const styles = StyleSheet.create({ - * wrapper: { - * ...StyleSheet.absoluteFillObject, - * top: 10, - * backgroundColor: 'transparent', - * }, - * }); + * @deprecated Use `StyleSheet.absoluteFill`. */ -declare export const absoluteFillObject: { - +bottom: 0, - +left: 0, - +position: 'absolute', - +right: 0, - +top: 0, -}; +declare export const absoluteFillObject: AbsoluteFillStyle; /** * Combines two styles such that style2 will override any styles in style1. diff --git a/packages/react-native/ReactNativeApi.d.ts b/packages/react-native/ReactNativeApi.d.ts index 8bdfc9fe64f5..8e91ff08b21a 100644 --- a/packages/react-native/ReactNativeApi.d.ts +++ b/packages/react-native/ReactNativeApi.d.ts @@ -4,7 +4,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * - * @generated SignedSource<<0170bc4ced1f6d3d4092d837027cd391>> + * @generated SignedSource<> * * This file was generated by scripts/js-api/build-types/index.js. */ @@ -94,14 +94,8 @@ declare const $$ScrollViewNativeComponent: typeof ScrollViewNativeComponent_defa declare const $$SwitchNativeComponent: ComponentType declare const $$TextInlineImageNativeComponent: typeof TextInlineImage_default declare const $$ViewNativeComponent: typeof ViewNativeComponent_default -declare const absoluteFill: any -declare const absoluteFillObject: { - readonly bottom: 0 - readonly left: 0 - readonly position: "absolute" - readonly right: 0 - readonly top: 0 -} +declare const absoluteFill: AbsoluteFillStyle +declare const absoluteFillObject: AbsoluteFillStyle declare const AccessibilityInfo: typeof AccessibilityInfo_default declare const AccessibilityInfo_default: { addEventListener( @@ -1033,6 +1027,13 @@ declare type $$TextInlineImageNativeComponent = declare type $$ViewNativeComponent = typeof $$ViewNativeComponent declare type absoluteFill = typeof absoluteFill declare type absoluteFillObject = typeof absoluteFillObject +declare type AbsoluteFillStyle = { + readonly bottom: 0 + readonly left: 0 + readonly position: "absolute" + readonly right: 0 + readonly top: 0 +} declare type AbstractImageAndroid = ( props: ImageProps & { ref?: React.Ref< @@ -4986,6 +4987,7 @@ declare type StyleProp = | void declare namespace StyleSheet { export { + AbsoluteFillStyle, hairlineWidth, absoluteFill, absoluteFillObject, @@ -6167,7 +6169,7 @@ export { StatusBarProps, // 06c98add StatusBarStyle, // 986b2051 StyleProp, // fa0e9b4a - StyleSheet, // 02b98c20 + StyleSheet, // 366689d4 SubmitBehavior, // c4ddf490 Switch, // aebc9941 SwitchChangeEvent, // 2e5bd2de