Start using `react-native-expo-image-cache`

package.json

@@ -32,10 +32,12 @@
     "expo-web-browser": "~8.6.0",
     "i18next": "^19.8.4",
     "lodash": "^4.17.20",
+    "pretty-bytes": "^5.5.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-i18next": "^11.8.4",
     "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz",
+    "react-native-expo-image-cache": "^4.1.0",
     "react-native-gesture-handler": "~1.8.0",
     "react-native-htmlview": "^0.16.0",
     "react-native-image-zoom-viewer": "^3.0.1",

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'

yarn.lock

@@ -2390,6 +2390,11 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+crypto-js@^3.1.9-1:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/crypto-js/-/crypto-js-3.3.0.tgz#846dd1cce2f68aacfa156c8578f926a609b7976b"
+  integrity sha512-DIT51nX0dCfKltpRiXV+/TVZq+Qq2NgF4644+K7Ttnla7zEzqc+kjJyiB96BHNyUTBxyjzRcZYpUdZa+QAqi6Q==
+
 css-select@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
@@ -4101,7 +4106,7 @@ lodash.throttle@^4.1.1:
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
   integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
 
-lodash@^4, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0:
+lodash@^4, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.3.0, lodash@^4.5.0, lodash@^4.6.0:
   version "4.17.20"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
   integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
@@ -5075,6 +5080,11 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
+pretty-bytes@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz#0cecda50a74a941589498011cf23275aa82b339e"
+  integrity sha512-p+T744ZyjjiaFlMUZZv6YPC5JrkNj8maRmPaQCWFJFplUAzpIUTRaTcS+7wmZtUoFXHtESJb23ISliaWyz3SHA==
+
 pretty-format@^24.7.0, pretty-format@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
@@ -5220,6 +5230,14 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-native-expo-image-cache@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-native-expo-image-cache/-/react-native-expo-image-cache-4.1.0.tgz#649cbe9786249134d3eafed5baba50bbfa80c029"
+  integrity sha512-U6xHtuyalNZThhM11lu4+mRNSpJFkdh4dSLbWkKAj5QfY63cKlTnDVtv8c88njn71GHL4exEzf8hNKBMWhH37Q==
+  dependencies:
+    crypto-js "^3.1.9-1"
+    lodash "^4.17.4"
+
 react-native-gesture-handler@~1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.8.0.tgz#18f61f51da50320f938957b0ee79bc58f47449dc"