@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Image/ImageBackground.js

@@ -10,14 +10,15 @@
 
 'use strict';
 
-import Image from './Image';
-import * as React from 'react';
-import StyleSheet from '../StyleSheet/StyleSheet';
-import flattenStyle from '../StyleSheet/flattenStyle';
-import View from '../Components/View/View';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
 import type {ImageBackgroundProps} from './ImageProps';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
+
+import View from '../Components/View/View';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import Image from './Image';
+import * as React from 'react';
 
 /**
  * Very simple drop-in replacement for <Image> which supports nesting views.
@@ -66,15 +67,25 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   };
 
   render(): React.Node {
-    const {children, style, imageStyle, imageRef, ...props} = this.props;
+    const {
+      children,
+      style,
+      imageStyle,
+      imageRef,
+      importantForAccessibility,
+      ...props
+    } = this.props;
+
     const flattenedStyle = flattenStyle(style);
     return (
       <View
         accessibilityIgnoresInvertColors={true}
+        importantForAccessibility={importantForAccessibility}
         style={style}
         ref={this._captureRef}>
         <Image
           {...props}
+          importantForAccessibility={importantForAccessibility}
           style={[
             StyleSheet.absoluteFill,
             {

package/Libraries/Image/ImageInjection.js

@@ -8,10 +8,11 @@
  * @flow
  */
 
-import * as React from 'react';
 import type {ImageProps as ImagePropsType} from './ImageProps';
