update group image fix

src/screens/InAppScreens/MessagesScreen/Components/EditGroupModal.tsx

@@ -60,7 +60,7 @@ const SearchModal = () => {
     let result = await ImagePicker.launchImageLibraryAsync({
       mediaTypes: ImagePicker.MediaTypeOptions.Images,
       allowsEditing: true,
-      aspect: [4, 3],
+      aspect: [4, 4],
       quality: 1
     });
 
@@ -195,6 +195,9 @@ const SearchModal = () => {
           await editGroup(groupData, {
             onSuccess: () => {
               setIsSubmitting(false);
+              setTimeout(() => {
+                data && data.setCacheKey(Date.now());
+              }, 2500);
               SheetManager.hide('edit-group-modal');
             },
             onError: () => {
@@ -234,8 +237,9 @@ const SearchModal = () => {
                       <>
                         <Image
                           source={{
-                            uri: image ? image.uri : API_HOST + data?.settings?.avatar,
-                            cache: 'reload'
+                            uri: image
+                              ? image.uri
+                              : `${API_HOST}${data?.settings?.avatar}?cacheBust=${data?.cacheKey}`
                           }}
                           style={styles.groupPhotoImage}
                         />

src/screens/InAppScreens/MessagesScreen/GroupChatScreen/index.tsx

@@ -206,12 +206,19 @@ const GroupChatScreen = ({ route }: { route: any }) => {
   const [showMentions, setShowMentions] = useState(false);
   const [inputHeight, setInputHeight] = useState(45);
   const [editingMessage, setEditingMessage] = useState<CustomMessage | null>(null);
+  const [cacheKey, setCacheKey] = useState(Date.now());
 
   const appState = useRef(AppState.currentState);
   const textInputRef = useRef<TextInput>(null);
 
   const socket = useRef<WebSocket | null>(null);
 
+  useFocusEffect(
+    useCallback(() => {
+      setCacheKey(Date.now());
+    }, [navigation])
+  );
+
   useEffect(() => {
     if (netInfo && netInfo.isConnected !== null) {
       setIsConnected(netInfo.isConnected);
@@ -2091,7 +2098,10 @@ const GroupChatScreen = ({ route }: { route: any }) => {
               disabled={userType !== 'normal'}
             >
               {groupAvatar && userType === 'normal' ? (
-                <Image source={{ uri: groupAvatar, cache: 'reload' }} style={styles.avatar} />
+                <Image
+                  source={{ uri: `${groupAvatar}?cacheBust=${cacheKey}` }}
+                  style={styles.avatar}
+                />
               ) : userType === 'normal' ? (
                 <GroupIcon fill={Colors.DARK_BLUE} width={30} height={30} />
               ) : (

src/screens/InAppScreens/MessagesScreen/GroupSettingsScreen/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { ScrollView, Text, TouchableOpacity, View, Image, StyleSheet } from 'react-native';
 import { NavigationProp, useFocusEffect } from '@react-navigation/native';
 import ImageView from 'react-native-image-viewing';
@@ -64,17 +64,20 @@ const GroupSettingScreen: FC<Props> = ({ navigation, route }) => {
     message: '',
     action: () => {}
   });
+  const [cacheKey, setCacheKey] = useState(Date.now());
   const { mutateAsync: muteGroup } = usePostSetMuteForGroupMutation();
   const { mutateAsync: leaveGroup } = usePostLeaveGroupMutation();
   const { mutateAsync: removeGroupFromList } = usePostRemoveGroupFromListMutation();
 
-  useFocusEffect(() => {
-    navigation.getParent()?.setOptions({
-      tabBarStyle: {
-        display: 'none'
-      }
-    });
-  });
+  useFocusEffect(
+    useCallback(() => {
+      navigation.getParent()?.setOptions({
+        tabBarStyle: {
+          display: 'none'
+        }
+      });
+    }, [token])
+  );
 
   useEffect(() => {
     if (data && data.settings) {
@@ -156,7 +159,9 @@ const GroupSettingScreen: FC<Props> = ({ navigation, route }) => {
         token,
         groupToken,
         refetch,
-        refetchMembers
+        refetchMembers,
+        setCacheKey,
+        cacheKey
       } as any
     });
   };
@@ -195,7 +200,9 @@ const GroupSettingScreen: FC<Props> = ({ navigation, route }) => {
                 <GroupIcon width={80} height={80} fill={Colors.LIGHT_GRAY} />
               ) : (
                 <Image
-                  source={{ uri: API_HOST + data.settings.avatar, cache: 'reload' }}
+                  source={{
+                    uri: `${API_HOST}${data.settings.avatar}?cacheBust=${cacheKey}`
+                  }}
                   style={{
                     width: 80,
                     height: 80,
@@ -375,7 +382,7 @@ const GroupSettingScreen: FC<Props> = ({ navigation, route }) => {
         title={modalState.title}
       />
       <ImageView
-        images={[{ uri: API_HOST + data.settings.avatar_full }]}
+        images={[{ uri: `${API_HOST}${data.settings.avatar_full}?cacheBust=${cacheKey}` }]}
         keyExtractor={(imageSrc, index) => index.toString()}
         imageIndex={0}
         visible={fullSizeImageVisible}

src/screens/InAppScreens/MessagesScreen/index.tsx

@@ -72,6 +72,7 @@ const MessagesScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
   const [chats, setChats] = useState<Chat[]>([]);
   const [index, setIndex] = useState(0);
+  const [cacheKey, setCacheKey] = useState(Date.now());
   const { data: chatsData, refetch } = usePostGetChatsListQuery(token, index === 2 ? 1 : 0, true);
   const { data: blockedData, refetch: refetchBlocked } = usePostGetBlockedQuery(token, true);
   const [blocked, setBlocked] = useState<Blocked[]>([]);
@@ -119,6 +120,12 @@ const MessagesScreen = () => {
     }, 500);
   };
 
+  useFocusEffect(
+    useCallback(() => {
+      setCacheKey(Date.now());
+    }, [navigation])
+  );
+
   useEffect(() => {
     const handleAppStateChange = (nextAppState: AppStateStatus) => {
       if (appState.current.match(/inactive|background/) && nextAppState === 'active') {
@@ -362,8 +369,9 @@ const MessagesScreen = () => {
             {item.avatar && (item.user_type === 'normal' || !item.user_type) ? (
               <Image
                 source={{
-                  uri: API_HOST + item.avatar,
-                  cache: item.group_chat_token ? 'reload' : 'force-cache'
+                  uri: item.group_chat_token
+                    ? `${API_HOST}${item.avatar}?cacheBust=${cacheKey}`
+                    : `${API_HOST}${item.avatar}`
                 }}
                 style={styles.avatar}
               />