@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -7,6 +7,7 @@
  * @format
  */
 
+import {Animated} from '../Animated/Animated';
 import {ImageResizeMode} from '../Image/ImageResizeMode';
 import {ColorValue} from './StyleSheet';
 
@@ -17,6 +18,15 @@ type FlexAlignType =
   | 'stretch'
   | 'baseline';
 
+type DimensionValue =
+  | number
+  | 'auto'
+  | `${number}%`
+  | Animated.AnimatedNode
+  | null;
+type AnimatableNumericValue = number | Animated.AnimatedNode;
+type AnimatableStringValue = string | Animated.AnimatedNode;
+
 /**
  * Flex Prop Types
  * @see https://reactnative.dev/docs/flexbox
@@ -35,17 +45,17 @@ export interface FlexStyle {
   alignSelf?: 'auto' | FlexAlignType | undefined;
   aspectRatio?: number | string | undefined;
   borderBottomWidth?: number | undefined;
-  borderEndWidth?: number | string | undefined;
+  borderEndWidth?: number | undefined;
   borderLeftWidth?: number | undefined;
   borderRightWidth?: number | undefined;
-  borderStartWidth?: number | string | undefined;
+  borderStartWidth?: number | undefined;
   borderTopWidth?: number | undefined;
   borderWidth?: number | undefined;
-  bottom?: number | string | undefined;
+  bottom?: DimensionValue | undefined;
   display?: 'none' | 'flex' | undefined;
-  end?: number | string | undefined;
+  end?: DimensionValue | undefined;
   flex?: number | undefined;
-  flexBasis?: number | string | undefined;
+  flexBasis?: DimensionValue | undefined;
   flexDirection?:
     | 'row'
     | 'column'
@@ -58,7 +68,14 @@ export interface FlexStyle {
   flexGrow?: number | undefined;
   flexShrink?: number | undefined;
   flexWrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined;
-  height?: number | string | undefined;
+  height?: DimensionValue | undefined;
+  inset?: DimensionValue | undefined;
+  insetBlock?: DimensionValue | undefined;
+  insetBlockEnd?: DimensionValue | undefined;
+  insetBlockStart?: DimensionValue | undefined;
+  insetInline?: DimensionValue | undefined;
+  insetInlineEnd?: DimensionValue | undefined;
+  insetInlineStart?: DimensionValue | undefined;
   justifyContent?:
     | 'flex-start'
     | 'flex-end'
@@ -67,35 +84,47 @@ export interface FlexStyle {
     | 'space-around'
     | 'space-evenly'
     | undefined;
-  left?: number | string | undefined;
-  margin?: number | string | undefined;
-  marginBottom?: number | string | undefined;
-  marginEnd?: number | string | undefined;
-  marginHorizontal?: number | string | undefined;
-  marginLeft?: number | string | undefined;
-  marginRight?: number | string | undefined;
-  marginStart?: number | string | undefined;
-  marginTop?: number | string | undefined;
-  marginVertical?: number | string | undefined;
-  maxHeight?: number | string | undefined;
-  maxWidth?: number | string | undefined;
-  minHeight?: number | string | undefined;
-  minWidth?: number | string | undefined;
+  left?: DimensionValue | undefined;
+  margin?: DimensionValue | undefined;
+  marginBlock?: DimensionValue | undefined;
+  marginBlockEnd?: DimensionValue | undefined;
+  marginBlockStart?: DimensionValue | undefined;
+  marginBottom?: DimensionValue | undefined;
+  marginEnd?: DimensionValue | undefined;
+  marginHorizontal?: DimensionValue | undefined;
+  marginInline?: DimensionValue | undefined;
+  marginInlineEnd?: DimensionValue | undefined;
+  marginInlineStart?: DimensionValue | undefined;
+  marginLeft?: DimensionValue | undefined;
+  marginRight?: DimensionValue | undefined;
+  marginStart?: DimensionValue | undefined;
+  marginTop?: DimensionValue | undefined;
+  marginVertical?: DimensionValue | undefined;
+  maxHeight?: DimensionValue | undefined;
+  maxWidth?: DimensionValue | undefined;
+  minHeight?: DimensionValue | undefined;
+  minWidth?: DimensionValue | undefined;
   overflow?: 'visible' | 'hidden' | 'scroll' | undefined;
-  padding?: number | string | undefined;
-  paddingBottom?: number | string | undefined;
-  paddingEnd?: number | string | undefined;
-  paddingHorizontal?: number | string | undefined;
-  paddingLeft?: number | string | undefined;
-  paddingRight?: number | string | undefined;
-  paddingStart?: number | string | undefined;
-  paddingTop?: number | string | undefined;
-  paddingVertical?: number | string | undefined;
+  padding?: DimensionValue | undefined;
+  paddingBottom?: DimensionValue | undefined;
+  paddingBlock?: DimensionValue | undefined;
+  paddingBlockEnd?: DimensionValue | undefined;
+  paddingBlockStart?: DimensionValue | undefined;
+  paddingEnd?: DimensionValue | undefined;
+  paddingHorizontal?: DimensionValue | undefined;
+  paddingInline?: DimensionValue | undefined;
+  paddingInlineEnd?: DimensionValue | undefined;
+  paddingInlineStart?: DimensionValue | undefined;
+  paddingLeft?: DimensionValue | undefined;
+  paddingRight?: DimensionValue | undefined;
+  paddingStart?: DimensionValue | undefined;
+  paddingTop?: DimensionValue | undefined;
+  paddingVertical?: DimensionValue | undefined;
   position?: 'absolute' | 'relative' | undefined;
-  right?: number | string | undefined;
-  start?: number | string | undefined;
-  top?: number | string | undefined;
-  width?: number | string | undefined;
+  right?: DimensionValue | undefined;
+  start?: DimensionValue | undefined;
+  top?: DimensionValue | undefined;
+  width?: DimensionValue | undefined;
   zIndex?: number | undefined;
 
   /**
@@ -106,61 +135,61 @@ export interface FlexStyle {
 
 export interface ShadowStyleIOS {
   shadowColor?: ColorValue | undefined;
-  shadowOffset?: {width: number; height: number} | undefined;
-  shadowOpacity?: number | undefined;
+  shadowOffset?: Readonly<{width: number; height: number}> | undefined;
+  shadowOpacity?: AnimatableNumericValue | undefined;
   shadowRadius?: number | undefined;
 }
 
 interface PerpectiveTransform {
-  perspective: number;
+  perspective: AnimatableNumericValue;
 }
 
 interface RotateTransform {
-  rotate: string;
+  rotate: AnimatableStringValue;
 }
 
 interface RotateXTransform {
-  rotateX: string;
+  rotateX: AnimatableStringValue;
 }
 
 interface RotateYTransform {
-  rotateY: string;
+  rotateY: AnimatableStringValue;
 }
 
 interface RotateZTransform {
-  rotateZ: string;
+  rotateZ: AnimatableStringValue;
 }
 
 interface ScaleTransform {
-  scale: number;
+  scale: AnimatableNumericValue;
 }
 
 interface ScaleXTransform {
-  scaleX: number;
+  scaleX: AnimatableNumericValue;
 }
 
 interface ScaleYTransform {
-  scaleY: number;
+  scaleY: AnimatableNumericValue;
 }
 
 interface TranslateXTransform {
-  translateX: number;
+  translateX: AnimatableNumericValue;
 }
 
 interface TranslateYTransform {
-  translateY: number;
+  translateY: AnimatableNumericValue;
 }
 
 interface SkewXTransform {
-  skewX: string;
+  skewX: AnimatableStringValue;
 }
 
 interface SkewYTransform {
-  skewY: string;
+  skewY: AnimatableStringValue;
 }
 
 interface MatrixTransform {
-  matrix: number[];
+  matrix: AnimatableNumericValue[];
 }
 
 export interface TransformsStyle {
@@ -188,23 +217,23 @@ export interface TransformsStyle {
   /**
    * @deprecated Use rotate in transform prop instead.
    */
