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 }} />;
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    <FlashList
25      data={DATA}
26      renderItem={renderItem}
27      keyExtractor={(_, index: number) => String(index)}
28      estimatedItemSize={IMAGE_SIZE}
29    />
30  );
31}
32
33const styles = StyleSheet.create({
34  row: {
35    flex: 1,
36    flexDirection: 'row',
37  },
38  image: {
39    width: IMAGE_SIZE,
40    height: IMAGE_SIZE,
41  },
42});
43