diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx index 62027dfb..2e1257d0 100644 --- a/src/components/GracefullyImage.tsx +++ b/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]) - const onLoad = useCallback( - ({ nativeEvent }) => { - setImageLoaded(true) - setImageDimensions && - setImageDimensions({ - width: nativeEvent.source.width, - height: nativeEvent.source.height - }) - }, - [source.uri] - ) - const onError = useCallback(() => { - if (!originalFailed.current) { - originalFailed.current = true + }, [originalFailed]) + + const onLoad = useCallback(() => { + setImageLoaded(true) + if (setImageDimensions && source.uri) { + Image.getSize(source.uri, (width, height) => + setImageDimensions({ width, height }) + ) } - }, [originalFailed.current]) + }, [source.uri]) + const onError = useCallback(() => { + if (!originalFailed) { + setOriginalFailed(true) + } + }, [originalFailed]) const previewView = useMemo( () => diff --git a/src/components/Parse/Emojis.tsx b/src/components/Parse/Emojis.tsx index d98f4ba1..79457eb5 100644 --- a/src/components/Parse/Emojis.tsx +++ b/src/components/Parse/Emojis.tsx @@ -76,11 +76,10 @@ const ParseEmojis = React.memo( : emojis[emojiIndex].url if (validUrl.isHttpsUri(uri)) { return ( - + + {i === 0 ? ' ' : undefined} + + ) } else { return null diff --git a/src/components/Timeline/Shared/Attachment.tsx b/src/components/Timeline/Shared/Attachment.tsx index e6925ae5..3ff78547 100644 --- a/src/components/Timeline/Shared/Attachment.tsx +++ b/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, diff --git a/src/screens/ImageViewer/components/ImageItem.ios.tsx b/src/screens/ImageViewer/components/ImageItem.ios.tsx index 971888f9..edced941 100644 --- a/src/screens/ImageViewer/components/ImageItem.ios.tsx +++ b/src/screens/ImageViewer/components/ImageItem.ios.tsx @@ -52,8 +52,8 @@ const ImageItem = ({ const scrollViewRef = useRef(null) const [scaled, setScaled] = useState(false) const [imageDimensions, setImageDimensions] = useState({ - width: imageSrc.width || 0, - height: imageSrc.height || 0 + width: imageSrc.width || 1, + height: imageSrc.height || 1 }) const handleDoubleTap = useDoubleTapToZoom(scrollViewRef, scaled, SCREEN) diff --git a/src/screens/ImageViewer/save.ts b/src/screens/ImageViewer/save.ts index 97aaac20..0b98a290 100644 --- a/src/screens/ImageViewer/save.ts +++ b/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(() => {