1import { FlashList } from '@shopify/flash-list';
2import { Image, StyleSheet, Text, View } from 'react-native';
3
4interface ItemType {
5  title: string;
6  index: number;
7}
8
9const DATA: ItemType[] = Array(10000)
10  .fill(0)
11  .map((_, v) => ({ title: `Item ${v + 1}`, index: v }));
12
13const manifest = [
14  'https://raw.githubusercontent.com/EvanBacon/anime-lorem/master/assets/dr-stone/Chrome_Portrait.png',
15  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Alumi_Portrait.png?raw=true',
16  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Azura_Portrait.png?raw=true',
17  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Carbo_Portrait.png?raw=true',
18  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Chalk_Portrait.png?raw=true',
19  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Chrome_Portrait.png?raw=true',
20  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/En_Portrait.png?raw=true',
21  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Ganen_Portrait.png?raw=true',
22  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Gen_Asagiri_Portrait.png?raw=true',
23  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Genbu_portrait.png?raw=true',
24  'https://github.com/EvanBacon/anime-lorem/blob/master/assets/dr-stone/Ginro_Portrait.png?raw=true',
25];
26
27function Item(item: ItemType) {
28  return (
29    <View style={styles.itemContainer}>
30      <Image style={styles.itemImage} source={{ uri: manifest[item.index % manifest.length] }} />
31      <View>
32        <Text style={styles.itemTitle}>{item.title}</Text>
33        <Text style={styles.itemSubtitle}>Subtitle</Text>
34      </View>
35    </View>
36  );
37}
38
39export default function FlastListScreen() {
40  return (
41    <FlashList data={DATA} renderItem={({ item }) => <Item {...item} />} estimatedItemSize={80} />
42  );
43}
44
45const styles = StyleSheet.create({
46  itemContainer: {
47    padding: 8,
48    flexDirection: 'row',
49  },
50  itemImage: {
51    borderRadius: 8,
52    width: 64,
53    height: 64,
54    marginRight: 12,
55  },
56  itemTitle: {
57    paddingBottom: 4,
58    color: '#000',
59    fontSize: 16,
60    fontWeight: 'bold',
61  },
62  itemSubtitle: {
63    color: '#000',
64    fontSize: 16,
65    fontWeight: 'bold',
66    opacity: 0.6,
67  },
68});
69
70FlastListScreen.navigationOptions = {
71  title: 'FlashList',
72};
73