1import { FlashList, ListRenderItemInfo } from '@shopify/flash-list';
2import Image from 'expo-image';
3import { StyleSheet, View } from 'react-native';
4
5const DATA: number[] = Array(1000).fill(0);
6
7function renderItem({ index }: ListRenderItemInfo<number>) {
8  function renderImage(_: any, column: number) {
9    return (
10      <Image
11        key={column}
12        style={styles.image}
13        source={{ uri: `https://source.unsplash.com/random/${index + column}` }}
14      />
15    );
16  }
17  return <View style={styles.row}>{Array(4).fill(0).map(renderImage)}</View>;
18}
19
20export default function ImageFlashListScreen() {
21  return <FlashList data={DATA} renderItem={renderItem} estimatedItemSize={100} />;
22}
23
24const styles = StyleSheet.create({
25  row: {
26    flex: 1,
27    flexDirection: 'row',
28    justifyContent: 'space-evenly',
29  },
30  image: {
31    width: 100,
32    height: 100,
33  },
34});
35