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(() => {