@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.1

package/Libraries/Core/setUpTimers.js

@@ -21,6 +21,17 @@ if (__DEV__) {
   }
 }
 
+const isEventLoopEnabled = (() => {
+  if (NativeReactNativeFeatureFlags == null) {
+    return false;
+  }
+
+  return (
+    ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
+    !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
+  );
+})();
+
 // In bridgeless mode, timers are host functions installed from cpp.
 if (global.RN$Bridgeless !== true) {
   /**
@@ -29,14 +40,14 @@ if (global.RN$Bridgeless !== true) {
    */
   const defineLazyTimer = (
     name:
-      | $TEMPORARY$string<'cancelAnimationFrame'>
-      | $TEMPORARY$string<'cancelIdleCallback'>
-      | $TEMPORARY$string<'clearInterval'>
-      | $TEMPORARY$string<'clearTimeout'>
-      | $TEMPORARY$string<'requestAnimationFrame'>
-      | $TEMPORARY$string<'requestIdleCallback'>
-      | $TEMPORARY$string<'setInterval'>
-      | $TEMPORARY$string<'setTimeout'>,
+      | 'cancelAnimationFrame'
+      | 'cancelIdleCallback'
+      | 'clearInterval'
+      | 'clearTimeout'
+      | 'requestAnimationFrame'
+      | 'requestIdleCallback'
+      | 'setInterval'
+      | 'setTimeout',
   ) => {
     polyfillGlobal(name, () => require('./Timers/JSTimers')[name]);
   };
@@ -48,12 +59,7 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
-} else if (
-  // TODO remove this condition when bridgeless == modern scheduler everywhere.
-  NativeReactNativeFeatureFlags != null &&
-  // eslint-disable-next-line react-hooks/rules-of-hooks -- false positive due to `use` prefix
-  ReactNativeFeatureFlags.useModernRuntimeScheduler()
-) {
+} else if (isEventLoopEnabled) {
   polyfillGlobal(
     'requestIdleCallback',
     () =>
@@ -72,10 +78,7 @@ if (global.RN$Bridgeless !== true) {
 // We need to check if the native module is available before accessing the
 // feature flag, because otherwise the API would throw an error in the legacy
 // architecture in OSS, where the native module isn't available.
-if (
-  NativeReactNativeFeatureFlags != null &&
-  ReactNativeFeatureFlags.enableMicrotasks()
-) {
+if (isEventLoopEnabled) {
   // This is the flag that tells React to use `queueMicrotask` to batch state
   // updates, instead of using the scheduler to schedule a regular task.
   // We use a global variable because we don't currently have any other

package/Libraries/Debugging/DebuggingOverlay.js

@@ -102,10 +102,9 @@ const styles = StyleSheet.create({
   },
 });
 
-const DebuggingOverlayWithForwardedRef: React.AbstractComponent<
-  {},
-  DebuggingOverlayHandle,
-  React.Node,
-> = React.forwardRef(DebuggingOverlay);
+const DebuggingOverlayWithForwardedRef: component(
+  ref: React.RefSetter<DebuggingOverlayHandle>,
+  ...props: {}
+) = React.forwardRef(DebuggingOverlay);
 
 export default DebuggingOverlayWithForwardedRef;

package/Libraries/Image/AssetSourceResolver.js

@@ -53,6 +53,13 @@ function getAssetPathInDrawableFolder(asset: PackagerAsset): string {
   return drawableFolder + '/' + fileName + '.' + asset.type;
 }
 
+/**
+ * Returns true if the asset can be loaded over the network.
+ */
+function assetSupportsNetworkLoads(asset: PackagerAsset): boolean {
+  return !(asset.type === 'xml' && Platform.OS === 'android');
+}
+
 class AssetSourceResolver {
   serverUrl: ?string;
   // where the jsbundle is being run from
@@ -67,7 +74,11 @@ class AssetSourceResolver {
   }
 
   isLoadedFromServer(): boolean {
-    return !!this.serverUrl;
+    return (
+      this.serverUrl != null &&
+      this.serverUrl !== '' &&
+      assetSupportsNetworkLoads(this.asset)
+    );
   }
 
   isLoadedFromFileSystem(): boolean {

package/Libraries/Image/Image.android.js

@@ -133,7 +133,6 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       width: undefined,
       height: undefined,
     };
-    const defaultSource = resolveAssetSource(props.defaultSource);
     const loadingIndicatorSource = resolveAssetSource(
       props.loadingIndicatorSource,
     );
@@ -166,11 +165,9 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       sources = [source];
     }
 
-    const {height, width, ...restProps} = props;
-
     const {onLoadStart, onLoad, onLoadEnd, onError} = props;
     const nativeProps = {
-      ...restProps,
+      ...props,
       style,
       shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
       // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
@@ -181,7 +178,6 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
        * when making Flow check .android.js files. */
       headers: (source?.[0]?.headers || source?.headers: ?{[string]: string}),
-      defaultSrc: defaultSource ? defaultSource.uri : null,
       loadingIndicatorSrc: loadingIndicatorSource
         ? loadingIndicatorSource.uri
         : null,

package/Libraries/Image/Image.d.ts

@@ -60,18 +60,28 @@ export interface ImagePropsIOS {
 interface ImagePropsAndroid {
   /**
    * The mechanism that should be used to resize the image when the image's dimensions
-   * differ from the image view's dimensions. Defaults to auto.
+   * differ from the image view's dimensions. Defaults to `auto`.
+   *
+   * - `auto`: Use heuristics to pick between `resize` and `scale`.
+   *
+   * - `resize`: A software operation which changes the encoded image in memory before it
+   * gets decoded. This should be used instead of `scale` when the image is much larger
+   * than the view.
+   *
+   * - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is
+   * faster (usually hardware accelerated) and produces higher quality images. This
+   * should be used if the image is smaller than the view. It should also be used if the
+   * image is slightly bigger than the view.
    *
-   * 'auto': Use heuristics to pick between resize and scale.
+   * - `none`: No sampling is performed and the image is displayed in its full resolution. This
+   * should only be used in rare circumstances because it is considered unsafe as Android will
+   * throw a runtime exception when trying to render images that consume too much memory.
    *
-   * 'resize': A software operation which changes the encoded image in memory before it gets decoded.
-   * This should be used instead of scale when the image is much larger than the view.
+   * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
    *
-   * 'scale': The image gets drawn downscaled or upscaled. Compared to resize, scale is faster (usually hardware accelerated)
-   * and produces higher quality images. This should be used if the image is smaller than the view.
-   * It should also be used if the image is slightly bigger than the view.
+   * @platform android
    */
-  resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
+  resizeMethod?: 'auto' | 'resize' | 'scale' | 'none' | undefined;
 
   /**
    * Duration of fade in animation in ms. Defaults to 300
@@ -190,29 +200,10 @@ export interface ImagePropsBase
    * 'center': Scale the image down so that it is completely visible,
    * if bigger than the area of the view.
    * The image will not be scaled up.
-   */
-  resizeMode?: ImageResizeMode | undefined;
-
-  /**
-   * The mechanism that should be used to resize the image when the image's dimensions
-   * differ from the image view's dimensions. Defaults to `auto`.
    *
-   * - `auto`: Use heuristics to pick between `resize` and `scale`.
-   *
-   * - `resize`: A software operation which changes the encoded image in memory before it
-   * gets decoded. This should be used instead of `scale` when the image is much larger
-   * than the view.
-   *
-   * - `scale`: The image gets drawn downscaled or upscaled. Compared to `resize`, `scale` is
-   * faster (usually hardware accelerated) and produces higher quality images. This
-   * should be used if the image is smaller than the view. It should also be used if the
-   * image is slightly bigger than the view.
-   *
-   * More details about `resize` and `scale` can be found at http://frescolib.org/docs/resizing-rotating.html.
-   *
-   * @platform android
+   * 'none': Do not resize the image. The image will be displayed at its intrinsic size.
    */
-  resizeMethod?: 'auto' | 'resize' | 'scale' | undefined;
+  resizeMode?: ImageResizeMode | undefined;
 
   /**
    * The image source (either a remote URL or a local file resource).

package/Libraries/Image/Image.ios.js

@@ -145,9 +145,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-disabled': ariaDisabled,
     'aria-expanded': ariaExpanded,
     'aria-selected': ariaSelected,
-    height,
     src,
-    width,
     ...restProps
   } = props;
 

package/Libraries/Image/Image.win32.js

@@ -164,9 +164,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     'aria-multiselectable': ariaMultiselectable, // Win32
     'aria-required': ariaRequired, // Win32
     'aria-selected': ariaSelected,
-    height,
     src,
-    width,
     ...restProps
   } = props;
 

package/Libraries/Image/ImageBackground.js

@@ -8,10 +8,7 @@
  * @format
  */
 
-'use strict';
-
-import type {ViewProps} from '../Components/View/ViewPropTypes';
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {HostInstance} from '../Renderer/shims/ReactNativeTypes';
 import type {ImageBackgroundProps} from './ImageProps';
 
 import View from '../Components/View/View';
@@ -55,7 +52,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
 
   _viewRef: ?React.ElementRef<typeof View> = null;
 
-  _captureRef = (ref: null | React.ElementRef<HostComponent<ViewProps>>) => {
+  _captureRef = (ref: null | HostInstance) => {
     this._viewRef = ref;
   };
 

package/Libraries/Image/ImageProps.js

@@ -19,8 +19,9 @@ import type {
 } from '../StyleSheet/StyleSheet';
 import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
 import typeof Image from './Image';
+import type {ImageResizeMode} from './ImageResizeMode';
 import type {ImageSource} from './ImageSource';
-import type {Node, Ref} from 'react';
+import type {ElementRef, Node, RefSetter} from 'react';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -65,7 +66,7 @@ type AndroidImageProps = $ReadOnly<{|
    * dimensions differ from the image view's dimensions. Defaults to `'auto'`.
    * See https://reactnative.dev/docs/image#resizemethod-android
    */
-  resizeMethod?: ?('auto' | 'resize' | 'scale'),
+  resizeMethod?: ?('auto' | 'resize' | 'scale' | 'none'),
 
   /**
    * When the `resizeMethod` is set to `resize`, the destination dimensions are
@@ -77,7 +78,7 @@ type AndroidImageProps = $ReadOnly<{|
   resizeMultiplier?: ?number,
 |}>;
 
-export type ImageProps = {|
+export type ImageProps = $ReadOnly<{|
   ...$Diff<ViewProps, $ReadOnly<{|style: ?ViewStyleProp|}>>,
   ...IOSImageProps,
   ...AndroidImageProps,
@@ -234,7 +235,7 @@ export type ImageProps = {|
    *
    * See https://reactnative.dev/docs/image#resizemode
    */
-  resizeMode?: ?('cover' | 'contain' | 'stretch' | 'repeat' | 'center'),
+  resizeMode?: ?ImageResizeMode,
 
   /**
    * A unique identifier for this element to be used in UI Automation
@@ -266,7 +267,7 @@ export type ImageProps = {|
    */
   srcSet?: ?string,
   children?: empty,
-|};
+|}>;
 
 export type ImageBackgroundProps = $ReadOnly<{|
   ...ImageProps,
@@ -291,5 +292,5 @@ export type ImageBackgroundProps = $ReadOnly<{|
    *
    * See https://reactnative.dev/docs/imagebackground#imageref
    */
-  imageRef?: Ref<Image>,
+  imageRef?: RefSetter<ElementRef<Image>>,
 |}>;

package/Libraries/Image/ImageResizeMode.d.ts

@@ -12,7 +12,8 @@ export type ImageResizeMode =
   | 'contain'
   | 'stretch'
   | 'repeat'
-  | 'center';
+  | 'center'
+  | 'none';
 
 /**
  * @see ImageResizeMode.js
@@ -46,4 +47,10 @@ export interface ImageResizeModeStatic {
    * image will keep it's size and aspect ratio.
    */
   repeat: ImageResizeMode;
+
+  /**
+   * none - The image will be displayed at its intrinsic size, which means the
+   * image will not be scaled up or down.
+   */
+  none: ImageResizeMode;
 }

package/Libraries/Image/ImageResizeMode.js

@@ -33,4 +33,7 @@ export type ImageResizeMode =
 
   // Resize by stretching it to fill the entire frame of the view without
   // clipping. This may change the aspect ratio of the image, distorting it.
-  | 'stretch';
+  | 'stretch'
+
+  // The image will not be resized at all.
+  | 'none';

package/Libraries/Image/ImageSource.d.ts

@@ -50,8 +50,6 @@ export interface ImageURISource {
    * its age or expiration date. If there is no existing data in the cache corresponding
    * to a URL load request, no attempt is made to load the data from the originating source,
    * and the load is considered to have failed.
-   *
-   * @platform ios
    */
   cache?: 'default' | 'reload' | 'force-cache' | 'only-if-cached' | undefined;
   /**

package/Libraries/Image/ImageSource.js

@@ -65,8 +65,6 @@ export interface ImageURISource {
    * its age or expiration date. If there is no existing data in the cache corresponding
    * to a URL load request, no attempt is made to load the data from the originating source,
    * and the load is considered to have failed.
-   *
-   * @platform ios
    */
   +cache?: ?('default' | 'reload' | 'force-cache' | 'only-if-cached');
 

package/Libraries/Image/ImageTypes.flow.js

@@ -56,18 +56,20 @@ type ImageComponentStaticsAndroid = $ReadOnly<{
   abortPrefetch(requestId: number): void,
 }>;
 
-export type AbstractImageAndroid = React.AbstractComponent<
-  ImagePropsType,
-  | React.ElementRef<TextInlineImageNativeComponent>
-  | React.ElementRef<ImageViewNativeComponent>,
->;
+export type AbstractImageAndroid = component(
+  ref: React.RefSetter<
+    | React.ElementRef<TextInlineImageNativeComponent>
+    | React.ElementRef<ImageViewNativeComponent>,
+  >,
+  ...props: ImagePropsType
+);
 
 export type ImageAndroid = AbstractImageAndroid & ImageComponentStaticsAndroid;
 
-export type AbstractImageIOS = React.AbstractComponent<
-  ImagePropsType,
-  React.ElementRef<ImageViewNativeComponent>,
->;
+export type AbstractImageIOS = component(
+  ref: React.RefSetter<React.ElementRef<ImageViewNativeComponent>>,
+  ...props: ImagePropsType
+);
 
 export type ImageIOS = AbstractImageIOS & ImageComponentStaticsIOS;
 

package/Libraries/Image/ImageUtils.js

@@ -8,15 +8,18 @@
  * @format
  */
 
-type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+import type {ImageResizeMode} from './ImageResizeMode';
 
-const objectFitMap: {[string]: ResizeMode} = {
+const objectFitMap: {[string]: ImageResizeMode} = {
   contain: 'contain',
   cover: 'cover',
   fill: 'stretch',
   'scale-down': 'contain',
+  none: 'none',
 };
 
-export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+export function convertObjectFitToResizeMode(
+  objectFit: ?string,
+): ?ImageResizeMode {
   return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -11,6 +11,7 @@
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {
   HostComponent,
+  HostInstance,
   PartialViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
 import type {
@@ -20,7 +21,6 @@ import type {
 } from '../StyleSheet/StyleSheet';
 import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps} from './ImageProps';
-import type {ElementRef} from 'react';
 
 import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
@@ -48,7 +48,7 @@ type Props = $ReadOnly<{
 
 interface NativeCommands {
   +setIsVisible_EXPERIMENTAL: (
-    viewRef: ElementRef<HostComponent<mixed>>,
+    viewRef: HostInstance,
     isVisible: boolean,
     time: number,
   ) => void;
@@ -82,6 +82,9 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         },
         validAttributes: {
           blurRadius: true,
+          defaultSource: {
+            process: require('./resolveAssetSource'),
+          },
           internal_analyticTag: true,
           resizeMethod: true,
           resizeMode: true,
@@ -100,7 +103,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           headers: true,
           shouldNotifyLoadEvents: true,
-          defaultSrc: true,
           overlayColor: {
             process: require('../StyleSheet/processColor').default,
           },

package/Libraries/Inspector/Inspector.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const View = require('../Components/View/View');

package/Libraries/Inspector/Inspector.win32.js

@@ -17,10 +17,11 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
-const ReactNative = require('../Renderer/shims/ReactNative');
+const ReactNative = require('../Renderer/shims/ReactNative').default;
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Platform = require('../Utilities/Platform');

package/Libraries/Inspector/NetworkOverlay.js

@@ -143,6 +143,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setRequestHeaderCallback((header, value, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -159,6 +160,7 @@ class NetworkOverlay extends React.Component<Props, State> {
     });
 
     XHRInterceptor.setSendCallback((data, xhr) => {
+      // $FlowFixMe[prop-missing]
       const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
       if (xhrIndex === -1) {
         return;
@@ -173,6 +175,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setHeaderReceivedCallback(
       (type, size, responseHeaders, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;
@@ -190,6 +193,7 @@ class NetworkOverlay extends React.Component<Props, State> {
 
     XHRInterceptor.setResponseCallback(
       (status, timeout, response, responseURL, responseType, xhr) => {
+        // $FlowFixMe[prop-missing]
         const xhrIndex = this._getRequestIndexByXHRID(xhr._index);
         if (xhrIndex === -1) {
           return;

package/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -20,7 +20,6 @@ import StyleSheet from '../StyleSheet/StyleSheet';
 import ElementBox from './ElementBox';
 import * as React from 'react';
 
-const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 
 const {useEffect, useState, useCallback} = React;
@@ -78,20 +77,15 @@ export default function ReactDevToolsOverlay({
         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.
-            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
-            if (closestInstance != null) {
-              reactDevToolsAgent.selectNode(closestInstance);
-            }
-            setInspected({
-              frame,
-            });
-            return true;
+          const {frame, closestPublicInstance} = viewData;
+
+          if (closestPublicInstance == null) {
+            return false;
           }
-          return false;
+
+          reactDevToolsAgent.selectNode(closestPublicInstance);
+          setInspected({frame});
+          return true;
         },
       );
     },

package/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -9,18 +9,16 @@
  */
 
 import type {
-  HostComponent,
+  HostInstance,
   TouchedViewDataAtPoint,
 } from '../Renderer/shims/ReactNativeTypes';
 
 const invariant = require('invariant');
-const React = require('react');
 
-export type HostRef = React.ElementRef<HostComponent<mixed>>;
 export type ReactRenderer = {
   rendererConfig: {
     getInspectorDataForViewAtPoint: (
-      inspectedView: ?HostRef,
+      inspectedView: ?HostInstance,
       locationX: number,
       locationY: number,
       callback: Function,
@@ -52,7 +50,7 @@ function validateRenderers(): void {
 }
 
 module.exports = function getInspectorDataForViewAtPoint(
-  inspectedView: ?HostRef,
+  inspectedView: ?HostInstance,
   locationX: number,
   locationY: number,
   callback: (viewData: TouchedViewDataAtPoint) => boolean,

package/Libraries/Interaction/InteractionManager.js

@@ -10,6 +10,7 @@
 
 import type {Task} from './TaskQueue';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge');
@@ -208,4 +209,8 @@ function _processUpdate() {
   _deleteInteractionSet.clear();
 }
 
-module.exports = InteractionManager;
+module.exports = (
+  ReactNativeFeatureFlags.disableInteractionManager()
+    ? require('./InteractionManagerStub')
+    : InteractionManager
+) as typeof InteractionManager;