expo-image tweaks (#10710)

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>
   )

src/components/Lightbox/pager/ImageItem/ImageItem.ios.tsx

@@ -246,6 +246,7 @@ const ImageItem = ({
                     }
               }
               cachePolicy="memory"
+              useAppleWebpCodec
             />
           </Animated.View>
         </Animated.View>

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(

src/components/MediaPreview.tsx

@@ -129,6 +129,7 @@ export function ImageItem({
         contentFit="cover"
         accessible={true}
         accessibilityIgnoresInvertColors
+        useAppleWebpCodec
       />
       <MediaInsetBorder style={[a.rounded_xs]} />
       {children}

src/components/Post/Embed/ExternalEmbed/index.tsx

@@ -108,6 +108,7 @@ export const ExternalEmbed = ({
               source={{uri: imageUri}}
               accessibilityIgnoresInvertColors
               loading="lazy"
+              useAppleWebpCodec
             />
           ) : undefined}
 

src/components/Post/Embed/StandardSiteEmbed/index.tsx

@@ -166,6 +166,7 @@ export const StandardSiteEmbed = ({
             source={{uri: imageUri}}
             accessibilityIgnoresInvertColors
             loading="lazy"
+            useAppleWebpCodec
           />
         ) : undefined}
 

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

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>
   )

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>

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>

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

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>

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>
 

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>

src/components/images/AutoSizedImage.tsx

@@ -142,6 +142,7 @@ export function AutoSizedImage({
           }
         }}
         loading="lazy"
+        useAppleWebpCodec
       />
       <MediaInsetBorder />
 

src/components/images/Gallery/index.tsx

@@ -480,6 +480,7 @@ function GalleryImage({
                 height: e.source.height,
               })
             }}
+            useAppleWebpCodec
           />
 
           {(hasAlt || isCropped) && !hideBadges ? (

src/components/images/ImageLayoutGridItem.tsx

@@ -106,6 +106,7 @@ export function GalleryItem({
               }
             }}
             loading="lazy"
+            useAppleWebpCodec
           />
           <MediaInsetBorder style={insetBorderStyle} />
         </Pressable>

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>
 

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

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

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) && (

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"

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`)}
           />
         )}

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},

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>

src/view/com/composer/photos/Gallery.tsx

@@ -245,6 +245,7 @@ const GalleryItem = ({
         }}
         accessible={true}
         accessibilityIgnoresInvertColors
+        enforceEarlyResizing
         cachePolicy="none"
         autoplay={false}
         contentFit="cover"

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} />}

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