1import { Image, ImageContentFit, 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  Platform.OS === 'android' && {
97    title: 'Base64',
98    data: [
99      {
100        uri: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTI2cHgiIGhlaWdodD0iMTI2cHgiIHZpZXdCb3g9IjAgMCAxMjYgMTI2IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMjYgMTI2IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxyZWN0IHg9IjEuMDk1IiB5PSI5OC4yMjQiIHdpZHRoPSIxMjMuODEiIGhlaWdodD0iMTkuMjc1Ii8+DQoJPHJlY3QgeD0iMS4wOTUiIHk9Ijg1Ljc0IiB3aWR0aD0iMTIzLjgxIiBoZWlnaHQ9IjUuMjA1Ii8+DQoJPHBhdGggZD0iTTE4LjQwNCw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OEgzLjQ4MWMtMC43NjcsMC0xLjM4OCwwLjYyMS0xLjM4OCwxLjM4OA0KCQlzMC42MjIsMS4zOSwxLjM4OCwxLjM5SDE4LjQwNHoiLz4NCgk8cGF0aCBkPSJNNDQuNDMzLDk1LjcyMWMwLjc2NywwLDEuMzg4LTAuNjIzLDEuMzg4LTEuMzlzLTAuNjIyLTEuMzg4LTEuMzg4LTEuMzg4SDI5LjUxYy0wLjc2NywwLTEuMzg5LDAuNjIxLTEuMzg5LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg5LDEuMzlINDQuNDMzeiIvPg0KCTxwYXRoIGQ9Ik03MC40NjEsOTUuNzIxYzAuNzY3LDAsMS4zODgtMC42MjMsMS4zODgtMS4zOXMtMC42MjItMS4zODgtMS4zODgtMS4zODhINTUuNTM5Yy0wLjc2NywwLTEuMzg4LDAuNjIxLTEuMzg4LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg4LDEuMzlINzAuNDYxeiIvPg0KCTxwYXRoIGQ9Ik05Ni40OSw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OEg4MS41NjdjLTAuNzY3LDAtMS4zODgsMC42MjEtMS4zODgsMS4zODgNCgkJczAuNjIyLDEuMzksMS4zODgsMS4zOUg5Ni40OXoiLz4NCgk8cGF0aCBkPSJNMTIyLjUxOSw5NS43MjFjMC43NjcsMCwxLjM4OS0wLjYyMywxLjM4OS0xLjM5cy0wLjYyMi0xLjM4OC0xLjM4OS0xLjM4OGgtMTQuOTIzYy0wLjc2NywwLTEuMzg4LDAuNjIxLTEuMzg4LDEuMzg4DQoJCXMwLjYyMiwxLjM5LDEuMzg4LDEuMzlIMTIyLjUxOXoiLz4NCgk8cGF0aCBkPSJNNy40MSw4MC45aDUzLjQ0MmMwLjg2MywwLDEuNTYyLTAuNjk5LDEuNTYyLTEuNTYyVjM5LjU0M2MwLTAuODYyLTAuNjk5LTEuNTYzLTEuNTYyLTEuNTYzSDQ1LjMxNHYtNi41MzkNCgkJYzAtMC44NjEtMC42OTgtMS41NjItMS41NjEtMS41NjJIMjMuNDI4Yy0wLjg2MywwLTEuNTYyLDAuNy0xLjU2MiwxLjU2MnY2LjU0SDcuNDFjLTAuODYyLDAtMS41NjIsMC43LTEuNTYyLDEuNTYzdjM5Ljc5NQ0KCQlDNS44NDgsODAuMjAxLDYuNTQ3LDgwLjksNy40MSw4MC45eiBNMzQuNDkyLDU3Ljg3NGgtMS43OTZ2LTYuNzY4aDEuNzk2VjU3Ljg3NHogTTI2LjU2MywzNC41NzRoMTQuMDU1djMuNDA2SDI2LjU2M1YzNC41NzR6DQoJCSBNMTAuNTQ0LDQyLjY3OGg0Ny4xNzN2MTEuOThIMzYuOTQydi00LjAwNmMwLTAuODYzLTAuNjk5LTEuNTYzLTEuNTYyLTEuNTYzaC0zLjU4MmMtMC44NjMsMC0xLjU2MiwwLjY5OS0xLjU2MiwxLjU2M3Y0LjAwNg0KCQlIMTAuNTQ0VjQyLjY3OHoiLz4NCgk8cGF0aCBkPSJNNjguNzM0LDgwLjloNDkuOTU4YzAuODA3LDAsMS40Ni0wLjY1MywxLjQ2LTEuNDZWMTcuNTM0YzAtMC44MDYtMC42NTMtMS40NTktMS40Ni0xLjQ1OWgtMTQuNTI0VjkuOTYxDQoJCWMwLTAuODA3LTAuNjUzLTEuNDYtMS40Ni0xLjQ2aC0xOWMtMC44MDcsMC0xLjQ2LDAuNjUzLTEuNDYsMS40NnY2LjExNUg2OC43MzRjLTAuODA3LDAtMS40NiwwLjY1My0xLjQ2LDEuNDU5Vjc5LjQ0DQoJCUM2Ny4yNzQsODAuMjQ3LDY3LjkyNyw4MC45LDY4LjczNCw4MC45eiBNODYuNjM4LDEyLjg5aDEzLjEzOXYzLjE4Nkg4Ni42MzhWMTIuODl6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==',
101      },
102    ],
103  },
104].filter(Boolean) as SectionListData<ImageSource>[];
105
106function keyExtractor(item: any, index: number) {
107  return '' + index;
108}
109
110function renderItem({ item }: SectionListRenderItemInfo<ImageSource>) {
111  return <Image style={styles.image} contentFit={ImageContentFit.CONTAIN} source={item} />;
112}
113
114function renderSectionHeader({ section }: { section: SectionListData<ImageSource> }) {
115  return (
116    <View style={styles.header}>
117      <HeadingText style={styles.title}>{section.title}</HeadingText>
118    </View>
119  );
120}
121
122export default function ImageFormatsScreen() {
123  return (
124    <SectionList
125      sections={data}
126      keyExtractor={keyExtractor}
127      renderItem={renderItem}
128      renderSectionHeader={renderSectionHeader}
129    />
130  );
131}
132
133const styles = StyleSheet.create({
134  image: {
135    marginVertical: 10,
136    width: '100%',
137    height: 160,
138  },
139  header: {
140    paddingHorizontal: 10,
141    paddingVertical: 6,
142    backgroundColor: Colors.greyBackground,
143    borderTopColor: Colors.border,
144    borderTopWidth: StyleSheet.hairlineWidth,
145  },
146  title: {
147    marginTop: -12,
148  },
149});
150