react-native-windows 0.71.8 → 0.72.0-preview.1

package/Libraries/Renderer/public/ReactFabricPublicInstanceUtils.js

@@ -0,0 +1,38 @@
+/**
+ * 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 strict
+ */
+
+/**
+ * IMPORTANT!!
+ *
+ * This module cannot import `ReactFabric` (directly or indirectly)
+ * because it can be used by apps only using the legacy renderer.
+ * In that case `nativeFabricUIManager` isn't defined and `ReactFabric` throws.
+ */
+
+export function isPublicInstance(maybeInstance: mixed): boolean {
+  return (
+    maybeInstance != null &&
+    // TODO: implement a better check when the instance is defined in the React Native repository.
+    (maybeInstance.__nativeTag != null ||
+      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      isLegacyFabricInstance(maybeInstance))
+  );
+}
+
+function isLegacyFabricInstance(maybeInstance: mixed): boolean {
+  /* eslint-disable dot-notation */
+  return (
+    maybeInstance != null &&
+    // $FlowExpectedError[incompatible-use]
+    maybeInstance['_internalInstanceHandle'] != null &&
+    maybeInstance['_internalInstanceHandle'].stateNode != null &&
+    maybeInstance['_internalInstanceHandle'].stateNode.canonical != null
+  );
+}

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict
- * @generated SignedSource<<d9fed8e0aacc3113ceaf7d8e266300c6>>
+ * @generated SignedSource<<7dc3ed81183377055bac08760fcd775b>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -51,7 +51,7 @@ export type AttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
   style: $ReadOnly<{
     [propName: string]: AnyAttributeType,
-    ...,
+    ...
   }>,
   ...
 }>;
@@ -60,7 +60,7 @@ export type PartialAttributeConfiguration = $ReadOnly<{
   [propName: string]: AnyAttributeType,
   style?: $ReadOnly<{
     [propName: string]: AnyAttributeType,
-    ...,
+    ...
   }>,
   ...
 }>;
@@ -79,13 +79,13 @@ export type ViewConfig = $ReadOnly<{
         skipBubbling?: ?boolean,
       }>,
     }>,
-    ...,
+    ...
   }>,
   directEventTypes?: $ReadOnly<{
     [eventName: string]: $ReadOnly<{
       registrationName: string,
     }>,
-    ...,
+    ...
   }>,
   uiViewClassName: string,
   validAttributes: AttributeConfiguration,
@@ -98,7 +98,23 @@ export type PartialViewConfig = $ReadOnly<{
   validAttributes?: PartialAttributeConfiguration,
 }>;
 
-export type NativeMethods = $ReadOnly<{
+/**
+ * Current usages should migrate to this definition
+ */
+export interface INativeMethods {
+  blur(): void;
+  focus(): void;
+  measure(callback: MeasureOnSuccessCallback): void;
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void;
+  measureLayout(
+    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
+    onSuccess: MeasureLayoutOnSuccessCallback,
+    onFail?: () => void,
+  ): void;
+  setNativeProps(nativeProps: {...}): void;
+}
+
+export type NativeMethods = $ReadOnly<{|
   blur(): void,
   focus(): void,
   measure(callback: MeasureOnSuccessCallback): void,
@@ -109,7 +125,11 @@ export type NativeMethods = $ReadOnly<{
     onFail?: () => void,
   ): void,
   setNativeProps(nativeProps: {...}): void,
-}>;
+|}>;
+
+// This validates that INativeMethods and NativeMethods stay in sync using Flow!
+declare var ensureNativeMethodsAreSynced: NativeMethods;
+(ensureNativeMethodsAreSynced: INativeMethods);
 
 export type HostComponent<T> = AbstractComponent<T, $ReadOnly<NativeMethods>>;
 
