feature: [Image] Allow to use `Headers` interface

[retyui]

Summary:

The Headers interface of the Fetch API allows you to perform various actions on HTTP request and response headers. These actions include retrieving, setting, adding to, and removing headers from the list of the request's headers. Ant it will good candidate to use it for Image component in React Native platform.

        <Image
          source={{
            uri: '...',
            headers: new Headers({Authorization: 'Bearer test'}), // New way
          }}
        />
        <Image
          source={{
            uri: '...',
            headers: {Authorization: 'Bearer test'},
          }}
        />

• MDN Docs: https://developer.mozilla.org/en-US/docs/Web/API/Headers

Changelog:

[GENERAL] [ADDED] - Image source allow to pass Headers interface

Test Plan:

1. Create a new Project
2. Apply changes from this PR
3. Add an Image with source={{ uri, headers: new Headers({ x-header-123: 'my-tests' }) }}

4. Create a simple static server (with a headers logger)

  var path = require('path');
  var http = require('http');
  var fs = require('fs');

  var dir = path.join(__dirname, 'public');

  var mime = {
      html: 'text/html',
      txt: 'text/plain',
      css: 'text/css',
      gif: 'image/gif',
      jpg: 'image/jpeg',
      png: 'image/png',
      svg: 'image/svg+xml',
      js: 'application/javascript'
  };

  var server = http.createServer(function (req, res) {
      console.log(' --- xdebug', req.headers, req.url, req.method);
      var reqpath = req.url.toString().split('?')[0];
      if (req.method !== 'GET') {
          res.statusCode = 501;
          res.setHeader('Content-Type', 'text/plain');
          return res.end('Method not implemented');
      }
      var file = path.join(dir, reqpath.replace(/\/$/, '/index.html'));
      if (file.indexOf(dir + path.sep) !== 0) {
          res.statusCode = 403;
          res.setHeader('Content-Type', 'text/plain');
          return res.end('Forbidden');
      }
      var type = mime[path.extname(file).slice(1)] || 'text/plain';
      var s = fs.createReadStream(file);
      s.on('open', function () {
          res.setHeader('Content-Type', type);
          s.pipe(res);
      });
      s.on('error', function () {
          res.setHeader('Content-Type', 'text/plain');
          res.statusCode = 404;
          res.end('Not found');
      });
  });

  server.listen(3000, function () {
      console.log('Listening on http://localhost:3000/');
  });

5. Apply image source.uri from a static server created above
6. Add headers: new Headers({ ... }) in source prop or Image.getSizeWithHeaders

See Results ->

Image.getSizeWithHeaders

Android

iOS

Image source={...}

Android

iOS

[analysis-bot]

Platform	Engine	Arch	Size (bytes)	Diff
android	hermes	arm64-v8a	18,008,531	+168
android	hermes	armeabi-v7a	n/a	--
android	hermes	x86	n/a	--
android	hermes	x86_64	n/a	--
android	jsc	arm64-v8a	21,366,949	+66
android	jsc	armeabi-v7a	n/a	--
android	jsc	x86	n/a	--
android	jsc	x86_64	n/a	--

Base commit: 1c69100a2b822309c210733a33a57ebb560a1c71 Branch: main

[react-native-bot]

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.