Add react-native-web patch for image header support

patches/react-native-web+0.19.9+005+image-header-support.patch

@@ -0,0 +1,200 @@
+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 95355d5..19109fc 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'],
+     blurRadius = props.blurRadius,
+     defaultSource = props.defaultSource,
+@@ -236,16 +251,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() {
+@@ -277,10 +286,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..e309394 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, () => {