@office-iss/react-native-win32 0.0.0-canary.31 → 0.0.0-canary.310

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,24 +10,37 @@
 
 'use strict';
 
-const AnimatedNode = require('../Animated/src/nodes/AnimatedNode');
-
-import type {NativeColorValue} from './PlatformColorValueTypes';
-
-export type ColorValue = null | string | NativeColorValue;
-
-export type ColorArrayValue = null | $ReadOnlyArray<ColorValue>;
-export type PointValue = {|
+import type {WithAnimatedValue} from '../Animated/createAnimatedComponent';
+import type {ImageResizeMode} from './../Image/ImageResizeMode';
+import type {
+  ____DangerouslyImpreciseStyle_InternalOverrides,
+  ____ImageStyle_InternalOverrides,
+  ____ShadowStyle_InternalOverrides,
+  ____TextStyle_InternalOverrides,
+  ____ViewStyle_InternalOverrides,
+} from './private/_StyleSheetTypesOverrides';
+import type {____TransformStyle_Internal} from './private/_TransformStyle';
+import type {ColorValue} from './StyleSheet';
+
+export type {____TransformStyle_Internal};
+
+declare export opaque type NativeColorValue;
+export type ____ColorValue_Internal = null | string | number | NativeColorValue;
+export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
+export type PointValue = {
   x: number,
   y: number,
-|};
-export type EdgeInsetsValue = {|
+};
+export type EdgeInsetsValue = {
   top: number,
   left: number,
   right: number,
   bottom: number,
-|};
-export type DimensionValue = null | number | string | AnimatedNode;
+};
+
+export type DimensionValue = number | string | 'auto' | null;
+
+export type CursorValue = 'auto' | 'pointer';
 
 /**
  * React Native's layout system is based on Flexbox and is powered both
@@ -42,13 +55,13 @@ export type DimensionValue = null | number | string | AnimatedNode;
  * These properties are a subset of our styles that are consumed by the layout
  * algorithm and affect the positioning and sizing of views.
  */
