1import { FlashList, ListRenderItemInfo } from '@shopify/flash-list';
2import { Image } from 'expo-image';
3import { Dimensions, StyleSheet, View } from 'react-native';
4
5const DATA: number[] = Array(1000).fill(0);
6const WINDOW_SIZE = Dimensions.get('window');
7const COLUMNS_COUNT = 4;
8const IMAGE_SIZE = Math.ceil(WINDOW_SIZE.width / COLUMNS_COUNT);
9const IMAGE_PIXEL_SIZE = Math.ceil(IMAGE_SIZE * WINDOW_SIZE.scale);
10
11function renderItem({ index }: ListRenderItemInfo<number>) {
12  function renderImage(_: any, column: number) {
13    // The uri has an offset because the first images are almost the same, it doesn't look well.
14    const uri = `https://picsum.photos/id/${10 + index + column}/${IMAGE_PIXEL_SIZE}`;
15
16    return <Image key={column} style={styles.image} source={{ uri }} recyclingKey={uri} />;
17  }
18
19  return <View style={styles.row}>{Array(COLUMNS_COUNT).fill(0).map(renderImage)}</View>;
20}
21
22export default function ImageFlashListScreen() {
23  return (
24    <View style={styles.root}>
25      <FlashList
26        data={DATA}
27        renderItem={renderItem}
28        keyExtractor={(_, index: number) => String(index)}
29        estimatedItemSize={IMAGE_SIZE}
30      />
31    </View>
32  );
33}
34
35const styles = StyleSheet.create({
36  root: {
37    display: 'flex',
38    flex: 1,
39    flexBasis: 0,
40    flexShrink: 1,
41  },
42  row: {
43    flex: 1,
44    flexDirection: 'row',
45  },
46  image: {
47    width: IMAGE_SIZE,
48    height: IMAGE_SIZE,
49  },
50});
51