From 153772b760ef1f67220efe40ca6b4c66d33af71b Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Thu, 4 Jun 2026 01:03:11 +0300
Subject: [PATCH] `expo-image` tweaks (#10710)

---
 src/components/ContextMenu/index.tsx          |  1 +
 .../pager/ImageItem/ImageItem.ios.tsx         |  1 +
 src/components/Lightbox/pager/ImagePager.tsx  |  4 ++++
 src/components/MediaPreview.tsx               |  1 +
 .../Post/Embed/ExternalEmbed/index.tsx        |  1 +
 .../Post/Embed/StandardSiteEmbed/index.tsx    |  1 +
 .../contacts/FindContactsBannerNUX.tsx        |  1 +
 .../contacts/components/HeroImage.tsx         |  1 +
 .../dialogs/nuxs/ActivitySubscriptions.tsx    |  1 +
 .../dialogs/nuxs/BookmarksAnnouncement.tsx    |  1 +
 .../dialogs/nuxs/DraftsAnnouncement.tsx       |  1 +
 .../dialogs/nuxs/FindContactsAnnouncement.tsx |  1 +
 .../nuxs/InitialVerificationAnnouncement.tsx  |  2 ++
 .../dialogs/nuxs/LiveNowBetaDialog.tsx        |  1 +
 src/components/images/AutoSizedImage.tsx      |  1 +
 src/components/images/Gallery/index.tsx       |  1 +
 src/components/images/ImageLayoutGridItem.tsx |  1 +
 .../verification/VerifierDialog.tsx           |  1 +
 .../components/LiveEventFeedCardCompact.tsx   |  1 +
 .../components/LiveEventFeedCardWide.tsx      |  1 +
 .../liveNow/components/LinkPreview.tsx        |  1 +
 .../liveNow/components/LiveStatusDialog.tsx   |  1 +
 .../StepFinished/ValuePropositionPager.tsx    |  2 ++
 src/screens/Profile/components/GermButton.tsx |  1 +
 src/view/com/composer/ComposerReplyTo.tsx     | 20 +++++++++----------
 src/view/com/composer/photos/Gallery.tsx      |  1 +
 src/view/com/util/UserAvatar.tsx              |  1 +
 src/view/com/util/UserBanner.tsx              |  2 ++
 28 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
index 8d3d39a749..51bf83309f 100644
--- a/src/components/ContextMenu/index.tsx
+++ b/src/components/ContextMenu/index.tsx
@@ -499,6 +499,7 @@ function TriggerClone({
         accessibilityLabel={label}
         accessibilityHint={_(msg`The subject of the context menu`)}
         accessibilityIgnoresInvertColors={false}
+        cachePolicy="none"
       />
     </Animated.View>
   )
diff --git a/src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx b/src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx
index c0bb99c89e..19373cbe1a 100644
--- a/src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx
+++ b/src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx
@@ -246,6 +246,7 @@ const ImageItem = ({
                     }
               }
               cachePolicy="memory"
+              useAppleWebpCodec
             />
           </Animated.View>
         </Animated.View>
diff --git a/src/components/Lightbox/pager/ImagePager.tsx b/src/components/Lightbox/pager/ImagePager.tsx
index 1c8836a0fd..7b8815f276 100644
--- a/src/components/Lightbox/pager/ImagePager.tsx
+++ b/src/components/Lightbox/pager/ImagePager.tsx
@@ -32,6 +32,7 @@ import Animated, {
   withSpring,
   type WithSpringConfig,
 } from 'react-native-reanimated'
+import {Image} from 'expo-image'
 import * as ScreenOrientation from 'expo-screen-orientation'
 
 import {type Dimensions} from '#/lib/media/types'
@@ -136,6 +137,9 @@ export default function ImageViewRoot({
       'worklet'
       thumbRects.set({})
     })()
+    requestIdleCallback(() => {
+      void Image.clearMemoryCache()
+    })
   }, [thumbRects])
 
   useAnimatedReaction(
diff --git a/src/components/MediaPreview.tsx b/src/components/MediaPreview.tsx
index 9aad6da864..b36705d840 100644
--- a/src/components/MediaPreview.tsx
+++ b/src/components/MediaPreview.tsx
@@ -129,6 +129,7 @@ export function ImageItem({
         contentFit="cover"
         accessible={true}
         accessibilityIgnoresInvertColors
+        useAppleWebpCodec
       />
       <MediaInsetBorder style={[a.rounded_xs]} />
       {children}
diff --git a/src/components/Post/Embed/ExternalEmbed/index.tsx b/src/components/Post/Embed/ExternalEmbed/index.tsx
index 43bfbb4747..fe0be2bd25 100644
--- a/src/components/Post/Embed/ExternalEmbed/index.tsx
+++ b/src/components/Post/Embed/ExternalEmbed/index.tsx
@@ -108,6 +108,7 @@ export const ExternalEmbed = ({
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
               loading="lazy"
+              useAppleWebpCodec
             />
           ) : undefined}
 
diff --git a/src/components/Post/Embed/StandardSiteEmbed/index.tsx b/src/components/Post/Embed/StandardSiteEmbed/index.tsx
index 70fce8ad77..5f7fc1f5e7 100644
--- a/src/components/Post/Embed/StandardSiteEmbed/index.tsx
+++ b/src/components/Post/Embed/StandardSiteEmbed/index.tsx
@@ -166,6 +166,7 @@ export const StandardSiteEmbed = ({
             source={{uri: imageUri}}
             accessibilityIgnoresInvertColors
             loading="lazy"
+            useAppleWebpCodec
           />
         ) : undefined}
 
diff --git a/src/components/contacts/FindContactsBannerNUX.tsx b/src/components/contacts/FindContactsBannerNUX.tsx
index 2997e00d4e..417379fa2b 100644
--- a/src/components/contacts/FindContactsBannerNUX.tsx
+++ b/src/components/contacts/FindContactsBannerNUX.tsx
@@ -60,6 +60,7 @@ export function FindContactsBannerNUX() {
                 a.self_end,
                 a.mt_sm,
               ]}
+              useAppleWebpCodec
             />
             <View style={[a.flex_1, a.justify_center, a.py_xl, a.pr_5xl]}>
               <Text
diff --git a/src/components/contacts/components/HeroImage.tsx b/src/components/contacts/components/HeroImage.tsx
index 5555c2939a..42a57157a6 100644
--- a/src/components/contacts/components/HeroImage.tsx
+++ b/src/components/contacts/components/HeroImage.tsx
@@ -27,6 +27,7 @@ export function ContactsHeroImage() {
         alt={_(
           msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
         )}
+        useAppleWebpCodec
       />
     </View>
   )
diff --git a/src/components/dialogs/nuxs/ActivitySubscriptions.tsx b/src/components/dialogs/nuxs/ActivitySubscriptions.tsx
index ed4306459c..318b130414 100644
--- a/src/components/dialogs/nuxs/ActivitySubscriptions.tsx
+++ b/src/components/dialogs/nuxs/ActivitySubscriptions.tsx
@@ -113,6 +113,7 @@ export function ActivitySubscriptionsNUX() {
                 alt={_(
                   msg`A screenshot of a profile page with a bell icon next to the follow button, indicating the new activity notifications feature.`,
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>
diff --git a/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx b/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
index f7e4bf04c6..153130f8ec 100644
--- a/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
+++ b/src/components/dialogs/nuxs/BookmarksAnnouncement.tsx
@@ -124,6 +124,7 @@ export function BookmarksAnnouncement() {
                       'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
                   }),
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>
diff --git a/src/components/dialogs/nuxs/DraftsAnnouncement.tsx b/src/components/dialogs/nuxs/DraftsAnnouncement.tsx
index 79488fe4d9..37b93bda70 100644
--- a/src/components/dialogs/nuxs/DraftsAnnouncement.tsx
+++ b/src/components/dialogs/nuxs/DraftsAnnouncement.tsx
@@ -101,6 +101,7 @@ export function DraftsAnnouncement() {
                   'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
               }),
             )}
+            useAppleWebpCodec
           />
         </View>
         <View style={[a.align_center, a.px_xl, a.pt_xl, a.gap_2xl, a.pb_sm]}>
diff --git a/src/components/dialogs/nuxs/FindContactsAnnouncement.tsx b/src/components/dialogs/nuxs/FindContactsAnnouncement.tsx
index 8fd7d2d2c5..70f29ef157 100644
--- a/src/components/dialogs/nuxs/FindContactsAnnouncement.tsx
+++ b/src/components/dialogs/nuxs/FindContactsAnnouncement.tsx
@@ -78,6 +78,7 @@ export function FindContactsAnnouncement() {
               alt={_(
                 msg`An illustration depicting user avatars flowing from a contact book into the Bluesky app`,
               )}
+              useAppleWebpCodec
             />
           </View>
         </View>
diff --git a/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx b/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
index 85bc29a48f..cbe2555aac 100644
--- a/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
+++ b/src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx
@@ -85,6 +85,7 @@ export function InitialVerificationAnnouncement() {
               alt={_(
                 msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
               )}
+              useAppleWebpCodec
             />
           </View>
 
@@ -119,6 +120,7 @@ export function InitialVerificationAnnouncement() {
               alt={_(
                 msg`An mockup of a iPhone showing the Bluesky app open to the profile of a verified user with a blue checkmark next to their display name.`,
               )}
+              useAppleWebpCodec
             />
           </View>
 
diff --git a/src/components/dialogs/nuxs/LiveNowBetaDialog.tsx b/src/components/dialogs/nuxs/LiveNowBetaDialog.tsx
index 49c43a1e41..e389e11175 100644
--- a/src/components/dialogs/nuxs/LiveNowBetaDialog.tsx
+++ b/src/components/dialogs/nuxs/LiveNowBetaDialog.tsx
@@ -150,6 +150,7 @@ export function LiveNowBetaDialog() {
                       'Contains a post that originally appeared in English. Consider translating the post text if it makes sense in your language, and noting that the post was translated from English.',
                   }),
                 )}
+                useAppleWebpCodec
               />
             </View>
           </View>
diff --git a/src/components/images/AutoSizedImage.tsx b/src/components/images/AutoSizedImage.tsx
index 79b41311cb..182bfe661b 100644
--- a/src/components/images/AutoSizedImage.tsx
+++ b/src/components/images/AutoSizedImage.tsx
@@ -142,6 +142,7 @@ export function AutoSizedImage({
           }
         }}
         loading="lazy"