-type ____LayoutStyle_Internal = $ReadOnly<{|
+type ____LayoutStyle_Internal = $ReadOnly<{
   /** `display` sets the display type of this component.
    *
    *  It works similarly to `display` in CSS, but only support 'flex' and 'none'.
    *  'flex' is the default.
    */
-  display?: 'none' | 'flex',
+  display?: 'none' | 'flex' | 'contents',
 
   /** `width` sets the width of this component.
    *
@@ -126,6 +139,80 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    */
   top?: DimensionValue,
 
+  /** `inset` is a shorthand that corresponds to the top, right, bottom, and/or left properties.
+   *
+   *  It works similarly to `inset` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset
+   *  for more details of how `inset` affects layout.
+   */
+  inset?: DimensionValue,
+
+  /** `insetBlock` is a shorthand that corresponds to the `insetBlockStart` and `insetBlockEnd` properties.
+   *
+   *  It works similarly to `inset-block` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block
+   *  for more details of how `inset-block` affects layout.
+   */
+  insetBlock?: DimensionValue,
+
+  /** `insetBlockEnd` is a logical property that sets the length that an
+   *  element is offset in the block direction from its ending edge.
+   *
+   *  It works similarly to `inset-block-end` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-end
+   *  for more details of how `inset-block-end` affects layout.
+   */
+  insetBlockEnd?: DimensionValue,
+
+  /** `insetBlockStart` is a logical property that sets the length that an
+   *  element is offset in the block direction from its starting edge.
+   *
+   *  It works similarly to `inset-block-start` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-block-start
+   *  for more details of how `inset-block-start` affects layout.
+   */
+  insetBlockStart?: DimensionValue,
+
+  /** `insetInline` is a shorthand that corresponds to the `insetInlineStart` and `insetInlineEnd` properties.
+   *
+   *  It works similarly to `inset-inline` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline
+   *  for more details of how `inset-inline` affects layout.
+   */
+  insetInline?: DimensionValue,
+
+  /** `insetInlineEnd` is a logical property that sets the length that an
+   *  element is offset in the starting inline direction.
+   *
+   *  It works similarly to `inset-inline-end` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-end
+   *  for more details of how `inset-inline-end` affects layout.
+   */
+  insetInlineEnd?: DimensionValue,
+
+  /** `insetInlineStart` is a logical property that sets the length that an
+   *  element is offset in the starting inline direction.
+   *
+   *  It works similarly to `inset-inline-start` in CSS, but in React Native you
+   *  must use points or percentages. Ems and other units are not supported.
+   *
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start
+   *  for more details of how `inset-inline-start` affects layout.
+   */
+  insetInlineStart?: DimensionValue,
+
   /** `minWidth` is the minimum width for this component, in logical pixels.
    *
    *  It works similarly to `min-width` in CSS, but in React Native you
@@ -173,8 +260,27 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    */
   margin?: DimensionValue,
 
+  /** Setting `marginBlock` has the same effect as setting both
+   *  `marginTop` and `marginBottom`.
+   */
+  marginBlock?: DimensionValue,
+
+  /** `marginBlockEnd` works like `margin-block-end`in CSS. Because React
+   *  Native doesn not support `writing-mode` this is always mapped to
+   *  `margin-bottom`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
+   *  for more details.
+   */
+  marginBlockEnd?: DimensionValue,
+
+  /** `marginBlockEnd` works like `margin-block-end`in CSS. Because React
+   *  Native doesn not support `writing-mode` this is always mapped to
+   *  `margin-top`. See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-end
+   *  for more details.
+   */
+  marginBlockStart?: DimensionValue,
+
   /** `marginBottom` works like `margin-bottom` in CSS.
-   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom
+   *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-block-start
    *  for more details.
    */
   marginBottom?: DimensionValue,
@@ -190,6 +296,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    */
   marginHorizontal?: DimensionValue,
 
+  /** Setting `marginInline` has the same effect as setting
+   *  both `marginLeft` and `marginRight`.
+   */
+  marginInline?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `marginInlineEnd` is equivalent to `marginRight`.
+   * When direction is `rtl`, `marginInlineEnd` is equivalent to `marginLeft`.
+   */
+  marginInlineEnd?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `marginInlineStart` is equivalent to `marginLeft`.
+   * When direction is `rtl`, `marginInlineStart` is equivalent to `marginRight`.
+   */
+  marginInlineStart?: DimensionValue,
+
   /** `marginLeft` works like `margin-left` in CSS.
    *  See https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left
    *  for more details.
@@ -226,6 +349,25 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    */
   padding?: DimensionValue,
 
+  /** Setting `paddingBlock` is like setting both of
+   *  `paddingTop` and `paddingBottom`.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block
+   * for more details.
+   */
+  paddingBlock?: DimensionValue,
+
+  /** `paddingBlockEnd` works like `padding-bottom` in CSS.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-end
+   * for more details.
+   */
+  paddingBlockEnd?: DimensionValue,
+
+  /** `paddingBlockStart` works like `padding-top` in CSS.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block-start
+   * for more details.
+   */
+  paddingBlockStart?: DimensionValue,
+
   /** `paddingBottom` works like `padding-bottom` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom
    * for more details.
@@ -243,6 +385,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    */
   paddingHorizontal?: DimensionValue,
 
+  /** Setting `paddingInline` is like setting both of
+   *  `paddingLeft` and `paddingRight`.
+   */
+  paddingInline?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `paddingInlineEnd` is equivalent to `paddingRight`.
+   * When direction is `rtl`, `paddingInlineEnd` is equivalent to `paddingLeft`.
+   */
+  paddingInlineEnd?: DimensionValue,
+
+  /**
+   * When direction is `ltr`, `paddingInlineStart` is equivalent to `paddingLeft`.
+   * When direction is `rtl`, `paddingInlineStart` is equivalent to `paddingRight`.
+   */
+  paddingInlineStart?: DimensionValue,
+
   /** `paddingLeft` works like `padding-left` in CSS.
    * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left
    * for more details.
@@ -315,22 +474,23 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
   borderTopWidth?: number,
 
   /** `position` in React Native is similar to regular CSS, but
-   *  everything is set to `relative` by default, so `absolute`
-   *  positioning is always just relative to the parent.
+   *  everything is set to `relative` by default.
    *
    *  If you want to position a child using specific numbers of logical
    *  pixels relative to its parent, set the child to have `absolute`
    *  position.
    *
    *  If you want to position a child relative to something
-   *  that is not its parent, just don't use styles for that. Use the
-   *  component tree.
+   *  that is not its parent, set the child to have `absolute` position and the
+   *  nodes between to have `static` position.
+   *
+   *  Note that `static` is only available on the new renderer.
    *
    *  See https://github.com/facebook/yoga
    *  for more details on how `position` differs between React Native
    *  and CSS.
    */
-  position?: 'absolute' | 'relative',
+  position?: 'absolute' | 'relative' | 'static',
 
   /** `flexDirection` controls which directions children of a container go.
    *  `row` goes left to right, `column` goes top to bottom, and you may
@@ -398,7 +558,8 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
     | 'center'
     | 'stretch'
     | 'space-between'
-    | 'space-around',
+    | 'space-around'
+    | 'space-evenly',
 
   /** `overflow` controls how children are measured and displayed.
    *  `overflow: hidden` causes views to be clipped while `overflow: scroll`
@@ -436,8 +597,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
   flexBasis?: number | string,
 
   /**
-   * Aspect ratio control the size of the undefined dimension of a node. Aspect ratio is a
-   * non-standard property only available in react native and not CSS.
+   * Aspect ratio control the size of the undefined dimension of a node.
    *
    * - On a node with a set width/height aspect ratio control the size of the unset dimension
    * - On a node with a set flex basis aspect ratio controls the size of the node in the cross axis
@@ -447,8 +607,26 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    * - On a node with flex grow/shrink aspect ratio controls the size of the node in the cross axis
    *   if unset
    * - Aspect ratio takes min/max dimensions into account
+   *
+   * Supports a number or a ratio, e.g.:
+   * - aspectRatio: '1 / 1'
+   * - aspectRatio: '1'
+   * - aspectRatio: '1'
+   */
+  aspectRatio?: number | string,
+
+  /**
+   * Box sizing controls whether certain size properties apply to the node's
+   * content box or border box. The size properties in question include `width`,
+   * `height`, `minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and `flexBasis`.
+   *
+   * e.g: Say a node has 10px of padding and 10px of borders on all
+   * sides and a defined `width` and `height` of 100px and 50px. Then the total
+   * size of the node (content area + padding + border) would be 100px by 50px
+   * under `boxSizing: border-box` and 120px by 70px under
+   * `boxSizing: content-box`.
    */
-  aspectRatio?: number,
+  boxSizing?: 'border-box' | 'content-box',
 
   /** `zIndex` controls which components display on top of others.
    *  Normally, you don't use `zIndex`. Components render according to
@@ -467,54 +645,25 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
   /** `direction` specifies the directional flow of the user interface.
    *  The default is `inherit`, except for root node which will have
    *  value based on the current locale.
-   *  See https://yogalayout.com/docs/layout-direction
+   *  See https://yogalayout.dev/docs/layout-direction
    *  for more details.
    *  @platform ios
    */
   direction?: 'inherit' | 'ltr' | 'rtl',
-|}>;
 
-type ____TransformStyle_Internal = $ReadOnly<{|
   /**
-   * `transform` accepts an array of transformation objects. Each object specifies
-   * the property that will be transformed as the key, and the value to use in the
-   * transformation. Objects should not be combined. Use a single key/value pair
-   * per object.
-   *
-   * The rotate transformations require a string so that the transform may be
-   * expressed in degrees (deg) or radians (rad). For example:
-   *
-   * `transform([{ rotateX: '45deg' }, { rotateZ: '0.785398rad' }])`
-   *
-   * The skew transformations require a string so that the transform may be
-   * expressed in degrees (deg). For example:
-   *
-   * `transform([{ skewX: '45deg' }])`
-   */
-  transform?: $ReadOnlyArray<
-    | {|+perspective: number | AnimatedNode|}
-    | {|+rotate: string | AnimatedNode|}
-    | {|+rotateX: string | AnimatedNode|}
-    | {|+rotateY: string | AnimatedNode|}
-    | {|+rotateZ: string | AnimatedNode|}
-    | {|+scale: number | AnimatedNode|}
-    | {|+scaleX: number | AnimatedNode|}
-    | {|+scaleY: number | AnimatedNode|}
-    | {|+translateX: number | AnimatedNode|}
-    | {|+translateY: number | AnimatedNode|}
-    | {|
-        +translate:
-          | [number | AnimatedNode, number | AnimatedNode]
-          | AnimatedNode,
-      |}
-    | {|+skewX: string|}
-    | {|+skewY: string|}
-    // TODO: what is the actual type it expects?
-    | {|
-        +matrix: $ReadOnlyArray<number | AnimatedNode> | AnimatedNode,
-      |},
-  >,
-|}>;
+   * In React Native, gap works the same way it does in CSS.
+   * If there are two or more children in a container, they will be separated from each other
+   * by the value of the gap - but the children will not be separated from the edges of their parent container.
+   * For horizontal gaps, use columnGap, for vertical gaps, use rowGap, and to apply both at the same time, it's gap.
+   * When align-content or justify-content are set to space-between or space-around, the separation
+   * between children may be larger than the gap value.
+   * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap for more details.
+   */
+  rowGap?: number | string,
+  columnGap?: number | string,
+  gap?: number | string,
+}>;
 
 /**
  * These props can be used to dynamically generate shadows on views, images, text, etc.
@@ -522,68 +671,263 @@ type ____TransformStyle_Internal = $ReadOnly<{|
  * Because they are dynamically generated, they may cause performance regressions. Static
  * shadow image asset may be a better way to go for optimal performance.
  *
- * These properties are iOS only - for similar functionality on Android, use the [`elevation`
- * property](docs/viewstyleproptypes.html#elevation).
+ * Shadow-related properties are not fully supported on Android.
+ * To add a drop shadow to a view use the [`elevation` property](docs/viewstyleproptypes.html#elevation) (Android 5.0+).
+ * To customize the color use the [`shadowColor` property](docs/shadow-props.html#shadowColor) (Android 9.0+).
  */
