Start using react-native-expo-image-cache

src/components/Menu/Row.tsx

@@ -45,14 +45,14 @@ const Core: React.FC<Props> = ({
       </View>
       {(content || iconBack) && (
         <View style={styles.back}>
-          {content && (
+          {content && content.length ? (
             <Text
               style={[styles.content, { color: theme.secondary }]}
               numberOfLines={1}
             >
               {content}
             </Text>
-          )}
+          ) : null}
           {iconBack && (
             <Feather
               name={iconBack}

src/components/Timelines/Timeline/Shared/Avatar.tsx

@@ -1,7 +1,9 @@
 import React, { useCallback } from 'react'
-import { Image, Pressable, StyleSheet } from 'react-native'
+import { Pressable, StyleSheet } from 'react-native'
+import { Image } from 'react-native-expo-image-cache'
 import { StyleConstants } from '@utils/styles/constants'
 import { useNavigation } from '@react-navigation/native'
+import { useTheme } from '@root/utils/styles/ThemeManager'
 
 export interface Props {
   queryKey?: QueryKey.Timeline
@@ -9,6 +11,7 @@ export interface Props {
 }
 
 const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
+  const { mode } = useTheme()
   const navigation = useNavigation()
   // Need to fix go back root
   const onPress = useCallback(() => {
@@ -17,7 +20,7 @@ const TimelineAvatar: React.FC<Props> = ({ queryKey, account }) => {
 
   return (
     <Pressable style={styles.avatar} onPress={onPress}>
-      <Image source={{ uri: account.avatar_static }} style={styles.image} />
+      <Image uri={account.avatar_static} style={styles.image} />
     </Pressable>
   )
 }

src/i18n/zh/screens/meSettings.ts

@@ -26,6 +26,9 @@ export default {
         cancel: '$t(common:buttons.cancel)'
       }
     },
+    cache: {
+      heading: '清空缓存'
+    },
     copyrights: {
       heading: '版权信息'
     },

src/screens/Me/Settings.tsx

@@ -1,8 +1,9 @@
-import React from 'react'
+import prettyBytes from 'pretty-bytes'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionSheetIOS, StyleSheet, Text } from 'react-native'
+import { CacheManager } from 'react-native-expo-image-cache'
 import { useDispatch, useSelector } from 'react-redux'
-
 import { MenuContainer, MenuRow } from '@components/Menu'
 import {
   changeBrowser,
@@ -23,6 +24,13 @@ const ScreenMeSettings: React.FC = () => {
   const settingsBrowser = useSelector(getSettingsBrowser)
   const dispatch = useDispatch()
 
+  const [cacheSize, setCacheSize] = useState<number>()
+  useEffect(() => {
+    const getCacheSize = async () =>
+      setCacheSize(await CacheManager.getCacheSize())
+    getCacheSize()
+  }, [])
+
   return (
     <>
       <MenuContainer>
@@ -117,6 +125,15 @@ const ScreenMeSettings: React.FC = () => {
         />
       </MenuContainer>
       <MenuContainer>
+        <MenuRow
+          title={t('content.cache.heading')}
+          content={cacheSize ? prettyBytes(cacheSize) : undefined}
+          iconBack='chevron-right'
+          onPress={async () => {
+            await CacheManager.clearCache()
+            setCacheSize(0)
+          }}
+        />
         <MenuRow
           title={t('content.copyrights.heading')}
           iconBack='chevron-right'