Cleanup

Author: kidroca

packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-57);"
+    style="filter: url(#tint-56);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-57"
+        id="tint-56"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-55);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-56"
+        id="tint-55"
       >
         <feflood
           flood-color="red"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -20,9 +20,9 @@ const originalImage = window.Image;
 describe('components/Image', () => {
   beforeEach(() => {
     ImageUriCache._entries = {};
-    ImageLoader.load = jest.fn((_, onLoad, onError) => {
+    ImageLoader.load = jest.fn((source, onLoad, onError) => {
       onLoad();
-      return { cancel: jest.fn() };
+      return { source, cancel: jest.fn() };
     });
     window.Image = jest.fn(() => ({}));
   });
@@ -304,9 +304,9 @@ describe('components/Image', () => {
       let loadCallback;
       ImageLoader.load = jest
         .fn()
-        .mockImplementationOnce((_, onLoad, onError) => {
+        .mockImplementationOnce((source, onLoad, onError) => {
           loadCallback = onLoad;
-          return { cancel: jest.fn() };
+          return { source, cancel: jest.fn() };
         });
       const { container } = render(
         <Image defaultSource={{ uri: defaultUri }} source={{ uri }} />

packages/react-native-web/src/exports/Image/index.js

@@ -148,9 +148,12 @@ function resolveAssetUri(source): ?string {
 }
 
 function hasSourceDiff(a, b) {
-  return (
-    a.uri !== b.uri || JSON.stringify(a.headers) !== JSON.stringify(b.headers)
-  );
+  if (a.uri !== b.uri) return true;
+
+  const headersA = a.headers || {};
+  const headersB = b.headers || {};
+
+  return JSON.stringify(headersA) !== JSON.stringify(headersB);
 }
 
 interface ImageStatics {
@@ -193,7 +196,6 @@ const Image: React.AbstractComponent<
     }
   }
 
-  const lastLoadedSource = React.useRef({});
   const [state, updateState] = React.useState(() => {
     const uri = resolveAssetUri(source);
     if (uri != null) {
@@ -210,6 +212,7 @@ const Image: React.AbstractComponent<
   const hiddenImageRef = React.useRef(null);
   const filterRef = React.useRef(_filterId++);
   const requestRef = React.useRef<LoadRequest>({
+    source: { uri: '' },
     cancel: () => {},
     requestId: -1
   });
@@ -270,12 +273,12 @@ const Image: React.AbstractComponent<
   const uri = resolveAssetUri(source);
   React.useEffect(() => {
     if (uri != null) {
-      const nextSource = {
-        // $FlowFixMe
-        headers: source.headers,
-        uri
-      };
-      if (!hasSourceDiff(nextSource, lastLoadedSource.current)) return;
+      const nextSource = { uri, headers: undefined };
+      if (source && source.headers != null) {
+        nextSource.headers = source.headers;
+      }
+
+      if (!hasSourceDiff(nextSource, requestRef.current.source)) return;
 
       requestRef.current.cancel();
       updateState(LOADING);
@@ -313,8 +316,11 @@ const Image: React.AbstractComponent<
           }
         }
       );
+    } else {
+      requestRef.current.source = { uri: '' };
+      requestRef.current.cancel();
     }
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, updateState, onError, onLoad, onLoadEnd, onLoadStart, source]);
 
   // Run the cleanup function on unmount
   React.useEffect(() => requestRef.current.cancel, []);

packages/react-native-web/src/modules/ImageLoader/index.js

@@ -129,6 +129,7 @@ const ImageLoader = {
     image.onload = (nativeEvent) => {
       // avoid blocking the main thread
       const onDecode = () => {
+        // Append `source` to match RN's ImageLoadEvent interface
         nativeEvent.source = {
           uri: image.src,
           width: image.naturalWidth,
@@ -150,6 +151,7 @@ const ImageLoader = {
     requests[`${id}`] = image;
 
     return {
+      source,
       cancel: () => ImageLoader.abort(id),
       requestId: id
     };
@@ -176,11 +178,12 @@ const ImageLoader = {
       })
       .catch((error) => {
         if (error.name !== 'AbortError' && onError) {
-          onError({ nativeEvent: error.message });
+          onError(error);
         }
       });
 
     return {
+      source,
       get requestId() {
         if (loadRequest) return loadRequest.requestId;
         return -1;
@@ -218,10 +221,11 @@ const ImageLoader = {
   }
 };
 
-export type LoadRequest = {
-  cancel: Function,
-  requestId: number
-};
+export type LoadRequest = {|
+  requestId: number,
+  source: ImageSource | { uri: string },
+  cancel: Function
+|};
 
 type ImageSource = {
   uri: string,