-  rotation?: number | undefined;
+  rotation?: AnimatableNumericValue | undefined;
   /**
    * @deprecated Use scaleX in transform prop instead.
    */
-  scaleX?: number | undefined;
+  scaleX?: AnimatableNumericValue | undefined;
   /**
    * @deprecated Use scaleY in transform prop instead.
    */
-  scaleY?: number | undefined;
+  scaleY?: AnimatableNumericValue | undefined;
   /**
    * @deprecated Use translateX in transform prop instead.
    */
-  translateX?: number | undefined;
+  translateX?: AnimatableNumericValue | undefined;
   /**
    * @deprecated Use translateY in transform prop instead.
    */
-  translateY?: number | undefined;
+  translateY?: AnimatableNumericValue | undefined;
 }
 
 /**
@@ -213,29 +242,36 @@ export interface TransformsStyle {
 export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   backfaceVisibility?: 'visible' | 'hidden' | undefined;
   backgroundColor?: ColorValue | undefined;
+  borderBlockColor?: ColorValue | undefined;
+  borderBlockEndColor?: ColorValue | undefined;
+  borderBlockStartColor?: ColorValue | undefined;
   borderBottomColor?: ColorValue | undefined;
-  borderBottomEndRadius?: number | undefined;
-  borderBottomLeftRadius?: number | undefined;
-  borderBottomRightRadius?: number | undefined;
-  borderBottomStartRadius?: number | undefined;
-  borderBottomWidth?: number | undefined;
+  borderBottomEndRadius?: AnimatableNumericValue | undefined;
+  borderBottomLeftRadius?: AnimatableNumericValue | undefined;
+  borderBottomRightRadius?: AnimatableNumericValue | undefined;
+  borderBottomStartRadius?: AnimatableNumericValue | undefined;
   borderColor?: ColorValue | undefined;
+  /**
+   * On iOS 13+, it is possible to change the corner curve of borders.
+   * @platform ios
+   */
+  borderCurve?: 'circular' | 'continuous' | undefined;
   borderEndColor?: ColorValue | undefined;
