1import { Image, ImageResizeMode, ImageSource } from 'expo-image';
2import * as React from 'react';
3import {
4  SectionList,
5  SectionListData,
6  SectionListRenderItemInfo,
7  StyleSheet,
8  View,
9  Platform,
10} from 'react-native';
11
12import HeadingText from '../../components/HeadingText';
13import { Colors } from '../../constants';
14
15const data: SectionListData<ImageSource>[] = [
16  {
17    title: 'Animated WebP',
18    data: [
19      {
20        uri: 'https://mathiasbynens.be/demo/animated-webp-supported.webp',
21      },
22    ],
23  },
24  {
25    title: 'Animated PNG (APNG)',
26    data: [
27      {
28        uri: 'https://apng.onevcat.com/assets/elephant.png',
29      },
30    ],
31  },
32  {
33    title: 'GIF',
34    data: [
35      {
36        uri: 'https://apng.onevcat.com/assets/elephant.gif',
37      },
38    ],
39  },
40  {
41    title: 'Animated AVIF',
42    data: [
43      {
44        uri: 'https://colinbendell.github.io/webperf/animated-gif-decode/2.avif',
45      },
46    ],
47  },
48  {
49    title: 'HEIC',
50    data: [
51      {
52        uri: 'https://nokiatech.github.io/heif/content/images/ski_jump_1440x960.heic',
53      },
54    ],
55  },
56  {
57    title: 'Animated HEIC',
58    data: [
59      {
60        uri: 'https://nokiatech.github.io/heif/content/image_sequences/starfield_animation.heic',
61      },
62    ],
63  },
64  {
65    title: 'JPEG',
66    data: [
67      {
68        uri: 'https://picsum.photos/id/1069/700/466.jpg',
69      },
70    ],
71  },
72  {
73    title: 'SVG',
74    data: [
75      {
76        uri: 'https://icon-icons.com/downloadimage.php?id=98748&root=1446/SVG/&file=22221cat_98748.svg',
77      },
78    ],
79  },
80  {
81    title: 'ICO',
82    data: [
83      {
84        uri: 'https://icon-icons.com/downloadimage.php?id=132404&root=2148/ICO/512/&file=expo_icon_132404.ico',
85      },
86    ],
87  },
88  Platform.OS === 'ios' && {
89    title: 'ICNS',
90    data: [
91      {
92        uri: 'https://icon-icons.com/downloadimage.php?id=214748&root=3398/ICNS/512/&file=react_logo_icon_214748.icns',
93      },
94    ],
95  },
96].filter(Boolean) as SectionListData<ImageSource>[];
97
98function keyExtractor(item: any, index: number) {
99  return '' + index;
100}
101
102function renderItem({ item }: SectionListRenderItemInfo<ImageSource>) {
103  return <Image style={styles.image} resizeMode={ImageResizeMode.CONTAIN} source={item} />;
104}
105
106function renderSectionHeader({ section }: { section: SectionListData<ImageSource> }) {
107  return (
108    <View style={styles.header}>
109      <HeadingText style={styles.title}>{section.title}</HeadingText>
110    </View>
111  );
112}
113
114export default function ImageFormatsScreen() {
115  return (
116    <SectionList
117      sections={data}
118      keyExtractor={keyExtractor}
119      renderItem={renderItem}
120      renderSectionHeader={renderSectionHeader}
121    />
122  );
123}
124
125const styles = StyleSheet.create({
126  image: {
127    marginVertical: 10,
128    width: '100%',
129    height: 160,
130  },
131  header: {
132    paddingHorizontal: 10,
133    paddingVertical: 6,
134    backgroundColor: Colors.greyBackground,
135    borderTopColor: Colors.border,
136    borderTopWidth: StyleSheet.hairlineWidth,
137  },
138  title: {
139    marginTop: -12,
140  },
141});
142