fix(images): use new default resize behavior to avoid overfetching (#…

…9263) * feat(dev menu): add ability to clear FastImage cache Co-authored-by: George Kartalis <[email protected]> * fix(images): prefer default resizing behavior Will utilize the new default behavior from palette-mobile's Image component, i.e. images are resized by Gemini to *fill* (not *fit*) the available space. Co-authored-by: George Kartalis <[email protected]> * chore: bump palette-mobile to get the resizing fix --------- Co-authored-by: George Kartalis <[email protected]>
artsy · Sep 14, 2023 · 88f0358 · 88f0358
1 parent dcbdecb
commit 88f0358
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.144.0",
-    "@artsy/palette-mobile": "13.0.7",
+    "@artsy/palette-mobile": "13.0.8",
     "@artsy/to-title-case": "1.1.0",
     "@expo/react-native-action-sheet": "4.0.1",
     "@gorhom/bottom-sheet": "4.4.5",

diff --git a/src/app/Scenes/Home/Components/HeroUnitsRail.tsx b/src/app/Scenes/Home/Components/HeroUnitsRail.tsx
@@ -38,7 +38,7 @@ const HeroUnit: React.FC<HeroUnitProps> = ({ item }) => {
   return (
     <Touchable key={item.internalID} onPress={handlePress}>
       <Flex bg="black100" flexDirection="row" height={CARD_HEIGHT} width={screenWidth}>
-        <Image height={CARD_HEIGHT} src={imageSrc} width={cardImageWidth} performResize={false} />
+        <Image height={CARD_HEIGHT} src={imageSrc} width={cardImageWidth} />
         <Box p={2} width={screenWidth - cardImageWidth}>
           <Text color="white100" mb={1} numberOfLines={2} variant="lg-display">
             {item.title}

diff --git a/src/app/system/devTools/DevMenu/DevMenu.tsx b/src/app/system/devTools/DevMenu/DevMenu.tsx
@@ -46,6 +46,7 @@ import {
 } from "react-native"
 import Config from "react-native-config"
 import DeviceInfo from "react-native-device-info"
+import FastImage from "react-native-fast-image"
 import Keychain from "react-native-keychain"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 
@@ -240,6 +241,13 @@ export const DevMenu = ({ onClose = () => goBack() }: { onClose(): void }) => {
               RelayCache.clearAll()
             }}
           />
+          <DevMenuButtonItem
+            title="Clear FastImage Cache"
+            onPress={() => {
+              FastImage.clearMemoryCache()
+              FastImage.clearDiskCache()
+            }}
+          />
           <DevMenuButtonItem
             title="Clear Progressive Onboarding progress"
             onPress={__clearDissmissed}

diff --git a/yarn.lock b/yarn.lock
@@ -24,10 +24,10 @@
   dependencies:
     core-js "3"
 
-"@artsy/[email protected].7":
-  version "13.0.7"
-  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.0.7.tgz#2b8e73faac0cfa43784d93c458ac45b6134ffe52"
-  integrity sha512-J0KwUPHZWTf/nGMR0u6XZrMCCRWO4NJ0QfZWaCBlniNKTdwq8AMxR0O+Gwp/kLGRF05z1n/zVISIgpPtn8pvwA==
+"@artsy/[email protected].8":
+  version "13.0.8"
+  resolved "https://registry.yarnpkg.com/@artsy/palette-mobile/-/palette-mobile-13.0.8.tgz#a5bed4563cc04a3f76ec18280bff219671a6c5ba"
+  integrity sha512-0WwG/xByx/78EuV3tUQfh61ogQ9wBwZTtfzNOFVCYGAZpZS4FwctJ7kT2xohTUNrPjAxdgC+smOLokwYEXS4Gg==
   dependencies:
     "@artsy/palette-tokens" "^5.0.0"
     "@shopify/flash-list" "^1.5.0"