src/screens/InAppScreens/TravelsScreen/Components/PhotoItem.tsx

@@ -13,7 +13,7 @@ import { Colors } from 'src/theme';
 import { CustomImageViewer } from 'src/components';
 
 export const PhotoItem = React.memo(
-  ({ item, allRegions }: { item: any; allRegions: AllRegions[] }) => {
+  ({ item, allRegions, cacheBuster }: { item: any; allRegions: AllRegions[]; cacheBuster?: number }) => {
     const navigation = useNavigation();
     const [currentImageIndex, setCurrentImageIndex] = useState(0);
     const [isViewerVisible, setIsViewerVisible] = useState(false);
@@ -25,13 +25,16 @@ export const PhotoItem = React.memo(
     };
 
     useEffect(() => {
+      const bustParam = cacheBuster ? `?t=${cacheBuster}` : '';
       setFullImages(
         item.photos.map((photo: PhotosData) => ({
           ...photo,
-          uri: API_HOST + photo.url_mid
+          uri: API_HOST + photo.url_mid + bustParam
         }))
       );
-    }, [item]);
+    }, [item, cacheBuster]);
+
+    const bustParam = cacheBuster ? `?t=${cacheBuster}` : '';
 
     const renderPhotos = () => {
       const photos = item.photos.slice(0, 3);
@@ -41,7 +44,7 @@ export const PhotoItem = React.memo(
         return (
           <TouchableOpacity onPress={() => openImageViewer(0)}>
             <Image
-              source={{ uri: getImageUri(photos[0].url_small), cache: 'reload' }}
+              source={{ uri: getImageUri(photos[0].url_small) + bustParam, cache: 'reload' }}
               style={photoStyles.onePhoto}
             />
           </TouchableOpacity>
@@ -50,7 +53,7 @@ export const PhotoItem = React.memo(
         return photos.map((photo: PhotosData, index: number) => (
           <TouchableOpacity key={photo.id} onPress={() => openImageViewer(index)}>
             <Image
-              source={{ uri: getImageUri(photo.url_small), cache: 'reload' }}
+              source={{ uri: getImageUri(photo.url_small) + bustParam, cache: 'reload' }}
               style={[photoStyles.twoPhotos, index === 0 && { marginRight: 8 }]}
             />
           </TouchableOpacity>
@@ -60,7 +63,7 @@ export const PhotoItem = React.memo(
           <View style={{ flexDirection: 'row' }}>
             <TouchableOpacity onPress={() => openImageViewer(0)}>
               <Image
-                source={{ uri: getImageUri(photos[0].url_small), cache: 'reload' }}
+                source={{ uri: getImageUri(photos[0].url_small) + bustParam, cache: 'reload' }}
                 style={photoStyles.bigPhoto}
               />
             </TouchableOpacity>
@@ -68,13 +71,13 @@ export const PhotoItem = React.memo(
             <View style={styles.smallPhotoContainer}>
               <TouchableOpacity onPress={() => openImageViewer(1)}>
                 <Image
-                  source={{ uri: getImageUri(photos[1].url_small), cache: 'reload' }}
+                  source={{ uri: getImageUri(photos[1].url_small) + bustParam, cache: 'reload' }}
                   style={photoStyles.smallPhoto}
                 />
               </TouchableOpacity>
               <TouchableOpacity onPress={() => openImageViewer(2)}>
                 <Image
-                  source={{ uri: getImageUri(photos[2].url_small), cache: 'reload' }}
+                  source={{ uri: getImageUri(photos[2].url_small) + bustParam, cache: 'reload' }}
                   style={[photoStyles.smallPhoto, { position: 'relative' }]}
                 />
               </TouchableOpacity>
@@ -95,7 +98,7 @@ export const PhotoItem = React.memo(
       }
     };
 
-    const photoViews = useMemo(() => renderPhotos(), [item.photos]);
+    const photoViews = useMemo(() => renderPhotos(), [item.photos, cacheBuster]);
 
     const handlePress = useCallback(() => {
       navigation.navigate(

src/screens/InAppScreens/TravelsScreen/MorePhotosScreen/index.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { View, FlatList, Image, Text, TouchableOpacity } from 'react-native';
 import ReactModal from 'react-native-modal';
 import * as ImagePicker from 'expo-image-picker';
-import { useNavigation } from '@react-navigation/native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
 
 import { CustomImageViewer, Header, Loading, PageWrapper, WarningModal } from 'src/components';
 import { CustomButton, PhotoEditModal } from '../Components';
@@ -53,6 +53,13 @@ const MorePhotosScreen = ({ route }: { route: any }) => {
     isEditModalVisible: false,
     isViewerVisible: false
   });
+  const [cacheBuster, setCacheBuster] = useState(Date.now());
+
+  useFocusEffect(
+    useCallback(() => {
+      setCacheBuster(Date.now());
+    }, [])
+  );
 
   const handleSelectPhoto = useCallback((id: number) => {
     setSelectedPhotos((prevSelected) => {
@@ -69,13 +76,14 @@ const MorePhotosScreen = ({ route }: { route: any }) => {
   };
 
   useEffect(() => {
+    const bustParam = `?t=${cacheBuster}`;
     setFullImages(
       photos.map((photo) => ({
         ...photo,
-        uri: API_HOST + photo.url_mid
+        uri: API_HOST + photo.url_mid + bustParam
       }))
     );
-  }, [photos]);
+  }, [photos, cacheBuster]);
 
   const openImageViewer = (index: number) => {
     setCurrentImageIndex(index);
@@ -168,7 +176,7 @@ const MorePhotosScreen = ({ route }: { route: any }) => {
         onPress={() => (selectionMode ? handleSelectPhoto(item.id) : openImageViewer(index))}
       >
         <Image
-          source={{ uri: API_HOST + item?.url_small, cache: 'reload' }}
+          source={{ uri: API_HOST + item?.url_small + `?t=${cacheBuster}`, cache: 'reload' }}
           style={[styles.image, { width: itemWidth, height: itemWidth }]}
         />
         <TouchableOpacity

src/screens/InAppScreens/TravelsScreen/PhotosScreen/index.tsx

@@ -19,10 +19,12 @@ import ChevronIcon from '../../../../../assets/icons/travels-screens/chevron-bot
 
 const ByRegionContent = ({
   data,
-  allRegions
+  allRegions,
+  cacheBuster
 }: {
   data: ByRegionData[];
   allRegions: AllRegions[];
+  cacheBuster: number;
 }) => {
   const [loading, setLoading] = useState(true);
   const [visible, setVisible] = useState(false);
@@ -72,7 +74,7 @@ const ByRegionContent = ({
 
       <FlatList
         data={photos}
-        renderItem={({ item }) => <PhotoItem item={item} allRegions={allRegions} />}
+        renderItem={({ item }) => <PhotoItem item={item} allRegions={allRegions} cacheBuster={cacheBuster} />}
         keyExtractor={(item) => item.id.toString()}
         style={styles.listContainer}
         showsVerticalScrollIndicator={false}
@@ -81,7 +83,7 @@ const ByRegionContent = ({
   );
 };
 
-const ByDateContent = ({ data, allRegions }: { data: ByDateData; allRegions: AllRegions[] }) => {
+const ByDateContent = ({ data, allRegions, cacheBuster }: { data: ByDateData; allRegions: AllRegions[]; cacheBuster: number }) => {
   const [loading, setLoading] = useState<boolean>(true);
   const [visible, setVisible] = useState<boolean>(false);
   const [selectedDate, setSelectedDate] = useState<string | null>(null);
@@ -131,7 +133,7 @@ const ByDateContent = ({ data, allRegions }: { data: ByDateData; allRegions: All
 
       <FlatList
         data={photos}
-        renderItem={({ item }) => <PhotoItem item={item} allRegions={allRegions} />}
+        renderItem={({ item }) => <PhotoItem item={item} allRegions={allRegions} cacheBuster={cacheBuster} />}
         keyExtractor={(item) => item.date}
         style={styles.listContainer}
         showsVerticalScrollIndicator={false}
@@ -148,9 +150,11 @@ const PhotosScreen = () => {
   const [allRegions, setAllRegions] = useState<AllRegions[]>([]);
   const { data: tempData, refetch: refetchTemp } = useGetTempQuery(token, true);
   const navigation = useNavigation();
+  const [cacheBuster, setCacheBuster] = useState(Date.now());
 
   useFocusEffect(
     useCallback(() => {
+      setCacheBuster(Date.now());
       const fetchData = async () => {
         setLoading(true);
         try {
@@ -175,9 +179,9 @@ const PhotosScreen = () => {
   const renderContent = () => {
     switch (contentIndex) {
       case 0:
-        return <ByRegionContent data={data?.by_region as ByRegionData[]} allRegions={allRegions} />;
+        return <ByRegionContent data={data?.by_region as ByRegionData[]} allRegions={allRegions} cacheBuster={cacheBuster} />;
       case 1:
-        return <ByDateContent data={data?.by_date as ByDateData} allRegions={allRegions} />;
+        return <ByDateContent data={data?.by_date as ByDateData} allRegions={allRegions} cacheBuster={cacheBuster} />;
       default:
         return null;
     }