react-native-windows 0.70.8 → 0.71.0-preview.1

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -10,12 +10,18 @@
 
 'use strict';
 
-const AnimatedNode = require('../Animated/nodes/AnimatedNode');
-
+import type AnimatedNode from '../Animated/nodes/AnimatedNode';
 import type {NativeColorValue} from './PlatformColorValueTypes';
+import type {
+  ____DangerouslyImpreciseStyle_InternalOverrides,
+  ____ImageStyle_InternalOverrides,
+  ____ShadowStyle_InternalOverrides,
+  ____TextStyle_InternalOverrides,
+  ____ViewStyle_InternalOverrides,
+} from './private/_StyleSheetTypesOverrides';
+import type {____TransformStyle_Internal} from './private/_TransformStyle';
 
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
-
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
 export type PointValue = {
   x: number,
@@ -29,16 +35,6 @@ export type EdgeInsetsValue = {
 };
 export type DimensionValue = null | number | string | AnimatedNode;
 
-import type {
-  ____DangerouslyImpreciseStyle_InternalOverrides,
-  ____ImageStyle_InternalOverrides,
-  ____ShadowStyle_InternalOverrides,
-  ____TextStyle_InternalOverrides,
-  ____ViewStyle_InternalOverrides,
-} from './private/_StyleSheetTypesOverrides';
-
-import type {____TransformStyle_Internal} from './private/_TransformStyle';
-
 /**
  * React Native's layout system is based on Flexbox and is powered both
  * on iOS and Android by an open source project called `Yoga`:
@@ -446,8 +442,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
@@ -457,8 +452,13 @@ 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,
+  aspectRatio?: number | string,
 
   /** `zIndex` controls which components display on top of others.
    *  Normally, you don't use `zIndex`. Components render according to
@@ -518,6 +518,19 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
    * @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<{
@@ -532,6 +545,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   backfaceVisibility?: 'visible' | 'hidden',
   backgroundColor?: ____ColorValue_Internal,
   borderColor?: ____ColorValue_Internal,
+  borderCurve?: 'circular' | 'continuous',
   borderBottomColor?: ____ColorValue_Internal,
   borderEndColor?: ____ColorValue_Internal,
   borderLeftColor?: ____ColorValue_Internal,
@@ -557,6 +571,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   borderTopWidth?: number | AnimatedNode,
   opacity?: number | AnimatedNode,
   elevation?: number,
+  pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
 }>;
 
 export type ____ViewStyle_Internal = $ReadOnly<{
@@ -564,6 +579,23 @@ export type ____ViewStyle_Internal = $ReadOnly<{
   ...____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'
   | 'bold'
@@ -575,7 +607,54 @@ export type ____FontWeight_Internal =
   | '600'
   | '700'
   | '800'
-  | '900';
+  | '900'
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900
+  | 'ultralight'
+  | 'thin'
+  | 'light'
+  | 'medium'
+  | 'regular'
+  | 'semibold'
+  | 'condensedBold'
+  | 'condensed'
+  | 'heavy'
+  | 'black';
+
+export type ____FontVariantArray_Internal = $ReadOnlyArray<
+  | 'small-caps'
+  | 'oldstyle-nums'
+  | 'lining-nums'
+  | 'tabular-nums'
+  | '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 ____TextStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
@@ -584,13 +663,7 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   fontSize?: number,
   fontStyle?: 'normal' | 'italic',
   fontWeight?: ____FontWeight_Internal,
-  fontVariant?: $ReadOnlyArray<
-    | 'small-caps'
-    | 'oldstyle-nums'
-    | 'lining-nums'
-    | 'tabular-nums'
-    | 'proportional-nums',
-  >,
+  fontVariant?: ____FontVariantArray_Internal | string,
   textShadowOffset?: $ReadOnly<{
     width: number,
     height: number,
@@ -610,6 +683,8 @@ export type ____TextStyle_InternalCore = $ReadOnly<{
   textDecorationStyle?: 'solid' | 'double' | 'dotted' | 'dashed',
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
+  userSelect?: 'auto' | 'text' | 'none' | 'contain' | 'all',
+  verticalAlign?: 'auto' | 'top' | 'bottom' | 'middle',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
 }>;
 
@@ -621,6 +696,7 @@ export type ____TextStyle_Internal = $ReadOnly<{
 export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;
@@ -633,6 +709,7 @@ export type ____ImageStyle_Internal = $ReadOnly<{
 export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
 }>;

package/Libraries/StyleSheet/__flowtests__/StyleSheet-flowtest.js

@@ -10,9 +10,9 @@
 
 'use strict';
 
-const StyleSheet = require('../StyleSheet');
-
 import type {ImageStyleProp, TextStyleProp} from '../StyleSheet';
+
+const StyleSheet = require('../StyleSheet');
 const imageStyle = {tintColor: 'rgb(0, 0, 0)'};
 const textStyle = {color: 'rgb(0, 0, 0)'};
 

package/Libraries/StyleSheet/normalizeColor.js

@@ -10,10 +10,10 @@
 
 /* eslint no-bitwise: 0 */
 
-import _normalizeColor from '@react-native/normalize-color';
-
-import type {ColorValue} from './StyleSheet';
 import type {ProcessedColorValue} from './processColor';
+import type {ColorValue} from './StyleSheet';
+
+import _normalizeColor from '@react-native/normalize-color';
 
 function normalizeColor(
   color: ?(ColorValue | ProcessedColorValue),

package/Libraries/StyleSheet/private/_TransformStyle.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-const AnimatedNode = require('../../Animated/nodes/AnimatedNode');
+import type AnimatedNode from '../../Animated/nodes/AnimatedNode';
 
 export type ____TransformStyle_Internal = $ReadOnly<{|
   /**
@@ -27,27 +27,29 @@ export type ____TransformStyle_Internal = $ReadOnly<{|
    *
    * `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,
-      |},
-  >,
+  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,
+          |},
+      >
+    | string,
 |}>;

package/Libraries/StyleSheet/processAspectRatio.js

@@ -0,0 +1,53 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+const invariant = require('invariant');
+
+function processAspectRatio(aspectRatio: number | string): ?number {
+  if (typeof aspectRatio === 'number') {
+    return aspectRatio;
+  }
+
+  const matches = aspectRatio.split('/').map(s => s.trim());
+
+  if (matches.includes('auto')) {
+    if (__DEV__) {
+      invariant(
+        matches.length,
+        'aspectRatio does not support `auto <ratio>`. You passed: %s',
+        aspectRatio,
+      );
+    }
+    return;
+  }
+
+  const hasNonNumericValues = matches.some(n => Number.isNaN(Number(n)));
+  if (__DEV__) {
+    invariant(
+      !hasNonNumericValues && (matches.length === 1 || matches.length === 2),
+      'aspectRatio must either be a number, a ratio or `auto`. You passed: %s',
+      aspectRatio,
+    );
+  }
+
+  if (hasNonNumericValues) {
+    return;
+  }
+
+  if (matches.length === 2) {
+    return Number(matches[0]) / Number(matches[1]);
+  }
+
+  return Number(matches[0]);
+}
+
+module.exports = processAspectRatio;

package/Libraries/StyleSheet/processColor.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ *
+ * @format
+ */
+
+import {ColorValue, OpaqueColorValue} from './StyleSheet';
+
+export type ProcessedColorValue = number | OpaqueColorValue;
+
+export function processColor(
+  color?: number | ColorValue,
+): ProcessedColorValue | null | undefined;

package/Libraries/StyleSheet/processColor.js

@@ -10,13 +10,12 @@
 
 'use strict';
 
-const Platform = require('../Utilities/Platform');
+import type {NativeColorValue} from './PlatformColorValueTypes';
+import type {ColorValue} from './StyleSheet';
 
+const Platform = require('../Utilities/Platform');
 const normalizeColor = require('./normalizeColor');
 
-import type {ColorValue} from './StyleSheet';
-import type {NativeColorValue} from './PlatformColorValueTypes';
-
 export type ProcessedColorValue = number | NativeColorValue;
 
 /* eslint no-bitwise: 0 */

package/Libraries/StyleSheet/processColorArray.js

@@ -11,6 +11,7 @@
 'use strict';
 
 import type {ColorValue} from './StyleSheet';
+
 import processColor, {type ProcessedColorValue} from './processColor';
 
 const TRANSPARENT = 0; // rgba(0, 0, 0, 0)

package/Libraries/StyleSheet/processFontVariant.js

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {____FontVariantArray_Internal} from './StyleSheetTypes';
+
+function processFontVariant(
+  fontVariant: ____FontVariantArray_Internal | string,
+): ?____FontVariantArray_Internal {
+  if (Array.isArray(fontVariant)) {
+    return fontVariant;
+  }
+
+  // $FlowFixMe[incompatible-type]
+  const match: ?____FontVariantArray_Internal = fontVariant
+    .split(' ')
+    .filter(Boolean);
+
+  return match;
+}
+
+module.exports = processFontVariant;

package/Libraries/StyleSheet/processTransform.js

@@ -10,11 +10,8 @@
 
 'use strict';
 
-const MatrixMath = require('../Utilities/MatrixMath');
-const Platform = require('../Utilities/Platform');
-
-const invariant = require('invariant');
 const stringifySafe = require('../Utilities/stringifySafe').default;
+const invariant = require('invariant');
 
 /**
  * Generate a transform matrix based on the provided transforms, and use that
@@ -25,118 +22,130 @@ const stringifySafe = require('../Utilities/stringifySafe').default;
  * interface to native code.
  */
 function processTransform(
-  transform: Array<Object>,
+  transform: Array<Object> | string,
 ): Array<Object> | Array<number> {
+  if (typeof transform === 'string') {
+    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    let transformArray: Array<Object> = [];
+    let matches;
+
+    while ((matches = regex.exec(transform))) {
+      const {key, value} = _getKeyAndValueFromCSSTransform(
+        matches[1],
+        matches[2],
+      );
+
+      if (value !== undefined) {
+        transformArray.push({[key]: value});
+      }
+    }
+    transform = transformArray;
+  }
+
   if (__DEV__) {
     _validateTransforms(transform);
   }
 
-  // Android & iOS implementations of transform property accept the list of
-  // transform properties as opposed to a transform Matrix. This is necessary
-  // to control transform property updates completely on the native thread.
-  if (Platform.OS === 'android' || Platform.OS === 'ios') {
-    return transform;
-  }
+  return transform;
+}
+
+const _getKeyAndValueFromCSSTransform: (
+  key:
+    | string
+    | $TEMPORARY$string<'matrix'>
+    | $TEMPORARY$string<'perspective'>
+    | $TEMPORARY$string<'rotate'>
+    | $TEMPORARY$string<'rotateX'>
+    | $TEMPORARY$string<'rotateY'>
+    | $TEMPORARY$string<'rotateZ'>
+    | $TEMPORARY$string<'scale'>
+    | $TEMPORARY$string<'scaleX'>
+    | $TEMPORARY$string<'scaleY'>
+    | $TEMPORARY$string<'skewX'>
+    | $TEMPORARY$string<'skewY'>
+    | $TEMPORARY$string<'translate'>
+    | $TEMPORARY$string<'translate3d'>
+    | $TEMPORARY$string<'translateX'>
+    | $TEMPORARY$string<'translateY'>,
+  args: string,
+) => {key: string, value?: number[] | number | string} = (key, args) => {
+  const argsWithUnitsRegex = new RegExp(/([+-]?\d+(\.\d+)?)([a-zA-Z]+)?/g);
 
-  const result = MatrixMath.createIdentityMatrix();
+  switch (key) {
+    case 'matrix':
+      return {key, value: args.match(/[+-]?\d+(\.\d+)?/g)?.map(Number)};
+    case 'translate':
+    case 'translate3d':
+      const parsedArgs = [];
+      let missingUnitOfMeasurement = false;
 
-  transform.forEach(transformation => {
-    const key = Object.keys(transformation)[0];
-    const value = transformation[key];
+      let matches;
+      while ((matches = argsWithUnitsRegex.exec(args))) {
+        const value = Number(matches[1]);
+        const unitOfMeasurement = matches[3];
 
-    switch (key) {
-      case 'matrix':
-        MatrixMath.multiplyInto(result, result, value);
-        break;
-      case 'perspective':
-        _multiplyTransform(result, MatrixMath.reusePerspectiveCommand, [value]);
-        break;
-      case 'rotateX':
-        _multiplyTransform(result, MatrixMath.reuseRotateXCommand, [
-          _convertToRadians(value),
-        ]);
-        break;
-      case 'rotateY':
-        _multiplyTransform(result, MatrixMath.reuseRotateYCommand, [
-          _convertToRadians(value),
-        ]);
-        break;
-      case 'rotate':
-      case 'rotateZ':
-        _multiplyTransform(result, MatrixMath.reuseRotateZCommand, [
-          _convertToRadians(value),
-        ]);
-        break;
-      case 'scale':
-        _multiplyTransform(result, MatrixMath.reuseScaleCommand, [value]);
-        break;
-      case 'scaleX':
-        _multiplyTransform(result, MatrixMath.reuseScaleXCommand, [value]);
-        break;
-      case 'scaleY':
-        _multiplyTransform(result, MatrixMath.reuseScaleYCommand, [value]);
-        break;
-      case 'translate':
-        _multiplyTransform(result, MatrixMath.reuseTranslate3dCommand, [
-          value[0],
-          value[1],
-          value[2] || 0,
-        ]);
-        break;
-      case 'translateX':
-        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
-          value,
-          0,
-        ]);
-        break;
-      case 'translateY':
-        _multiplyTransform(result, MatrixMath.reuseTranslate2dCommand, [
-          0,
-          value,
-        ]);
-        break;
-      case 'skewX':
-        _multiplyTransform(result, MatrixMath.reuseSkewXCommand, [
-          _convertToRadians(value),
-        ]);
-        break;
-      case 'skewY':
-        _multiplyTransform(result, MatrixMath.reuseSkewYCommand, [
-          _convertToRadians(value),
-        ]);
-        break;
-      default:
-        throw new Error('Invalid transform name: ' + key);
-    }
-  });
+        if (value !== 0 && !unitOfMeasurement) {
+          missingUnitOfMeasurement = true;
+        }
 
-  return result;
-}
+        parsedArgs.push(value);
+      }
 
-/**
- * Performs a destructive operation on a transform matrix.
- */
-/* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
- * Flow's LTI update could not be added via codemod */
-function _multiplyTransform(
-  result: Array<number>,
-  matrixMathFunction: Function,
-  args: Array<number>,
-): void {
-  const matrixToApply = MatrixMath.createIdentityMatrix();
-  const argsWithIdentity = [matrixToApply].concat(args);
-  matrixMathFunction.apply(this, argsWithIdentity);
-  MatrixMath.multiplyInto(result, result, matrixToApply);
-}
+      if (__DEV__) {
+        invariant(
+          !missingUnitOfMeasurement,
+          `Transform with key ${key} must have units unless the provided value is 0, found %s`,
+          `${key}(${args})`,
+        );
 
-/**
- * Parses a string like '0.5rad' or '60deg' into radians expressed in a float.
- * Note that validation on the string is done in `_validateTransform()`.
- */
-function _convertToRadians(value: string): number {
-  const floatValue = parseFloat(value);
-  return value.indexOf('rad') > -1 ? floatValue : (floatValue * Math.PI) / 180;
-}
+        if (key === 'translate') {
+          invariant(
+            parsedArgs?.length === 1 || parsedArgs?.length === 2,
+            'Transform with key translate must be an string with 1 or 2 parameters, found %s: %s',
+            parsedArgs?.length,
+            `${key}(${args})`,
+          );
+        } else {
+          invariant(
+            parsedArgs?.length === 3,
+            'Transform with key translate3d must be an string with 3 parameters, found %s: %s',
+            parsedArgs?.length,
+            `${key}(${args})`,
+          );
+        }
+      }
+
+      if (parsedArgs?.length === 1) {
+        parsedArgs.push(0);
+      }
+
+      return {key: 'translate', value: parsedArgs};
+    case 'translateX':
+    case 'translateY':
+    case 'perspective':
+      const argMatches = argsWithUnitsRegex.exec(args);
+
+      if (!argMatches?.length) {
+        return {key, value: undefined};
+      }
+
+      const value = Number(argMatches[1]);
+      const unitOfMeasurement = argMatches[3];
+
+      if (__DEV__) {
+        invariant(
+          value === 0 || unitOfMeasurement,
+          `Transform with key ${key} must have units unless the provided value is 0, found %s`,
+          `${key}(${args})`,
+        );
+      }
+
+      return {key, value};
+
+    default:
+      return {key, value: !isNaN(args) ? Number(args) : args};
+  }
+};
 
 function _validateTransforms(transform: Array<Object>): void {
   transform.forEach(transformation => {