react-native-windows 0.74.11 → 0.75.0-preview.1

package/Libraries/Image/Image.android.js

@@ -23,7 +23,9 @@ import {
 import {getImageSourcesFromImageProps} from './ImageSourceUtils';
 import {convertObjectFitToResizeMode} from './ImageUtils';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
-import NativeImageLoaderAndroid from './NativeImageLoaderAndroid';
+import NativeImageLoaderAndroid, {
+  type ImageSize,
+} from './NativeImageLoaderAndroid';
 import resolveAssetSource from './resolveAssetSource';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 import * as React from 'react';
@@ -40,13 +42,15 @@ function generateRequestId() {
  */
 function getSize(
   url: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderAndroid.getSize(url)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSize(url);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
@@ -64,13 +68,15 @@ function getSize(
 function getSizeWithHeaders(
   url: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderAndroid.getSizeWithHeaders(url, headers)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderAndroid.getSizeWithHeaders(url, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
@@ -171,7 +177,11 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       ...restProps,
       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}),

package/Libraries/Image/Image.d.ts

@@ -325,20 +325,31 @@ export interface ImageProps extends ImagePropsBase {
   style?: StyleProp<ImageStyle> | undefined;
 }
 
+export interface ImageSize {
+  width: number;
+  height: number;
+}
+
 declare class ImageComponent extends React.Component<ImageProps> {}
 declare const ImageBase: Constructor<NativeMethods> & typeof ImageComponent;
 export class Image extends ImageBase {
+  static getSize(uri: string): Promise<ImageSize>;
   static getSize(
     uri: string,
     success: (width: number, height: number) => void,
     failure?: (error: any) => void,
-  ): any;
+  ): void;
+
+  static getSizeWithHeaders(
+    uri: string,
+    headers: {[index: string]: string},
+  ): Promise<ImageSize>;
   static getSizeWithHeaders(
     uri: string,
     headers: {[index: string]: string},
     success: (width: number, height: number) => void,
     failure?: (error: any) => void,
-  ): any;
+  ): void;
   static prefetch(url: string): Promise<boolean>;
   static prefetchWithMetadata(
     url: string,
@@ -368,16 +379,4 @@ export interface ImageBackgroundProps extends ImagePropsBase {
 declare class ImageBackgroundComponent extends React.Component<ImageBackgroundProps> {}
 declare const ImageBackgroundBase: Constructor<NativeMethods> &
   typeof ImageBackgroundComponent;
-export class ImageBackground extends ImageBackgroundBase {
-  resizeMode: ImageResizeMode;
-  getSize(
-    uri: string,
-    success: (width: number, height: number) => void,
-    failure: (error: any) => void,
-  ): any;
-  prefetch(url: string): any;
-  abortPrefetch?(requestId: number): void;
-  queryCache?(
-    urls: string[],
-  ): Promise<{[url: string]: 'memory' | 'disk' | 'disk/memory'}>;
-}
+export class ImageBackground extends ImageBackgroundBase {}

package/Libraries/Image/Image.ios.js

@@ -11,6 +11,7 @@
 import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
+import type {ImageSize} from './NativeImageLoaderAndroid';
 
 import {createRootTag} from '../ReactNative/RootTag';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -29,15 +30,22 @@ import * as React from 'react';
 
 function getSize(
   uri: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSize(uri)
-    .then(([width, height]) => success(width, height))
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSize(uri).then(([width, height]) => ({
+    width,
+    height,
+  }));
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
-          console.warn('Failed to get size for image ' + uri);
+          console.warn('Failed to get size for image: ' + uri);
         },
     );
 }
@@ -45,13 +53,15 @@ function getSize(
 function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSizeWithHeaders(uri, headers)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSizeWithHeaders(uri, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {

package/Libraries/Image/Image.windows.js

@@ -11,6 +11,7 @@
 import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
+import type {ImageSize} from './NativeImageLoaderAndroid';
 
 import {createRootTag} from '../ReactNative/RootTag';
 import TextAncestor from '../Text/TextAncestor'; // [Windows]
@@ -31,15 +32,22 @@ import * as React from 'react';
 
 function getSize(
   uri: string,
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSize(uri)
-    .then(([width, height]) => success(width, height))
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSize(uri).then(([width, height]) => ({
+    width,
+    height,
+  }));
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {
-          console.warn('Failed to get size for image ' + uri);
+          console.warn('Failed to get size for image: ' + uri);
         },
     );
 }
@@ -47,13 +55,15 @@ function getSize(
 function getSizeWithHeaders(
   uri: string,
   headers: {[string]: string, ...},
-  success: (width: number, height: number) => void,
+  success?: (width: number, height: number) => void,
   failure?: (error: mixed) => void,
-): void {
-  NativeImageLoaderIOS.getSizeWithHeaders(uri, headers)
-    .then(function (sizes) {
-      success(sizes.width, sizes.height);
-    })
+): void | Promise<ImageSize> {
+  const promise = NativeImageLoaderIOS.getSizeWithHeaders(uri, headers);
+  if (typeof success !== 'function') {
+    return promise;
+  }
+  promise
+    .then(sizes => success(sizes.width, sizes.height))
     .catch(
       failure ||
         function () {

package/Libraries/Image/ImageProps.js

@@ -59,6 +59,22 @@ type AndroidImageProps = $ReadOnly<{|
   loadingIndicatorSource?: ?(number | $ReadOnly<{|uri: string|}>),
   progressiveRenderingEnabled?: ?boolean,
   fadeDuration?: ?number,
+
+  /**
+   * 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'`.
+   * See https://reactnative.dev/docs/image#resizemethod-android
+   */
+  resizeMethod?: ?('auto' | 'resize' | 'scale'),
+
+  /**
+   * When the `resizeMethod` is set to `resize`, the destination dimensions are
+   * multiplied by this value. The `scale` method is used to perform the
+   * remainder of the resize.
+   * This is used to produce higher quality images when resizing to small dimensions.
+   * Defaults to 1.0.
+   */
+  resizeMultiplier?: ?number,
 |}>;
 
 export type ImageProps = {|
@@ -183,11 +199,6 @@ export type ImageProps = {|
    */
   onLoadStart?: ?() => void,
 
-  /**
-   * See https://reactnative.dev/docs/image#resizemethod
-   */
-  resizeMethod?: ?('auto' | 'resize' | 'scale'),
-
   /**
    * The image source (either a remote URL or a local file resource).
    *

package/Libraries/Image/ImageTypes.flow.js

@@ -18,12 +18,17 @@ import typeof TextInlineImageNativeComponent from './TextInlineImageNativeCompon
 import * as React from 'react';
 
 type ImageComponentStaticsIOS = $ReadOnly<{
-  getSize: (
+  getSize(uri: string): Promise<{width: number, height: number}>,
+  getSize(
     uri: string,
     success: (width: number, height: number) => void,
     failure?: (error: mixed) => void,
-  ) => void,
+  ): void,
 
+  getSizeWithHeaders(
+    uri: string,
+    headers: {[string]: string, ...},
+  ): Promise<{width: number, height: number}>,
   getSizeWithHeaders(
     uri: string,
     headers: {[string]: string, ...},

package/Libraries/Image/ImageUtils.js

@@ -17,5 +17,6 @@ export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
     fill: 'stretch',
     'scale-down': 'contain',
   };
+  // $FlowFixMe[invalid-computed-prop]
   return objectFitMap[objectFit];
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -82,13 +82,14 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         validAttributes: {
           blurRadius: true,
           internal_analyticTag: true,
+          resizeMethod: true,
           resizeMode: true,
+          resizeMultiplier: true,
           tintColor: {
             process: require('../StyleSheet/processColor').default,
           },
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
-          resizeMethod: true,
           src: true,
           // NOTE: New Architecture expects this to be called `source`,
           // regardless of the platform, therefore propagate it as well.

package/Libraries/Inspector/ElementBox.js

@@ -20,10 +20,9 @@ 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);
+    let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', style);
+    let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', style);
 
     const frameStyle = {...this.props.frame};
     const contentStyle: {width: number, height: number} = {
@@ -122,13 +121,17 @@ function resolveSizeInPlace(
   direction: string,
   dimension: string,
 ) {
+  // $FlowFixMe[invalid-computed-prop]
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
       // $FlowFixMe[prop-missing]
       style[direction] =
+        // $FlowFixMe[invalid-computed-prop]
         (parseFloat(style[direction]) / 100.0) *
+        // $FlowFixMe[invalid-computed-prop]
         Dimensions.get('window')[dimension];
     }
+    // $FlowFixMe[invalid-computed-prop]
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
       // $FlowFixMe[prop-missing]

package/Libraries/Inspector/ElementProperties.js

@@ -71,7 +71,7 @@ class ElementProperties extends React.Component<Props> {
             <View style={styles.col}>
               <StyleInspector style={style} />
             </View>
-            {<BoxInspector style={style} frame={this.props.frame} />}
+            <BoxInspector style={style} frame={this.props.frame} />
           </View>
         </View>
       </TouchableWithoutFeedback>

package/Libraries/Interaction/TouchHistoryMath.js

@@ -48,10 +48,10 @@ const TouchHistoryMath = {
           ofCurrent && isXAxis
             ? oneTouchData.currentPageX
             : ofCurrent && !isXAxis
-            ? oneTouchData.currentPageY
-            : !ofCurrent && isXAxis
-            ? oneTouchData.previousPageX
-            : oneTouchData.previousPageY;
+              ? oneTouchData.currentPageY
+              : !ofCurrent && isXAxis
+                ? oneTouchData.previousPageX
+                : oneTouchData.previousPageY;
         count = 1;
       }
     } else {

package/Libraries/IntersectionObserver/IntersectionObserverManager.js

@@ -67,19 +67,11 @@ function setTargetForInstanceHandle(
   instanceHandleToTargetMap.set(key, target);
 }
 
-function unsetTargetForInstanceHandle(instanceHandle: mixed): void {
-  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
-  const key: interface {} = instanceHandle;
-  instanceHandleToTargetMap.delete(key);
-}
-
 // The mapping between ReactNativeElement and their corresponding shadow node
 // also needs to be kept here because React removes the link when unmounting.
-// We also keep the instance handle so we don't have to retrieve it again
-// from the target to unobserve.
-const targetToShadowNodeAndInstanceHandleMap: WeakMap<
+const targetToShadowNodeMap: WeakMap<
   ReactNativeElement,
-  [ReturnType<typeof getShadowNode>, mixed],
+  ReturnType<typeof getShadowNode>,
 > = new WeakMap();
 
 /**
@@ -163,12 +155,8 @@ export function observe({
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  // Same for the mapping between the target and its shadow node
-  // and instance handle.
-  targetToShadowNodeAndInstanceHandleMap.set(target, [
-    targetShadowNode,
-    instanceHandle,
-  ]);
+  // Same for the mapping between the target and its shadow node.
+  targetToShadowNodeMap.set(target, targetShadowNode);
 
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
@@ -201,26 +189,18 @@ export function unobserve(
     return;
   }
 
-  const targetShadowNodeAndInstanceHandle =
-    targetToShadowNodeAndInstanceHandleMap.get(target);
-  if (targetShadowNodeAndInstanceHandle == null) {
+  const targetShadowNode = targetToShadowNodeMap.get(target);
+  if (targetShadowNode == null) {
     console.error(
       'IntersectionObserverManager: could not find registration data for target',
     );
     return;
   }
 
-  const [targetShadowNode, instanceHandle] = targetShadowNodeAndInstanceHandle;
-
   NativeIntersectionObserver.unobserve(
     intersectionObserverId,
     targetShadowNode,
   );
-
-  // We can guarantee we won't receive any more entries for this target,
-  // so we don't need to keep the mappings anymore.
-  unsetTargetForInstanceHandle(instanceHandle);
-  targetToShadowNodeAndInstanceHandleMap.delete(target);
 }
 
 /**

package/Libraries/JSInspector/NetworkAgent.js

@@ -232,7 +232,7 @@ class Interceptor {
     const event: LoadingFinishedEvent = {
       requestId: String(id),
       timestamp: JSInspector.getTimestamp(),
-      encodedDataLength: encodedDataLength,
+      encodedDataLength,
     };
     this._agent.sendEvent('loadingFinished', event);
   }

package/Libraries/LogBox/Data/LogBoxData.js

@@ -8,30 +8,32 @@
  * @format
  */
 
-('use strict');
-
 import type {ExtendedError} from '../../Core/ExtendedError';
 import type {LogLevel} from './LogBoxLog';
 import type {
   Category,
   ComponentStack,
+  ComponentStackType,
   ExtendedExceptionData,
   Message,
 } from './parseLogBoxLog';
 
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
+import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
 import LogBoxLog from './LogBoxLog';
 import {parseLogBoxException} from './parseLogBoxLog';
 import * as React from 'react';
+
 export type LogBoxLogs = Set<LogBoxLog>;
-export type LogData = $ReadOnly<{|
+export type LogData = $ReadOnly<{
   level: LogLevel,
   message: Message,
   category: Category,
   componentStack: ComponentStack,
+  componentStackType: ComponentStackType | null,
   stack?: string,
-|}>;
+}>;
 
 export type Observer = (
   $ReadOnly<{|
@@ -72,6 +74,7 @@ let logs: LogBoxLogs = new Set();
 let updateTimeout: $FlowFixMe | null = null;
 let _isDisabled = false;
 let _selectedIndex = -1;
+let hasShownFuseboxWarningsMigrationMessage = false;
 
 let warningFilter: WarningFilter = function (format) {
   return {
@@ -193,6 +196,11 @@ function appendNewLog(newLog: LogBoxLog) {
 }
 
 export function addLog(log: LogData): void {
+  if (log.level === 'warn' && global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
+    // Under Fusebox, don't report warnings to LogBox.
+    showFuseboxWarningsMigrationMessageOnce();
+    return;
+  }
   const errorForStackTrace = new Error();
 
   // Parsing logs are expensive so we schedule this
@@ -209,6 +217,7 @@ export function addLog(log: LogData): void {
           stack,
           category: log.category,
           componentStack: log.componentStack,
+          componentStackType: log.componentStackType || 'legacy',
         }),
       );
     } catch (error) {
@@ -449,32 +458,33 @@ export function withSubscription(
         this._subscription.unsubscribe();
       }
     }
-
-    _handleDismiss = (): void => {
-      // Here we handle the cases when the log is dismissed and it
-      // was either the last log, or when the current index
-      // is now outside the bounds of the log array.
-      const {selectedLogIndex, logs: stateLogs} = this.state;
-      const logsArray = Array.from(stateLogs);
-      if (selectedLogIndex != null) {
-        if (logsArray.length - 1 <= 0) {
-          setSelectedLog(-1);
-        } else if (selectedLogIndex >= logsArray.length - 1) {
-          setSelectedLog(selectedLogIndex - 1);
-        }
-
-        dismiss(logsArray[selectedLogIndex]);
-      }
-    };
-
-    _handleMinimize = (): void => {
-      setSelectedLog(-1);
-    };
-
-    _handleSetSelectedLog = (index: number): void => {
-      setSelectedLog(index);
-    };
   }
 
   return LogBoxStateSubscription;
 }
+
+function showFuseboxWarningsMigrationMessageOnce() {
+  if (hasShownFuseboxWarningsMigrationMessage) {
+    return;
+  }
+  hasShownFuseboxWarningsMigrationMessage = true;
+  appendNewLog(
+    new LogBoxLog({
+      level: 'warn',
+      message: {
+        content: 'Open debugger to view warnings.',
+        substitutions: [],
+      },
+      isComponentError: false,
+      stack: [],
+      category: 'fusebox-warnings-migration',
+      componentStack: [],
+      onNotificationPress: () => {
+        if (NativeDevSettings.openDebugger) {
+          NativeDevSettings.openDebugger();
+        }
+        clearWarnings();
+      },
+    }),
+  );
+}