chore: added image reloader invoked when network is reconnected

Author: bang9

packages/uikit-react-native/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -1,29 +1,68 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileMessageProps } from './index';
 
+const useRetry = (hasError: boolean, retryCount = 5) => {
+  if (Platform.OS === 'android') return '';
+
+  const forceUpdate = useForceUpdate();
+  const retryCountRef = useRef(1);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (hasError) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            forceUpdate();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      clearTimeout(retryTimeoutRef.current);
+    }
+  }, [hasError]);
+
+  return retryCountRef.current;
+};
+
 const ImageFileMessage = ({ message }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
 
   const fileUrl = getAvailableUriFromFileMessage(message);
   const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  if (imageNotFound) {
-    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;
-  }
+  const key = useRetry(imageNotFound);
 
   return (
-    <Image
-      source={{ uri: fileUrl }}
-      style={style}
-      resizeMode={'cover'}
-      resizeMethod={'resize'}
-      onError={() => setImageNotFound(true)}
-    />
+    <View style={style}>
+      <Image
+        key={key}
+        source={{ uri: fileUrl }}
+        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+        resizeMode={'cover'}
+        resizeMethod={'resize'}
+        onError={() => setImageNotFound(true)}
+        onLoad={() => setImageNotFound(false)}
+      />
+      {imageNotFound && (
+        <Icon
+          containerStyle={StyleSheet.absoluteFill}
+          icon={'thumbnail-none'}
+          size={48}
+          color={colors.onBackground02}
+        />
+      )}
+    </View>
   );
 };
 
@@ -33,6 +72,10 @@ const styles = createStyleSheet({
     maxWidth: 240,
     height: 160,
     borderRadius: 16,
+    overflow: 'hidden',
+  },
+  hide: {
+    display: 'none',
   },
 });