+
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
+import * as React from 'react';
 
 export default {
   unstable_createImageComponent: (null: ?(

package/Libraries/Image/ImageProps.js

@@ -10,13 +10,17 @@
 
 'use strict';
 
-import type {SyntheticEvent, LayoutEvent} from '../Types/CoreEventTypes';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
+import type {
+  ColorValue,
+  ImageStyleProp,
+  ViewStyleProp,
+} from '../StyleSheet/StyleSheet';
+import type {LayoutEvent, SyntheticEvent} from '../Types/CoreEventTypes';
+import typeof Image from './Image';
 import type {ImageSource} from './ImageSource';
-import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {Node, Ref} from 'react';
-import typeof Image from './Image';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -82,6 +86,26 @@ export type ImageProps = {|
    */
   accessibilityLabel?: ?Stringish,
 
+  /**
+   * Alias for accessibilityLabel
+   * See https://reactnative.dev/docs/image#accessibilitylabel
+   */
+  'aria-label'?: ?Stringish,
+
+  /**
+   * Reperesents the nativeID of the associated label. When the assistive technology focuses on the component with this props.
+   *
+   * @platform android
+   */
+  'aria-labelledby'?: ?string,
+  /**
+   * The text that's read by the screen reader when the user interacts with
+   * the image.
+   *
+   * See https://reactnative.dev/docs/image#alt
+   */
+  alt?: ?Stringish,
+
   /**
    * blurRadius: the blur radius of the blur filter added to the image
    *
@@ -94,6 +118,28 @@ export type ImageProps = {|
    */
   capInsets?: ?EdgeInsetsProp,
 
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://reactnative.dev/docs/image#crossorigin
+   */
+  crossOrigin?: ?('anonymous' | 'use-credentials'),
+
+  /**
+   * Height of the image component.
+   *
+   * See https://reactnative.dev/docs/image#height
+   */
+  height?: number,
+
+  /**
+   * Width of the image component.
+   *
+   * See https://reactnative.dev/docs/image#width
+   */
+  width?: number,
+
   /**
    * Invoked on load error with `{nativeEvent: {error}}`.
    *
@@ -154,6 +200,23 @@ export type ImageProps = {|
    */
   style?: ?ImageStyleProp,
 
+  /**
+   * 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'
+  ),
+
   /**
    * Determines how to resize the image when the frame doesn't match the raw
    * image dimensions.
@@ -170,7 +233,27 @@ export type ImageProps = {|
    */
   testID?: ?string,
 
-  src?: empty,
+  /**
+   * Changes the color of all the non-transparent pixels to the tintColor.
+   *
+   * See https://reactnative.dev/docs/image#tintcolor
+   */
+  tintColor?: ColorValue,
+
+  /**
+   * A string representing the resource identifier for the image. Similar to
+   * src from HTML.
+   *
+   * See https://reactnative.dev/docs/image#src
+   */
+  src?: ?string,
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://reactnative.dev/docs/image#srcset
+   */
+  srcSet?: ?string,
   children?: empty,
 |};
 

package/Libraries/Image/ImageResizeMode.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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
+ */
+
+export type ImageResizeMode =
+  | 'cover'
+  | 'contain'
+  | 'stretch'
+  | 'repeat'
+  | 'center';
+
+/**
+ * @see ImageResizeMode.js
+ */
+export interface ImageResizeModeStatic {
+  /**
+   * contain - The image will be resized such that it will be completely
+   * visible, contained within the frame of the View.
+   */
+  contain: ImageResizeMode;
+  /**
+   * cover - The image will be resized such that the entire area of the view
+   * is covered by the image, potentially clipping parts of the image.
+   */
+  cover: ImageResizeMode;
+  /**
+   * stretch - The image will be stretched to fill the entire frame of the
+   * view without clipping.  This may change the aspect ratio of the image,
+   * distoring it.  Only supported on iOS.
+   */
+  stretch: ImageResizeMode;
+  /**
+   * center - The image will be scaled down such that it is completely visible,
+   * if bigger than the area of the view.
+   * The image will not be scaled up.
+   */
+  center: ImageResizeMode;
+
+  /**
+   * repeat - The image will be repeated to cover the frame of the View. The
+   * image will keep it's size and aspect ratio.
+   */
+  repeat: ImageResizeMode;
+}

package/Libraries/Image/ImageSource.d.ts

@@ -0,0 +1,76 @@
+/**
+ * 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
+ */
+
+/*
+ * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSource.js
+ */
+export interface ImageURISource {
+  /**
+   * `uri` is a string representing the resource identifier for the image, which
+   * could be an http address, a local file path, or the name of a static image
+   * resource (which should be wrapped in the `require('./path/to/image.png')`
+   * function).
+   */
+  uri?: string | undefined;
+  /**
+   * `bundle` is the iOS asset bundle which the image is included in. This
+   * will default to [NSBundle mainBundle] if not set.
+   * @platform ios
+   */
+  bundle?: string | undefined;
+  /**
+   * `method` is the HTTP Method to use. Defaults to GET if not specified.
+   */
+  method?: string | undefined;
+  /**
+   * `headers` is an object representing the HTTP headers to send along with the
+   * request for a remote image.
+   */
+  headers?: {[key: string]: string} | undefined;
+  /**
+   * `cache` determines how the requests handles potentially cached
+   * responses.
+   *
+   * - `default`: Use the native platforms default strategy. `useProtocolCachePolicy` on iOS.
+   *
+   * - `reload`: The data for the URL will be loaded from the originating source.
+   * No existing cache data should be used to satisfy a URL load request.
+   *
+   * - `force-cache`: The existing cached data will be used to satisfy the request,
+   * regardless of its age or expiration date. If there is no existing data in the cache
+   * corresponding the request, the data is loaded from the originating source.
+   *
+   * - `only-if-cached`: The existing cache data will be used to satisfy a request, regardless of
+   * 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;
+  /**
+   * `body` is the HTTP body to send with the request. This must be a valid
+   * UTF-8 string, and will be sent exactly as specified, with no
+   * additional encoding (e.g. URL-escaping or base64) applied.
+   */
+  body?: string | undefined;
+  /**
+   * `width` and `height` can be specified if known at build time, in which case
+   * these will be used to set the default `<Image/>` component dimensions.
+   */
+  width?: number | undefined;
+  height?: number | undefined;
+  /**
+   * `scale` is used to indicate the scale factor of the image. Defaults to 1.0 if
+   * unspecified, meaning that one image pixel equates to one display point / DIP.
+   */
+  scale?: number | undefined;
+}
+
+export type ImageRequireSource = number;

package/Libraries/Image/ImageSourceUtils.js

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageProps} from './ImageProps';
+
+import resolveAssetSource from './resolveAssetSource';
+
+/**
+ * A function which returns the appropriate value for image source
+ * by resolving the `source`, `src` and `srcSet` props.
+ */
+export function getImageSourcesFromImageProps(
+  imageProps: ImageProps,
+): ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> {
+  let source = resolveAssetSource(imageProps.source);
+
+  let sources;
+
+  const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps;
+
+  const headers: {[string]: string} = {};
+  if (crossOrigin === 'use-credentials') {
+    headers['Access-Control-Allow-Credentials'] = 'true';
+  }
+  if (referrerPolicy != null) {
+    headers['Referrer-Policy'] = referrerPolicy;
+  }
+  if (srcSet != null) {
+    const sourceList = [];
+    const srcSetList = srcSet.split(', ');
+    // `src` prop should be used with default scale if `srcSet` does not have 1x scale.
+    let shouldUseSrcForDefaultScale = true;
+    srcSetList.forEach(imageSrc => {
+      const [uri, xScale = '1x'] = imageSrc.split(' ');
+      if (!xScale.endsWith('x')) {
+        console.warn(
+          'The provided format for scale is not supported yet. Please use scales like 1x, 2x, etc.',
+        );
+      } else {
+        const scale = parseInt(xScale.split('x')[0], 10);
+        if (!isNaN(scale)) {
+          // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided.
+          shouldUseSrcForDefaultScale =
+            scale === 1 ? false : shouldUseSrcForDefaultScale;
+          sourceList.push({headers: headers, scale, uri, width, height});
+        }
+      }
+    });
+
+    if (shouldUseSrcForDefaultScale && src != null) {
+      sourceList.push({
+        headers: headers,
+        scale: 1,
+        uri: src,
+        width,
+        height,
+      });
+    }
+    if (sourceList.length === 0) {
+      console.warn('The provided value for srcSet is not valid.');
+    }
+
+    sources = sourceList;
+  } else if (src != null) {
+    sources = [{uri: src, headers: headers, width, height}];
+  } else {
+    sources = source;
+  }
+  return sources;
+}

package/Libraries/Image/ImageUtils.js

@@ -0,0 +1,21 @@
+/**
+ * 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.
+ *
+ * @flow
+ * @format
+ */
+
+type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
+
+export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
+  const objectFitMap = {
+    contain: 'contain',
+    cover: 'cover',
+    fill: 'stretch',
+    'scale-down': 'contain',
+  };
+  return objectFitMap[objectFit];
+}

package/Libraries/Image/ImageViewNativeComponent.js

@@ -8,11 +8,7 @@
  * @format
  */
 
-import type {ResolvedAssetSource} from './AssetSourceResolver';
-import type {ImageProps} from './ImageProps';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
-import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
-import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
 import type {
   HostComponent,
   PartialViewConfig,
@@ -22,6 +18,11 @@ import type {
   DangerouslyImpreciseStyle,
   ImageStyleProp,
 } from '../StyleSheet/StyleSheet';
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+import type {ImageProps} from './ImageProps';
+
+import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
+import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
 import Platform from '../Utilities/Platform';
 
 type Props = $ReadOnly<{
@@ -35,7 +36,9 @@ type Props = $ReadOnly<{
 
   // Android native props
   shouldNotifyLoadEvents?: boolean,
-  src?: ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}>,
+  src?:
+    | ?ResolvedAssetSource
+    | ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
   headers?: ?{[string]: string},
   defaultSrc?: ?string,
   loadingIndicatorSrc?: ?string,

package/Libraries/Image/NativeImageEditor.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 type Options = {|

package/Libraries/Image/NativeImageLoaderAndroid.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Image/NativeImageLoaderIOS.js

@@ -10,6 +10,7 @@
 
 import type {RootTag} from '../TurboModule/RCTExport';
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Image/NativeImageLoaderWin32.js

@@ -10,6 +10,7 @@
 
 import type {RootTag} from '../TurboModule/RCTExport';
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Image/NativeImageStoreAndroid.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Image/NativeImageStoreIOS.js

@@ -9,6 +9,7 @@
  */
 
 import type {TurboModule} from '../TurboModule/RCTExport';
+
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
 export interface Spec extends TurboModule {

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -10,19 +10,20 @@
 
 'use strict';
 
+import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {
   HostComponent,
   PartialViewConfig,
 } from '../Renderer/shims/ReactNativeTypes';
-import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {ColorValue} from '../StyleSheet/StyleSheet';
 import type {ImageResizeMode} from './ImageResizeMode';
+
 import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
-import type {ColorValue} from '../StyleSheet/StyleSheet';
 
 type NativeProps = $ReadOnly<{
   ...ViewProps,
   resizeMode?: ?ImageResizeMode,
-  src?: ?$ReadOnlyArray<?$ReadOnly<{uri: string, ...}>>,
+  src?: ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
   tintColor?: ?ColorValue,
   headers?: ?{[string]: string},
 }>;

package/Libraries/Image/nativeImageSource.js

@@ -8,10 +8,10 @@
  * @format
  */
 
-import Platform from '../Utilities/Platform';
-
 import type {ImageURISource} from './ImageSource';
 
+import Platform from '../Utilities/Platform';
+
 type NativeImageSourceSpec = $ReadOnly<{|
   android?: string,
   ios?: string,

package/Libraries/Image/resolveAssetSource.js

@@ -12,11 +12,11 @@
 
 'use strict';
 
-const AssetRegistry = require('@react-native/assets/registry');
+import type {ResolvedAssetSource} from './AssetSourceResolver';
+
 const AssetSourceResolver = require('./AssetSourceResolver');
 const {pickScale} = require('./AssetUtils');
-
-import type {ResolvedAssetSource} from './AssetSourceResolver';
+const AssetRegistry = require('@react-native/assets/registry');
 
 let _customSourceTransformer, _serverURL, _scriptURL;
 
@@ -105,6 +105,6 @@ function resolveAssetSource(source: any): ?ResolvedAssetSource {
   return resolver.defaultAsset();
 }
 
+resolveAssetSource.pickScale = pickScale;
+resolveAssetSource.setCustomSourceTransformer = setCustomSourceTransformer;
 module.exports = resolveAssetSource;
-module.exports.pickScale = pickScale;
-module.exports.setCustomSourceTransformer = setCustomSourceTransformer;

package/Libraries/Inspector/BorderBox.js

@@ -10,8 +10,8 @@
 
 'use strict';
 
-const React = require('react');
 const View = require('../Components/View/View');
+const React = require('react');
 
 class BorderBox extends React.Component<$FlowFixMeProps> {
   render(): $FlowFixMe | React.Node {

package/Libraries/Inspector/BoxInspector.js

@@ -10,12 +10,11 @@
 
 'use strict';
 
-const React = require('react');
+const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
-const View = require('../Components/View/View');
-
 const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
 
 const blank = {
   top: 0,
@@ -49,7 +48,7 @@ class BoxInspector extends React.Component<$FlowFixMeProps> {
 }
 
 class BoxContainer extends React.Component<$FlowFixMeProps> {
-  render() {
+  render(): React.Node {
     const box = this.props.box;
     return (
       <View style={styles.box}>