+  borderEndEndRadius?: AnimatableNumericValue | undefined;
+  borderEndStartRadius?: AnimatableNumericValue | undefined;
   borderLeftColor?: ColorValue | undefined;
-  borderLeftWidth?: number | undefined;
-  borderRadius?: number | undefined;
+  borderRadius?: AnimatableNumericValue | undefined;
   borderRightColor?: ColorValue | undefined;
-  borderRightWidth?: number | undefined;
   borderStartColor?: ColorValue | undefined;
+  borderStartEndRadius?: AnimatableNumericValue | undefined;
+  borderStartStartRadius?: AnimatableNumericValue | undefined;
   borderStyle?: 'solid' | 'dotted' | 'dashed' | undefined;
   borderTopColor?: ColorValue | undefined;
-  borderTopEndRadius?: number | undefined;
-  borderTopLeftRadius?: number | undefined;
-  borderTopRightRadius?: number | undefined;
-  borderTopStartRadius?: number | undefined;
-  borderTopWidth?: number | undefined;
-  borderWidth?: number | undefined;
-  opacity?: number | undefined;
+  borderTopEndRadius?: AnimatableNumericValue | undefined;
+  borderTopLeftRadius?: AnimatableNumericValue | undefined;
+  borderTopRightRadius?: AnimatableNumericValue | undefined;
+  borderTopStartRadius?: AnimatableNumericValue | undefined;
+  opacity?: AnimatableNumericValue | undefined;
   /**
    * Sets the elevation of a view, using Android's underlying
    * [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation).
@@ -245,6 +281,10 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
    * @platform android
    */
   elevation?: number | undefined;
+  /**
+   * Controls whether the View can be the target of touch events.
+   */
+  pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
 }
 
 export type FontVariant =
