fix: use expo-image to prevent image flickering

app/(tabs)/index.tsx

@@ -1,6 +1,5 @@
 import {
 	View,
-	Image,
 	Text,
 	TouchableOpacity,
 	ActivityIndicator,
@@ -8,6 +7,7 @@ import {
 } from "react-native";
 
 import { useEffect, useState } from "react";
+import { Image } from "expo-image";
 import { Ionicons } from "@expo/vector-icons";
 import { type ImageAsset } from "@/cloudinary/cloudinary";
 import { MasonryFlashList } from "@shopify/flash-list";
@@ -72,6 +72,7 @@ export default function HomeScreen() {
 							>
 								<Image
 									className="w-full h-60"
+									recyclingKey={item.thumbnail_url}
 									source={{ uri: item.thumbnail_url }}
 								/>
 							</TouchableOpacity>

package-lock.json

@@ -17,6 +17,7 @@
         "expo-constants": "~16.0.2",
         "expo-file-system": "^17.0.1",
         "expo-font": "~12.0.9",
+        "expo-image": "~1.13.0",
         "expo-linking": "~6.3.1",
         "expo-media-library": "^16.0.5",
         "expo-router": "~3.5.23",
@@ -12180,6 +12181,14 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-image": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/expo-image/-/expo-image-1.13.0.tgz",
+      "integrity": "sha512-0NLDcFmEn4Nh1sXeRvNzDHT+Fl6FXtTol6ki6kYYH0/iDeSFWyIy/Fek6kzDDYAmhipSMR7buPf7VVoHseTbAA==",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz",

package.json

@@ -40,7 +40,8 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.10",
-    "zustand": "^5.0.0-rc.2"
+    "zustand": "^5.0.0-rc.2",
+    "expo-image": "~1.13.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",