-export type ____ShadowStyle_Internal = $ReadOnly<{|
+export type ____ShadowStyle_InternalCore = $ReadOnly<{
   /**
    * Sets the drop shadow color
    * @platform ios
    */
-  shadowColor?: ColorValue,
+  shadowColor?: ____ColorValue_Internal,
   /**
    * Sets the drop shadow offset
    * @platform ios
    */
-  shadowOffset?: $ReadOnly<{|
+  shadowOffset?: $ReadOnly<{
     width?: number,
     height?: number,
-  |}>,
+  }>,
   /**
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
    */
-  shadowOpacity?: number | AnimatedNode,
+  shadowOpacity?: number,
   /**
    * Sets the drop shadow blur radius
    * @platform ios
    */
   shadowRadius?: number,
-|}>;
+}>;
+
+export type ____ShadowStyle_Internal = $ReadOnly<{
+  ...____ShadowStyle_InternalCore,
+  ...____ShadowStyle_InternalOverrides,
+}>;
+
+export type FilterFunction =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {hueRotate: number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {dropShadow: DropShadowValue | string};
+
+export type DropShadowValue = {
+  offsetX: number | string,
+  offsetY: number | string,
+  standardDeviation?: number | string,
+  color?: ____ColorValue_Internal,
+};
 
-export type ____ViewStyle_Internal = $ReadOnly<{|
-  ...$Exact<____LayoutStyle_Internal>,
-  ...$Exact<____ShadowStyle_Internal>,
-  ...$Exact<____TransformStyle_Internal>,
+type LinearGradientValue = {
+  type: 'linear-gradient',
+  // Angle or direction enums
+  direction?: string,
+  colorStops: $ReadOnlyArray<{
+    color: ____ColorValue_Internal,
+    positions?: $ReadOnlyArray<string>,
+  }>,
+};
+
+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_Internal,
+    positions?: $ReadOnlyArray<string>,
+  }>,
+};
+
+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,
+};
+
+export type BoxShadowValue = {
+  offsetX: number | string,
+  offsetY: number | string,
+  color?: ____ColorValue_Internal,
+  blurRadius?: number | string,
+  spreadDistance?: number | string,
+  inset?: boolean,
+};
+
+type ____BlendMode_Internal =
+  | 'normal'
+  | 'multiply'
+  | 'screen'
+  | 'overlay'
+  | 'darken'
+  | 'lighten'
+  | 'color-dodge'
+  | 'color-burn'
+  | 'hard-light'
+  | 'soft-light'
+  | 'difference'
+  | 'exclusion'
+  | 'hue'
+  | 'saturation'
+  | 'color'
+  | 'luminosity';
+
+export type ____ViewStyle_InternalBase = $ReadOnly<{
   backfaceVisibility?: 'visible' | 'hidden',
-  backgroundColor?: ColorValue,
-  borderColor?: ColorValue,
-  borderBottomColor?: ColorValue,
-  borderEndColor?: ColorValue,
-  borderLeftColor?: ColorValue,
-  borderRightColor?: ColorValue,
-  borderStartColor?: ColorValue,
-  borderTopColor?: ColorValue,
-  borderRadius?: number | AnimatedNode,
-  borderBottomEndRadius?: number | AnimatedNode,
-  borderBottomLeftRadius?: number | AnimatedNode,
-  borderBottomRightRadius?: number | AnimatedNode,
-  borderBottomStartRadius?: number | AnimatedNode,
-  borderTopEndRadius?: number | AnimatedNode,
-  borderTopLeftRadius?: number | AnimatedNode,
-  borderTopRightRadius?: number | AnimatedNode,
-  borderTopStartRadius?: number | AnimatedNode,
+  backgroundColor?: ____ColorValue_Internal,
+  borderColor?: ____ColorValue_Internal,
+  borderCurve?: 'circular' | 'continuous',
+  borderBottomColor?: ____ColorValue_Internal,
+  borderEndColor?: ____ColorValue_Internal,
+  borderLeftColor?: ____ColorValue_Internal,
+  borderRightColor?: ____ColorValue_Internal,
+  borderStartColor?: ____ColorValue_Internal,
+  borderTopColor?: ____ColorValue_Internal,
+  borderBlockColor?: ____ColorValue_Internal,
+  borderBlockEndColor?: ____ColorValue_Internal,
+  borderBlockStartColor?: ____ColorValue_Internal,
+  borderRadius?: number | string,
+  borderBottomEndRadius?: number | string,
+  borderBottomLeftRadius?: number | string,
+  borderBottomRightRadius?: number | string,
+  borderBottomStartRadius?: number | string,
+  borderEndEndRadius?: number | string,
+  borderEndStartRadius?: number | string,
+  borderStartEndRadius?: number | string,
+  borderStartStartRadius?: number | string,
+  borderTopEndRadius?: number | string,
+  borderTopLeftRadius?: number | string,
+  borderTopRightRadius?: number | string,
+  borderTopStartRadius?: number | string,
   borderStyle?: 'solid' | 'dotted' | 'dashed',
-  borderWidth?: number | AnimatedNode,
-  borderBottomWidth?: number | AnimatedNode,
-  borderEndWidth?: number | AnimatedNode,
-  borderLeftWidth?: number | AnimatedNode,
-  borderRightWidth?: number | AnimatedNode,
-  borderStartWidth?: number | AnimatedNode,
-  borderTopWidth?: number | AnimatedNode,
-  opacity?: number | AnimatedNode,
+  borderWidth?: number,
+  borderBottomWidth?: number,
+  borderEndWidth?: number,
+  borderLeftWidth?: number,
+  borderRightWidth?: number,
+  borderStartWidth?: number,
+  borderTopWidth?: number,
+  opacity?: number,
+  outlineColor?: ____ColorValue_Internal,
+  outlineOffset?: number,
+  outlineStyle?: 'solid' | 'dotted' | 'dashed',
+  outlineWidth?: number,
   elevation?: number,
-|}>;
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
+  cursor?: CursorValue,
+  boxShadow?: $ReadOnlyArray<BoxShadowValue> | string,
+  filter?: $ReadOnlyArray<FilterFunction> | string,
+  mixBlendMode?: ____BlendMode_Internal,
+  experimental_backgroundImage?: $ReadOnlyArray<BackgroundImageValue> | string,
+  experimental_backgroundSize?: $ReadOnlyArray<BackgroundSizeValue> | string,
+  experimental_backgroundPosition?:
+    | $ReadOnlyArray<BackgroundPositionValue>
+    | string,
+  experimental_backgroundRepeat?:
+    | $ReadOnlyArray<BackgroundRepeatValue>
+    | string,
+  isolation?: 'auto' | 'isolate',
+}>;
+
+export type ____ViewStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____LayoutStyle_Internal>,
+  ...$Exact<____ShadowStyle_Internal>,
+  ...$Exact<____TransformStyle_Internal>,
+  ...____ViewStyle_InternalBase,
+}>;
+
+export type ____ViewStyle_Internal = $ReadOnly<{
+  ...____ViewStyle_InternalCore,
+  ...____ViewStyle_InternalOverrides,
+}>;
+
+export type FontStyleType = {
+  fontFamily: string,
+  fontWeight: ____FontWeight_Internal,
+};
+
+export type FontStyleMap = {
+  ultraLight: FontStyleType,
+  thin: FontStyleType,
+  light: FontStyleType,
+  regular: FontStyleType,
+  medium: FontStyleType,
+  semibold: FontStyleType,
+  bold: FontStyleType,
+  heavy: FontStyleType,
+  black: FontStyleType,
+};
 
 export type ____FontWeight_Internal =
   | 'normal'
