diff --git a/src/@types/react-navigation.d.ts b/src/@types/react-navigation.d.ts index acf59127..f90844f0 100644 --- a/src/@types/react-navigation.d.ts +++ b/src/@types/react-navigation.d.ts @@ -57,6 +57,7 @@ declare namespace Nav { 'Screen-ImagesViewer': { imageUrls: { id: Mastodon.Attachment['id'] + preview_url: Mastodon.AttachmentImage['preview_url'] url: Mastodon.AttachmentImage['url'] remote_url?: Mastodon.AttachmentImage['remote_url'] blurhash: Mastodon.AttachmentImage['blurhash'] diff --git a/src/components/GracefullyImage.tsx b/src/components/GracefullyImage.tsx index 37cac47f..dcacb0dd 100644 --- a/src/components/GracefullyImage.tsx +++ b/src/components/GracefullyImage.tsx @@ -81,13 +81,17 @@ const GracefullyImage = React.memo( const previewView = useMemo( () => - uri.preview && !imageLoaded ? ( + // Android flickrs between transition, thus keep showing the preview image + uri.preview ? ( ) : null, - [imageLoaded] + [] ) const originalView = useMemo( () => ( @@ -104,12 +108,19 @@ const GracefullyImage = React.memo( if (hidden || !imageLoaded) { if (blurhash) { return ( - + ) } else { return ( ) } @@ -146,7 +157,7 @@ const GracefullyImage = React.memo( ) const styles = StyleSheet.create({ - blurhash: { + placeholder: { width: '100%', height: '100%', position: 'absolute' diff --git a/src/components/Timeline/Shared/Attachment.tsx b/src/components/Timeline/Shared/Attachment.tsx index 0b91ae47..e6925ae5 100644 --- a/src/components/Timeline/Shared/Attachment.tsx +++ b/src/components/Timeline/Shared/Attachment.tsx @@ -47,6 +47,7 @@ const TimelineAttachment = React.memo( case 'image': imageUrls.push({ id: attachment.id, + preview_url: attachment.preview_url, url: attachment.url, remote_url: attachment.remote_url, blurhash: attachment.blurhash, @@ -107,6 +108,7 @@ const TimelineAttachment = React.memo( ) { imageUrls.push({ id: attachment.id, + preview_url: attachment.preview_url, url: attachment.url, remote_url: attachment.remote_url, blurhash: attachment.blurhash, diff --git a/src/screens/ImageViewer/components/ImageItem.android.tsx b/src/screens/ImageViewer/components/ImageItem.android.tsx index e5cb50b6..3974861b 100644 --- a/src/screens/ImageViewer/components/ImageItem.android.tsx +++ b/src/screens/ImageViewer/components/ImageItem.android.tsx @@ -90,10 +90,10 @@ const ImageItem = ({ children={