@@ -122,7 +142,7 @@ type SecretInternalsType = {
 
 type InspectorDataProps = $ReadOnly<{
   [propName: string]: string,
-  ...,
+  ...
 }>;
 
 type InspectorDataSource = $ReadOnly<{
@@ -195,6 +215,10 @@ export type ReactNativeType = {
   ...
 };
 
+export opaque type Node = mixed;
+type InternalInstanceHandle = mixed;
+type PublicInstance = mixed;
+
 export type ReactFabricType = {
   findHostInstance_DEPRECATED<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
@@ -218,18 +242,12 @@ export type ReactFabricType = {
     concurrentRoot: ?boolean,
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
-  ...
-};
-
-export type ReactNativeEventTarget = {
-  node: {...},
-  canonical: {
-    _nativeTag: number,
-    viewConfig: ViewConfig,
-    currentProps: {...},
-    _internalInstanceHandle: {...},
-    ...
-  },
+  getNodeFromInternalInstanceHandle(
+    internalInstanceHandle: InternalInstanceHandle,
+  ): ?Node,
+  getPublicInstanceFromInternalInstanceHandle(
+    internalInstanceHandle: InternalInstanceHandle,
+  ): PublicInstance,
   ...
 };
 

package/Libraries/Renderer/shims/ReactNativeViewConfigRegistry.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<bda490a01513d4526005c1e029d5ce93>>
+ * @generated SignedSource<<47ba85d7f43c9b591d6804827322d00e>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -25,20 +25,20 @@ const customBubblingEventTypes: {
       skipBubbling?: ?boolean,
     }>,
   }>,
-  ...,
+  ...
 } = {};
 const customDirectEventTypes: {
   [eventName: string]: $ReadOnly<{
     registrationName: string,
   }>,
-  ...,
+  ...
 } = {};
 
 exports.customBubblingEventTypes = customBubblingEventTypes;
 exports.customDirectEventTypes = customDirectEventTypes;
 
-const viewConfigCallbacks = new Map();
-const viewConfigs = new Map();
+const viewConfigCallbacks = new Map<string, ?() => ViewConfig>();
+const viewConfigs = new Map<string, ViewConfig>();
 
 function processEventTypes(viewConfig: ViewConfig): void {
   const {bubblingEventTypes, directEventTypes} = viewConfig;
@@ -78,7 +78,7 @@ function processEventTypes(viewConfig: ViewConfig): void {
  * A callback is provided to load the view config from UIManager.
  * The callback is deferred until the view is actually rendered.
  */
-exports.register = function(name: string, callback: () => ViewConfig): string {
+exports.register = function (name: string, callback: () => ViewConfig): string {
   invariant(
     !viewConfigCallbacks.has(name),
     'Tried to register two views with the same name %s',
@@ -99,7 +99,7 @@ exports.register = function(name: string, callback: () => ViewConfig): string {
  * If this is the first time the view has been used,
  * This configuration will be lazy-loaded from UIManager.
  */
-exports.get = function(name: string): ViewConfig {
+exports.get = function (name: string): ViewConfig {
   let viewConfig;
   if (!viewConfigs.has(name)) {
     const callback = viewConfigCallbacks.get(name);

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -6,7 +6,7 @@
  *
  * @noformat
  * @flow strict-local
- * @generated SignedSource<<7d3d4090dadea2daa09d92e5e66f6e5d>>
+ * @generated SignedSource<<e5e369f149ed8206141b7a3c2855bb85>>
  *
  * This file was sync'd from the facebook/react repository.
  */
@@ -26,7 +26,7 @@ const {register} = ReactNativeViewConfigRegistry;
  * @param {string} config iOS View configuration.
  * @private
  */
-const createReactNativeComponentClass = function(
+const createReactNativeComponentClass = function (
   name: string,
   callback: () => ViewConfig,
 ): string {

package/Libraries/Share/Share.js

@@ -11,7 +11,7 @@
 import NativeActionSheetManager from '../ActionSheetIOS/NativeActionSheetManager';
 import NativeShareModule from './NativeShareModule';
 
-const processColor = require('../StyleSheet/processColor');
+const processColor = require('../StyleSheet/processColor').default;
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
 

package/Libraries/StyleSheet/PlatformColorValueTypes.ios.js

@@ -78,7 +78,7 @@ export const processColorObject = (
   color: NativeColorValue,
 ): ?NativeColorValue => {
   if ('dynamic' in color && color.dynamic != null) {
-    const processColor = require('./processColor');
+    const processColor = require('./processColor').default;
     const dynamic = color.dynamic;
     const dynamicColor: NativeColorValue = {
       dynamic: {

package/Libraries/StyleSheet/StyleSheet.js

@@ -24,7 +24,7 @@ import type {
 } from './StyleSheetTypes';
 
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-const PixelRatio = require('../Utilities/PixelRatio');
+const PixelRatio = require('../Utilities/PixelRatio').default;
 const flatten = require('./flattenStyle');
 
 /**

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;
 }