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