From 8aae58e257b10c7bb72770c14662f9410a1bf1b1 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Thu, 23 Feb 2023 13:56:58 +0200
Subject: [PATCH 1/2] [fix] ImageLoader: ImageUriCache is not kept up to date
 with loaded images

---
 .../react-native-web/src/exports/Image/index.js |  2 +-
 .../src/modules/ImageLoader/index.js            | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index f80ee49558..8d11592754 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -311,7 +311,7 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
 
     function abortPendingRequest() {
       if (requestRef.current != null) {
-        ImageLoader.abort(requestRef.current);
+        ImageLoader.clear(requestRef.current);
         requestRef.current = null;
       }
     }
diff --git a/packages/react-native-web/src/modules/ImageLoader/index.js b/packages/react-native-web/src/modules/ImageLoader/index.js
index 0d7ceda8ff..db887df6d3 100644
--- a/packages/react-native-web/src/modules/ImageLoader/index.js
+++ b/packages/react-native-web/src/modules/ImageLoader/index.js
@@ -74,12 +74,13 @@ let id = 0;
 const requests = {};
 
 const ImageLoader = {
-  abort(requestId: number) {
-    let image = requests[`${requestId}`];
+  clear(requestId: number) {
+    const image = requests[`${requestId}`];
     if (image) {
       image.onerror = null;
       image.onload = null;
-      image = null;
+      ImageUriCache.remove(image.src);
+      image.src = '';
       delete requests[`${requestId}`];
     }
   },
@@ -102,7 +103,7 @@ const ImageLoader = {
         }
       }
       if (complete) {
-        ImageLoader.abort(requestId);
+        ImageLoader.clear(requestId);
         clearInterval(interval);
       }
     }
@@ -111,7 +112,7 @@ const ImageLoader = {
       if (typeof failure === 'function') {
         failure();
       }
-      ImageLoader.abort(requestId);
+      ImageLoader.clear(requestId);
       clearInterval(interval);
     }
   },
@@ -123,6 +124,7 @@ const ImageLoader = {
     const image = new window.Image();
     image.onerror = onError;
     image.onload = (nativeEvent) => {
+      ImageUriCache.add(uri);
       // avoid blocking the main thread
       const onDecode = () => {
         // Append `source` to match RN's ImageLoadEvent interface
@@ -185,9 +187,8 @@ const ImageLoader = {
       ImageLoader.load(
         uri,
         () => {
-          // Add the uri to the cache so it can be immediately displayed when used
-          // but also immediately remove it to correctly reflect that it has no active references
-          ImageUriCache.add(uri);
+          // load() adds the uri to the cache so it can be immediately displayed when used,
+          // but we also immediately remove it to correctly reflect that it has no active references
           ImageUriCache.remove(uri);
           resolve();
         },

From 37264cb1d9b2c464af9b81c7074f1bf415ecbc90 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Fri, 24 Feb 2023 20:15:10 +0200
Subject: [PATCH 2/2] [fix] Image: image LOADED state is only captured
 initially

If the Image component is rendered with a `null` source, and consecutively
updated with actual source url that was already loaded, it would fail to
pic kup the change - `state` would be `IDLE` for a brief moment and
this would cause a small flicker when the image renders

Let's always start from IDLE state, and update `shouldDisplaySource`
condition to be based on `ImageLoader.has` cache or not
---
 .../src/exports/Image/index.js                | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index 8d11592754..4757e1c4fe 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -211,24 +211,18 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
     }
   }
 
-  const [state, updateState] = React.useState(() => {
-    const uri = resolveAssetUri(source);
-    if (uri != null) {
-      const isLoaded = ImageLoader.has(uri);
-      if (isLoaded) {
-        return LOADED;
-      }
-    }
-    return IDLE;
-  });
-
+  const [state, updateState] = React.useState(IDLE);
   const [layout, updateLayout] = React.useState({});
   const hasTextAncestor = React.useContext(TextAncestorContext);
   const hiddenImageRef = React.useRef(null);
   const filterRef = React.useRef(_filterId++);
   const requestRef = React.useRef(null);
+  const uri = resolveAssetUri(source);
+  const isCached = uri != null && ImageLoader.has(uri);
   const shouldDisplaySource =
-    state === LOADED || (state === LOADING && defaultSource == null);
+    state === LOADED ||
+    isCached ||
+    (state === LOADING && defaultSource == null);
   const [flatStyle, _resizeMode, filter, tintColor] = getFlatStyle(
     style,
     blurRadius,
@@ -281,7 +275,6 @@ const BaseImage: ImageComponent = React.forwardRef((props, ref) => {
   }
 
   // Image loading
-  const uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();