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