In <Image/> component only prop uri is respected about network

[hanayashiki]

Request made by <Image/> does not respect properties of ImageSourcePropType other than uri

Simplified test case: <Image source={{uri: 'blahblah', headers: {'Authorization': 'blahblah' }}}/>

Steps to reproduce:

1. Render the component above

Expected behavior

A request with header Authorization is sent

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.11.7
• React (version): 16.9.41
• Browser: Chrome

I can only make an xhr on my own as workaround

In react-native typing:

*
 * @see https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageSourcePropType.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;
    /**
     * `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;
    /**
     * `method` is the HTTP Method to use. Defaults to GET if not specified.
     */
    method?: string;
    /**
     * `headers` is an object representing the HTTP headers to send along with the
     * request for a remote image.
     */
    headers?: { [key: string]: string };
    /**
     * `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';
    /**
     * `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;
    /**
     * `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;
    height?: number;
    /**
     * `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;
}

export type ImageRequireSource = number;

/**
 * @see ImagePropsIOS.onProgress
 */
export interface ImageProgressEventDataIOS {
    loaded: number;
    total: number;
}

export interface ImagePropsIOS {
    /**
     * blurRadius: the blur radius of the blur filter added to the image
     * @platform ios
     */
    blurRadius?: number;

    /**
     * When the image is resized, the corners of the size specified by capInsets will stay a fixed size,
     * but the center content and borders of the image will be stretched.
     * This is useful for creating resizable rounded buttons, shadows, and other resizable assets.
     * More info on Apple documentation
     */
    capInsets?: Insets;

    /**
     * Invoked on download progress with {nativeEvent: {loaded, total}}
     */
    onProgress?: (event: NativeSyntheticEvent<ImageProgressEventDataIOS>) => void;

    /**
     * Invoked when a partial load of the image is complete. The definition of
     * what constitutes a "partial load" is loader specific though this is meant
     * for progressive JPEG loads.
     * @platform ios
     */
    onPartialLoad?: () => void;
}

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.
     *
     * '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.
     */
    resizeMethod?: 'auto' | 'resize' | 'scale';

    /**
     * Duration of fade in animation in ms. Defaults to 300
     *
     * @platform android
     */
    fadeDuration?: number;

    /**
     * Required if loading images via 'uri' from drawable folder on Android.
     * Explanation: https://medium.com/@adamjacobb/react-native-performance-images-adf5843e120
     */
    width?: number;

    /**
     * Required if loading images via 'uri' from drawable folder on Android
     * Explanation: https://medium.com/@adamjacobb/react-native-performance-images-adf5843e120
     */
    height?: number;
}

So react-native is expected to support headers and other props for <Image/> (and it does support on iOS, at least), however react-native-web hasn't support these features.

[necolas]

Duplicate of #1019