Fixed #107

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']

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 ? (
           <Image
             source={{ uri: uri.preview }}
-            style={[{ flex: 1 }, imageStyle]}
+            style={[
+              styles.placeholder,
+              { backgroundColor: theme.shimmerDefault }
+            ]}
           />
         ) : null,
-      [imageLoaded]
+      []
     )
     const originalView = useMemo(
       () => (
@@ -104,12 +108,19 @@ const GracefullyImage = React.memo(
       if (hidden || !imageLoaded) {
         if (blurhash) {
           return (
-            <Blurhash decodeAsync blurhash={blurhash} style={styles.blurhash} />
+            <Blurhash
+              decodeAsync
+              blurhash={blurhash}
+              style={styles.placeholder}
+            />
           )
         } else {
           return (
             <View
-              style={[styles.blurhash, { backgroundColor: theme.disabled }]}
+              style={[
+                styles.placeholder,
+                { backgroundColor: theme.shimmerDefault }
+              ]}
             />
           )
         }
@@ -146,7 +157,7 @@ const GracefullyImage = React.memo(
 )
 
 const styles = StyleSheet.create({
-  blurhash: {
+  placeholder: {
     width: '100%',
     height: '100%',
     position: 'absolute'

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,

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

@@ -90,10 +90,10 @@ const ImageItem = ({
         children={
           <GracefullyImage
             uri={{
+              preview: imageSrc.preview_url,
               original: imageSrc.url,
               remote: imageSrc.remote_url
             }}
-            blurhash={imageSrc.blurhash}
             {...((!imageSrc.width || !imageSrc.height) && {
               setImageDimensions
             })}

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

@@ -145,10 +145,10 @@ const ImageItem = ({
               children={
                 <GracefullyImage
                   uri={{
+                    preview: imageSrc.preview_url,
                     original: imageSrc.url,
                     remote: imageSrc.remote_url
                   }}
-                  blurhash={imageSrc.blurhash}
                   {...((!imageSrc.width || !imageSrc.height) && {
                     setImageDimensions
                   })}