replace FastImage by regular Image

- Glide -> Fresco (image loader)

android/app/proguard-rules.pro

@@ -12,9 +12,3 @@
 -keep class com.facebook.react.turbomodule.** { *; }
 -keep class com.facebook.hermes.unicode.** { *; }
 -keep class com.facebook.jni.** { *; }
--keep public class com.dylanvann.fastimage.* {*;}
--keep public class com.dylanvann.fastimage.** {*;}
--keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
-  **[] $VALUES;
-  public *;
-}

package-lock.json

@@ -41,7 +41,6 @@
         "react-native-device-info": "^8.4.7",
         "react-native-easing-gradient": "^1.0.0",
         "react-native-error-boundary": "^1.1.16",
-        "react-native-fast-image": "^8.6.3",
         "react-native-fs": "^2.20.0",
         "react-native-gesture-handler": "~2.9.0",
         "react-native-lottie-splash-screen": "^1.0.1",
@@ -14436,15 +14435,6 @@
         }
       }
     },
-    "node_modules/react-native-fast-image": {
-      "version": "8.6.3",
-      "resolved": "https://registry.npmjs.org/react-native-fast-image/-/react-native-fast-image-8.6.3.tgz",
-      "integrity": "sha512-Sdw4ESidXCXOmQ9EcYguNY2swyoWmx53kym2zRsvi+VeFCHEdkO+WG1DK+6W81juot40bbfLNhkc63QnWtesNg==",
-      "peerDependencies": {
-        "react": "^17 || ^18",
-        "react-native": ">=0.60.0"
-      }
-    },
     "node_modules/react-native-fs": {
       "version": "2.20.0",
       "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz",

package.json

@@ -47,7 +47,6 @@
     "react-native-device-info": "^8.4.7",
     "react-native-easing-gradient": "^1.0.0",
     "react-native-error-boundary": "^1.1.16",
-    "react-native-fast-image": "^8.6.3",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-lottie-splash-screen": "^1.0.1",

src/components/ListView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyleSheet, View, Text, Pressable } from 'react-native';
 
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 import { coverPlaceholderColor } from '../theme/colors';
 
 import color from 'color';
