react-native-web+0.19.12+003+image-header-support.patch

diff --git a/node_modules/react-native-web/dist/exports/Image/index.js b/node_modules/react-native-web/dist/exports/Image/index.js
index 9649d27..3281cc8 100644
--- a/node_modules/react-native-web/dist/exports/Image/index.js
+++ b/node_modules/react-native-web/dist/exports/Image/index.js
@@ -135,7 +135,22 @@ function resolveAssetUri(source) {
   }
   return uri;
 }
-var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
+function raiseOnErrorEvent(uri, _ref) {
+  var onError = _ref.onError,
+    onLoadEnd = _ref.onLoadEnd;
+  if (onError) {
+    onError({
+      nativeEvent: {
+        error: "Failed to load resource " + uri + " (404)"
+      }
+    });
+  }
+  if (onLoadEnd) onLoadEnd();
+}
+function hasSourceDiff(a, b) {
+  return a.uri !== b.uri || JSON.stringify(a.headers) !== JSON.stringify(b.headers);
+}
+var BaseImage = /*#__PURE__*/React.forwardRef((props, ref) => {
   var _ariaLabel = props['aria-label'],
     accessibilityLabel = props.accessibilityLabel,
     blurRadius = props.blurRadius,
@@ -238,16 +253,10 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
         }
       }, function error() {
         updateState(ERRORED);
-        if (onError) {
-          onError({
-            nativeEvent: {
-              error: "Failed to load resource " + uri + " (404)"
-            }
-          });
-        }
-        if (onLoadEnd) {
-          onLoadEnd();
-        }
+        raiseOnErrorEvent(uri, {
+          onError,
+          onLoadEnd
+        });
       });
     }
     function abortPendingRequest() {
@@ -279,10 +288,78 @@ var Image = /*#__PURE__*/React.forwardRef((props, ref) => {
     suppressHydrationWarning: true
   }), hiddenImage, createTintColorSVG(tintColor, filterRef.current));
 });
-Image.displayName = 'Image';
+BaseImage.displayName = 'Image';
+
+/**
+ * This component handles specifically loading an image source with headers
+ * default source is never loaded using headers
+ */
+var ImageWithHeaders = /*#__PURE__*/React.forwardRef((props, ref) => {
+  // $FlowIgnore: This component would only be rendered when `source` matches `ImageSource`
+  var nextSource = props.source;
+  var _React$useState3 = React.useState(''),
+    blobUri = _React$useState3[0],
+    setBlobUri = _React$useState3[1];
+  var request = React.useRef({
+    cancel: () => {},
+    source: {
+      uri: '',
+      headers: {}
+    },
+    promise: Promise.resolve('')
+  });
+  var onError = props.onError,
+    onLoadStart = props.onLoadStart,
+    onLoadEnd = props.onLoadEnd;
+  React.useEffect(() => {
+    if (!hasSourceDiff(nextSource, request.current.source)) {
+      return;
+    }
+
+    // When source changes we want to clean up any old/running requests
+    request.current.cancel();
+    if (onLoadStart) {
+      onLoadStart();
+    }
+
+    // Store a ref for the current load request so we know what's the last loaded source,
+    // and so we can cancel it if a different source is passed through props
+    request.current = ImageLoader.loadWithHeaders(nextSource);
+    request.current.promise.then(uri => setBlobUri(uri)).catch(() => raiseOnErrorEvent(request.current.source.uri, {
+      onError,
+      onLoadEnd
+    }));
+  }, [nextSource, onLoadStart, onError, onLoadEnd]);
+
+  // Cancel any request on unmount
+  React.useEffect(() => request.current.cancel, []);
+  var propsToPass = _objectSpread(_objectSpread({}, props), {}, {
+    // `onLoadStart` is called from the current component
+    // We skip passing it down to prevent BaseImage raising it a 2nd time
+    onLoadStart: undefined,
+    // Until the current component resolves the request (using headers)
+    // we skip forwarding the source so the base component doesn't attempt
+    // to load the original source
+    source: blobUri ? _objectSpread(_objectSpread({}, nextSource), {}, {
+      uri: blobUri
+    }) : undefined
+  });
+  return /*#__PURE__*/React.createElement(BaseImage, _extends({
+    ref: ref
+  }, propsToPass));
+});
 
 // $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
-var ImageWithStatics = Image;
+var ImageWithStatics = /*#__PURE__*/React.forwardRef((props, ref) => {
+  if (props.source && props.source.headers) {
+    return /*#__PURE__*/React.createElement(ImageWithHeaders, _extends({
+      ref: ref
+    }, props));
+  }
+  return /*#__PURE__*/React.createElement(BaseImage, _extends({
+    ref: ref
+  }, props));
+});
 ImageWithStatics.getSize = function (uri, success, failure) {
   ImageLoader.getSize(uri, success, failure);
 };
diff --git a/node_modules/react-native-web/dist/modules/ImageLoader/index.js b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
index bc06a87..5a22819 100644
--- a/node_modules/react-native-web/dist/modules/ImageLoader/index.js
+++ b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
@@ -76,7 +76,7 @@ var ImageLoader = {
       var image = requests["" + requestId];
       if (image) {
         var naturalHeight = image.naturalHeight,
-          naturalWidth = image.naturalWidth;
+            naturalWidth = image.naturalWidth;
         if (naturalHeight && naturalWidth) {
           success(naturalWidth, naturalHeight);
           complete = true;
@@ -102,11 +102,19 @@ var ImageLoader = {
     id += 1;
     var image = new window.Image();
     image.onerror = onError;
-    image.onload = e => {
+    image.onload = nativeEvent => {
       // avoid blocking the main thread
-      var onDecode = () => onLoad({
-        nativeEvent: e
-      });
+      var onDecode = () => {
+        // Append `source` to match RN's ImageLoadEvent interface
+        nativeEvent.source = {
+          uri: image.src,
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        };
+        onLoad({
+          nativeEvent
+        });
+      };
       if (typeof image.decode === 'function') {
         // Safari currently throws exceptions when decoding svgs.
         // We want to catch that error and allow the load handler
@@ -120,6 +128,32 @@ var ImageLoader = {
     requests["" + id] = image;
     return id;
   },
+  loadWithHeaders(source) {
+    var uri;
+    var abortController = new AbortController();
+    var request = new Request(source.uri, {
+      headers: source.headers,
+      signal: abortController.signal
+    });
+    request.headers.append('accept', 'image/*');
+    var promise = fetch(request).then(response => response.blob()).then(blob => {
+      uri = URL.createObjectURL(blob);
+      return uri;
+    }).catch(error => {
+      if (error.name === 'AbortError') {
+        return '';
+      }
+      throw error;
+    });
+    return {
+      promise,
+      source,
+      cancel: () => {
+        abortController.abort();
+        URL.revokeObjectURL(uri);
+      }
+    };
+  },
   prefetch(uri) {
     return new Promise((resolve, reject) => {
       ImageLoader.load(uri, () => {