Improve loading remote images

src/components/GracefullyImage.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@utils/styles/ThemeManager'
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   AccessibilityProps,
   Image,
@@ -52,32 +52,30 @@ const GracefullyImage = React.memo(
     setImageDimensions
   }: Props) => {
     const { theme } = useTheme()
-    const originalFailed = useRef(false)
+    const [originalFailed, setOriginalFailed] = useState(false)
     const [imageLoaded, setImageLoaded] = useState(false)
 
     const source = useMemo(() => {
-      if (originalFailed.current) {
+      if (originalFailed) {
         return { uri: uri.remote || undefined }
       } else {
         return { uri: uri.original }
       }
-    }, [originalFailed.current])
+    }, [originalFailed])
-    const onLoad = useCallback(
+
-      ({ nativeEvent }) => {
+    const onLoad = useCallback(() => {
-        setImageLoaded(true)
+      setImageLoaded(true)
-        setImageDimensions &&
+      if (setImageDimensions && source.uri) {
-          setImageDimensions({
+        Image.getSize(source.uri, (width, height) =>
-            width: nativeEvent.source.width,
+          setImageDimensions({ width, height })
-            height: nativeEvent.source.height
+        )
-          })
-      },
-      [source.uri]
-    )
-    const onError = useCallback(() => {
-      if (!originalFailed.current) {
-        originalFailed.current = true
       }
-    }, [originalFailed.current])
+    }, [source.uri])
+    const onError = useCallback(() => {
+      if (!originalFailed) {
+        setOriginalFailed(true)
+      }
+    }, [originalFailed])
 
     const previewView = useMemo(
       () =>

src/components/Parse/Emojis.tsx

@@ -76,11 +76,10 @@ const ParseEmojis = React.memo(
                     : emojis[emojiIndex].url
                   if (validUrl.isHttpsUri(uri)) {
                     return (
-                      <FastImage
+                      <Text key={emojiShortcode + i}>
-                        key={emojiShortcode + i}
+                        {i === 0 ? ' ' : undefined}
-                        source={{ uri }}
+                        <FastImage source={{ uri }} style={styles.image} />
-                        style={styles.image}
+                      </Text>
-                      />
                     )
                   } else {
                     return null

src/components/Timeline/Shared/Attachment.tsx

@@ -8,7 +8,7 @@ import AttachmentVideo from '@components/Timeline/Shared/Attachment/Video'
 import { useNavigation } from '@react-navigation/native'
 import { StyleConstants } from '@utils/styles/constants'
 import layoutAnimation from '@utils/styles/layoutAnimation'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Pressable, StyleSheet, View } from 'react-native'
 
@@ -33,11 +33,13 @@ const TimelineAttachment = React.memo(
       haptics('Light')
     }, [])
 
-    let imageUrls: Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls'] = []
+    const imageUrls = useRef<
+      Nav.RootStackParamList['Screen-ImagesViewer']['imageUrls']
+    >([])
     const navigation = useNavigation()
     const navigateToImagesViewer = (id: string) =>
       navigation.navigate('Screen-ImagesViewer', {
-        imageUrls,
+        imageUrls: imageUrls.current,
         id
       })
     const attachments = useMemo(
@@ -45,7 +47,7 @@ const TimelineAttachment = React.memo(
         status.media_attachments.map((attachment, index) => {
           switch (attachment.type) {
             case 'image':
-              imageUrls.push({
+              imageUrls.current.push({
                 id: attachment.id,
                 preview_url: attachment.preview_url,
                 url: attachment.url,
@@ -106,7 +108,7 @@ const TimelineAttachment = React.memo(
                 attachment.remote_url?.endsWith('.png') ||
                 attachment.remote_url?.endsWith('.gif')
               ) {
-                imageUrls.push({
+                imageUrls.current.push({
                   id: attachment.id,
                   preview_url: attachment.preview_url,
                   url: attachment.url,

src/screens/ImageViewer/components/ImageItem.ios.tsx

@@ -52,8 +52,8 @@ const ImageItem = ({
   const scrollViewRef = useRef<ScrollView>(null)
   const [scaled, setScaled] = useState(false)
   const [imageDimensions, setImageDimensions] = useState({
-    width: imageSrc.width || 0,
+    width: imageSrc.width || 1,
-    height: imageSrc.height || 0
+    height: imageSrc.height || 1
   })
   const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled, SCREEN)
 

src/screens/ImageViewer/save.ts

@@ -58,7 +58,7 @@ const saveIos = async ({ messageRef, mode, image }: CommonProps) => {
 }
 
 const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
-  const fileUri: string = `${FileSystem.documentDirectory}test.jpg`
+  const fileUri: string = `${FileSystem.documentDirectory}${image.id}.jpg`
   const downloadedFile: FileSystem.FileSystemDownloadResult = await FileSystem.downloadAsync(
     image.url,
     fileUri
@@ -80,7 +80,7 @@ const saveAndroid = async ({ messageRef, mode, image }: CommonProps) => {
         ref: messageRef,
         mode,
         type: 'success',
-        message: 'test'
+        message: i18next.t('screenImageViewer:content.save.succeed')
       })
     })
     .catch(() => {