+        useAppleWebpCodec
       />
       <MediaInsetBorder />
 
diff --git a/src/components/images/Gallery/index.tsx b/src/components/images/Gallery/index.tsx
index fe2b63e606..9ae677c2d2 100644
--- a/src/components/images/Gallery/index.tsx
+++ b/src/components/images/Gallery/index.tsx
@@ -480,6 +480,7 @@ function GalleryImage({
                 height: e.source.height,
               })
             }}
+            useAppleWebpCodec
           />
 
           {(hasAlt || isCropped) && !hideBadges ? (
diff --git a/src/components/images/ImageLayoutGridItem.tsx b/src/components/images/ImageLayoutGridItem.tsx
index 0c349b6612..d6cbc0aded 100644
--- a/src/components/images/ImageLayoutGridItem.tsx
+++ b/src/components/images/ImageLayoutGridItem.tsx
@@ -106,6 +106,7 @@ export function GalleryItem({
               }
             }}
             loading="lazy"
+            useAppleWebpCodec
           />
           <MediaInsetBorder style={insetBorderStyle} />
         </Pressable>
diff --git a/src/components/verification/VerifierDialog.tsx b/src/components/verification/VerifierDialog.tsx
index 570441ecd0..e8944024ca 100644
--- a/src/components/verification/VerifierDialog.tsx
+++ b/src/components/verification/VerifierDialog.tsx
@@ -87,6 +87,7 @@ function Inner({
             alt={_(
               msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
             )}
+            useAppleWebpCodec
           />
         </View>
 
diff --git a/src/features/liveEvents/components/LiveEventFeedCardCompact.tsx b/src/features/liveEvents/components/LiveEventFeedCardCompact.tsx
index df2bb17f83..9d2f948eb6 100644
--- a/src/features/liveEvents/components/LiveEventFeedCardCompact.tsx
+++ b/src/features/liveEvents/components/LiveEventFeedCardCompact.tsx
@@ -69,6 +69,7 @@ export function LiveEventFeedCardCompact({
               style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
               contentFit="cover"
               placeholderContentFit="cover"
+              useAppleWebpCodec
             />
 
             <LinearGradient
diff --git a/src/features/liveEvents/components/LiveEventFeedCardWide.tsx b/src/features/liveEvents/components/LiveEventFeedCardWide.tsx
index 547e38ecc6..2349ce0d3a 100644
--- a/src/features/liveEvents/components/LiveEventFeedCardWide.tsx
+++ b/src/features/liveEvents/components/LiveEventFeedCardWide.tsx
@@ -77,6 +77,7 @@ export function LiveEventFeedCardWide({
               style={[a.absolute, a.inset_0, a.w_full, a.h_full]}
               contentFit="cover"
               placeholderContentFit="cover"
+              useAppleWebpCodec
             />
 
             <LinearGradient
diff --git a/src/features/liveNow/components/LinkPreview.tsx b/src/features/liveNow/components/LinkPreview.tsx
index 69473fa097..d3802a479e 100644
--- a/src/features/liveNow/components/LinkPreview.tsx
+++ b/src/features/liveNow/components/LinkPreview.tsx
@@ -54,6 +54,7 @@ export function LinkPreview({
             contentFit="cover"
             onLoad={() => setImageLoadError(false)}
             onError={() => setImageLoadError(true)}
+            useAppleWebpCodec
           />
         )}
         {linkMeta && (!linkMeta.image || imageLoadError) && (
diff --git a/src/features/liveNow/components/LiveStatusDialog.tsx b/src/features/liveNow/components/LiveStatusDialog.tsx
index 545e8ab943..9e916678f2 100644
--- a/src/features/liveNow/components/LiveStatusDialog.tsx
+++ b/src/features/liveNow/components/LiveStatusDialog.tsx
@@ -147,6 +147,7 @@ export function LiveStatus({
                 contentFit="cover"
                 style={[a.absolute, a.inset_0]}
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <LiveIndicator
                 size="large"
diff --git a/src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx b/src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx
index 69246fe7c3..1641547bb2 100644
--- a/src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx
+++ b/src/screens/Onboarding/StepFinished/ValuePropositionPager.tsx
@@ -83,6 +83,7 @@ function Page({
           style={[a.w_full, a.aspect_square]}
           alt={alt}
           accessibilityIgnoresInvertColors={false} // I guess we do need it to blend into the background
+          useAppleWebpCodec
         />
         {page === 1 && (
           <Image
@@ -97,6 +98,7 @@ function Page({
               },
             ]}
             accessibilityIgnoresInvertColors
+            useAppleWebpCodec
             alt={_(msg`Your profile picture`)}
           />
         )}
diff --git a/src/screens/Profile/components/GermButton.tsx b/src/screens/Profile/components/GermButton.tsx
index 0bef3a22c3..e37e57edbf 100644
--- a/src/screens/Profile/components/GermButton.tsx
+++ b/src/screens/Profile/components/GermButton.tsx
@@ -105,6 +105,7 @@ function GermLogo({size}: {size: 'small' | 'large'}) {
       source={require('../../../../assets/images/germ_logo.webp')}
       accessibilityIgnoresInvertColors={false}
       contentFit="cover"
+      useAppleWebpCodec
       style={[
         a.rounded_full,
         size === 'large' ? {width: 32, height: 32} : {width: 16, height: 16},
diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx
index a6ef1a344c..bac3e74d31 100644
--- a/src/view/com/composer/ComposerReplyTo.tsx
+++ b/src/view/com/composer/ComposerReplyTo.tsx
@@ -151,8 +151,8 @@ function ComposerReplyToImages({
         <Image
           source={{uri: images[0].thumb}}
           style={[a.flex_1]}
-          cachePolicy="memory-disk"
           accessibilityIgnoresInvertColors
+          useAppleWebpCodec
         />
       )) ||
         (images.length === 2 && (
@@ -160,14 +160,14 @@ function ComposerReplyToImages({
             <Image
               source={{uri: images[0].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
             <Image
               source={{uri: images[1].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
           </View>
         )) ||
@@ -176,21 +176,21 @@ function ComposerReplyToImages({
             <Image
               source={{uri: images[0].thumb}}
               style={[a.flex_1]}
-              cachePolicy="memory-disk"
               accessibilityIgnoresInvertColors
+              useAppleWebpCodec
             />
             <View style={[a.flex_1, a.gap_2xs]}>
               <Image
                 source={{uri: images[1].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[2].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
           </View>
@@ -201,28 +201,28 @@ function ComposerReplyToImages({
               <Image
                 source={{uri: images[0].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[1].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
             <View style={[a.flex_1, a.flex_row, a.gap_2xs]}>
               <Image
                 source={{uri: images[2].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
               <Image
                 source={{uri: images[3].thumb}}
                 style={[a.flex_1]}
-                cachePolicy="memory-disk"
                 accessibilityIgnoresInvertColors
+                useAppleWebpCodec
               />
             </View>
           </View>
diff --git a/src/view/com/composer/photos/Gallery.tsx b/src/view/com/composer/photos/Gallery.tsx
index 7624b585f6..2cc000019f 100644
--- a/src/view/com/composer/photos/Gallery.tsx
+++ b/src/view/com/composer/photos/Gallery.tsx
@@ -245,6 +245,7 @@ const GalleryItem = ({
         }}
         accessible={true}
         accessibilityIgnoresInvertColors
+        enforceEarlyResizing
         cachePolicy="none"
         autoplay={false}
         contentFit="cover"
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 420fd0270f..9db4914b21 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -330,6 +330,7 @@ let UserAvatar = ({
           }}
           blurRadius={moderation?.blur ? BLUR_AMOUNT : 0}
           onLoad={onLoad}
+          useAppleWebpCodec
         />
       )}
       {!noBorder && <MediaInsetBorder style={borderStyle} />}
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 8146b7ad9d..033e8c14fe 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -129,6 +129,7 @@ export function UserBanner({
                     source={{uri: banner}}
                     accessible={true}
                     accessibilityIgnoresInvertColors
+                    useAppleWebpCodec
                   />
                 ) : (
                   <View
@@ -216,6 +217,7 @@ export function UserBanner({
       blurRadius={moderation?.blur ? 100 : 0}
       accessible={true}
       accessibilityIgnoresInvertColors
+      useAppleWebpCodec
     />
   ) : (
     <View