@@ -596,28 +940,78 @@ export type ____FontWeight_Internal =
   | '600'
   | '700'
   | '800'
-  | '900';
-
-export type ____TextStyle_Internal = $ReadOnly<{|
-  ...$Exact<____ViewStyle_Internal>,
-  color?: ColorValue,
+  | '900'
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+  | 'ultralight'
+  | 'thin'
+  | 'light'
+  | 'medium'
+  | 'regular'
+  | 'semibold'
+  | 'condensedBold'
+  | 'condensed'
+  | 'heavy'
+  | 'black';
+
+export type ____FontVariant_Internal =
+  | 'small-caps'
+  | 'oldstyle-nums'
+  | 'lining-nums'
+  | 'tabular-nums'
+  | 'common-ligatures'
+  | 'no-common-ligatures'
+  | 'discretionary-ligatures'
+  | 'no-discretionary-ligatures'
+  | 'historical-ligatures'
+  | 'no-historical-ligatures'
+  | 'contextual'
+  | 'no-contextual'
+  | 'proportional-nums'
+  | 'stylistic-one'
+  | 'stylistic-two'
+  | 'stylistic-three'
+  | 'stylistic-four'
+  | 'stylistic-five'
+  | 'stylistic-six'
+  | 'stylistic-seven'
+  | 'stylistic-eight'
+  | 'stylistic-nine'
+  | 'stylistic-ten'
+  | 'stylistic-eleven'
+  | 'stylistic-twelve'
+  | 'stylistic-thirteen'
+  | 'stylistic-fourteen'
+  | 'stylistic-fifteen'
+  | 'stylistic-sixteen'
+  | 'stylistic-seventeen'
+  | 'stylistic-eighteen'
+  | 'stylistic-nineteen'
+  | 'stylistic-twenty';
+
+export type ____FontVariantArray_Internal =
+  $ReadOnlyArray<____FontVariant_Internal>;
+
+type ____TextStyle_InternalBase = $ReadOnly<{
+  color?: ____ColorValue_Internal,
   fontFamily?: string,
   fontSize?: number,
   fontStyle?: 'normal' | 'italic',
   fontWeight?: ____FontWeight_Internal,
-  fontVariant?: $ReadOnlyArray<
-    | 'small-caps'
-    | 'oldstyle-nums'
-    | 'lining-nums'
-    | 'tabular-nums'
-    | 'proportional-nums',
-  >,
-  textShadowOffset?: $ReadOnly<{|
+  fontVariant?: ____FontVariantArray_Internal | string,
+  textShadowOffset?: $ReadOnly<{
     width: number,
     height: number,
-  |}>,
+  }>,
   textShadowRadius?: number,
-  textShadowColor?: ColorValue,
+  textShadowColor?: ____ColorValue_Internal,
   letterSpacing?: number,
   lineHeight?: number,
   textAlign?: 'auto' | 'left' | 'right' | 'center' | 'justify',
@@ -629,48 +1023,101 @@ export type ____TextStyle_Internal = $ReadOnly<{|
     | 'line-through'
     | 'underline line-through',
   textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
-  textDecorationColor?: ColorValue,
+  textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
+  userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all',
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
-|}>;
+}>;
 
-export type ____ImageStyle_Internal = $ReadOnly<{|
+export type ____TextStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
-  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  tintColor?: ColorValue,
-  overlayColor?: string,
-|}>;
+  ...____TextStyle_InternalBase,
+}>;
 
