Merge upstream develop

Author: github-actions[bot]

.nvmrc

@@ -1 +1 @@
-24.17.0
+24.18.0

apps/polycentric/src/common/components/Avatar/Avatar.tsx

@@ -1,16 +1,13 @@
 import { useWebHover } from '@/src/common/lib/useWebHover';
 import { useTheme, withHexOpacity } from '@/src/common/theme';
+import { Image, type ImageProps } from 'expo-image';
 import {
-  Image,
-  ImageProps,
-  ImageSourcePropType,
   Pressable,
   PressableProps,
   StyleSheet,
   View,
   type ViewProps,
 } from 'react-native';
-import { opacity } from 'react-native-reanimated/lib/typescript/Colors';
 
 export type AvatarSizePreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'massive';
 
@@ -28,14 +25,30 @@ export function resolveAvatarSize(size: AvatarSizePreset | number): number {
 }
 
 interface AvatarProps extends Omit<ImageProps, 'source'> {
-  source?: ImageSourcePropType;
+  source?: ImageProps['source'];
+  /**
+   * Forces the image to clear + reload when it changes — set this when an
+   * Avatar lives in a recycled list row (FlashList) so a reused cell never
+   * flashes the previous identity's avatar. Defaults to the source URI.
+   */
+  recyclingKey?: string;
   size?: AvatarSizePreset | number;
   containerProps?: ViewProps;
   onPress?: () => void;
 }
 
+/** Pull a stable string URI out of an Image source for recycling. */
+function sourceUri(source: ImageProps['source']): string | undefined {
+  if (typeof source === 'string') return source;
+  if (source && typeof source === 'object' && 'uri' in source) {
+    return typeof source.uri === 'string' ? source.uri : undefined;
+  }
+  return undefined;
+}
+
 export function Avatar({
   source,
+  recyclingKey,
   size: sizeProp = 'md',
   containerProps,
   onPress,
@@ -77,7 +90,8 @@ export function Avatar({
       <Image
         {...restImageProps}
         source={source}
-        resizeMode={'cover'}
+        recyclingKey={recyclingKey ?? sourceUri(source)}
+        contentFit="cover"
         style={[styles.image, imageStyle]}
       />
       <HoverOverlay visible={showHoverDim} borderRadius={size / 2} />

apps/polycentric/src/common/components/ImageViewer/ImageViewer.tsx

@@ -5,8 +5,8 @@ import Icon from '@/src/common/components/Icon';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { resolveImageSources } from './resolveImageSources';
 import { ImageViewerInput } from './useImageViewerStore';
+import { Image } from 'expo-image';
 import {
-  Image,
   Platform,
   Pressable,
   StyleSheet,
@@ -270,7 +270,8 @@ export function ImageViewer({
             >
               <Image
                 source={{ uri: current.uri }}
-                resizeMode="contain"
+                recyclingKey={current.uri}
+                contentFit="contain"
                 style={[Atoms.w_full, Atoms.h_full]}
               />
             </Pressable>

apps/polycentric/src/features/composer/ComposerFields.tsx

@@ -9,12 +9,12 @@ import { Atoms, Spacing, useTheme, withHexOpacity } from '@/src/common/theme';
 import { useState } from 'react';
 import {
   ActivityIndicator,
-  Image,
   type LayoutChangeEvent,
   Pressable,
   StyleSheet,
   View,
 } from 'react-native';
+import { Image } from 'expo-image';
 import ComposerPostEmbed from './ComposerPostEmbed';
 import { LinkPreviewCard } from '@/src/features/post/content/LinkPreviewCard';
 import { v2 } from '@polycentric/react-native';
@@ -265,7 +265,8 @@ function AttachmentThumb({
     >
       <Image
         source={{ uri }}
-        resizeMode="cover"
+        recyclingKey={uri}
+        contentFit="cover"
         style={{ width: '100%', height: '100%' }}
       />
       {/* Loading / error overlay while the blobs are being processed+uploaded */}

apps/polycentric/src/features/post/PostImages.tsx

@@ -6,7 +6,8 @@ import { Atoms } from '@/src/common/theme';
 import { useImageViewer } from '@/src/common/components/ImageViewer';
 import { v2 } from '@polycentric/react-native';
 import { useCallback, useMemo } from 'react';
-import { Image, Pressable, View } from 'react-native';
+import { Image } from 'expo-image';
+import { Pressable, View } from 'react-native';
 
 /** Target pixel size we want for displayed attachments. */
 const POST_IMAGE_TARGET = 512;
@@ -73,7 +74,8 @@ export function PostImages({ images }: { images: v2.ImageSet[] }) {
       >
         <Image
           source={{ uri: sources[0].uri }}
-          resizeMode="cover"
+          recyclingKey={sources[0].uri}
+          contentFit="cover"
           style={[
             Atoms.w_full,
             Atoms.rounded_md,
@@ -154,7 +156,8 @@ function GridTile({
     >
       <Image
         source={{ uri }}
-        resizeMode="cover"
+        recyclingKey={uri}
+        contentFit="cover"
         style={[Atoms.w_full, Atoms.h_full, { backgroundColor: TILE_BG }]}
       />
     </Pressable>

apps/polycentric/src/features/post/content/LinkPreviewCard.test.tsx

@@ -73,7 +73,8 @@ describe('LinkPreviewCard', () => {
       <LinkPreviewCard link={makeLink({ image: 'https://img.test/x.png' })} />,
     );
     // The raw image URL is rewritten through the proxy, not hotlinked.
-    expect(getByTestId('linkPreviewImage').props.source.uri).toBe(
+    // expo-image normalizes `source={{ uri }}` into an array of sources.
+    expect(getByTestId('linkPreviewImage').props.source[0].uri).toBe(
       'proxy://https://img.test/x.png',
     );
   });

apps/polycentric/src/features/post/content/LinkPreviewCard.tsx

@@ -2,7 +2,8 @@ import { Text } from '@/src/common/components/primitives';
 import { usePolycentric } from '@/src/common/lib/polycentric-hooks';
 import { Atoms, useTheme, withHexOpacity } from '@/src/common/theme';
 import { v2 } from '@polycentric/react-native';
-import { Image, Linking, Pressable, View } from 'react-native';
+import { Image } from 'expo-image';
+import { Linking, Pressable, View } from 'react-native';
 
 const IMAGE_BG = 'rgba(0,0,0,0.04)';
 /** Open-Graph standard image ratio (1200×630). */
@@ -52,7 +53,8 @@ export function LinkPreviewCard({ link }: { link: v2.Link }) {
         <Image
           testID="linkPreviewImage"
           source={{ uri: imageUri }}
-          resizeMode="cover"
+          recyclingKey={imageUri}
+          contentFit="cover"
           style={[
             Atoms.w_full,
             { aspectRatio: OG_ASPECT, backgroundColor: IMAGE_BG },

packages/react-native/.nvmrc

@@ -1 +1 @@
-24.17.0
+24.18.0