Cleanup

Author: kidroca

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

@@ -157,6 +157,7 @@ function raiseOnErrorEvent(uri, { onError, onLoadEnd }) {
   }
   if (onLoadEnd) onLoadEnd();
 }
+
 function hasSourceDiff(a: ImageSource, b: ImageSource) {
   return (
     a.uri !== b.uri || JSON.stringify(a.headers) !== JSON.stringify(b.headers)
@@ -342,8 +343,11 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
   );
 });
 
+BaseImage.displayName = 'Image';
+
 /**
- * This component handles specifically loading an image source with header
+ * This component handles specifically loading an image source with headers
+ * default source is never loaded using headers
  */
 const ImageWithHeaders: ImageComponent = React.forwardRef((props, ref) => {
   // $FlowIgnore
@@ -391,25 +395,25 @@ const ImageWithHeaders: ImageComponent = React.forwardRef((props, ref) => {
 });
 
 // $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
-const Image: ImageComponent & ImageStatics = React.forwardRef((props, ref) => {
-  if (props.source && props.source.headers) {
-    return <ImageWithHeaders ref={ref} {...props} />;
-  }
-
-  return <BaseImage ref={ref} {...props} />;
-});
+const ImageWithStatics: ImageComponent & ImageStatics = React.forwardRef(
+  (props, ref) => {
+    if (props.source && props.source.headers) {
+      return <ImageWithHeaders ref={ref} {...props} />;
+    }
 
-Image.displayName = 'Image';
+    return <BaseImage ref={ref} {...props} />;
+  }
+);
 
-Image.getSize = function (uri, success, failure) {
+ImageWithStatics.getSize = function (uri, success, failure) {
   ImageLoader.getSize(uri, success, failure);
 };
 
-Image.prefetch = function (uri) {
+ImageWithStatics.prefetch = function (uri) {
   return ImageLoader.prefetch(uri);
 };
 
-Image.queryCache = function (uris) {
+ImageWithStatics.queryCache = function (uris) {
   return ImageLoader.queryCache(uris);
 };
 
@@ -465,4 +469,4 @@ const resizeModeStyles = StyleSheet.create({
   }
 });
 
-export default Image;
+export default ImageWithStatics;

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

@@ -125,6 +125,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,
@@ -148,7 +149,6 @@ const ImageLoader = {
     return id;
   },
   loadWithHeaders(source: ImageSource): LoadRequest {
-    let loadRequest: LoadRequest;
     let uri: string;
     const abortCtrl = new AbortController();
     const request = new Request(source.uri, {
@@ -176,7 +176,6 @@ const ImageLoader = {
       source,
       cancel: () => {
         abortCtrl.abort();
-        if (loadRequest) loadRequest.cancel();
         URL.revokeObjectURL(uri);
       }
     };