react-native-windows 0.68.1 → 0.69.0-preview.1

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict
- * @generated SignedSource<<ec11b46a06877b4f7f3f0b6c1f5d46c3>>
+ * @generated SignedSource<<fb8a7e52d219403fad0cf916954e5185>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -76,6 +76,7 @@ export type ViewConfig = $ReadOnly<{
       phasedRegistrationNames: $ReadOnly<{
         captured: string,
         bubbled: string,
+        skipBubbling?: ?boolean,
       }>,
     }>,
     ...,

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<a81ed33269e71024fedad145e843fab0>>
+ * @generated SignedSource<<a5b40ebf1f5b17d6dc83479c1c597566>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -22,6 +22,7 @@ const customBubblingEventTypes: {
     phasedRegistrationNames: $ReadOnly<{|
       captured: string,
       bubbled: string,
+      skipBubbling?: ?boolean,
     |}>,
   |}>,
   ...,

package/Libraries/StyleSheet/EdgeInsetsPropType.js

@@ -10,6 +10,9 @@
 
 'use strict';
 
-import type {Rect} from './Rect';
+import type {Rect, RectOrSize} from './Rect';
 
+// TODO: allow all EdgeInsets-like property to be set using a single number
+// and unify EdgeInsetsProp with EdgeInsetsOrSizeProp
 export type EdgeInsetsProp = Rect;
+export type EdgeInsetsOrSizeProp = RectOrSize;

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -14,21 +14,31 @@ const AnimatedNode = require('../Animated/nodes/AnimatedNode');
 
 import type {NativeColorValue} from './PlatformColorValueTypes';
 
