Expo Image recyclingKey added

src/screens/playground/expo-image.tsx

@@ -10,7 +10,10 @@ import {FlashList} from '@shopify/flash-list';
 import {Image} from 'expo-image';
 import {Bounceable} from 'rn-bounceable';
 
-type TImage = string;
+type TImage = {
+  key: string;
+  url: string;
+};
 type Images = TImage[];
 
 export type Props = {};
@@ -22,7 +25,11 @@ export const PlaygroundExpoImage: NavioScreen<Props> = observer(() => {
   // const {ui} = useStores();
 
   const DATA: Images = useMemo(
-    () => Array.from({length: 1000}).map((v, ndx) => `https://picsum.photos/200?image=${ndx + 1}`),
+    () =>
+      Array.from({length: 1000}).map((v, index) => ({
+        key: `${index}`,
+        url: `https://picsum.photos/200?image=${index + 1}`,
+      })),
     [],
   );
 
@@ -68,8 +75,9 @@ const ListItem = ({item}: {item: TImage}) => {
     <View flex bg-bgColor>
       <Bounceable>
         <Image
+          recyclingKey={item.key}
+          source={item.url}
           style={{height: 320}}
-          source={item}
           placeholder={blurhash}
           contentFit="cover"
           resizeMode="contain"

src/screens/playground/flash-list.tsx

@@ -14,6 +14,7 @@ import formatRelative from 'date-fns/formatRelative';
 import subDays from 'date-fns/subDays';
 
 type RowData = {
+  key: string;
   title: string;
   image: string;
   description: string;
@@ -31,11 +32,12 @@ export const PlaygroundFlashList: NavioScreen<Props> = observer(() => {
   const DATA: RowData[] = useMemo(
     () =>
       Array.from({length: 1000}).map((v, ndx) => ({
+        key: `${ndx}`,
         title: `Item ${ndx}`,
         image: `https://picsum.photos/200?image=${ndx + 1}`,
         description: randomStr(300),
         pics: [
-          `https://picsum.photos/200?image=${ndx * 89}`,
+          `https://picsum.photos/200?image=${ndx * 69}`,
           `https://picsum.photos/200?image=${ndx * 99}`,
         ],
       })),
@@ -83,8 +85,9 @@ const ListItem = ({item}: {item: RowData}) => {
     <View padding-s2 paddingH-s4 paddingB-s8 bg-bgColor>
       <Row>
         <Image
-          style={{width: 80, height: 80, borderRadius: 16}}
+          recyclingKey={`${item.key}${item.image}`}
           source={item.image}
+          style={{width: 80, height: 80, borderRadius: 16}}
           placeholder={blurhash}
           contentFit="cover"
           resizeMode="contain"