@@ -41,7 +41,7 @@ const ListView = ({
       onPress={onPress}
       onLongPress={onLongPress}
     >
-      <FastImage
+      <Image
         source={{
           uri: item.cover,
         }}

src/components/NovelCover.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native';
 
 import { LinearGradient } from 'expo-linear-gradient';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 import ListView from './ListView';
 
 import { useDeviceOrientation } from '@hooks';
@@ -18,6 +18,7 @@ import { LibraryNovelInfo, NovelInfo } from '@database/types';
 import { NovelItem } from '@plugins/types';
 import { ThemeColors } from '@theme/types';
 import { useLibrarySettings } from '@hooks/persisted';
+import { defaultUserAgentString } from '@utils/fetch/fetch';
 
 interface UnreadBadgeProps {
   chaptersDownloaded: number;
@@ -118,8 +119,8 @@ function NovelCover<TNovel extends NovelItem | NovelInfo | LibraryNovelInfo>({
             />
           )}
         </View>
-        <FastImage
-          source={{ uri }}
+        <Image
+          source={{ uri, headers: { 'User-Agent': defaultUserAgentString } }}
           style={[
             {
               height: coverHeight,

src/screens/GlobalSearchScreen/components/GlobalSearchNovelItem.tsx

@@ -1,6 +1,6 @@
 import { Dimensions, Pressable, StyleSheet, Text, View } from 'react-native';
 import React, { useMemo } from 'react';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 
 import { coverPlaceholderColor } from '@theme/colors';
 
@@ -46,7 +46,7 @@ const GlobalSearchNovelItem: React.FC<Props> = ({
         onPress={() => navigateToNovel({ ...novel, pluginId: pluginId })}
         onLongPress={onLongPress}
       >
-        <FastImage
+        <Image
           source={{ uri: novel.cover }}
           style={[styles.novelCover, { ...novelItemDimensions }]}
         />

src/screens/browse/components/PluginCard.tsx

@@ -7,7 +7,7 @@ import { coverPlaceholderColor } from '@theme/colors';
 import { ThemeColors } from '@theme/types';
 
 import { PluginItem } from '@plugins/types';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 import { showToast } from '@utils/showToast';
 import { ActivityIndicator } from 'react-native-paper';
 import { getString } from '@strings/translations';
@@ -47,7 +47,7 @@ const PluginCard: React.FC<Props> = ({
         }}
       >
         <View style={[styles.flexRow]}>
-          <FastImage source={{ uri: plugin.iconUrl }} style={styles.icon} />
+          <Image source={{ uri: plugin.iconUrl }} style={styles.icon} />
           <View style={styles.details}>
             <Text
               numberOfLines={1}

src/screens/browse/discover/MalNovelCard/MalNovelCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 
 import { ThemeColors } from '../../../../theme/types';
 
@@ -18,7 +18,7 @@ const MalNovelCard: React.FC<Props> = ({ novel, onPress, theme }) => {
         onPress={onPress}
         android_ripple={{ color: theme.rippleColor }}
       >
-        <FastImage source={{ uri: novel.novelCover }} style={styles.cover} />
+        <Image source={{ uri: novel.novelCover }} style={styles.cover} />
         <View style={styles.infoContainer}>
           <Text
             style={[styles.title, { color: theme.onSurface }]}

src/screens/browse/discover/TrackerNovelCard/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 
 import { ThemeColors } from '@theme/types';
 
@@ -23,7 +23,7 @@ const MalNovelCard: React.FC<Props> = ({ novel, onPress, theme }) => {
         onPress={onPress}
         android_ripple={{ color: theme.rippleColor }}
       >
-        <FastImage source={{ uri: novel.novelCover }} style={styles.cover} />
+        <Image source={{ uri: novel.novelCover }} style={styles.cover} />
         <View style={styles.infoContainer}>
           <Text
             style={[styles.title, { color: theme.onSurface }]}

src/screens/history/components/HistoryCard/HistoryCard.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 
 import dayjs from 'dayjs';
-import FastImage from 'react-native-fast-image';
+import { Image } from 'react-native';
 
 import { IconButtonV2 } from '@components';
 import { parseChapterNumber } from '@utils/parseChapterNumber';
@@ -83,7 +83,7 @@ const HistoryCard: React.FC<HistoryCardProps> = ({
             })
           }
         >
-          <FastImage source={{ uri: novelCover }} style={styles.cover} />
+          <Image source={{ uri: novelCover }} style={styles.cover} />
         </Pressable>
         <View style={styles.detailsContainer}>
           <Text

src/screens/novel/components/Info/NovelInfoComponents.tsx

@@ -7,12 +7,13 @@ import {
   Pressable,
   Dimensions,
   StatusBar,
+  ImageBackground,
 } from 'react-native';
 import color from 'color';
 import { IconButton, Portal } from 'react-native-paper';
 import { LinearGradient } from 'expo-linear-gradient';
 import { easeGradient } from 'react-native-easing-gradient';
-import FastImage, { Source } from 'react-native-fast-image';
+import { Image, ImageURISource } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import { Chip } from '../../../../components';
 import { coverPlaceholderColor } from '../../../../theme/colors';
@@ -20,13 +21,13 @@ import { ThemeColors } from '@theme/types';
 
 interface CoverImageProps {
   children: React.ReactNode;
-  source: Source;
+  source: ImageURISource;
   theme: ThemeColors;
   hideBackdrop: boolean;
 }
 
 interface NovelThumbnailProps {
-  source: Source;
+  source: ImageURISource;
   theme: ThemeColors;
   setCustomNovelCover: () => Promise<void>;
 }
@@ -59,7 +60,7 @@ const CoverImage = ({
     return <View>{children}</View>;
   } else {
     return (
-      <FastImage source={source} style={styles.coverImage}>
+      <ImageBackground source={source} style={styles.coverImage}>
         <View
           style={{
             flex: 1,
@@ -78,7 +79,7 @@ const CoverImage = ({
             children
           )}
         </View>
-      </FastImage>
+      </ImageBackground>
     );
   }
 };
@@ -93,7 +94,7 @@ const NovelThumbnail = ({
   if (!expanded) {
     return (
       <TouchableWithoutFeedback onPress={() => setExpanded(!expanded)}>
-        <FastImage source={source} style={styles.novelThumbnail} />
+        <Image source={source} style={styles.novelThumbnail} />
       </TouchableWithoutFeedback>
     );
   } else {
@@ -120,7 +121,7 @@ const NovelThumbnail = ({
           }}
           onPress={() => setExpanded(false)}
         >
-          <FastImage
+          <Image
             source={source}
             style={{
               width: Dimensions.get('window').width,

src/screens/settings/SettingsBackupScreen/Components/GoogleDriveModal.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { ThemeColors } from '@theme/types';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, Image } from 'react-native';
 import { Modal, TextInput, overlay } from 'react-native-paper';
 import { GoogleSignin, User } from '@react-native-google-signin/google-signin';
 import { useEffect, useState } from 'react';
 import { Button, EmptyView } from '@components';
-import FastImage from 'react-native-fast-image';
 import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
 import * as Clipboard from 'expo-clipboard';
 import { showToast } from '@utils/showToast';
@@ -297,7 +296,7 @@ export default function GoogleDriveModal({
               }
             }}
           >
-            <FastImage
+            <Image
               source={{ uri: user?.user.photo || '' }}
               style={styles.avatar}
             />

src/screens/updates/components/UpdateNovelCard.tsx

@@ -1,4 +1,4 @@
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Pressable, StyleSheet, View, Image } from 'react-native';
 import React, { useCallback } from 'react';
 
 import {
@@ -7,7 +7,6 @@ import {
   NovelInfo,
   Update,
 } from '@database/types';
-import FastImage from 'react-native-fast-image';
 import { List } from 'react-native-paper';
 import { coverPlaceholderColor } from '@theme/colors';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
@@ -26,7 +25,7 @@ const NovelCover = ({
 }) => {
   return (
     <Pressable onPress={navigateToNovel}>
-      <FastImage source={{ uri }} style={styles.cover} />
+      <Image source={{ uri }} style={styles.cover} />
     </Pressable>
   );
 };

src/services/utils/coverCache.ts

@@ -1,9 +1,7 @@
-import FastImage from 'react-native-fast-image';
-import { showToast } from '../../utils/showToast';
+import { showToast } from '@utils/showToast';
 
 const clearCoverCache = () => {
-  FastImage.clearDiskCache();
-  showToast('Cleared cover cache.');
+  showToast('Handle nothing.');
 };
 
 export { clearCoverCache };