@office-iss/react-native-win32 0.0.0-canary.296 → 0.0.0-canary.298

package/Libraries/Debugging/DebuggingOverlay.js

@@ -11,14 +11,14 @@
 import type {
   ElementRectangle,
   TraceUpdate,
-} from './DebuggingOverlayNativeComponent';
+} from '../../src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent';
 
+import DebuggingOverlayNativeComponent, {
+  Commands,
+} from '../../src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent';
 import View from '../Components/View/View';
 import UIManager from '../ReactNative/UIManager';
 import StyleSheet from '../StyleSheet/StyleSheet';
-import DebuggingOverlayNativeComponent, {
-  Commands,
-} from './DebuggingOverlayNativeComponent';
 import * as React from 'react';
 
 const {useRef, useImperativeHandle} = React;
@@ -26,15 +26,16 @@ const isNativeComponentReady =
   UIManager.hasViewManagerConfig('DebuggingOverlay');
 
 type DebuggingOverlayHandle = {
-  highlightTraceUpdates(updates: TraceUpdate[]): void,
-  highlightElements(elements: ElementRectangle[]): void,
+  highlightTraceUpdates(updates: $ReadOnlyArray<TraceUpdate>): void,
+  highlightElements(elements: $ReadOnlyArray<ElementRectangle>): void,
   clearElementsHighlight(): void,
 };
 
