From 2d97c5bebff2a632a7f9a52471329a4b4869a46d Mon Sep 17 00:00:00 2001
From: KamiSama <1457434343@qq.com>
Date: Fri, 25 Oct 2024 12:24:50 +0800
Subject: [PATCH] Fix image flickering caused by resetting BackgroundSize

---
 packages/react-native-web/src/exports/Image/index.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js
index f99faa7ec..6abddba2f 100644
--- a/packages/react-native-web/src/exports/Image/index.js
+++ b/packages/react-native-web/src/exports/Image/index.js
@@ -232,7 +232,8 @@ const Image: React.AbstractComponent<
   const displayImageUri = resolveAssetUri(selectedSource);
   const imageSizeStyle = resolveAssetDimensions(selectedSource);
   const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
-  const backgroundSize = getBackgroundSize();
+  const cachedBackgroundSize = React.useRef(null);
+  const backgroundSize = getBackgroundSize() || cachedBackgroundSize.current;
 
   // Accessibility image allows users to trigger the browser's image context menu
   const hiddenImage = displayImageUri
@@ -260,7 +261,8 @@ const Image: React.AbstractComponent<
         );
         const x = Math.ceil(scaleFactor * naturalWidth);
         const y = Math.ceil(scaleFactor * naturalHeight);
-        return `${x}px ${y}px`;
+        cachedBackgroundSize.current = `${x}px ${y}px`;
+        return cachedBackgroundSize.current;
       }
     }
   }