-export type ____DangerouslyImpreciseStyle_Internal = {
+export type ____TextStyle_Internal = $ReadOnly<{
+  ...____TextStyle_InternalCore,
+  ...____TextStyle_InternalOverrides,
+}>;
+
+export type ____ImageStyle_InternalCore = $ReadOnly<{
+  ...$Exact<____ViewStyle_Internal>,
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
+  tintColor?: ____ColorValue_Internal,
+  overlayColor?: ColorValue,
+  overflow?: 'visible' | 'hidden',
+}>;
+
+export type ____ImageStyle_Internal = $ReadOnly<{
+  ...____ImageStyle_InternalCore,
+  ...____ImageStyle_InternalOverrides,
+}>;
+
+export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  +tintColor?: ColorValue,
-  +overlayColor?: string,
+  resizeMode?: ImageResizeMode,
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | 'none',
+  tintColor?: ____ColorValue_Internal,
+  overlayColor?: ColorValue,
+}>;
+
+export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
+  ...____DangerouslyImpreciseStyle_InternalCore,
+  ...____DangerouslyImpreciseStyle_InternalOverrides,
   ...
-};
+}>;
 
-type GenericStyleProp<+T> =
+export type StyleProp<+T> =
   | null
   | void
   | T
   | false
   | ''
