@office-iss/react-native-win32 0.71.5 → 0.72.0-preview.2

package/Libraries/Image/AssetRegistry.js

@@ -10,4 +10,4 @@
 
 'use strict';
 
-module.exports = require('@react-native/assets/registry');
+module.exports = require('@react-native/assets-registry/registry');

package/Libraries/Image/AssetSourceResolver.js

@@ -18,16 +18,16 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets/registry';
+import type {PackagerAsset} from '@react-native/assets-registry/registry';
 
-const PixelRatio = require('../Utilities/PixelRatio');
+const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
 const {pickScale} = require('./AssetUtils');
 const {
   getAndroidResourceFolderName,
   getAndroidResourceIdentifier,
   getBasePath,
-} = require('@react-native/assets/path-support');
+} = require('@react-native/assets-registry/path-support');
 const invariant = require('invariant');
 
 /**

package/Libraries/Image/Image.android.js

@@ -152,19 +152,22 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   let style;
   let sources;
   if (Array.isArray(source)) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([styles.base, props.style]);
     sources = source;
   } else {
+    // $FlowFixMe[incompatible-type]
     const {width = props.width, height = props.height, uri} = source;
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([{width, height}, styles.base, props.style]);
     sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
   }
 
   const {height, width, ...restProps} = props;
+
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
   const nativeProps = {
     ...restProps,

package/Libraries/Image/Image.d.ts

@@ -12,7 +12,7 @@ import {Constructor} from '../../types/private/Utilities';
 import {AccessibilityProps} from '../Components/View/ViewAccessibility';
 import {Insets} from '../../types/public/Insets';
 import {NativeMethods} from '../../types/public/ReactNativeTypes';
-import {StyleProp} from '../StyleSheet/StyleSheet';
+import {ColorValue, StyleProp} from '../StyleSheet/StyleSheet';
 import {ImageStyle, ViewStyle} from '../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent, NativeSyntheticEvent} from '../Types/CoreEventTypes';
 import {ImageResizeMode} from './ImageResizeMode';
@@ -225,6 +225,21 @@ export interface ImagePropsBase
    */
   source: ImageSourcePropType;
 
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: string | undefined;
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: string | undefined;
+
   /**
    * similarly to `source`, this property represents the resource used to render
    * the loading indicator for the image, displayed until image is ready to be
@@ -254,6 +269,52 @@ export interface ImagePropsBase
    * See https://reactnative.dev/docs/image#alt
    */
   alt?: string | undefined;
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number | undefined;
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number | undefined;
+
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
+
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue | undefined;
+
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * Similar to referrerpolicy from HTML.
+   *
+   * See https://reactnative.dev/docs/image#referrerpolicy
+   */
+  referrerPolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url'
+    | undefined;
 }
 
 export interface ImageProps extends ImagePropsBase {
@@ -298,7 +359,7 @@ export class Image extends ImageBase {
 }
 
 export interface ImageBackgroundProps extends ImagePropsBase {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
   imageStyle?: StyleProp<ImageStyle> | undefined;
   style?: StyleProp<ViewStyle> | undefined;
   imageRef?(image: Image): void;

package/Libraries/Image/Image.ios.js

@@ -114,10 +114,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   let sources;
   let style: ImageStyleProp;
   if (Array.isArray(source)) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
+    // $FlowFixMe[incompatible-type]
     const {width = props.width, height = props.height, uri} = source;
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 

package/Libraries/Image/Image.win32.js

@@ -137,10 +137,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   let sources;
   let style: ImageStyleProp;
   if (Array.isArray(source)) {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([styles.base, props.style]) || {};
     sources = source;
   } else {
+    // $FlowFixMe[incompatible-type]
     const {width = props.width, height = props.height, uri} = source;
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     style = flattenStyle([{width, height}, styles.base, props.style]) || {};
     sources = [source];
 

package/Libraries/Image/ImageBackground.js

@@ -76,6 +76,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
       ...props
     } = this.props;
 
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const flattenedStyle = flattenStyle(style);
     return (
       <View

package/Libraries/Image/ImageProps.js

@@ -93,7 +93,7 @@ export type ImageProps = {|
   'aria-label'?: ?Stringish,
 
   /**
-   * Reperesents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
+   * Represents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
    *
    * @platform android
    */

package/Libraries/Image/ImageViewNativeComponent.js

@@ -71,7 +71,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           internal_analyticTag: true,
           resizeMode: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
@@ -82,10 +82,10 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           shouldNotifyLoadEvents: true,
           defaultSrc: true,
           overlayColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           borderColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           accessible: true,
           progressiveRenderingEnabled: true,
@@ -130,7 +130,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           resizeMode: true,
           source: true,
           tintColor: {
-            process: require('../StyleSheet/processColor'),
+            process: require('../StyleSheet/processColor').default,
           },
           ...ConditionallyIgnoredEventHandlers({
             onLoadStart: true,

package/Libraries/Image/RelativeImageStub.js

@@ -13,7 +13,7 @@
 // This is a stub for flow to make it understand require('./icon.png')
 // See metro/src/Bundler/index.js
 
-const AssetRegistry = require('@react-native/assets/registry');
+const AssetRegistry = require('@react-native/assets-registry/registry');
 
 module.exports = (AssetRegistry.registerAsset({
   __packager_asset: true,

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -36,7 +36,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
     resizeMode: true,
     src: true,
     tintColor: {
-      process: require('../StyleSheet/processColor'),
+      process: require('../StyleSheet/processColor').default,
     },
     headers: true,
   },

package/Libraries/Image/resolveAssetSource.js

@@ -16,7 +16,7 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
 
 const AssetSourceResolver = require('./AssetSourceResolver');
 const {pickScale} = require('./AssetUtils');
-const AssetRegistry = require('@react-native/assets/registry');
+const AssetRegistry = require('@react-native/assets-registry/registry');
 
 let _customSourceTransformer, _serverURL, _scriptURL;
 

package/Libraries/Inspector/DevtoolsOverlay.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {PointerEvent} from '../Types/CoreEventTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {HostRef} from './getInspectorDataForViewAtPoint';
 
@@ -50,8 +51,12 @@ export default function DevtoolsOverlay({
 
     function onAgentShowNativeHighlight(node: any) {
       clearTimeout(hideTimeoutId);
-      // Shape of `node` is different in Fabric.
-      const component = node.canonical ?? node;
+
+      // `publicInstance` => Fabric
+      // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+      // `canonical` => Legacy Fabric
+      // `node` => Legacy renderer
+      const component = node.publicInstance ?? node.canonical ?? node;
       if (!component || !component.measure) {
         return;
       }
@@ -125,11 +130,11 @@ export default function DevtoolsOverlay({
       getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
         const {touchedViewTag, closestInstance, frame} = viewData;
         if (closestInstance != null || touchedViewTag != null) {
+          // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+          // this makes sure it works for both architectures.
+          agent.selectNode(findNodeHandle(touchedViewTag));
           if (closestInstance != null) {
-            // Fabric
             agent.selectNode(closestInstance);
-          } else {
-            agent.selectNode(findNodeHandle(touchedViewTag));
           }
           setInspected({
             frame,
@@ -153,14 +158,14 @@ export default function DevtoolsOverlay({
   }, []);
 
   const onPointerMove = useCallback(
-    e => {
+    (e: PointerEvent) => {
       findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
     },
     [findViewForLocation],
   );
 
   const onResponderMove = useCallback(
-    e => {
+    (e: PressEvent) => {
       findViewForLocation(
         e.nativeEvent.touches[0].locationX,
         e.nativeEvent.touches[0].locationY,
@@ -169,7 +174,7 @@ export default function DevtoolsOverlay({
     [findViewForLocation],
   );
 
-  const shouldSetResponser = useCallback(
+  const shouldSetResponder = useCallback(
     (e: PressEvent): boolean => {
       onResponderMove(e);
       return true;
@@ -179,17 +184,19 @@ export default function DevtoolsOverlay({
 
   let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
   if (isInspecting) {
-    const events = ReactNativeFeatureFlags.shouldEmitW3CPointerEvents
-      ? {
-          onPointerMove,
-          onPointerDown: onPointerMove,
-          onPointerUp: stopInspecting,
-        }
-      : {
-          onStartShouldSetResponder: shouldSetResponser,
-          onResponderMove: onResponderMove,
-          onResponderRelease: stopInspecting,
-        };
+    const events =
+      // Pointer events only work on fabric
+      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+        ? {
+            onPointerMove,
+            onPointerDown: onPointerMove,
+            onPointerUp: stopInspecting,
+          }
+        : {
+            onStartShouldSetResponder: shouldSetResponder,
+            onResponderMove: onResponderMove,
+            onResponderRelease: stopInspecting,
+          };
     return (
       <View
         nativeID="devToolsInspectorOverlay"

package/Libraries/Inspector/ElementBox.js

@@ -13,13 +13,14 @@
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
 const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const style = flattenStyle(this.props.style) || {};
     let margin = resolveBoxStyle('margin', style);
     let padding = resolveBoxStyle('padding', style);
@@ -123,12 +124,14 @@ function resolveSizeInPlace(
 ) {
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
+      // $FlowFixMe[prop-missing]
       style[direction] =
         (parseFloat(style[direction]) / 100.0) *
         Dimensions.get('window')[dimension];
     }
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
+      // $FlowFixMe[prop-missing]
       style[direction] = 0;
     }
   }

package/Libraries/Inspector/Inspector.js

@@ -18,7 +18,7 @@ const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const Platform = require('../Utilities/Platform');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
@@ -142,12 +142,11 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent) {
+      const agent = this.state.devtoolsAgent;
+      if (agent) {
+        agent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          // Fabric
-          this.state.devtoolsAgent.selectNode(closestInstance);
-        } else if (touchedViewTag != null) {
-          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+          agent.selectNode(closestInstance);
         }
       }
 

package/Libraries/Inspector/Inspector.win32.js

@@ -12,12 +12,14 @@
 
 import type {TouchedViewDataAtPoint} from '../Renderer/shims/ReactNativeTypes';
 import type {HostRef} from './getInspectorDataForViewAtPoint';
+
+// import Dimensions from '../Utilities/Dimensions'; [win32]
+
 const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const ReactNative = require('../Renderer/shims/ReactNative');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-//const Dimensions = require('../Utilities/Dimensions');
 const Platform = require('../Utilities/Platform');
 const View = require('../Components/View/View');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
@@ -144,12 +146,11 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent) {
+      const agent = this.state.devtoolsAgent;
+      if (agent) {
+        agent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          // Fabric
-          this.state.devtoolsAgent.selectNode(closestInstance);
-        } else if (touchedViewTag != null) {
-          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+          agent.selectNode(closestInstance);
         }
       }
 

package/Libraries/Inspector/InspectorOverlay.js

@@ -15,7 +15,7 @@ import type {PressEvent} from '../Types/CoreEventTypes';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
@@ -36,7 +36,7 @@ class InspectorOverlay extends React.Component<Props> {
     this.props.onTouchPoint(locationX, locationY);
   };
 
-  shouldSetResponser: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
+  shouldSetResponder: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
     this.findViewForTouchEvent(e);
     return true;
   };
@@ -54,7 +54,7 @@ class InspectorOverlay extends React.Component<Props> {
 
     return (
       <View
-        onStartShouldSetResponder={this.shouldSetResponser}
+        onStartShouldSetResponder={this.shouldSetResponder}
         onResponderMove={this.findViewForTouchEvent}
         nativeID="inspectorOverlay" /* TODO: T68258846. */
         style={[styles.inspector, {height: Dimensions.get('window').height}]}>

package/Libraries/Inspector/InspectorOverlay.win32.js

@@ -13,9 +13,10 @@
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
 
+// import Dimensions from '../Utilities/Dimensions'; [Win32]
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-// const Dimensions = require('../Utilities/Dimensions'); [Win32]
 const ElementBox = require('./ElementBox');
 const React = require('react');
 

package/Libraries/Inspector/NetworkOverlay.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {RenderItemProps} from '../Lists/VirtualizedList';
+import type {RenderItemProps} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');

package/Libraries/Interaction/JSEventLoopWatchdog.js

@@ -27,7 +27,7 @@ type Handler = {
  * other events from being processed in a timely manner.
  *
  * The "stall" time is defined as the amount of time in access of the acceptable
- * threshold, which is typically around 100-200ms. So if the treshold is set to
+ * threshold, which is typically around 100-200ms. So if the threshold is set to
  * 100 and a timer fires 150 ms later than it was scheduled because the event
  * loop was tied up, that would be considered a 50ms stall.
  *

package/Libraries/Interaction/PanResponder.js

@@ -11,7 +11,6 @@
 'use strict';
 
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {PanResponderType} from './PanResponder.flow.js';
 
 const InteractionManager = require('./InteractionManager');
 const TouchHistoryMath = require('./TouchHistoryMath');
@@ -191,7 +190,7 @@ type ActiveCallback = (
 
 type PassiveCallback = (event: PressEvent, gestureState: GestureState) => mixed;
 
-type PanHandlers = {|
+export type PanHandlers = {|
   onMoveShouldSetResponder: (event: PressEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: PressEvent) => boolean,
   onResponderEnd: (event: PressEvent) => void,
@@ -227,7 +226,7 @@ type PanResponderConfig = $ReadOnly<{|
   onShouldBlockNativeResponder?: ?ActiveCallback,
 |}>;
 
-const PanResponder: PanResponderType = {
+const PanResponder = {
   /**
    *
    * A graphical explanation of the touch data flow:
@@ -399,10 +398,10 @@ const PanResponder: PanResponderType = {
    *  accordingly. (numberActiveTouches) may not be totally accurate unless you
    *  are the responder.
    */
-  create(config: PanResponderConfig): $TEMPORARY$object<{|
+  create(config: PanResponderConfig): {
     getInteractionHandle: () => ?number,
     panHandlers: PanHandlers,
-  |}> {
+  } {
     const interactionState = {
       handle: (null: ?number),
     };
@@ -580,4 +579,4 @@ export type PanResponderInstance = $Call<
   PanResponderConfig,
 >;
 
-module.exports = PanResponder;
+export default PanResponder;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -17,6 +17,7 @@ import type {
   LayoutAnimationType,
 } from '../Renderer/shims/ReactNativeTypes';
 
+import {getFabricUIManager} from '../ReactNative/FabricUIManager';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import Platform from '../Utilities/Platform';
 
@@ -77,7 +78,7 @@ function configureNext(
 
   // In Fabric, LayoutAnimations are unconditionally enabled for Android, and
   // conditionally enabled on iOS (pending fully shipping; this is a temporary state).
-  const FabricUIManager: FabricUIManagerSpec = global?.nativeFabricUIManager;
+  const FabricUIManager = getFabricUIManager();
   if (FabricUIManager?.configureNextLayoutAnimation) {
     global?.nativeFabricUIManager?.configureNextLayoutAnimation(
       config,

package/Libraries/Linking/Linking.js

@@ -11,7 +11,6 @@
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import InteractionManager from '../Interaction/InteractionManager';
 import Platform from '../Utilities/Platform';
 import NativeIntentAndroid from './NativeIntentAndroid';
 import NativeLinkingManager from './NativeLinkingManager';
@@ -96,9 +95,7 @@ class Linking extends NativeEventEmitter<LinkingEventDefinitions> {
    */
   getInitialURL(): Promise<?string> {
     return Platform.OS === 'android'
-      ? InteractionManager.runAfterInteractions().then(() =>
-          nullthrows(NativeIntentAndroid).getInitialURL(),
-        )
+      ? nullthrows(NativeIntentAndroid).getInitialURL()
       : nullthrows(NativeLinkingManager).getInitialURL();
   }