@@ -255,7 +295,6 @@ export type FontVariant =
   | 'proportional-nums';
 export interface TextStyleIOS extends ViewStyle {
   fontVariant?: FontVariant[] | undefined;
-  letterSpacing?: number | undefined;
   textDecorationColor?: ColorValue | undefined;
   textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed' | undefined;
   writingDirection?: 'auto' | 'ltr' | 'rtl' | undefined;
@@ -316,16 +355,16 @@ export interface TextStyle extends TextStyleIOS, TextStyleAndroid, ViewStyle {
 export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   resizeMode?: ImageResizeMode | undefined;
   backfaceVisibility?: 'visible' | 'hidden' | undefined;
-  borderBottomLeftRadius?: number | undefined;
-  borderBottomRightRadius?: number | undefined;
+  borderBottomLeftRadius?: AnimatableNumericValue | undefined;
+  borderBottomRightRadius?: AnimatableNumericValue | undefined;
   backgroundColor?: ColorValue | undefined;
   borderColor?: ColorValue | undefined;
-  borderWidth?: number | undefined;
-  borderRadius?: number | undefined;
-  borderTopLeftRadius?: number | undefined;
-  borderTopRightRadius?: number | undefined;
+  borderRadius?: AnimatableNumericValue | undefined;
+  borderTopLeftRadius?: AnimatableNumericValue | undefined;
+  borderTopRightRadius?: AnimatableNumericValue | undefined;
   overflow?: 'visible' | 'hidden' | undefined;
   overlayColor?: ColorValue | undefined;
   tintColor?: ColorValue | undefined;
-  opacity?: number | undefined;
+  opacity?: AnimatableNumericValue | undefined;
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
 }

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -33,7 +33,9 @@ export type EdgeInsetsValue = {
   right: number,
   bottom: number,
 };
-export type DimensionValue = null | number | string | AnimatedNode;
+
+export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
+export type AnimatableNumericValue = number | AnimatedNode;
 
 /**
  * React Native's layout system is based on Flexbox and is powered both
@@ -132,6 +134,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
@@ -179,8 +255,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,
@@ -196,6 +291,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.
@@ -232,6 +344,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.
@@ -249,6 +380,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.
@@ -482,6 +630,19 @@ type ____LayoutStyle_Internal = $ReadOnly<{
    *  @platform ios
    */
   direction?: 'inherit' | 'ltr' | 'rtl',
+
+  /**
+   * 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,
+  columnGap?: number,
+  gap?: number,
 }>;
 
 /**
@@ -512,25 +673,12 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * Sets the drop shadow opacity (multiplied by the color's alpha component)
    * @platform ios
    */
-  shadowOpacity?: number | AnimatedNode,
+  shadowOpacity?: AnimatableNumericValue,
   /**
    * Sets the drop shadow blur radius
    * @platform ios
    */
   shadowRadius?: number,
-
-  /**
-   * 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,
-  columnGap?: number,
-  gap?: number,
 }>;
 
 export type ____ShadowStyle_Internal = $ReadOnly<{
@@ -552,24 +700,31 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderRightColor?: ____ColorValue_Internal,
   borderStartColor?: ____ColorValue_Internal,
   borderTopColor?: ____ColorValue_Internal,
-  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,
+  borderBlockColor?: ____ColorValue_Internal,
+  borderBlockEndColor?: ____ColorValue_Internal,
+  borderBlockStartColor?: ____ColorValue_Internal,
+  borderRadius?: AnimatableNumericValue,
+  borderBottomEndRadius?: AnimatableNumericValue,
+  borderBottomLeftRadius?: AnimatableNumericValue,
+  borderBottomRightRadius?: AnimatableNumericValue,
+  borderBottomStartRadius?: AnimatableNumericValue,
+  borderEndEndRadius?: AnimatableNumericValue,
+  borderEndStartRadius?: AnimatableNumericValue,
+  borderStartEndRadius?: AnimatableNumericValue,
+  borderStartStartRadius?: AnimatableNumericValue,
+  borderTopEndRadius?: AnimatableNumericValue,
+  borderTopLeftRadius?: AnimatableNumericValue,
+  borderTopRightRadius?: AnimatableNumericValue,
+  borderTopStartRadius?: AnimatableNumericValue,
   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?: AnimatableNumericValue,
+  borderBottomWidth?: AnimatableNumericValue,
+  borderEndWidth?: AnimatableNumericValue,
+  borderLeftWidth?: AnimatableNumericValue,
+  borderRightWidth?: AnimatableNumericValue,
+  borderStartWidth?: AnimatableNumericValue,
+  borderTopWidth?: AnimatableNumericValue,
+  opacity?: AnimatableNumericValue,
   elevation?: number,
   pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
 }>;

package/Libraries/StyleSheet/flattenStyle.js

@@ -15,6 +15,7 @@ import type {____FlattenStyleProp_Internal} from './StyleSheetTypes';
 
 function flattenStyle<+TStyleProp: DangerouslyImpreciseStyleProp>(
   style: ?TStyleProp,
+  // $FlowFixMe[underconstrained-implicit-instantiation]
 ): ?____FlattenStyleProp_Internal<TStyleProp> {
   if (style === null || typeof style !== 'object') {
     return undefined;
@@ -26,6 +27,7 @@ function flattenStyle<+TStyleProp: DangerouslyImpreciseStyleProp>(
 
   const result: {[string]: $FlowFixMe} = {};
   for (let i = 0, styleLength = style.length; i < styleLength; ++i) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const computedStyle = flattenStyle(style[i]);
     if (computedStyle) {
       for (const key in computedStyle) {

package/Libraries/StyleSheet/normalizeColor.js

@@ -13,7 +13,7 @@
 import type {ProcessedColorValue} from './processColor';
 import type {ColorValue} from './StyleSheet';
 
-import _normalizeColor from '@react-native/normalize-color';
+import _normalizeColor from '@react-native/normalize-colors';
 
 function normalizeColor(
   color: ?(ColorValue | ProcessedColorValue),

package/Libraries/StyleSheet/processColor.js

@@ -57,4 +57,4 @@ function processColor(color?: ?(number | ColorValue)): ?ProcessedColorValue {
   return normalizedColor;
 }
 
-module.exports = processColor;
+export default processColor;