-  | $ReadOnlyArray<GenericStyleProp<T>>;
+  | $ReadOnlyArray<StyleProp<T>>;
 
-export type ____DangerouslyImpreciseStyleProp_Internal = GenericStyleProp<
-  $Shape<____DangerouslyImpreciseStyle_Internal>,
+export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
+  Partial<____DangerouslyImpreciseStyle_Internal>,
 >;
-export type ____ViewStyleProp_Internal = GenericStyleProp<
-  $ReadOnly<$Shape<____ViewStyle_Internal>>,
+
+export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
+  WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
+
+export type ____ViewStyleProp_Internal = StyleProp<
+  $ReadOnly<Partial<____ViewStyle_Internal>>,
 >;
-export type ____TextStyleProp_Internal = GenericStyleProp<
-  $ReadOnly<$Shape<____TextStyle_Internal>>,
+export type ____TextStyleProp_Internal = StyleProp<
+  $ReadOnly<Partial<____TextStyle_Internal>>,
 >;
-export type ____ImageStyleProp_Internal = GenericStyleProp<
-  $ReadOnly<$Shape<____ImageStyle_Internal>>,
+export type ____ImageStyleProp_Internal = StyleProp<
+  $ReadOnly<Partial<____ImageStyle_Internal>>,
 >;
 
 export type ____Styles_Internal = {
-  +[key: string]: $Shape<____DangerouslyImpreciseStyle_Internal>,
-  ...,
+  // $FlowFixMe[incompatible-exact]
+  // $FlowFixMe[incompatible-type]
+  +[key: string]: Partial<____DangerouslyImpreciseStyle_Internal>,
+  ...
 };
+
+// A depth limiter, to avoid TS2589 in TypeScript. This and
+// ____FlattenStyleProp_Helper should be considered internal.
+type FlattenDepthLimiter = [void, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+type ____FlattenStyleProp_Helper<
+  +TStyleProp: StyleProp<unknown>,
+  Depth: $Values<FlattenDepthLimiter> = 9,
+> = Depth extends 0
+  ? empty
+  : TStyleProp extends null | void | false | ''
+    ? empty // When TStyleProp is an array, recurse with decremented Depth
+    : TStyleProp extends $ReadOnlyArray<infer V>
+      ? ____FlattenStyleProp_Helper<
+          V,
+          Depth extends number ? FlattenDepthLimiter[Depth] : 0,
+        >
+      : TStyleProp;
+
+export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp<unknown>> =
+  ____FlattenStyleProp_Helper<TStyleProp> extends empty // $FlowFixMe[unclear-type]
+    ? any
+    : ____FlattenStyleProp_Helper<TStyleProp>;