-function DebuggingOverlay(
-  _props: {},
+function DebuggingOverlay({
+  ref,
+}: {
   ref: React.RefSetter<DebuggingOverlayHandle>,
-): React.Node {
+}): React.Node {
   useImperativeHandle(
     ref,
     () => ({
@@ -102,9 +103,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const DebuggingOverlayWithForwardedRef: component(
+export default DebuggingOverlay as component(
   ref: React.RefSetter<DebuggingOverlayHandle>,
-  ...props: {}
-) = React.forwardRef(DebuggingOverlay);
-
-export default DebuggingOverlayWithForwardedRef;
+);

package/Libraries/Debugging/DebuggingOverlayNativeComponent.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 export * from '../../src/private/specs_DEPRECATED/components/DebuggingOverlayNativeComponent';

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import type {HostInstance} from '../../src/private/types/HostInstance';

package/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import type {

package/Libraries/EventEmitter/NativeEventEmitter.js

@@ -52,7 +52,7 @@ export default class NativeEventEmitter<
 {
   _nativeModule: ?NativeModule;
 
-  constructor(nativeModule: ?NativeModule) {
+  constructor(nativeModule?: ?NativeModule) {
     if (Platform.OS === 'ios') {
       invariant(
         nativeModule != null,

package/Libraries/EventEmitter/RCTEventEmitter.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow
+ * @format
  */
 
 'use strict';

package/Libraries/EventEmitter/RCTNativeAppEventEmitter.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 import RCTDeviceEventEmitter from './RCTDeviceEventEmitter';

package/Libraries/Image/AssetRegistry.js

@@ -8,13 +8,7 @@
  * @format
  */
 
-'use strict';
-
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
-
-const AssetRegistry = require('@react-native/assets-registry/registry') as {
-  registerAsset: (asset: PackagerAsset) => number,
-  getAssetByID: (assetId: number) => PackagerAsset,
-};
-
-module.exports = AssetRegistry;
+export {
+  registerAsset,
+  getAssetByID,
+} from '@react-native/assets-registry/registry';

package/Libraries/Image/AssetSourceResolver.js

@@ -18,10 +18,23 @@ export type ResolvedAssetSource = {
   +scale: number,
 };
 
-import type {
-  AssetDestPathResolver,
-  PackagerAsset,
-} from '@react-native/assets-registry/registry';
+// From @react-native/assets-registry
+type AssetDestPathResolver = 'android' | 'generic';
+
+// From @react-native/assets-registry
+type PackagerAsset = $ReadOnly<{
+  __packager_asset: boolean,
+  fileSystemLocation: string,
+  httpServerLocation: string,
+  width: ?number,
+  height: ?number,
+  scales: Array<number>,
+  hash: string,
+  name: string,
+  type: string,
+  resolver?: AssetDestPathResolver,
+  ...
+}>;
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform').default;

package/Libraries/Image/Image.android.js

@@ -8,8 +8,10 @@
  * @format
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageProps} from './ImageProps';
 import type {AbstractImageAndroid, ImageAndroid} from './ImageTypes.flow';
 
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -126,125 +128,129 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageAndroid = React.forwardRef(
-  (props, forwardedRef) => {
-    let source = getImageSourcesFromImageProps(props) || {
-      uri: undefined,
-      width: undefined,
-      height: undefined,
-    };
-    const defaultSource = resolveAssetSource(props.defaultSource);
-    const loadingIndicatorSource = resolveAssetSource(
-      props.loadingIndicatorSource,
-    );
+let BaseImage: AbstractImageAndroid = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
+  let source = getImageSourcesFromImageProps(props) || {
+    uri: undefined,
+    width: undefined,
+    height: undefined,
+  };
+  const defaultSource = resolveAssetSource(props.defaultSource);
+  const loadingIndicatorSource = resolveAssetSource(
+    props.loadingIndicatorSource,
+  );
 
-    if (props.children != null) {
-      throw new Error(
-        'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
-      );
-    }
+  if (props.children != null) {
+    throw new Error(
+      'The <Image> component cannot contain children. If you want to render content on top of the image, consider using the <ImageBackground> component or absolute positioning.',
+    );
+  }
 
-    if (props.defaultSource != null && props.loadingIndicatorSource != null) {
-      throw new Error(
-        'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
-      );
-    }
+  if (props.defaultSource != null && props.loadingIndicatorSource != null) {
+    throw new Error(
+      'The <Image> component cannot have defaultSource and loadingIndicatorSource at the same time. Please use either defaultSource or loadingIndicatorSource.',
+    );
+  }
 
-    let style: ImageStyleProp;
-    let sources;
-    if (Array.isArray(source)) {
-      style = [styles.base, props.style];
-      sources = source;
-    } else {
-      const {uri} = source;
-      if (uri === '') {
-        console.warn('source.uri should not be an empty string');
-      }
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = [{width, height}, styles.base, props.style];
-      sources = [source];
+  let style: ImageStyleProp;
+  let sources;
+  if (Array.isArray(source)) {
+    style = [styles.base, props.style];
+    sources = source;
+  } else {
+    const {uri} = source;
+    if (uri === '') {
+      console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
+  }
 
-    const {onLoadStart, onLoad, onLoadEnd, onError} = props;
-    const nativeProps = {
-      ...props,
-      style,
-      shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
-      // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
-      // (for historical reasons). So in the latter case we populate both "src" and "source",
-      // in order to have a better alignment between platforms in the future.
-      src: sources,
-      source: sources,
-      /* $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}),
-      defaultSource: defaultSource ? defaultSource.uri : null,
-      loadingIndicatorSrc: loadingIndicatorSource
-        ? loadingIndicatorSource.uri
-        : null,
-      accessibilityLabel:
-        props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
-      accessibilityLabelledBy:
-        props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
-      accessible: props.alt !== undefined ? true : props.accessible,
-      accessibilityState: {
-        busy: props['aria-busy'] ?? props.accessibilityState?.busy,
-        checked: props['aria-checked'] ?? props.accessibilityState?.checked,
-        disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
-        expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
-        selected: props['aria-selected'] ?? props.accessibilityState?.selected,
-      },
-    };
-
-    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
-    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
-    const resizeMode =
-      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const {onLoadStart, onLoad, onLoadEnd, onError} = props;
+  const nativeProps = {
+    ...props,
+    style,
+    shouldNotifyLoadEvents: !!(onLoadStart || onLoad || onLoadEnd || onError),
+    // Both iOS and C++ sides expect to have "source" prop, whereas on Android it's "src"
+    // (for historical reasons). So in the latter case we populate both "src" and "source",
+    // in order to have a better alignment between platforms in the future.
+    src: sources,
+    source: sources,
+    /* $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}),
+    defaultSource: defaultSource ? defaultSource.uri : null,
+    loadingIndicatorSrc: loadingIndicatorSource
+      ? loadingIndicatorSource.uri
+      : null,
+    accessibilityLabel:
+      props['aria-label'] ?? props.accessibilityLabel ?? props.alt,
+    accessibilityLabelledBy:
+      props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy,
+    accessible: props.alt !== undefined ? true : props.accessible,
+    accessibilityState: {
+      busy: props['aria-busy'] ?? props.accessibilityState?.busy,
+      checked: props['aria-checked'] ?? props.accessibilityState?.checked,
+      disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
+      expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
+      selected: props['aria-selected'] ?? props.accessibilityState?.selected,
+    },
+  };
 
-    const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
+  const resizeMode =
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
-    return (
-      <ImageAnalyticsTagContext.Consumer>
-        {analyticTag => {
-          const nativePropsWithAnalytics =
-            analyticTag !== null
-              ? {
-                  ...nativeProps,
-                  internal_analyticTag: analyticTag,
-                }
-              : nativeProps;
-          return (
-            <TextAncestor.Consumer>
-              {hasTextAncestor => {
-                if (hasTextAncestor) {
-                  return (
-                    <TextInlineImageNativeComponent
-                      // $FlowFixMe[incompatible-type]
-                      style={style}
-                      resizeMode={resizeMode}
-                      headers={nativeProps.headers}
-                      src={sources}
-                      ref={actualRef}
-                    />
-                  );
-                }
+  const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 
+  return (
+    <ImageAnalyticsTagContext.Consumer>
+      {analyticTag => {
+        const nativePropsWithAnalytics =
+          analyticTag !== null
+            ? {
+                ...nativeProps,
+                internal_analyticTag: analyticTag,
+              }
+            : nativeProps;
+        return (
+          <TextAncestor.Consumer>
+            {hasTextAncestor => {
+              if (hasTextAncestor) {
                 return (
-                  <ImageViewNativeComponent
-                    {...nativePropsWithAnalytics}
+                  <TextInlineImageNativeComponent
+                    // $FlowFixMe[incompatible-type]
+                    style={style}
                     resizeMode={resizeMode}
+                    headers={nativeProps.headers}
+                    src={sources}
                     ref={actualRef}
                   />
                 );
-              }}
-            </TextAncestor.Consumer>
-          );
-        }}
-      </ImageAnalyticsTagContext.Consumer>
-    );
-  },
-);
+              }
+
+              return (
+                <ImageViewNativeComponent
+                  {...nativePropsWithAnalytics}
+                  resizeMode={resizeMode}
+                  ref={actualRef}
+                />
+              );
+            }}
+          </TextAncestor.Consumer>
+        );
+      }}
+    </ImageAnalyticsTagContext.Consumer>
+  );
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/Image.ios.js

@@ -8,8 +8,10 @@
  * @format
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
 import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageProps} from './ImageProps';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
 
@@ -105,7 +107,13 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
+let BaseImage: AbstractImageIOS = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
   const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
@@ -180,7 +188,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
       }}
     </ImageAnalyticsTagContext.Consumer>
   );
-});
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/Image.win32.js

@@ -8,12 +8,14 @@
  * @format
  */
 
+import type {HostInstance} from '../../src/private/types/HostInstance';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
+import type {ImageProps} from './ImageProps';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
 import invariant from 'invariant'; // [Windows]
 
-import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import NativeImageLoaderWin32 from './NativeImageLoaderWin32'; // [Win32] Replace iOS
 
 import {createRootTag} from '../ReactNative/RootTag';
@@ -122,7 +124,13 @@ async function queryCache(
  *
  * See https://reactnative.dev/docs/image
  */
-let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
+let BaseImage: AbstractImageIOS = ({
+  ref: forwardedRef,
+  ...props
+}: {
+  ref?: React.RefSetter<HostInstance>,
+  ...ImageProps,
+}) => {
   const source = getImageSourcesFromImageProps(props) || {
     uri: undefined,
     width: undefined,
@@ -215,7 +223,7 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
       }}
     </TextAncestor.Consumer>
   );
-});
+};
 
 const imageComponentDecorator = unstable_getImageComponentDecorator();
 if (imageComponentDecorator != null) {

package/Libraries/Image/ImageAnalyticsTagContext.js

@@ -9,11 +9,11 @@
  */
 
 import * as React from 'react';
+import {createContext} from 'react';
 
 type ContextType = ?string;
 
-const Context: React.Context<ContextType> =
-  React.createContext<ContextType>(null);
+const Context: React.Context<ContextType> = createContext<ContextType>(null);
 
 if (__DEV__) {
   Context.displayName = 'ImageAnalyticsTagContext';

package/Libraries/Image/ImageInjection.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 import type {

package/Libraries/Image/RelativeImageStub.js

@@ -4,8 +4,8 @@
  * 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
+ * @format
  */
 
 'use strict';
@@ -27,4 +27,5 @@ const RelativeImageStub = (AssetRegistry.registerAsset({
   type: 'png',
 }): number);
 
+// eslint-disable-next-line lint/no-commonjs-exports
 module.exports = RelativeImageStub;

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 'use strict';

package/Libraries/Image/resolveAssetSource.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 // Utilities for resolving an asset into a `source` for e.g. `Image`

package/Libraries/Interaction/FrameRateLogger.js

@@ -4,8 +4,8 @@
  * 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-local
+ * @format
  */
 
 import NativeFrameRateLogger from './NativeFrameRateLogger';