Deprecate StyleSheet.absoluteFillObject (facebook#53530)

Summary:
Pull Request resolved: facebook#53530

Deprecate the `StyleSheet.absoluteFillObject` API in favour of `StyleSheet.absoluteFill` (functionally identical).

Secondly, refine the type definitions in our source code (and Strict TS API) from `any` → `AbsoluteFillStyle` — resolves facebook#53470.

This will be followed with updates to our docs.

Changelog:
[General][Deprecated] - `StyleSheet.absoluteFillObject` is deprecated in favor of `StyleSheet.absoluteFill` (equivalent).

Reviewed By: yungsters

Differential Revision: D81327548

fbshipit-source-id: 2bcf14694dc1bd959419629ce717760086b80ec3

Author: huntie

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

@@ -17,13 +17,7 @@ export interface StyleSheetProperties {
 type Falsy = undefined | null | false | '';
 interface RecursiveArray<T>
   extends Array<T | ReadonlyArray<T> | RecursiveArray<T>> {}
-/** Keep a brand of 'T' so that calls to `StyleSheet.flatten` can take `RegisteredStyle<T>` and return `T`. */
-type RegisteredStyle<T> = number & {__registeredStyleBrand: T};
-export type StyleProp<T> =
-  | T
-  | RegisteredStyle<T>
-  | RecursiveArray<T | RegisteredStyle<T> | Falsy>
-  | Falsy;
+export type StyleProp<T> = T | RecursiveArray<T | Falsy> | 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<AbsoluteFillStyle>;
+  export const absoluteFill: AbsoluteFillStyle;
+
+  /**
+   * @deprecated Use `StyleSheet.absoluteFill`.
+   */
+  export const absoluteFillObject: AbsoluteFillStyle;
 }

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

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.

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<<f1e4b96664dc09f71aefe6f699a7e299>>
  *
  * 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<K extends keyof AccessibilityEventDefinitions>(
@@ -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<T> =
   | 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