1import { Image } from 'expo-image';
2import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
3
4const GIF_SOURCES = [
5  'https://media2.giphy.com/media/Q6WPVzFU8LcBWWgQE1/giphy.gif',
6  'https://media3.giphy.com/media/cfuL5gqFDreXxkWQ4o/giphy.gif',
7  'https://media3.giphy.com/media/l3q2AMoPRflHphYM8/giphy.gif',
8  'https://media4.giphy.com/media/IXqRaInRqGMfK/giphy.gif',
9  'https://media1.giphy.com/media/HMSLfCl5BsXoQ/giphy.gif',
10  'https://media1.giphy.com/media/YRtLgsajXrz1FNJ6oy/giphy.gif',
11  'https://media1.giphy.com/media/1HKaikaFqDt7i/giphy.gif',
12  'https://media2.giphy.com/media/5tSvsYJl4T4fC/giphy.gif',
13  'https://media1.giphy.com/media/5aCiXMnPl1cli/giphy.gif',
14  'https://media1.giphy.com/media/rgAd7jWyJyo8M/giphy.gif',
15  'https://media2.giphy.com/media/11quO2C07Sh2oM/giphy.gif',
16  'https://media1.giphy.com/media/BTWVWzYoNyYzm/giphy.gif',
17  'https://media4.giphy.com/media/12HZukMBlutpoQ/giphy.gif',
18  'https://media1.giphy.com/media/13CoXDiaCcCoyk/giphy.gif',
19  'https://media4.giphy.com/media/jTnGaiuxvvDNK/giphy.gif',
20  'https://media1.giphy.com/media/3o6Zt481isNVuQI1l6/giphy.gif',
21  'https://media3.giphy.com/media/l0ExdMHUDKteztyfe/giphy.gif',
22  'https://media4.giphy.com/media/5gXYzsVBmjIsw/giphy.gif',
23];
24
25const ITEMS_GAP = 12;
26const COLUMNS_COUNT = 3;
27
28const WINDOW_SIZE = Dimensions.get('window');
29const IMAGE_SIZE = Math.ceil((WINDOW_SIZE.width - ITEMS_GAP * (COLUMNS_COUNT + 1)) / COLUMNS_COUNT);
30
31function renderRow(_: any, row: number) {
32  function renderImage(_: any, column: number) {
33    const gifIndex = row * COLUMNS_COUNT + column;
34    const uri = GIF_SOURCES[gifIndex];
35
36    return <Image key={column} style={styles.image} source={uri} cachePolicy="none" />;
37  }
38
39  return (
40    <View key={row} style={styles.row}>
41      {Array(COLUMNS_COUNT).fill(0).map(renderImage)}
42    </View>
43  );
44}
45
46export default function ImageGifsScreen() {
47  const rowsCount = Math.ceil(GIF_SOURCES.length / COLUMNS_COUNT);
48
49  return <ScrollView>{Array(rowsCount).fill(0).map(renderRow)}</ScrollView>;
50}
51
52const styles = StyleSheet.create({
53  row: {
54    flex: 1,
55    flexDirection: 'row',
56    gap: ITEMS_GAP,
57    marginTop: ITEMS_GAP,
58    paddingHorizontal: ITEMS_GAP,
59  },
60  image: {
61    flex: 1,
62    height: IMAGE_SIZE,
63    borderRadius: 12,
64  },
65});
66