-export type ____ColorValue_Internal = null | string | NativeColorValue;
+export type ____ColorValue_Internal = null | string | number | NativeColorValue;
 
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
-export type PointValue = {|
+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;
 
+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`:
@@ -42,7 +52,7 @@ 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'.
@@ -472,49 +482,7 @@ type ____LayoutStyle_Internal = $ReadOnly<{|
    *  @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,
-      |},
-  >,
-|}>;
+}>;
 
 /**
  * These props can be used to dynamically generate shadows on views, images, text, etc.
@@ -526,7 +494,7 @@ type ____TransformStyle_Internal = $ReadOnly<{|
  * 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
@@ -536,10 +504,10 @@ export type ____ShadowStyle_Internal = $ReadOnly<{|
    * 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
@@ -550,9 +518,14 @@ export type ____ShadowStyle_Internal = $ReadOnly<{|
    * @platform ios
    */
   shadowRadius?: number,
-|}>;
+}>;
+
+export type ____ShadowStyle_Internal = $ReadOnly<{
+  ...____ShadowStyle_InternalCore,
+  ...____ShadowStyle_InternalOverrides,
+}>;
 
-export type ____ViewStyle_Internal = $ReadOnly<{|
+export type ____ViewStyle_InternalCore = $ReadOnly<{
   ...$Exact<____LayoutStyle_Internal>,
   ...$Exact<____ShadowStyle_Internal>,
   ...$Exact<____TransformStyle_Internal>,
@@ -584,7 +557,12 @@ export type ____ViewStyle_Internal = $ReadOnly<{|
   borderTopWidth?: number | AnimatedNode,
   opacity?: number | AnimatedNode,
   elevation?: number,
-|}>;
+}>;
+
+export type ____ViewStyle_Internal = $ReadOnly<{
+  ...____ViewStyle_InternalCore,
+  ...____ViewStyle_InternalOverrides,
+}>;
 
 export type ____FontWeight_Internal =
   | 'normal'
@@ -599,7 +577,7 @@ export type ____FontWeight_Internal =
   | '800'
   | '900';
 
-export type ____TextStyle_Internal = $ReadOnly<{|
+export type ____TextStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   color?: ____ColorValue_Internal,
   fontFamily?: string,
@@ -613,10 +591,10 @@ export type ____TextStyle_Internal = $ReadOnly<{|
     | 'tabular-nums'
     | 'proportional-nums',
   >,
-  textShadowOffset?: $ReadOnly<{|
+  textShadowOffset?: $ReadOnly<{
     width: number,
     height: number,
-  |}>,
+  }>,
   textShadowRadius?: number,
   textShadowColor?: ____ColorValue_Internal,
   letterSpacing?: number,
@@ -633,22 +611,37 @@ export type ____TextStyle_Internal = $ReadOnly<{|
   textDecorationColor?: ____ColorValue_Internal,
   textTransform?: 'none' | 'capitalize' | 'uppercase' | 'lowercase',
   writingDirection?: 'auto' | 'ltr' | 'rtl',
-|}>;
+}>;
 
-export type ____ImageStyle_Internal = $ReadOnly<{|
+export type ____TextStyle_Internal = $ReadOnly<{
+  ...____TextStyle_InternalCore,
+  ...____TextStyle_InternalOverrides,
+}>;
+
+export type ____ImageStyle_InternalCore = $ReadOnly<{
   ...$Exact<____ViewStyle_Internal>,
   resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
   tintColor?: ____ColorValue_Internal,
   overlayColor?: string,
-|}>;
+}>;
+
+export type ____ImageStyle_Internal = $ReadOnly<{
+  ...____ImageStyle_InternalCore,
+  ...____ImageStyle_InternalOverrides,
+}>;
 
-export type ____DangerouslyImpreciseStyle_Internal = {
+export type ____DangerouslyImpreciseStyle_InternalCore = $ReadOnly<{
   ...$Exact<____TextStyle_Internal>,
-  +resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
-  +tintColor?: ____ColorValue_Internal,
-  +overlayColor?: string,
+  resizeMode?: 'contain' | 'cover' | 'stretch' | 'center' | 'repeat',
+  tintColor?: ____ColorValue_Internal,
+  overlayColor?: string,
+}>;
+
+export type ____DangerouslyImpreciseStyle_Internal = $ReadOnly<{
+  ...____DangerouslyImpreciseStyle_InternalCore,
+  ...____DangerouslyImpreciseStyle_InternalOverrides,
   ...
-};
+}>;
 
 type GenericStyleProp<+T> =
   | null

package/Libraries/StyleSheet/normalizeColor.js

@@ -22,7 +22,7 @@ function normalizeColor(
     const {normalizeColorObject} = require('./PlatformColorValueTypes');
     const normalizedColor = normalizeColorObject(color);
     if (normalizedColor != null) {
-      return color;
+      return normalizedColor;
     }
   }
 

package/Libraries/StyleSheet/private/_StyleSheetTypesOverrides.js

@@ -0,0 +1,15 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+export type ____DangerouslyImpreciseStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ImageStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ShadowStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____TextStyle_InternalOverrides = $ReadOnly<{}>;
+export type ____ViewStyle_InternalOverrides = $ReadOnly<{}>;

package/Libraries/StyleSheet/private/_TransformStyle.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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+const AnimatedNode = require('../../Animated/nodes/AnimatedNode');
+
+export 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,
+      |},
+  >,
+|}>;

package/Libraries/StyleSheet/processTransform.windows.js

@@ -0,0 +1,272 @@
+/**
+ * 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 MatrixMath = require('../Utilities/MatrixMath');
+const Platform = require('../Utilities/Platform');
+
+const invariant = require('invariant');
+const stringifySafe = require('../Utilities/stringifySafe').default;
+
+/**
+ * Generate a transform matrix based on the provided transforms, and use that
+ * within the style object instead.
+ *
+ * This allows us to provide an API that is similar to CSS, where transforms may
+ * be applied in an arbitrary order, and yet have a universal, singular
+ * interface to native code.
+ */
+function processTransform(
+  transform: Array<Object>,
+): Array<Object> | Array<number> {
+  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' ||
+    Platform.OS === 'windows'
+  ) {
+    return transform;
+  }
+
+  const result = MatrixMath.createIdentityMatrix();
+
+  transform.forEach(transformation => {
+    const key = Object.keys(transformation)[0];
+    const value = transformation[key];
+
+    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);
+    }
+  });
+
+  return result;
+}
+
+/**
+ * Performs a destructive operation on a transform matrix.
+ */
+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);
+}
+
+/**
+ * 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;
+}
+
+function _validateTransforms(transform: Array<Object>): void {
+  transform.forEach(transformation => {
+    const keys = Object.keys(transformation);
+    invariant(
+      keys.length === 1,
+      'You must specify exactly one property per transform object. Passed properties: %s',
+      stringifySafe(transformation),
+    );
+    const key = keys[0];
+    const value = transformation[key];
+    _validateTransform(key, value, transformation);
+  });
+}
+
+function _validateTransform(
+  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<'translateX'>
+    | $TEMPORARY$string<'translateY'>,
+  value: any | number | string,
+  transformation: any,
+) {
+  invariant(
+    !value.getValue,
+    'You passed an Animated.Value to a normal component. ' +
+      'You need to wrap that component in an Animated. For example, ' +
+      'replace <View /> by <Animated.View />.',
+  );
+
+  const multivalueTransforms = ['matrix', 'translate'];
+  if (multivalueTransforms.indexOf(key) !== -1) {
+    invariant(
+      Array.isArray(value),
+      'Transform with key of %s must have an array as the value: %s',
+      key,
+      stringifySafe(transformation),
+    );
+  }
+  switch (key) {
+    case 'matrix':
+      invariant(
+        value.length === 9 || value.length === 16,
+        'Matrix transform must have a length of 9 (2d) or 16 (3d). ' +
+          'Provided matrix has a length of %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translate':
+      invariant(
+        value.length === 2 || value.length === 3,
+        'Transform with key translate must be an array of length 2 or 3, found %s: %s',
+        /* $FlowFixMe[prop-missing] (>=0.84.0 site=react_native_fb) This
+         * comment suppresses an error found when Flow v0.84 was deployed. To
+         * see the error, delete this comment and run Flow. */
+        value.length,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'rotateX':
+    case 'rotateY':
+    case 'rotateZ':
+    case 'rotate':
+    case 'skewX':
+    case 'skewY':
+      invariant(
+        typeof value === 'string',
+        'Transform with key of "%s" must be a string: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value.indexOf('deg') > -1 || value.indexOf('rad') > -1,
+        'Rotate transform must be expressed in degrees (deg) or radians ' +
+          '(rad): %s',
+        stringifySafe(transformation),
+      );
+      break;
+    case 'perspective':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      invariant(
+        value !== 0,
+        'Transform with key of "%s" cannot be zero: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    case 'translateX':
+    case 'translateY':
+    case 'scale':
+    case 'scaleX':
+    case 'scaleY':
+      invariant(
+        typeof value === 'number',
+        'Transform with key of "%s" must be a number: %s',
+        key,
+        stringifySafe(transformation),
+      );
+      break;
+    default:
+      invariant(
+        false,
+        'Invalid transform %s: %s',
+        key,
+        stringifySafe(transformation),
+      );
+  }
+}
+
+module.exports = processTransform;

package/Libraries/Text/Text.js

@@ -48,11 +48,20 @@ const Text: React.AbstractComponent<
 
   const [isHighlighted, setHighlighted] = useState(false);
 
+  const _disabled =
+    restProps.disabled != null
+      ? restProps.disabled
+      : props.accessibilityState?.disabled;
+  const _accessibilityState =
+    _disabled !== props.accessibilityState?.disabled
+      ? {...props.accessibilityState, disabled: _disabled}
+      : props.accessibilityState;
+
   const isPressable =
     (onPress != null ||
       onLongPress != null ||
       onStartShouldSetResponder != null) &&
-    restProps.disabled !== true;
+    _disabled !== true;
 
   const initialized = useLazyInitialization(isPressable);
   const config = useMemo(
@@ -120,6 +129,7 @@ const Text: React.AbstractComponent<
                 onResponderTerminate(event);
               }
             },
+            onClick: eventHandlers.onClick,
             onResponderTerminationRequest:
               eventHandlers.onResponderTerminationRequest,
             onStartShouldSetResponder: eventHandlers.onStartShouldSetResponder,
@@ -174,7 +184,9 @@ const Text: React.AbstractComponent<
       <NativeText
         {...restProps}
         {...eventHandlersForText}
+        disabled={_disabled}
         accessible={accessible !== false}
+        accessibilityState={_accessibilityState}
         allowFontScaling={allowFontScaling !== false}
         ellipsizeMode={ellipsizeMode ?? 'tail'}
         isHighlighted={isHighlighted}
@@ -189,12 +201,6 @@ const Text: React.AbstractComponent<
 
 Text.displayName = 'Text';
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-Text.propTypes = require('deprecated-react-native-prop-types').TextPropTypes;
-
 /**
  * Returns false until the first time `newValue` is true, after which this will
  * always return true. This is necessary to lazily initialize `Pressability` so