Clear image cache button (#8190)

src/screens/Settings/AboutSettings.tsx

@@ -1,30 +1,68 @@
 import {useMemo} from 'react'
 import {Platform} from 'react-native'
 import {setStringAsync} from 'expo-clipboard'
+import * as FileSystem from 'expo-file-system'
+import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
+import {type NativeStackScreenProps} from '@react-navigation/native-stack'
+import {useMutation} from '@tanstack/react-query'
 import {Statsig} from 'statsig-react-native-expo'
 
 import {appVersion, BUNDLE_DATE, bundleInfo} from '#/lib/app-info'
 import {STATUS_PAGE_URL} from '#/lib/constants'
-import {CommonNavigatorParams} from '#/lib/routes/types'
+import {type CommonNavigatorParams} from '#/lib/routes/types'
+import {isAndroid, isNative} from '#/platform/detection'
 import {useDevModeEnabled} from '#/state/preferences/dev-mode'
 import * as Toast from '#/view/com/util/Toast'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {BroomSparkle_Stroke2_Corner2_Rounded as BroomSparkleIcon} from '#/components/icons/BroomSparkle'
 import {CodeLines_Stroke2_Corner2_Rounded as CodeLinesIcon} from '#/components/icons/CodeLines'
 import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import {Newspaper_Stroke2_Corner2_Rounded as NewspaperIcon} from '#/components/icons/Newspaper'
 import {Wrench_Stroke2_Corner2_Rounded as WrenchIcon} from '#/components/icons/Wrench'
 import * as Layout from '#/components/Layout'
+import {Loader} from '#/components/Loader'
 import {OTAInfo} from './components/OTAInfo'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AboutSettings'>
 export function AboutSettingsScreen({}: Props) {
-  const {_} = useLingui()
+  const {_, i18n} = useLingui()
   const [devModeEnabled, setDevModeEnabled] = useDevModeEnabled()
   const stableID = useMemo(() => Statsig.getStableID(), [])
 
+  const {mutate: onClearImageCache, isPending: isClearingImageCache} =
+    useMutation({
+      mutationFn: async () => {
+        const freeSpaceBefore = await FileSystem.getFreeDiskStorageAsync()
+        await Image.clearDiskCache()
+        const freeSpaceAfter = await FileSystem.getFreeDiskStorageAsync()
+        const spaceDiff = freeSpaceBefore - freeSpaceAfter
+        return spaceDiff * -1
+      },
+      onSuccess: sizeDiffBytes => {
+        if (isAndroid) {
+          Toast.show(
+            _(
+              msg({
+                message: `Image cache cleared, freed ${i18n.number(
+                  Math.abs(sizeDiffBytes / 1024 / 1024),
+                  {
+                    notation: 'compact',
+                    style: 'unit',
+                    unit: 'megabyte',
+                  },
+                )}`,
+                comment: `Android-only toast message which includes amount of space freed using localized number formatting`,
+              }),
+            ),
+          )
+        } else {
+          Toast.show(_(msg`Image cache cleared`))
+        }
+      },
+    })
+
   return (
     <Layout.Screen>
       <Layout.Header.Outer>
@@ -69,6 +107,18 @@ export function AboutSettingsScreen({}: Props) {
               <Trans>System log</Trans>
             </SettingsList.ItemText>
           </SettingsList.LinkItem>
+          {isNative && (
+            <SettingsList.PressableItem
+              onPress={() => onClearImageCache()}
+              label={_(msg`Clear image cache`)}
+              disabled={isClearingImageCache}>
+              <SettingsList.ItemIcon icon={BroomSparkleIcon} />
+              <SettingsList.ItemText>
+                <Trans>Clear image cache</Trans>
+              </SettingsList.ItemText>
+              {isClearingImageCache && <SettingsList.ItemIcon icon={Loader} />}
+            </SettingsList.PressableItem>
+          )}
           <SettingsList.PressableItem
             label={_(msg`Version ${appVersion}`)}
             accessibilityHint={_(msg`Copies build version to clipboard`)}