feat: added crossOrigin, referrerPolicy, srcSet, width, height and src props to the Image Component.

Libraries/Image/Image.android.js

@@ -131,6 +131,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   const loadingIndicatorSource = resolveAssetSource(
     props.loadingIndicatorSource,
   );
+  const {crossOrigin, referrerPolicy, src, srcSet} = props;
 
   if (source) {
     const uri = source.uri;
@@ -139,12 +140,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     }
   }
 
-  if (props.src) {
-    console.warn(
-      'The <Image> component requires a `source` property rather than `src`.',
-    );
-  }
-
   if (props.children) {
     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.',
@@ -161,15 +156,53 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     source = null;
   }
 
-  let style;
   let sources;
-  if (source?.uri != null) {
-    const {width, height} = source;
-    style = flattenStyle([{width, height}, styles.base, props.style]);
-    sources = [{uri: source.uri}];
+  let style;
+
+  if (srcSet != null) {
+    const sourceList = [];
+    const srcList = srcSet.split(', ');
+    srcList.forEach(imageSrc => {
+      const [uri, xScale] = imageSrc.split(' ');
+      if (xScale) {
+        const scale = parseInt(xScale.split('x')[0], 10);
+        if (scale) {
+          const headers: {[string]: string} = {};
+          if (crossOrigin === 'use-credentials') {
+            headers['Access-Control-Allow-Credentials'] = 'true';
+          }
+          if (referrerPolicy != null) {
+            headers['Referrer-Policy'] = referrerPolicy;
+          }
+          sourceList.push({headers, scale, uri});
+        }
+      }
+    });
+    if (sourceList.length === 0) {
+      console.warn('The provided value for srcSet is not valid.');
+    }
+    style = flattenStyle([styles.base, props.style]) || {};
+    console.log(sourceList);
+    sources = sourceList;
+  } else if (src != null) {
+    style = flattenStyle([styles.base, props.style]) || {};
+    const headers: {[string]: string} = {};
+    if (crossOrigin === 'use-credentials') {
+      headers['Access-Control-Allow-Credentials'] = 'true';
+    }
+    if (referrerPolicy != null) {
+      headers['Referrer-Policy'] = referrerPolicy;
+    }
+    sources = [{uri: src, headers}];
   } else {
-    style = flattenStyle([styles.base, props.style]);
-    sources = source;
+    if (source?.uri != null) {
+      const {width, height} = source;
+      style = flattenStyle([{width, height}, styles.base, props.style]);
+      sources = [{uri: source.uri}];
+    } else {
+      style = flattenStyle([styles.base, props.style]);
+      sources = source;
+    }
   }
 
   const {onLoadStart, onLoad, onLoadEnd, onError} = props;
@@ -180,7 +213,7 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     src: sources,
     /* $FlowFixMe(>=0.78.0 site=react_native_android_fb) This issue was found
      * when making Flow check .android.js files. */
-    headers: source?.headers,
+    headers: source?.headers || sources[0]?.headers,
     defaultSrc: defaultSource ? defaultSource.uri : null,
     loadingIndicatorSrc: loadingIndicatorSource
       ? loadingIndicatorSource.uri
@@ -202,13 +235,13 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
           <TextAncestor.Consumer>
             {hasTextAncestor => {
               if (hasTextAncestor) {
-                let src = Array.isArray(sources) ? sources : [sources];
+                let nativeSrc = Array.isArray(sources) ? sources : [sources];
                 return (
                   <TextInlineImageNativeComponent
                     style={style}
                     resizeMode={props.resizeMode}
                     headers={nativeProps.headers}
-                    src={src}
+                    src={nativeSrc}
                     ref={forwardedRef}
                   />
                 );

Libraries/Image/Image.ios.js

@@ -23,6 +23,7 @@ import NativeImageLoaderIOS from './NativeImageLoaderIOS';
 
 import ImageViewNativeComponent from './ImageViewNativeComponent';
 import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import type {ImageSource} from './ImageSource';
 
 function getSize(
   uri: string,
@@ -111,18 +112,57 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
     height: undefined,
   };
 
-  let sources;
+  let sources: ImageSource;
   let style: ImageStyleProp;
-  if (Array.isArray(source)) {
+
+  const {crossOrigin, referrerPolicy, src, srcSet} = props;
+
+  if (srcSet != null) {
+    const sourceList = [];
+    const srcList = srcSet.split(', ');
+    srcList.forEach(imageSrc => {
+      const [uri, xScale] = imageSrc.split(' ');
+      if (xScale) {
+        const scale = parseInt(xScale.split('x')[0], 10);
+        if (scale) {
+          const headers: {[string]: string} = {};
+          if (crossOrigin === 'use-credentials') {
+            headers['Access-Control-Allow-Credentials'] = 'true';
+          }
+          if (referrerPolicy != null) {
+            headers['Referrer-Policy'] = referrerPolicy;
+          }
+          sourceList.push({headers, scale, uri});
+        }
+      }
+    });
+    if (sourceList.length === 0) {
+      console.warn('The provided value for srcSet is not valid.');
+    }
     style = flattenStyle([styles.base, props.style]) || {};
-    sources = source;
+    sources = sourceList;
+  } else if (src != null) {
+    style = flattenStyle([styles.base, props.style]) || {};
+    const headers: {[string]: string} = {};
+    if (crossOrigin === 'use-credentials') {
+      headers['Access-Control-Allow-Credentials'] = 'true';
+    }
+    if (referrerPolicy != null) {
+      headers['Referrer-Policy'] = referrerPolicy;
+    }
+    sources = [{uri: src, headers}];
   } else {
-    const {width, height, uri} = source;
-    style = flattenStyle([{width, height}, styles.base, props.style]) || {};
-    sources = [source];
+    if (Array.isArray(source)) {
+      style = flattenStyle([styles.base, props.style]) || {};
+      sources = source;
+    } else {
+      const {width, height, uri} = source;
+      style = flattenStyle([{width, height}, styles.base, props.style]) || {};
+      sources = [source];
 
-    if (uri === '') {
-      console.warn('source.uri should not be an empty string');
+      if (uri === '') {
+        console.warn('source.uri should not be an empty string');
+      }
     }
   }
 
@@ -131,12 +171,6 @@ const BaseImage = (props: ImagePropsType, forwardedRef) => {
   // $FlowFixMe[prop-missing]
   const tintColor = style.tintColor;
 
-  if (props.src != null) {
-    console.warn(
-      'The <Image> component requires a `source` property rather than `src`.',
-    );
-  }
-
   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.',

Libraries/Image/ImageProps.js

@@ -94,6 +94,14 @@ export type ImageProps = {|
    */
   capInsets?: ?EdgeInsetsProp,
 
+  /**
+   * Adds the CORS related header to the request.
+   * Similar to crossorigin from HTML.
+   *
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
+   */
+  crossOrigin?: ?('anonymous' | 'use-credentials'),
+
   /**
    * Invoked on load error with `{nativeEvent: {error}}`.
    *
@@ -154,6 +162,23 @@ export type ImageProps = {|
    */
   style?: ?ImageStyleProp,
 
+  /**
+   * A string indicating which referrer to use when fetching the resource.
+   * Similar to referrerpolicy from HTML.
+   *
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-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 +195,17 @@ export type ImageProps = {|
    */
   testID?: ?string,
 
-  src?: empty,
+  /**
+   * A string representing the resource identifier for the image.
+   */
+  src?: ?string,
+
+  /**
+   * Similar to srcset from HTML.
+   *
+   * See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
+   */
+  srcSet?: ?string,
   children?: empty,
 |};
 

Libraries/Image/ImageViewNativeComponent.js

@@ -35,7 +35,7 @@ type Props = $ReadOnly<{
 
   // Android native props
   shouldNotifyLoadEvents?: boolean,
-  src?: ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}>,
+  src?: ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> | ?string,
   headers?: ?{[string]: string},
   defaultSrc?: ?string,
   loadingIndicatorSrc?: ?string,

packages/rn-tester/js/examples/Image/ImageExample.js

@@ -635,13 +635,21 @@ exports.description =
 
 exports.examples = [
   {
-    title: 'Plain Network Image',
+    title: 'Plain Network Image with `source` prop.',
     description: ('If the `source` prop `uri` property is prefixed with ' +
       '"http", then it will be downloaded from the network.': string),
     render: function (): React.Node {
       return <Image source={fullImage} style={styles.base} />;
     },
   },
+  {
+    title: 'Plain Network Image with `src` prop.',
+    description: ('If the `src` prop is defined with ' +
+      '"http", then it will be downloaded from the network.': string),
+    render: function (): React.Node {
+      return <Image src={fullImage.uri} style={styles.base} />;
+    },
+  },
   {
     title: 'Plain Blob Image',
     description: ('If the `source` prop `uri` property is an object URL, ' +